About ai-elements
A collection of AI interface components built around Vercel AI SDK patterns, for developers building chat, agent, and debugging interfaces. Components are grouped into chat, agentic, multi-agent, and devtools categories and can be added with a shadcn command.
Key features
- 01Provide chat interface components
- 02Show tool calls, reasoning, and plans
- 03Display multi-agent collaboration status
- 04Include request and stream debugging components
- 05Add components with a shadcn command
Use cases
- 01Build an AI chat interface for an application
- 02Display an agent's tool calls and execution plan
- 03Create a multi-agent status dashboard
- 04Inspect requests, prompts, and streamed responses
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/ai-elementsin Claude Code to confirm it loaded.
Details
From the project READMEAI 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-viewer
Discovery
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
Comments
Markdown supported