Components
All headless AI Elements components for Nuxt. Each page includes a live preview, usage snippet, and props reference.
Chatbot
Messages, input, tools, reasoning, and conversation UI.
- AttachmentsAiAttachmentsDisplay file and document attachments in grid, inline, or list layouts.
- Chain of ThoughtAiChainOfThoughtDiscrete labeled steps for agent reasoning flows.
- CheckpointAiCheckpointPipeline checkpoint status indicators.
- ConfirmationAiConfirmationDestructive or sensitive action confirmation dialogs.
- ContextAiContextContext window items with token counts.
- ConversationAiConversationThread list / sidebar — conversation threads, not the message scroll area.
- Error BoundaryAiErrorBoundaryError display with optional retry.
- Inline CitationAiInlineCitationInline citation badges linked to sources.
- MessageAiMessageHeadless message container with slots for content, reasoning, tools, and sources.
- Model SelectorAiModelSelectorModel picker grouped by provider.
- PlanAiPlanNested step plan with status indicators.
- Prompt InputAiPromptInputTextarea input with submit, stop, and slot customization.
- QueueAiQueueQueued message list with processing status.
- ReasoningAiReasoningCollapsible reasoning / thinking block.
- ShimmerAiShimmerLoading placeholder skeleton lines.
- SourcesAiSourcesSource citation list for assistant messages.
- Streaming CursorAiStreamingCursorBlinking cursor for streaming text.
- SuggestionAiSuggestionFollow-up suggestion chips.
- TaskAiTaskTask progress with optional subtasks.
- ToolAiToolTool invocation display with lifecycle states.
- Tool ApprovalAiToolApprovalHuman-in-the-loop tool approval UI.
- Approval PolicyAiApprovalPolicyDeclarative tool approval policies with auto-approve, auto-deny, and user-approval modes.
Code
Code blocks, terminals, agents, artifacts, and dev tooling UI.
- AgentAiAgentAgent thought/action/observation step timeline.
- Agent TimelineAiAgentTimelineRich timeline visualization with duration, connectors, and nested children.
- ArtifactAiArtifactTabbed artifact viewer for code, docs, and HTML.
- Code BlockAiCodeBlockSyntax-highlighted code with copy and line numbers.
- CommitAiCommitGit commit summary with file changes.
- Env VarsAiEnvVarsEnvironment variables with reveal toggle.
- File TreeAiFileTreeExpandable file tree navigation.
- Package InfoAiPackageInfonpm package metadata display.
- SandboxAiSandboxRunnable code sandbox preview.
- Sandbox PreviewAiSandboxPreviewSandbox stdout/stderr streaming with exit code and file artifacts.
- Schema DisplayAiSchemaDisplayJSON schema field tree.
- SnippetAiSnippetCompact copyable code snippet.
- Stack TraceAiStackTraceError stack trace with frame list.
- TerminalAiTerminalTerminal output with command lines.
- Test ResultsAiTestResultsTest run results and summary.
- Vue PreviewAiVuePreviewVue component live preview.
- Web PreviewAiWebPreviewiframe or HTML web preview.
Voice
Audio playback, speech input, transcription, and voice selection.
- Audio PlayerAiAudioPlayerAudio playback controls.
- Mic SelectorAiMicSelectorMicrophone device picker.
- PersonaAiPersonaVoice persona card with avatar.
- Speech InputAiSpeechInputSpeech-to-text input control.
- TranscriptionAiTranscriptionTimestamped transcript segments.
- Voice SelectorAiVoiceSelectorTTS voice selection list.
- Realtime ChatAiRealtimeChatVoice + text realtime conversation with capture, playback, and connection controls.
Workflow
Canvas-based workflow diagrams with nodes and edges.
- CanvasAiCanvasPannable, zoomable workflow canvas with grid, snap-to-grid, and fit-view.
- ConnectionAiConnectionSVG connection path between points.
- ControlsAiControlsZoom and pan controls overlay.
- EdgeAiEdgeWorkflow edge with label and animation.
- NodeAiNodeWorkflow node with status.
- PanelAiPanelSide panel for workflow details.
- ToolbarAiToolbarWorkflow toolbar actions.
Utilities
Markdown rendering, images, and chat integrations.
- ImageAiImageImage with optional lightbox zoom.
- MarkdownAiMarkdownSanitized markdown to HTML renderer.
- Open In ChatAiOpenInChatAction to open content in chat.
- File UploadAiFileUploadDrag-and-drop file upload with validation, progress, and file list.
- Video PlayerAiVideoPlayerAI-generated video playback with loading states and duration display.
- MCP AppAiMcpAppSandboxed MCP application rendering via iframe with HTML, text, and JSON content.
- Runtime ContextAiRuntimeContextDev tool for inspecting runtime, tool, and approval context entries.