AI Chatbot
Rules
- Use Vercel AI SDK (
ai package) for streaming — useChat() hook on client, streamText() on server
- Stream responses with
text/event-stream — never buffer full responses before sending
- Message format:
{ role: "user" | "assistant" | "system", content: string }
- Context window management: trim oldest messages when approaching token limit, always keep system prompt
- RAG pattern: embed user query → vector search → inject top-k results as context before the user message
- Chat UI: auto-scroll to bottom, loading indicator with animated dots, render markdown in assistant messages
- Persist conversation history server-side — use a
messages table with chatId, role, content, createdAt
- System prompt goes first in the messages array — never let user messages override it
- YepAPI chat endpoint:
POST /v1/ai/chat with { messages, model?, stream? }
- Stop generation button — use
AbortController to cancel in-flight streams
Patterns
const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat({
api: "/api/chat",
});
import { streamText } from "ai";
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({ model, messages });
return result.toDataStreamResponse();
}
Avoid
- Sending entire conversation history without trimming — will exceed context window
- Blocking UI while waiting for full response — always stream
- Storing messages only in client state — persist server-side for history
- Hardcoding model names — use environment variables or config