building-ai-chat

Use the useChat hook from the Vercel AI SDK (ai/react) to manage messages, input state, and streaming. Render AI responses with @vercel/streamdown, which handles incomplete markdown during token-by-token streaming.

@vercel/streamdown is designed for rendering incomplete markdown while tokens stream in, avoiding broken formatting from partial syntax. Pair it with react-syntax-highlighter for code blocks and DOMPurify to sanitize AI-generated HTML.

Implement smart auto-scroll that only scrolls when the user is near the bottom (within ~100px threshold) and has not scrolled up or selected text. This respects users reading earlier messages while keeping new content visible.

Display a progress bar with user-friendly metaphors like 'about 15 messages remaining' instead of raw token counts. The included calculate_tokens.py script estimates usage per model and suggests summarization points when context fills up.

Yes. Use role="log" with aria-live="polite" on the message list so screen readers announce new messages, add aria-busy during streaming, and support keyboard shortcuts like Enter to send and Escape to stop generation.

Re-rendering all messages on every token causes lag. Memoize message components with React.memo, debounce streaming updates around 50ms, and use react-window virtual scrolling for long conversation histories.