@ant-design/agentic-ui

Agentic UI

面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力。

从“回答一句话”到“完成一件事”——让智能体真正成为你的协作伙伴。

✨ 特性

• 🤖 多步推理可视化 - 清晰展示智能体的“思考—行动—观察”完整链路
• 🔧 工具调用展示 - 可视化 API 调用、参数传递与执行结果
• 🧠 智能体协同 - 支持任务分解、进度跟踪与人在回路（Human-in-the-loop）交互
• 📝 流式 Markdown - 支持打字机效果、数学公式、代码高亮与多模态输入
• 🎨 开箱即用 - 基于 Ant Design 体系，提供完整的 TypeScript 类型定义
• 🔌 插件化架构 - 灵活扩展图表、公式、代码格式化等能力

📦 安装

推荐使用 npm 或 pnpm 进行安装：

npm install @ant-design/agentic-ui
# 或
pnpm add @ant-design/agentic-ui
# 或
yarn add @ant-design/agentic-ui

🚀 快速开始

基础示例：AI 对话气泡

展示一个包含思维链（Thought Chain）的 AI 回复气泡：

import { Bubble } from '@ant-design/agentic-ui';

export default () => (
  <Bubble.AIBubble
    content="我已经完成了数据分析，这是结果："
    thoughtChain={[
      { type: 'thought', content: '首先需要查询数据库' },
      { type: 'action', content: '执行 SQL 查询' },
      { type: 'observation', content: '获取到 1000 条记录' },
    ]}
  />
);

🧩 组件概览

🤖 核心智能体组件

组件	描述
Bubble	对话气泡，支持 AI（带思维链）和用户模式
ThoughtChainList	独立展示智能体的“思考—行动—观察”推理过程
TaskList	任务列表，展示多步骤任务的状态（进行中、完成、等待）
ToolUseBar	工具调用状态栏，展示 API 调用详情
AgenticLayout	智能体应用的标准布局框架
Workspace	包含文件管理、浏览器预览的智能体工作台

✍️ 编辑与输入

组件	描述
MarkdownEditor	支持流式输出、插件扩展的 Markdown 编辑器
MarkdownInputField	支持多模态（语音、文件）的输入框
SchemaForm	基于 Schema 自动生成的表单组件

🎯 交互与反馈

组件	描述
SuggestionList	下一步操作或问题的建议列表
WelcomeMessage	应用启动时的欢迎语引导
History	会话历史记录管理
AnswerAlert	用于展示结果状态的提示组件

💡 设计理念

Agentic UI 旨在解决传统 Chat UI 在处理复杂任务时的局限性。

维度	Chat UI (LUI)	Agentic UI
核心目标	回答一句话	完成一件事
交互深度	单轮问答	端到端任务协同
过程可见性	黑盒（只看结果）	透明化（可见思考与工具调用）
人机关系	被动响应	主动协作

我们不仅提供界面控件，更提供一种面向过程的交互范式，让用户理解 AI 的决策逻辑，从而建立信任并进行有效协作。

⌨️ 本地开发

克隆仓库并安装依赖：

git clone [e-mail]:ant-design/agentic-ui.git
cd agentic-ui
pnpm install

启动文档站点进行预览：

pnpm start
# 访问 http://localhost:8000

运行测试：

pnpm test

构建产物：

pnpm build

🤝 贡献

欢迎参与共建！请查阅 贡献指南 了解如何提交 Pull Request 和报告 Issue。

🔗 相关资源

• 在线文档
• Ant Design

📄 许可证

MIT