AI Elements
52 chat-composer building blocks — everything an agent loop renders, from bubbles to tool calls to canvas nodes.
- AgentAgent identity card: header, instructions, tools, and output schema.
- ArtifactSide-panel artifact with header actions and closable content.
- AttachmentsFile attachment rows with preview, label, info, and remove.
- AudioPlayerMedia-chrome audio player with control bar, seek, time, and volume.
- CanvasReactFlow surface with background, tuned defaults, and delete keys.
- ChainOfThoughtCollapsible reasoning trace with labeled, statused steps.
- ChatBubbleSent/received bubbles with avatar, message, timestamp, and actions.
- CheckpointRestore point with tooltip trigger for rewinding a session.
- CodeBlockShiki-highlighted code with container, header, filename, actions, and copy.
- CommitCommit card: hash, message, author, timestamp, and per-file changes.
- ConfirmationTool-approval card: request, accept/reject states, and action buttons.
- ConnectionCustom connection line for dragging edges between canvas nodes.
- ContextToken-usage meter: trigger plus input/output/reasoning/cache breakdown.
- ControlsZoom/fit controls overlay for the canvas.
- ConversationStick-to-bottom message list with empty state, scroll button, and download.
- CustomLanguageIconsBrand icon overrides keyed by language id, layered over the default set.
- EdgeCustom edge types (animated + temporary) for canvas connections.
- EnvironmentVariablesSecret list with show/hide toggle, groups, and per-value copy.
- ExpandableChatDocked chat panel with header, body, footer, and open toggle.
- FileTreeExpandable file browser with selection, icons, and row actions.
- ImageGenerated-image renderer for model output parts.
- InlineCitationFootnote-style citation with hover card of sources and quotes.
- JSXPreviewLive JSX preview with error boundary for pasted snippets.
- LanguageIconPer-language file icon with custom-override support.
- MarkdownGFM + math + Shiki code rendering, with opt-in word arrival animation for streams.
- MessageChat message with content, actions, branch navigation, and toolbar.
- MicSelectorMicrophone picker backed by live audio devices.
- ModelSelectorDialog-based model picker with search, groups, and shortcuts.
- NodeCard-based canvas node with target/source handles, header, content, and footer.
- OpenInChatDropdown that deep-links the current query into ChatGPT, Claude, and friends.
- PanelPositioned overlay slot inside the canvas.
- PersonaRive-driven agent avatar with idle/listening/thinking/speaking states.
- PlanStep plan card with header, streaming content, and footer actions.
- PromptInputFull composer: provider-optional state, attachments, tools, tabs, and submit.
- QueueQueued-turn list with collapsible sections, indicators, and attachments.
- ReasoningStreaming thought block with duration, trigger, and collapsible content.
- SandboxCollapsible tool sandbox with tabbed file/content views.
- SchemaDisplayAPI endpoint reference: method, path, parameters, request, and response.
- ShimmerText shimmer for streaming placeholders. Wraps any inline element.
- SnippetCopyable code snippet with text, input, and copy button slots.
- SourcesCited-sources collapsible with trigger, content, and source links.
- SpeechInputVoice input with speech-recognition and recorder fallbacks.
- StackTraceError trace viewer with typed message, copy, expand, and frames.
- SuggestionHorizontal suggestion chips that report back the chosen string.
- TaskAgentic task row with trigger, file references, and item breakdown.
- TerminalTerminal output view with header, status, actions, and autoscroll.
- TestResultsTest run report: suites, durations, statuses, and error stacks.
- ToolTool-call card with header, JSON input, and rendered output.
- TranscriptionTime-coded transcript with seekable segments.
- VoiceSelectorDialog-based voice picker with preview, attributes, and search.
- WebPreviewBrowser-chrome preview with navigation, URL bar, body, and console.