Components catalog

43 AI-native components + 17 UI primitives + 9 landing sections = 69 components.

Every component lives in src/components/ai/ (AI-specific), src/components/ui/ (primitives), or src/components/sections/ (landing chunks). All re-exported from their folder's index.ts barrel.

import {
  // Chat primitives (5)
  MessageBubble, MessageActions, SuggestedPrompts, ChatInput, TypingIndicator,
  // Chat extensions (5)
  ChatSidebar, MessageThread, AttachmentPreview, VoiceInputButton, CitationDrawer,
  // Streaming (7)
  StreamingText, StreamingMarkdown, StreamingCode, StreamingJSON,
  StreamingTable, StreamingForm, ImageGenerationProgress,
  // Agent state & orchestration (10)
  AgentStatus, AgentTraceViewer, ToolCallPanel, ThoughtBubble, ToolPermissionGate,
  MultiAgentView, AgentTimeline, TaskList, ReasoningTree, AgentMemoryViewer,
  // Config & playground (7)
  ModelSelector, TokenCounter, PromptPlayground, DiffViewer,
  TemperatureSlider, SystemPromptEditor, CostTracker,
  // Tool calls & results (3)
  ToolCallInline, ToolResultTable, ToolResultChart,
  // RAG, search & code (5)
  SourceCitation, InlineCitation, CodeBlock, AISearchBox, DocumentUploader,
} from '@/components/ai'

import {
  // Core (2)
  Button, Card,
  // Form controls (7)
  Input, Textarea, Select, Checkbox, RadioGroup, Radio, Switch, Separator,
  // Overlays (5)
  Dialog, Tabs, Tooltip, Popover, toast, Toaster,
  // Display (3)
  Avatar, Badge, Skeleton,
} from '@/components/ui'

See the live /components page for interactive demos of every AI component.

---

Chat primitives (5)

<MessageBubble>

Role-aware chat message. User / assistant / system / tool variants. filled / outline / minimal.

<MessageBubble role="assistant" name="GPT-4o" timestamp={new Date()}>
  It's 18°C and cloudy.
</MessageBubble>

<MessageActions>

Copy / regenerate / edit / thumbs up-down toolbar. Renders only buttons whose handlers are defined.

<SuggestedPrompts>

Empty-state prompt chips with grid or wrap layout.

<ChatInput>

Standalone auto-growing chat input with ⌘↵ send, counter, busy state, stop button. ChatInputHandle ref exposes focus() / clear().

<TypingIndicator>

Three-dot animated typing indicator. bubble or inline variants.

---

Chat extensions (5)

<ChatSidebar>

ChatGPT-style conversation list. Pinned / recent / archived sections, search, keyboard nav (↑↓ + Delete), per-row Pin/Archive/Delete menu. Controlled by selectedId + onSelect.

<ChatSidebar
  conversations={convos}
  selectedId={activeId}
  onSelect={setActiveId}
  onNew={createConvo}
  onPin={togglePin}
/>

<MessageThread>

Slack-style threaded replies with 2-level nesting, inline reply composer, maxDepth prop, avatar gutter with connector lines.

<AttachmentPreview>

chip or card variant for one uploaded attachment. Progress bar, error state, auto file-type icon (image/pdf/video/audio/generic).

<VoiceInputButton>

Mic button with idle / recording / processing states, animated waveform (bars from CSS or live audioLevels), elapsed timer.

<CitationDrawer>

Right or left drawer listing RAG sources. Filter/search, per-source relevance bar, click-to-expand. Portals to document.body.

---

Streaming & rendering (7)

<StreamingText>

Character-by-character typewriter with blinking cursor.

<StreamingMarkdown>

Progressive markdown renderer that tolerates unterminated syntax.

<StreamingCode>

Syntax-highlighted streaming code block with optional line numbers + auto-scroll.

<StreamingJSON>

Progressive JSON pretty-printer that auto-closes dangling structures.

<StreamingTable>

Row-by-row table reveal as rows stream in. New rows flash acid-green for 600ms. Sticky header, per-column render overrides.

<StreamingTable
  columns={[{ key: 'name', label: 'Name' }, { key: 'price', label: 'Price', align: 'right' }]}
  rows={streamingRows}
  highlightNewRows
/>

<StreamingForm>

AI-generated form where fields appear progressively as the model emits schema. Cursor-blink on the field being composed. Submit gated on streaming.

<ImageGenerationProgress>

Image-gen progress with stages (prompting → generating → denoising → upscaling → done). Preview unblurs as progress advances. Retry on error.

---

Agent state & orchestration (10)

<AgentStatus>

Phase pill: thinking / tool / done / error / idle.

<AgentTraceViewer>

Flagship. Multi-step reasoning trace with collapsible tool calls. Static / animated / live modes.

<ToolCallPanel>

Live function-call panel with 4-phase animation: prompt → running → result → synthesis.

<ThoughtBubble>

Chain-of-thought display, visually distinct from chat bubbles.

<ToolPermissionGate>

Permission dialog for consequential calls. Allow / Deny / Remember. low / medium / high severity.

<MultiAgentView>

Side-by-side panels for N concurrent agents. Each card shows name, role, status, live output preview. Active agents get a pulsing acid-green ring.

<MultiAgentView
  agents={[
    { id: 'researcher', name: 'Researcher', status: 'tool', currentAction: 'search_web' },
    { id: 'writer', name: 'Writer', status: 'thinking', currentAction: 'drafting intro' },
  ]}
/>

<AgentTimeline>

Vertical timeline of agent events. Type-color-coded dots (thought / tool / message / error / system). Optional swimlanes by agent.

<TaskList>

AI-generated task list with recursive subtasks. Status icons (pending / running / done / error / skipped), inline retry, assigned-to badges, durations.

<ReasoningTree>

Branching reasoning tree (ToT / MCTS style). Score bars, selected-path highlighting, keyboard navigation. vertical or horizontal orientation.

<AgentMemoryViewer>

Inspectable memory store. Categories: episodic / semantic / procedural. Search, expand-to-JSON, relevance bars, access counts.

---

Config & playground (7)

<ModelSelector>

Provider-aware dropdown, 6 models pre-populated (OpenAI / Anthropic / Google / Meta).

<TokenCounter>

Color-coded usage bar. Green < 70% · amber < 90% · red otherwise.

<PromptPlayground>

Self-contained "try a prompt" panel. Model selector + prompt input + output.

<DiffViewer>

Side-by-side A/B output comparison with word-level diff.

<TemperatureSlider>

Custom slider for temperature / top_p with tick marks + labels. Keyboard arrow + Shift-arrow stepping.

<TemperatureSlider
  value={temp}
  onChange={setTemp}
  marks={[{ value: 0, label: 'Precise' }, { value: 1, label: 'Balanced' }, { value: 2, label: 'Creative' }]}
/>

<SystemPromptEditor>

Monospace system-prompt editor. Token count, budget bar, reset button on dirty state, {{variable}} highlighting via mirrored overlay.

<CostTracker>

Running USD cost from token counts × rates. Budget progress bar, expand to history.

---

Tool calls & results (3)

<ToolCallInline>

Compact inline badge: • search_web(q="weather") with status-colored dot. Click to expand args + result.

<ToolResultTable>

Tool result as sortable table. Auto-derives columns from first row. Zebra, truncation, number-right-align, booleans as ✓/✗.

<ToolResultChart>

Pure-SVG bar / line / area chart. No chart lib. Hover tooltip, mount animation, responsive.

<ToolResultChart
  data={[{ label: 'Jan', value: 40 }, { label: 'Feb', value: 72 }]}
  type="bar"
  showValues
/>

---

RAG, search & code (5)

<SourceCitation> / <InlineCitation>

Full card + superscript [n] inline reference with hover preview.

<CodeBlock>

Syntax-highlighted code block with copy button.

<AISearchBox>

Search input with AI-autocomplete dropdown. Cmd/Ctrl+K hotkey, arrow-key navigation, category badges per suggestion, loading spinner.

<DocumentUploader>

Drag-drop zone with validation, multi-file upload, per-file progress + status + remove. Accept/max-size/max-files constraints.

---

Chat shell (1)

<ChatHero>

Full chat UI with streaming via useChat(). Auto-plays scripted demo on mount; swaps to real API when OPENAI_API_KEY is set.

---

UI primitives (17)

Core (2)

• <Button> — 3 variants × 3 sizes, asChild via Radix Slot
• <Card> (+ CardHeader + CardBody)

Form controls (7)

• <Input> — variants, icons, label, hint, error
• <Textarea> — autoGrow, maxLength counter
• <Select> — pure-React listbox with keyboard nav + typeahead
• <Checkbox> — supports indeterminate
• <RadioGroup> + <Radio> — context-driven, keyboard arrows
• <Switch> — toggle with track + thumb animation
• <Separator> — horizontal / vertical, optional label

Overlays (5)

• <Dialog> — @radix-ui/react-dialog wrapper with full family (Trigger, Content, Header, Footer, Title, Description, Close)
• <Tabs> — @radix-ui/react-tabs with sliding underline indicator
• <Tooltip> — @radix-ui/react-tooltip, mono-label style, 200ms delay
• <Popover> — pure React, portal + flip algorithm, asChild trigger
• <toast()> + <Toaster /> — imperative toast API via useSyncExternalStore (concurrent-mode safe), stacks up to 3

Display (3)

• <Avatar> (+ AvatarImage + AvatarFallback) — xs/sm/md/lg/xl sizes
• <Badge> — default / brand / success / warning / danger / outline
• <Skeleton> — shimmering placeholder, text / circle / rect

// Example: imperative toast
import { toast } from '@/components/ui'
toast.success('Saved!')
toast.error('Upload failed')
toast.custom({ title: 'New message', description: 'Click to view', action: { label: 'View', onClick } })

---

Landing sections (9)

Pre-composed page chunks. Arrange, delete, or swap in src/app/page.tsx.

---

Shell (2)

---

Customization principles

1. All styling via CSS vars — edit src/app/globals.css to rebrand globally. Never edit component colors directly.
2. All components accept className — merge your own classes for one-off overrides via cn().
3. Zero cross-imports between AI components — each is self-contained. Delete what you don't use.
4. TypeScript strict — every prop is typed. Your IDE tells you what to pass.
5. Tested — the critical components have unit tests (vitest). Run npm test.
6. Three themes out of the box — editorial-dark (default), bright, cool-blue. Swap via data-theme attribute.

---

Running tests

npm test

29 tests passing covering TokenCounter, AgentStatus, AgentTraceViewer, StreamingText, MessageBubble, ChatInput.

Add your own tests in tests/*.test.tsx. See existing tests for patterns.

---

— Richard · webdesignhot.com