Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
ancoleman avatar

Building Ai Chat

ancoleman/ai-design-components

  • 112 installs
  • 426 repo stars
  • Updated December 11, 2025
  • ancoleman/ai-design-components

Building-ai-chat is a Claude Code skill that builds AI chat and conversational UI with streaming responses, context management, and multi-modal support.

About

Building-ai-chat is a Claude Code skill that provides patterns and React/TSX components for AI chat and conversational interfaces. A developer uses it when creating ChatGPT-style UIs, assistants, or copilots that need streaming text, context and token management, and multi-modal input. It covers response controls (stop, regenerate, edit), feedback mechanisms, auto-scroll heuristics, and AI-specific error handling like refusals.

  • Streaming message components with Streamdown for incomplete markdown
  • Token-limit indicators, regeneration, and feedback controls
  • Multi-modal image, file, and voice input patterns

Building Ai Chat by the numbers

  • 112 all-time installs (skills.sh)
  • Ranked #1,029 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

building-ai-chat capabilities & compatibility

Capabilities
building forms · building tables · creating dashboards · building ai chat
Works with
vercel
Use cases
frontend · ui design
From the docs

What building-ai-chat says it does

Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support.
SKILL.md
Use Streamdown for AI streaming (handles incomplete markdown)
SKILL.md
npx skills add https://github.com/ancoleman/ai-design-components --skill building-ai-chat

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs112
repo stars★ 426
Last updatedDecember 11, 2025
Repositoryancoleman/ai-design-components ↗

What it does

Build a streaming AI chat interface with message bubbles, token indicators, regeneration, and multi-modal input.

Who is it for?

Building ChatGPT-style conversational interfaces with streaming text and multi-modal inputs.

Skip if: Backend model inference or LLM API orchestration.

When should I use this skill?

Building an AI assistant, copilot, or chatbot UI with streaming responses.

What you get

Battle-tested chat components with streaming, feedback loops, and AI-specific error handling.

  • Message display components
  • Input components with attachments and voice
  • Streaming and auto-scroll patterns

By the numbers

  • Minimal AI chat interface in under 50 lines

Files

SKILL.mdMarkdownGitHub ↗

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.

Core Components

Message Display

Build user, AI, and system message bubbles with streaming support:

// User message
<div className="message user">
  <div className="content">{message.content}</div>
  <time className="timestamp">{formatTime(message.timestamp)}</time>
</div>

// AI message with streaming
<div className="message ai">
  <Streamdown className="content">{message.content}</Streamdown>
  {message.isStreaming && <span className="cursor">▊</span>}
</div>

// System message
<div className="message system">
  <Icon type="info" />
  <span>{message.content}</span>
</div>

For markdown rendering, code blocks, and formatting details, see references/message-components.md.

Input Components

Create rich input experiences with attachments and voice:

<div className="input-container">
  <button onClick={attachFile} aria-label="Attach file">
    <PaperclipIcon />
  </button>

  <textarea
    value={input}
    onChange={handleChange}
    onKeyDown={handleKeyDown}
    placeholder="Type a message..."
    rows={1}
    style={{ height: textareaHeight }}
  />

  <button onClick={toggleVoice} aria-label="Voice input">
    <MicIcon />
  </button>

  <button type="submit" disabled={!input.trim() || isLoading}>
    <SendIcon />
  </button>
</div>

Response Controls

Essential controls for AI responses:

<div className="response-controls">
  {isStreaming && (
    <button onClick={stop} className="stop-btn">
      Stop generating
    </button>
  )}

  {!isStreaming && (
    <>
      <button onClick={regenerate} aria-label="Regenerate response">
        <RefreshIcon /> Regenerate
      </button>
      <button onClick={continueGeneration} aria-label="Continue">
        Continue
      </button>
      <button onClick={editMessage} aria-label="Edit message">
        <EditIcon /> Edit
      </button>
    </>
  )}
</div>

Feedback Mechanisms

Collect user feedback to improve AI responses:

<div className="feedback-controls">
  <button
    onClick={() => sendFeedback('positive')}
    aria-label="Good response"
    className={feedback === 'positive' ? 'selected' : ''}
  >
    <ThumbsUpIcon />
  </button>

  <button
    onClick={() => sendFeedback('negative')}
    aria-label="Bad response"
    className={feedback === 'negative' ? 'selected' : ''}
  >
    <ThumbsDownIcon />
  </button>

  <button onClick={copyToClipboard} aria-label="Copy">
    <CopyIcon />
  </button>

  <button onClick={share} aria-label="Share">
    <ShareIcon />
  </button>
</div>

Streaming & Real-Time UX

Progressive rendering of AI responses requires special handling:

// Use Streamdown for AI streaming (handles incomplete markdown)
import { Streamdown } from '@vercel/streamdown';

// Auto-scroll management
useEffect(() => {
  if (shouldAutoScroll()) {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }
}, [messages]);

// Smart auto-scroll heuristic
function shouldAutoScroll() {
  const threshold = 100; // px from bottom
  const isNearBottom =
    container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
  const userNotReading = !hasUserScrolledUp && !isTextSelected;
  return isNearBottom && userNotReading;
}

For complete streaming patterns, auto-scroll behavior, and stop generation, see references/streaming-ux.md.

Context Management

Communicate token limits clearly to users:

// User-friendly token display
function TokenIndicator({ used, total }) {
  const percentage = (used / total) * 100;
  const remaining = total - used;

  return (
    <div className="token-indicator">
      <div className="progress-bar">
        <div className="progress-fill" style={{ width: `${percentage}%` }} />
      </div>
      <span className="token-text">
        {percentage > 80
          ? `⚠️ About ${Math.floor(remaining / 250)} messages left`
          : `${Math.floor(remaining / 250)} pages of conversation remaining`}
      </span>
    </div>
  );
}

For summarization strategies, conversation branching, and organization, see references/context-management.md.

Multi-Modal Support

Handle images, files, and voice inputs:

// Image upload with preview
function ImageUpload({ onUpload }) {
  return (
    <div
      className="upload-zone"
      onDrop={handleDrop}
      onDragOver={preventDefault}
    >
      <input
        type="file"
        accept="image/*"
        onChange={handleFileSelect}
        multiple
        hidden
        ref={fileInputRef}
      />
      {previews.map(preview => (
        <img key={preview.id} src={preview.url} alt="Upload preview" />
      ))}
    </div>
  );
}

For complete multi-modal patterns including voice and screen sharing, see references/multi-modal.md.

Error Handling

Handle AI-specific errors gracefully:

// Refusal handling
if (response.type === 'refusal') {
  return (
    <div className="error refusal">
      <Icon type="info" />
      <p>I cannot help with that request.</p>
      <details>
        <summary>Why?</summary>
        <p>{response.reason}</p>
      </details>
      <p>Try asking: {response.suggestion}</p>
    </div>
  );
}

// Rate limit communication
if (error.code === 'RATE_LIMIT') {
  return (
    <div className="error rate-limit">
      <p>Please wait {error.retryAfter} seconds</p>
      <CountdownTimer seconds={error.retryAfter} onComplete={retry} />
    </div>
  );
}

For comprehensive error patterns, see references/error-handling.md.

Tool Usage Visualization

Show when AI is using tools or functions:

function ToolUsage({ tool }) {
  return (
    <div className="tool-usage">
      <div className="tool-header">
        <Icon type={tool.type} />
        <span>{tool.name}</span>
        {tool.status === 'running' && <Spinner />}
      </div>
      {tool.status === 'complete' && (
        <details>
          <summary>View details</summary>
          <pre>{JSON.stringify(tool.result, null, 2)}</pre>
        </details>
      )}
    </div>
  );
}

For function calling, code execution, and web search patterns, see references/tool-usage.md.

Implementation Guide

Recommended Stack

Primary libraries (validated November 2025):

# Core AI chat functionality
npm install ai @ai-sdk/react @ai-sdk/openai

# Streaming markdown rendering
npm install @vercel/streamdown

# Syntax highlighting
npm install react-syntax-highlighter

# Security for LLM outputs
npm install dompurify

Performance Optimization

Critical for smooth streaming:

// Memoize message rendering
const MemoizedMessage = memo(Message, (prev, next) =>
  prev.content === next.content && prev.isStreaming === next.isStreaming
);

// Debounce streaming updates
const debouncedUpdate = useMemo(
  () => debounce(updateMessage, 50),
  []
);

// Virtual scrolling for long conversations
import { VariableSizeList } from 'react-window';

For detailed performance patterns, see references/streaming-ux.md.

Security Considerations

Always sanitize AI outputs:

import DOMPurify from 'dompurify';

function SafeAIContent({ content }) {
  const sanitized = DOMPurify.sanitize(content, {
    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li'],
    ALLOWED_ATTR: ['class']
  });

  return <Streamdown>{sanitized}</Streamdown>;
}

Accessibility

Ensure AI chat is usable by everyone:

// ARIA live regions for screen readers
<div role="log" aria-live="polite" aria-relevant="additions">
  {messages.map(msg => (
    <article key={msg.id} role="article" aria-label={`${msg.role} message`}>
      {msg.content}
    </article>
  ))}
</div>

// Loading announcements
<div role="status" aria-live="polite" className="sr-only">
  {isLoading ? 'AI is responding' : ''}
</div>

For complete accessibility patterns, see references/accessibility.md.

Bundled Resources

Scripts (Token-Free Execution)

  • Run scripts/parse_stream.js to parse incomplete markdown during streaming
  • Run scripts/calculate_tokens.py to estimate token usage and context limits
  • Run scripts/format_messages.js to format message history for export

References (Progressive Disclosure)

  • references/streaming-patterns.md - Complete streaming UX patterns
  • references/context-management.md - Token limits and conversation strategies
  • references/multimodal-input.md - Image, file, and voice handling
  • references/feedback-loops.md - User feedback and RLHF patterns
  • references/error-handling.md - AI-specific error scenarios
  • references/tool-usage.md - Visualizing function calls and tool use
  • references/accessibility-chat.md - Screen reader and keyboard support
  • references/library-guide.md - Detailed library documentation
  • references/performance-optimization.md - Streaming performance patterns

Examples

  • examples/basic-chat.tsx - Minimal ChatGPT-style interface
  • examples/streaming-chat.tsx - Advanced streaming with memoization
  • examples/multimodal-chat.tsx - Images and file uploads
  • examples/code-assistant.tsx - IDE-style code copilot
  • examples/tool-calling-chat.tsx - Function calling visualization

Assets

  • assets/system-prompts.json - Curated prompts for different use cases
  • assets/message-templates.json - Pre-built message components
  • assets/error-messages.json - User-friendly error messages
  • assets/themes.json - Light, dark, and high-contrast themes

Design Token Integration

All visual styling uses the design-tokens system:

/* Message bubbles use design tokens */
.message.user {
  background: var(--message-user-bg, var(--color-primary));
  color: var(--message-user-text, var(--color-white));
  padding: var(--message-padding, var(--spacing-md));
  border-radius: var(--message-border-radius, var(--radius-lg));
}

.message.ai {
  background: var(--message-ai-bg, var(--color-gray-100));
  color: var(--message-ai-text, var(--color-text-primary));
}

See skills/design-tokens/ for complete theming system.

Key Innovations

This skill provides industry-first solutions for:

  • Memoized streaming rendering - 10-50x performance improvement
  • Intelligent auto-scroll - User activity-aware scrolling
  • Token metaphors - User-friendly context communication
  • Incomplete markdown handling - Graceful partial rendering
  • RLHF patterns - Effective feedback collection
  • Conversation branching - Non-linear conversation trees
  • Multi-modal integration - Seamless file/image/voice handling
  • Accessibility-first - Built-in screen reader support

Strategic Importance

This is THE most critical skill because:

1. Perfect timing - Every app adding AI (2024-2025 boom) 2. No standards exist - Opportunity to define patterns 3. Meta-advantage - Building WITH Claude = intimate UX knowledge 4. Unique challenges - Streaming, context, hallucinations all new 5. Reference implementation - Can become the standard others follow

Master this skill to lead the AI interface revolution.

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

FAQ

What does building-ai-chat handle?

Streaming text, token limits, regeneration, feedback loops, tool usage visualization, and AI-specific error patterns.

What library does it use for streaming markdown?

It uses Streamdown (@vercel/streamdown) which handles incomplete markdown during streaming.

Frontend Developmentfrontendintegrations
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.