v0 prompt to integrate an LLM chatbot
This prompt wires a streaming chatbot into an existing screen through the Vercel AI SDK, the stack v0 scaffolds natively. You get a useChat-driven Sheet panel, a route handler that streams tokens, and defined behavior for the two things demos usually skip, aborting mid-stream and surviving a missing API key.
Last updated
Add an LLM chatbot to an existing app screen using the Vercel AI SDK. Server side: a streaming route handler at app/api/chat/route.ts that calls streamText with a system prompt loaded from lib/prompt.ts and a model name read from an environment variable so it can be swapped without code changes. Client side: a chat panel built as a shadcn/ui Sheet sliding in from the right, driven by the useChat hook, with streamed tokens rendering progressively rather than appearing all at once. Messages: user bubbles right-aligned, assistant bubbles left with a copy button, markdown rendered including fenced code blocks. Behaviors: Enter sends, Shift plus Enter inserts a newline, a stop button aborts the stream mid-response, and the input disables while a response is streaming. Persist the transcript to sessionStorage so closing and reopening the Sheet keeps the conversation, with a clear conversation action in the header. Empty state: three suggested starter questions rendered as clickable chips that submit on click. Error states: a missing API key shows an inline notice naming the exact env var to add in project settings, and a mid-stream failure keeps the partial response visible with a retry action instead of wiping it. Rate limit the route per session and return a friendly message when the cap is hit. Acceptance: in the v0 preview, a question streams token by token, stop works mid-answer, and refreshing the page keeps the transcript.
Same task in other tools
Questions about this prompt
Which model will the chatbot use?
Whichever one the environment variable names. streamText takes the model id from env, so you set the key and model in v0 project settings and swap providers later without touching the generated code.
How do I ground answers in my own data?
Do it in the route handler before streamText runs: fetch the relevant rows or documents and prepend them to the system prompt in lib/prompt.ts. The client stays unchanged because useChat only sees messages, so ask v0 for that server-side change specifically.
Responses arrive all at once instead of streaming. Why?
The handler is probably returning a completed response instead of the stream helper's response object. Ask v0 to return the streamText result as a streaming response and to check nothing in the project buffers it, like a middleware rewrite on /api/chat.