building-ai-chatlisted

# AI Chat Interface Components ## Purpose Define the emerging standards for AI/human conversational interfaces in the 2024-2025 AI integration boom. This skill leverages meta-knowledge from building WITH Claude to establish definitive patterns for streaming UX, context management, and multi-modal interactions. As the industry lacks established patterns, this provides the reference implementation others will follow. ## When to Use Activate this skill when: - Building ChatGPT-style conversational interfaces - Creating AI assistants, copilots, or chatbots - Implementing streaming text responses with markdown - Managing conversation context and token limits - Handling multi-modal inputs (text, images, files, voice) - Dealing with AI-specific errors (hallucinations, refusals, limits) - Adding feedback mechanisms (thumbs, regeneration, editing) - Implementing conversation branching or threading - Visualizing tool/function calling ## Quick Start Minimal AI chat interface in under 50 lines: ```tsx import { useChat } from 'ai/react'; export function MinimalAIChat() { const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat(); return ( <div className="chat-container"> <div className="messages"> {messages.map(m => ( <div key={m.id} className={`message ${m.role}`}> <div className="content">{m.content}</div> </div> ))} {isLoading && <div className="thinking">AI is thinking...</div>}