AI Chatbot Agent Skill

---
description: Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.
homepage: https://yepapi.com/skills/ai-chatbot
metadata:
  tags: [ai, chatbot, streaming, rag]
---

# 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

```tsx
// Client — useChat from Vercel AI SDK
const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat({
  api: "/api/chat",
});
```

```ts
// Server — streaming response
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