UIInternal UI

AI Elements

52 chat-composer building blocks — everything an agent loop renders, from bubbles to tool calls to canvas nodes.

Agent

Agent identity card: header, instructions, tools, and output schema.

@general-design-company/internal-ui/components/ai-elements/agent
ran-d-2orchestrator
You buildInbox triage summaries and file one ticket per item.

Artifact

Side-panel artifact with header actions and closable content.

@general-design-company/internal-ui/components/ai-elements/artifact

deploy.sh

Generated script

bun run build
bun run deploy

Attachments

File attachment rows with preview, label, info, and remove.

@general-design-company/internal-ui/components/ai-elements/attachments
chart.png

AudioPlayer

Media-chrome audio player with control bar, seek, time, and volume.

@general-design-company/internal-ui/components/ai-elements/audio-player

Canvas

ReactFlow surface with background, tuned defaults, and delete keys.

@general-design-company/internal-ui/components/ai-elements/canvas
React Flow

ChainOfThought

Collapsible reasoning trace with labeled, statused steps.

@general-design-company/internal-ui/components/ai-elements/chain-of-thought
Read the ticket
Parsed 3 action items.
Draft the plan
Writing now…

ChatBubble

Sent/received bubbles with avatar, message, timestamp, and actions.

@general-design-company/internal-ui/components/ai-elements/chat-bubble
AR
The specimens are live.
Ship it.

Checkpoint

Restore point with tooltip trigger for rewinding a session.

@general-design-company/internal-ui/components/ai-elements/checkpoint
Before the deploy

CodeBlock

Shiki-highlighted code with container, header, filename, actions, and copy.

@general-design-company/internal-ui/components/ai-elements/code-block
import { Button } from "@general-design-company/internal-ui/components/primitives/button";
Manual composition
example.tsx
const answer = 42;

Commit

Commit card: hash, message, author, timestamp, and per-file changes.

@general-design-company/internal-ui/components/ai-elements/commit

Confirmation

Tool-approval card: request, accept/reject states, and action buttons.

@general-design-company/internal-ui/components/ai-elements/confirmation

Connection

Custom connection line for dragging edges between canvas nodes.

@general-design-company/internal-ui/components/ai-elements/connection
React Flow

Context

Token-usage meter: trigger plus input/output/reasoning/cache breakdown.

@general-design-company/internal-ui/components/ai-elements/context

Controls

Zoom/fit controls overlay for the canvas.

@general-design-company/internal-ui/components/ai-elements/controls
React Flow

Conversation

Stick-to-bottom message list with empty state, scroll button, and download.

@general-design-company/internal-ui/components/ai-elements/conversation
What ships in the kit?
Everything on this page.

CustomLanguageIcons

Brand icon overrides keyed by language id, layered over the default set.

@general-design-company/internal-ui/components/ai-elements/custom-language-icons
TypeScriptRust4 overrides registered

Edge

Custom edge types (animated + temporary) for canvas connections.

@general-design-company/internal-ui/components/ai-elements/edge
React Flow

EnvironmentVariables

Secret list with show/hide toggle, groups, and per-value copy.

@general-design-company/internal-ui/components/ai-elements/environment-variables

Production

DATABASE_URL••••••••••••

ExpandableChat

Docked chat panel with header, body, footer, and open toggle.

@general-design-company/internal-ui/components/ai-elements/expandable-chat

FileTree

Expandable file browser with selection, icons, and row actions.

@general-design-company/internal-ui/components/ai-elements/file-tree
index.ts
package.json

Image

Generated-image renderer for model output parts.

@general-design-company/internal-ui/components/ai-elements/image
1px placeholder

InlineCitation

Footnote-style citation with hover card of sources and quotes.

@general-design-company/internal-ui/components/ai-elements/inline-citation

The kit ships every primitive with a specimen[1]example.com , verified live.

JSXPreview

Live JSX preview with error boundary for pasted snippets.

@general-design-company/internal-ui/components/ai-elements/jsx-preview

LanguageIcon

Per-language file icon with custom-override support.

@general-design-company/internal-ui/components/ai-elements/language-icon
TypeScriptPythonRustGo

Markdown

GFM + math + Shiki code rendering, with opt-in word arrival animation for streams.

@general-design-company/internal-ui/components/ai-elements/markdown

Hello

Bold move. code too.

  • one
  • two

Message

Chat message with content, actions, branch navigation, and toolbar.

@general-design-company/internal-ui/components/ai-elements/message
Render every component.
Done — 204 specimens, all live.

MicSelector

Microphone picker backed by live audio devices.

@general-design-company/internal-ui/components/ai-elements/mic-selector
Microphone picker (needs a browser).

ModelSelector

Dialog-based model picker with search, groups, and shortcuts.

@general-design-company/internal-ui/components/ai-elements/model-selector

Node

Card-based canvas node with target/source handles, header, content, and footer.

@general-design-company/internal-ui/components/ai-elements/node
React Flow

OpenInChat

Dropdown that deep-links the current query into ChatGPT, Claude, and friends.

@general-design-company/internal-ui/components/ai-elements/open-in-chat

Panel

Positioned overlay slot inside the canvas.

@general-design-company/internal-ui/components/ai-elements/panel
2 nodes · dev overlay
React Flow

Persona

Rive-driven agent avatar with idle/listening/thinking/speaking states.

@general-design-company/internal-ui/components/ai-elements/persona

Plan

Step plan card with header, streaming content, and footer actions.

@general-design-company/internal-ui/components/ai-elements/plan
Ship the UI library
4 steps, docs-forward

PromptInput

Full composer: provider-optional state, attachments, tools, tabs, and submit.

@general-design-company/internal-ui/components/ai-elements/prompt-input

Queue

Queued-turn list with collapsible sections, indicators, and attachments.

@general-design-company/internal-ui/components/ai-elements/queue
  • Fix the empty state
    apps/ui
  • Retint the charts

    • Reasoning

    Streaming thought block with duration, trigger, and collapsible content.

    @general-design-company/internal-ui/components/ai-elements/reasoning

    Checked the registry, then composed the specimen.

    Sandbox

    Collapsible tool sandbox with tabbed file/content views.

    @general-design-company/internal-ui/components/ai-elements/sandbox

    Rendered output.

    SchemaDisplay

    API endpoint reference: method, path, parameters, request, and response.

    @general-design-company/internal-ui/components/ai-elements/schema-display
    GET/api/components

    List every specimen.

    categorystring

    Shimmer

    Text shimmer for streaming placeholders. Wraps any inline element.

    @general-design-company/internal-ui/components/ai-elements/shimmer

    Generating specimens…

    One more line

    Snippet

    Copyable code snippet with text, input, and copy button slots.

    @general-design-company/internal-ui/components/ai-elements/snippet

    Sources

    Cited-sources collapsible with trigger, content, and source links.

    @general-design-company/internal-ui/components/ai-elements/sources

    SpeechInput

    Voice input with speech-recognition and recorder fallbacks.

    @general-design-company/internal-ui/components/ai-elements/speech-input
    Voice input (needs a browser).

    StackTrace

    Error trace viewer with typed message, copy, expand, and frames.

    @general-design-company/internal-ui/components/ai-elements/stack-trace

    Suggestion

    Horizontal suggestion chips that report back the chosen string.

    @general-design-company/internal-ui/components/ai-elements/suggestion

    Task

    Agentic task row with trigger, file references, and item breakdown.

    @general-design-company/internal-ui/components/ai-elements/task

    Promote orphans into the kit

    packages/component-libraries/internal-ui/components/primitives/page-header.tsx
    Audit console components
    Write specimens

    Terminal

    Terminal output view with header, status, actions, and autoscroll.

    @general-design-company/internal-ui/components/ai-elements/terminal
    $ bun run build

    TestResults

    Test run report: suites, durations, statuses, and error stacks.

    @general-design-company/internal-ui/components/ai-elements/test-results

    Tool

    Tool-call card with header, JSON input, and rendered output.

    @general-design-company/internal-ui/components/ai-elements/tool

    Parameters

    {  "path": "apps/ui/README.md"}

    Result

    # ui.talonrandall.com

    Transcription

    Time-coded transcript with seekable segments.

    @general-design-company/internal-ui/components/ai-elements/transcription

    VoiceSelector

    Dialog-based voice picker with preview, attributes, and search.

    @general-design-company/internal-ui/components/ai-elements/voice-selector

    WebPreview

    Browser-chrome preview with navigation, URL bar, body, and console.

    @general-design-company/internal-ui/components/ai-elements/web-preview