AI Elements Nuxt

Component docs

Home Components

Guides

Getting Started
Building a Chat
Custom Transport & RAG
Building an Agent
Styling Guide
Composables

Playground

Chat Demo
Agent Demo
Streaming
Code
Voice & Workflow

Chatbot

Messages, input, tools, reasoning, and conversation UI.

Attachments
Chain of Thought
Checkpoint
Confirmation
Context
Conversation
Error Boundary
Inline Citation
Message
Model Selector
Plan
Prompt Input
Queue
Reasoning
Shimmer
Sources
Streaming Cursor
Suggestion
Task
Tool
Tool Approval
Approval Policy

Code

Code blocks, terminals, agents, artifacts, and dev tooling UI.

Agent
Agent Timeline
Artifact
Code Block
Commit
Env Vars
File Tree
Package Info
Sandbox
Sandbox Preview
Schema Display
Snippet
Stack Trace
Terminal
Test Results
Vue Preview
Web Preview

Voice

Audio playback, speech input, transcription, and voice selection.

Audio Player
Mic Selector
Persona
Speech Input
Transcription
Voice Selector
Realtime Chat

Workflow

Canvas-based workflow diagrams with nodes and edges.

Canvas
Connection
Controls
Edge
Node
Panel
Toolbar

Utilities

Markdown rendering, images, and chat integrations.

Image
Markdown
Open In Chat
File Upload
Video Player
MCP App
Runtime Context

Home Components Playground

Agent Demo

useAiAgent + useAiTools with streaming chat. Simulate tool approval below.

Agent run

Chat