Back to Details

ai-elements

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

AI 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.
ComponentInstall
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
对话式UI基础组件。
组件安装命令
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)

Agent化类（8个组件）

Tool use, reasoning, and planning UI.
ComponentInstall
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
工具调用、推理与规划类UI组件。
组件安装命令
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类（8个组件）

Agent orchestration and monitoring.
ComponentInstall
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
Agent编排与监控类组件。
组件安装命令
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)

开发工具类（8个组件）

AI debugging and inspection.
ComponentInstall
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
AI调试与检查类组件。
组件安装命令
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

快速组合示例

bash
undefined
bash
undefined

Chat 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
undefined
npx shadcn@latest add @elements/ai-request-inspector @elements/ai-stream-debugger @elements/ai-token-viewer
undefined

Discovery

探索更多

Browse https://tryelements.dev/docs/ai-elements
浏览 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
生成预填充的GitHub issue:
https://github.com/crafter-station/elements/issues/new?title=[Component%20Request]%20Add%20AI%20{Name}&labels=enhancement,ai-elements