Design System

/AI elements

AI surfaces

ai-elements under Orbit tokens

Vercel's ai-elements re-skinned through the Orbit token bridge. Every AI UI component inherits shadow-as-border, Geist type, and variation-aware theming — drop them into any surface and they already belong.

stubbed

Conversation + Message

src/components/ai-elements/{conversation,message}.tsx

Spin up a preview for the billing branch and show me the build config.

Preview queued for `feat/billing-v2`. Here's the build config it'll use — same as production minus `OPENAI_API_KEY` which is gated to prod.

{  "env": "preview",  "buildCommand": "bun run build",  "installCommand": "bun install",  "framework": "next@16",  "regions": ["iad1"],  "secrets": {    "DATABASE_URL":        "inherit",    "STRIPE_WEBHOOK_KEY":  "inherit",    "OPENAI_API_KEY":      "preview-disabled"  }}

Catalog

Every ai-element currently vendored under src/components/ai-elements/. Most wire up cleanly after a real provider is connected — the conversation above is the canonical example.

Chat

Conversation

ai-elements/conversation

Scroll container with auto-stick-to-bottom.

src/components/ai-elements/conversation.tsx

Message

ai-elements/message

Role-aware message row (user/assistant).

src/components/ai-elements/message.tsx

PromptInput

ai-elements/prompt-input

Textarea + tools + submit compound.

src/components/ai-elements/prompt-input.tsx

Suggestion

ai-elements/suggestion

Prompt chip suggestions above the input.

src/components/ai-elements/suggestion.tsx

Persona

ai-elements/persona

Avatar + name + role label.

src/components/ai-elements/persona.tsx

Attachments

ai-elements/attachments

File/image upload strip for prompts.

src/components/ai-elements/attachments.tsx

OpenInChat

ai-elements/open-in-chat

Deeplink-to-conversation button.

src/components/ai-elements/open-in-chat.tsx

Reasoning

ai-elements/reasoning

Collapsible chain-of-thought block.

src/components/ai-elements/reasoning.tsx

ChainOfThought

ai-elements/chain-of-thought

Ordered reasoning-step display.

src/components/ai-elements/chain-of-thought.tsx

Task

ai-elements/task

Single work item with status.

src/components/ai-elements/task.tsx

Plan

ai-elements/plan

Multi-step execution plan view.

src/components/ai-elements/plan.tsx

Checkpoint

ai-elements/checkpoint

Progress milestone marker.

src/components/ai-elements/checkpoint.tsx

Context

ai-elements/context

Context window / memory preview.

src/components/ai-elements/context.tsx

Code & tools

CodeBlock

ai-elements/code-block

Syntax-highlighted code via Shiki.

src/components/ai-elements/code-block.tsx

Tool

ai-elements/tool

Tool-call envelope: name, args, result.

src/components/ai-elements/tool.tsx

Terminal

ai-elements/terminal

Monospace terminal output surface.

src/components/ai-elements/terminal.tsx

Commit

ai-elements/commit

Git commit card with SHA + message.

src/components/ai-elements/commit.tsx

Sandbox

ai-elements/sandbox

Live-preview code sandbox pane.

src/components/ai-elements/sandbox.tsx

FileTree

ai-elements/file-tree

Nested file/folder explorer.

src/components/ai-elements/file-tree.tsx

PackageInfo

ai-elements/package-info

Dependency metadata card.

src/components/ai-elements/package-info.tsx

Snippet

ai-elements/snippet

Inline copy-able code snippet.

src/components/ai-elements/snippet.tsx

TestResults

ai-elements/test-results

Pass/fail rollup with breakdown.

src/components/ai-elements/test-results.tsx

StackTrace

ai-elements/stack-trace

Parsed stack trace with source links.

src/components/ai-elements/stack-trace.tsx

Artifact

ai-elements/artifact

Model-emitted file / document container.

src/components/ai-elements/artifact.tsx

EnvironmentVariables

ai-elements/environment-variables

Masked env-var list.

src/components/ai-elements/environment-variables.tsx

Data & meta

Sources

ai-elements/sources

Citation source list with favicons.

src/components/ai-elements/sources.tsx

InlineCitation

ai-elements/inline-citation

In-flow citation marker.

src/components/ai-elements/inline-citation.tsx

SchemaDisplay

ai-elements/schema-display

Typed JSON schema renderer.

src/components/ai-elements/schema-display.tsx

Agent

ai-elements/agent

Agent identity + capability chip.

src/components/ai-elements/agent.tsx

Queue

ai-elements/queue

Background task queue view.

src/components/ai-elements/queue.tsx

Confirmation

ai-elements/confirmation

Accept/reject flow for tool runs.

src/components/ai-elements/confirmation.tsx

Canvas

ai-elements/canvas

Free-form infinite canvas surface.

src/components/ai-elements/canvas.tsx

WebPreview

ai-elements/web-preview

Iframe website preview card.

src/components/ai-elements/web-preview.tsx

JsxPreview

ai-elements/jsx-preview

Live-rendered JSX output.

src/components/ai-elements/jsx-preview.tsx

Image

ai-elements/image

Model-generated / attached image frame.

src/components/ai-elements/image.tsx

Node

ai-elements/node

Canvas node primitive.

src/components/ai-elements/node.tsx

Edge

ai-elements/edge

Canvas edge primitive.

src/components/ai-elements/edge.tsx

Connection

ai-elements/connection

Live edge being drawn.

src/components/ai-elements/connection.tsx

Panel

ai-elements/panel

Dockable canvas panel.

src/components/ai-elements/panel.tsx

Shimmer

ai-elements/shimmer

Typing / streaming placeholder.

src/components/ai-elements/shimmer.tsx

Controls

ai-elements/controls

Zoom / pan control cluster.

src/components/ai-elements/controls.tsx

Toolbar

ai-elements/toolbar

Generic action toolbar strip.

src/components/ai-elements/toolbar.tsx

AudioPlayer

ai-elements/audio-player

Inline audio playback.

src/components/ai-elements/audio-player.tsx

Transcription

ai-elements/transcription

Streaming speech-to-text display.

src/components/ai-elements/transcription.tsx

SpeechInput

ai-elements/speech-input

Mic-based prompt capture.

src/components/ai-elements/speech-input.tsx

MicSelector

ai-elements/mic-selector

Input device picker.

src/components/ai-elements/mic-selector.tsx

VoiceSelector

ai-elements/voice-selector

TTS voice picker.

src/components/ai-elements/voice-selector.tsx

ModelSelector

ai-elements/model-selector

Model/provider picker.

src/components/ai-elements/model-selector.tsx

ai-elements under Orbit tokens

Command palette