building-ai-chat

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:

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>}
      </div>

      <form onSubmit={handleSubmit} className="input-form">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask anything..."
          disabled={isLoading}
        />
        {isLoading ? (
          <button type="button" onClick={stop}>Stop</button>
        ) : (
          <button type="submit">Send</button>
        )}
      </form>
    </div>
  );
}

For complete implementation with streaming markdown, see examples/basic-chat.tsx.