AI Elements
35 AI UI components across 4 subcategories. Built for Vercel AI SDK patterns.
Install Pattern
npx shadcn@latest add @elements/ai-{name}Chat (11 components)
Conversational UI primitives.
| Component | Install |
|---|---|
| Chat (full) | @elements/ai-chat |
| Chat Input | @elements/ai-chat-input |
| Message Bubble | @elements/ai-message-bubble |
| Messages | @elements/ai-messages |
| Model Selector | @elements/ai-model-selector |
| Response Actions | @elements/ai-response-actions |
| Streaming Text | @elements/ai-streaming-text |
| Suggested Actions | @elements/ai-suggested-actions |
| Temperature Slider | @elements/ai-temperature-slider |
| Thinking Indicator | @elements/ai-thinking-indicator |
| Token Counter | @elements/ai-token-counter |
Agentic (8 components)
Tool use, reasoning, and planning UI.
| Component | Install |
|---|---|
| Artifact | @elements/ai-artifact |
| Chain of Thought | @elements/ai-chain-of-thought |
| Confirmation | @elements/ai-confirmation |
| Plan | @elements/ai-plan |
| Reasoning | @elements/ai-reasoning |
| Sources | @elements/ai-sources |
| Task List | @elements/ai-task-list |
| Tool Call | @elements/ai-tool-call |
Multi-Agent (8 components)
Agent orchestration and monitoring.
| Component | Install |
|---|---|
| Agent Context | @elements/ai-agent-context |
| Agent Roster | @elements/ai-agent-roster |
| Agent Status | @elements/ai-agent-status |
| Guardrails | @elements/ai-guardrails |
| Handoff Chain | @elements/ai-handoff-chain |
| Memory Viewer | @elements/ai-memory-viewer |
| Pipeline | @elements/ai-pipeline |
| Routing Indicator | @elements/ai-routing-indicator |
Devtools (8 components)
AI debugging and inspection.
| Component | Install |
|---|---|
| Conversation Tree | @elements/ai-conversation-tree |
| Latency Meter | @elements/ai-latency-meter |
| Model Info | @elements/ai-model-info |
| Prompt Diff | @elements/ai-prompt-diff |
| Request Inspector | @elements/ai-request-inspector |
| Stream Debugger | @elements/ai-stream-debugger |
| Token Viewer | @elements/ai-token-viewer |
| Tool Inspector | @elements/ai-tool-inspector |
Quick Patterns
# Chat interface
npx shadcn@latest add @elements/ai-chat @elements/ai-chat-input @elements/ai-message-bubble @elements/ai-messages @elements/ai-streaming-text
# Agentic UI
npx shadcn@latest add @elements/ai-tool-call @elements/ai-reasoning @elements/ai-plan @elements/ai-confirmation
# Multi-agent dashboard
npx shadcn@latest add @elements/ai-agent-roster @elements/ai-agent-status @elements/ai-pipeline @elements/ai-handoff-chain
# AI debugging
npx shadcn@latest add @elements/ai-request-inspector @elements/ai-stream-debugger @elements/ai-token-viewerDiscovery
Browse https://tryelements.dev/docs/ai-elements
Component Not Found?
Generate a pre-filled GitHub issue:
https://github.com/crafter-station/elements/issues/new?title=[Component%20Request]%20Add%20AI%20{Name}&labels=enhancement,ai-elements