关于 ai-elements
为 Vercel AI SDK 模式打造的 AI 界面组件集合，面向构建聊天、Agent 和调试界面的开发者。组件按聊天、Agent、多 Agent 和开发工具分类，可通过 shadcn 命令添加。
主要功能
- 01提供聊天界面组件
- 02呈现工具调用、推理与计划
- 03展示多 Agent 协作状态
- 04提供请求与流式响应调试组件
- 05通过 shadcn 命令添加组件
适用场景
- 01为应用搭建 AI 聊天界面
- 02呈现 Agent 的工具调用与执行计划
- 03构建多 Agent 运行状态面板
- 04检查请求、提示词和流式响应
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ai-elements确认已加载。
详细介绍
AI Elements
35 个 AI UI 组件，分为 4 个子类别。专为 Vercel AI SDK 模式打造。
安装模式
npx shadcn@latest add @elements/ai-{name}
聊天（11 个组件）
对话式 UI 基础组件。
| 组件 | 安装 |
|---|---|
| 聊天（完整） | @elements/ai-chat |
| 聊天输入框 | @elements/ai-chat-input |
| 消息气泡 | @elements/ai-message-bubble |
| 消息 | @elements/ai-messages |
| 模型选择器 | @elements/ai-model-selector |
| 响应操作 | @elements/ai-response-actions |
| 流式文本 | @elements/ai-streaming-text |
| 建议操作 | @elements/ai-suggested-actions |
| 温度滑块 | @elements/ai-temperature-slider |
| 思考指示器 | @elements/ai-thinking-indicator |
| Token 计数器 | @elements/ai-token-counter |
Agent 式（8 个组件）
工具使用、推理和规划 UI。
| 组件 | 安装 |
|---|---|
| 工件 | @elements/ai-artifact |
| 思维链 | @elements/ai-chain-of-thought |
| 确认 | @elements/ai-confirmation |
| 计划 | @elements/ai-plan |
| 推理 | @elements/ai-reasoning |
| 来源 | @elements/ai-sources |
| 任务列表 | @elements/ai-task-list |
| 工具调用 | @elements/ai-tool-call |
多 Agent（8 个组件）
Agent 编排与监控。
| 组件 | 安装 |
|---|---|
| Agent 上下文 | @elements/ai-agent-context |
| Agent 名册 | @elements/ai-agent-roster |
| Agent 状态 | @elements/ai-agent-status |
| 防护措施 | @elements/ai-guardrails |
| 交接链 | @elements/ai-handoff-chain |
| 记忆查看器 | @elements/ai-memory-viewer |
| 流水线 | @elements/ai-pipeline |
| 路由指示器 | @elements/ai-routing-indicator |
开发工具（8 个组件）
AI 调试与检查。
| 组件 | 安装 |
|---|---|
| 对话树 | @elements/ai-conversation-tree |
| 延迟计量器 | @elements/ai-latency-meter |
| 模型信息 | @elements/ai-model-info |
| 提示词差异 | @elements/ai-prompt-diff |
| 请求检查器 | @elements/ai-request-inspector |
| 流调试器 | @elements/ai-stream-debugger |
| Token 查看器 | @elements/ai-token-viewer |
| 工具检查器 | @elements/ai-tool-inspector |
快速模式
# 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
浏览
浏览 https://tryelements.dev/docs/ai-elements
找不到组件？
生成预填内容的 GitHub issue：
https://github.com/crafter-station/elements/issues/new?title=[Component%20Request]%20Add%20AI%20{Name}&labels=enhancement,ai-elements
评论
支持 Markdown