What problem does it solve? Building conversational AI interfaces in React involves tricky concerns like streaming LLM responses, managing conversation state, securing API keys, and handling errors gracefully. This Skill provides proven design patterns and code examples for these challenges in both Next.js and Vite projects. ## Core Features & Use Cases - Streaming Chat UIs: Set up server endpoints (Next.js route handlers or Express backends) that stream OpenAI responses to the client in real time. - Conversation State Management: Use the Vercel AI SDK's useChat and useCompletion hooks to manage messages, input, and submission logic. - Reusable Components: Build decoupled ChatMessage and InputBox components, or adopt Vercel AI Elements for pre-built chat UI. - Use Case: You are adding a docs-aware chatbot to a React app. Use this Skill to wire up a streaming /api/chat endpoint, debounce input, handle errors with retry UI, and render messages with TailwindCSS styling. ## Quick Start Use the ai-ui-patterns skill to scaffold a streaming chat interface in my React app with the Vercel AI SDK.
