agent-elements
开箱即用的React组件库，用于构建AI聊天和工作流界面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：agent-elements。 它的用途是：开箱即用的React组件库，用于构建AI聊天和工作流界面。 完整的 Skill 内容见：https://321skill.com/skills/agent-elements/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我创建一个AI代码助手聊天界面，需要能显示代码执行结果和文件编辑对比。”，AI会引导你使用Agent Elements，通过`npx shadcn add`命令安装`AgentChat`、`BashTool`和`EditTool`等核心组件，并提供一个集成了消息列表、输入栏和工具渲染器的完整示例代码，让你在几分钟内搭建出功能齐全的界面。
介绍
Agent Elements 是一个生产就绪的React组件库，专门用于构建AI聊天和工作流界面。它解决了开发者需要从零开始搭建复杂AI交互界面的痛点，提供了聊天外壳、工具卡片、输入栏等26个现成组件，让开发者能像搭积木一样快速组装出功能完整的AI应用。
使用方式非常便捷，它遵循 shadcn/ui 的风格，开发者可以通过简单的命令行指令，将组件直接拉取到自己的项目中。组件库与React 19、Tailwind v4和Vercel AI SDK深度集成，确保了现代技术栈的兼容性和高性能。
这个库非常适合正在使用React技术栈、并希望快速集成AI聊天、工具调用或复杂工作流界面的前端开发者和全栈开发者。无论是构建内部AI助手、客户支持聊天机器人，还是带有代码执行、文件编辑等功能的智能应用，都能从中受益。
与同类UI库相比，Agent Elements 的核心优势在于其“AI原生”的设计理念。它并非通用UI组件，而是专门为AI应用场景量身定制，深度集成了工具调用渲染、流式Markdown、澄清式提问等AI交互特有的功能，提供了开箱即用的完整解决方案，而非零散的UI元素。
核心特点
这是一个专为AI应用设计的“AI原生”React组件库，深度集成了工具调用渲染（如Bash、代码编辑、搜索）、流式响应和澄清式提问等核心AI交互模式，提供了从聊天外壳到具体工具卡片的完整、可组合的解决方案，而非通用的UI按钮或表单组件。
注意事项
该组件库要求项目必须基于React 19、Tailwind v4并已初始化shadcn，因此不适合使用其他前端框架或旧版本React/Tailwind的项目。
常见问题
Agent Elements 和 shadcn/ui 是什么关系？
Agent Elements 遵循 shadcn/ui 的安装和使用模式（通过npx shadcn add命令安装），但它是一个独立的、专门为AI应用场景设计的组件库，不是shadcn/ui的官方扩展。
它支持哪些AI模型或后端？
组件库本身是UI层，不绑定特定AI模型。它设计用于与Vercel AI SDK配合工作，因此可以兼容任何Vercel AI SDK支持的模型提供商（如OpenAI、Anthropic等）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/agent-elements/raw/index.md 读取 agent-elements 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/agent-elements/raw/index.md（查看排版版本）