ai-elements
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseAI Elements
AI Elements
35 AI UI components across 4 subcategories. Built for Vercel AI SDK patterns.
包含4个子类别的35个AI UI组件,专为Vercel AI SDK模式构建。
Install Pattern
安装方式
bash
npx shadcn@latest add @elements/ai-{name}bash
npx shadcn@latest add @elements/ai-{name}Chat (11 components)
聊天类(11个组件)
Conversational UI primitives.
| Component | Install |
|---|---|
| Chat (full) | |
| Chat Input | |
| Message Bubble | |
| Messages | |
| Model Selector | |
| Response Actions | |
| Streaming Text | |
| Suggested Actions | |
| Temperature Slider | |
| Thinking Indicator | |
| Token Counter | |
对话式UI基础组件。
| 组件 | 安装命令 |
|---|---|
| Chat (full) | |
| Chat Input | |
| Message Bubble | |
| Messages | |
| Model Selector | |
| Response Actions | |
| Streaming Text | |
| Suggested Actions | |
| Temperature Slider | |
| Thinking Indicator | |
| Token Counter | |
Agentic (8 components)
Agent化类(8个组件)
Tool use, reasoning, and planning UI.
| Component | Install |
|---|---|
| Artifact | |
| Chain of Thought | |
| Confirmation | |
| Plan | |
| Reasoning | |
| Sources | |
| Task List | |
| Tool Call | |
工具调用、推理与规划类UI组件。
| 组件 | 安装命令 |
|---|---|
| Artifact | |
| Chain of Thought | |
| Confirmation | |
| Plan | |
| Reasoning | |
| Sources | |
| Task List | |
| Tool Call | |
Multi-Agent (8 components)
多Agent类(8个组件)
Agent orchestration and monitoring.
| Component | Install |
|---|---|
| Agent Context | |
| Agent Roster | |
| Agent Status | |
| Guardrails | |
| Handoff Chain | |
| Memory Viewer | |
| Pipeline | |
| Routing Indicator | |
Agent编排与监控类组件。
| 组件 | 安装命令 |
|---|---|
| Agent Context | |
| Agent Roster | |
| Agent Status | |
| Guardrails | |
| Handoff Chain | |
| Memory Viewer | |
| Pipeline | |
| Routing Indicator | |
Devtools (8 components)
开发工具类(8个组件)
AI debugging and inspection.
| Component | Install |
|---|---|
| Conversation Tree | |
| Latency Meter | |
| Model Info | |
| Prompt Diff | |
| Request Inspector | |
| Stream Debugger | |
| Token Viewer | |
| Tool Inspector | |
AI调试与检查类组件。
| 组件 | 安装命令 |
|---|---|
| Conversation Tree | |
| Latency Meter | |
| Model Info | |
| Prompt Diff | |
| Request Inspector | |
| Stream Debugger | |
| Token Viewer | |
| Tool Inspector | |
Quick Patterns
快速组合示例
bash
undefinedbash
undefinedChat interface
Chat interface
npx shadcn@latest add @elements/ai-chat @elements/ai-chat-input @elements/ai-message-bubble @elements/ai-messages @elements/ai-streaming-text
npx shadcn@latest add @elements/ai-chat @elements/ai-chat-input @elements/ai-message-bubble @elements/ai-messages @elements/ai-streaming-text
Agentic UI
Agentic UI
npx shadcn@latest add @elements/ai-tool-call @elements/ai-reasoning @elements/ai-plan @elements/ai-confirmation
npx shadcn@latest add @elements/ai-tool-call @elements/ai-reasoning @elements/ai-plan @elements/ai-confirmation
Multi-agent dashboard
Multi-agent dashboard
npx shadcn@latest add @elements/ai-agent-roster @elements/ai-agent-status @elements/ai-pipeline @elements/ai-handoff-chain
npx shadcn@latest add @elements/ai-agent-roster @elements/ai-agent-status @elements/ai-pipeline @elements/ai-handoff-chain
AI debugging
AI debugging
npx shadcn@latest add @elements/ai-request-inspector @elements/ai-stream-debugger @elements/ai-token-viewer
undefinednpx shadcn@latest add @elements/ai-request-inspector @elements/ai-stream-debugger @elements/ai-token-viewer
undefinedDiscovery
探索更多
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生成预填充的GitHub issue:
https://github.com/crafter-station/elements/issues/new?title=[Component%20Request]%20Add%20AI%20{Name}&labels=enhancement,ai-elements