GitHub Copilot prompt to integrate an LLM chatbot
Bolting a chatbot onto an existing app is mostly plumbing, streaming, cancellation, and keeping the API key server-side. This prompt makes GitHub Copilot locate your route and env conventions with @workspace before writing anything, then delivers a streaming endpoint and a ChatPanel that fails politely on timeouts and rate limits.
Last updated
Add an LLM chatbot to this app without exposing the provider key to the browser. Create an api/chat endpoint that accepts {messages: [{role, content}]}, forwards to the model provider with a system prompt loaded from prompts/support.md, and streams tokens back as server-sent events. In the client, build a ChatPanel component that renders the stream incrementally, disables the send button while a response is in flight, and offers a cancel control wired to AbortController. Handle the ugly paths: provider timeout returns a retry hint, a 429 shows a wait message, and an empty user message never leaves the client. Cap history sent upstream at the last twelve turns. Use @workspace first to find where API routes and env config live in this repo. I will verify by watching the network tab for one streaming response and confirming the key appears only in server code.Same task in other tools
Questions about this prompt
Why require streaming instead of returning the full completion as JSON?
Long answers feel broken when nothing renders for several seconds. Copilot defaults to a single JSON response unless told otherwise, and adding streaming later means rewriting both the route and the ChatPanel render loop.
How do I ground answers in my own documentation?
Replace the static prompts/support.md load with a retrieval step that injects relevant snippets per request. Keep the twelve-turn history cap, retrieved context grows the payload much faster than chat history does.
The provider key showed up in the browser bundle. What happened?
Almost always an env variable named with a public prefix, like NEXT_PUBLIC_. Rename it without the prefix, read it only inside the api/chat handler, and search the built client bundle for the key to confirm.