Agentic UI - 面向智能体的 UI 组件库

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

✨ 什么是 Agentic UI

Agentic UI 是一种面向"思考—行动—观察"闭环的智能体交互组件库，强调任务执行全过程的协同。

核心特性

• 🤖 多步推理可视化 - 展示智能体的思考、行动、观察过程
• 🔧 工具调用展示 - 可视化工具编排与执行状态
• 👤 人在回路 - 支持人工审批、干预或纠偏
• 📊 过程透明化 - 让 AI 决策过程可见、可控、可复盘

与传统 Chat UI 的区别

| 维度 | Chat UI | Agentic UI | | ---------- | ---------- | -------------- | | 核心目标 | 回答一句话 | 完成一件事 | | 交互深度 | 单轮问答 | 端到端任务协同 | | 过程可见性 | 黑盒 | 透明化 | | 人机关系 | 被动响应 | 主动协作 |

🔄 交互范式演进

GUI vs LUI

GUI：用可视化控件逐步完成操作
LUI：用自然语言表达意图，系统解析并执行（常见为对话/命令式语言界面）

| 对比维度 | GUI（传统界面） | LUI（语言界面） | | ------------------ | ---------------------------------------- | ---------------------------------------------------------------- | | 怎么操作 | 点按钮、选菜单、填表单 | 像聊天一样用自然语言说出你的需求 | | 交互方式 | 一步步点，系统照做 | 告诉目标，系统理解并帮你完成 | | 上手难度 | 看得见的功能容易学，但界面复杂时难掌握 | 说话就行，但要说得清楚（比如"帮我订明天的会议室"比"订个会"更好） | | 功能好不好找 | 功能都摆在界面上，一目了然 | 功能藏在对话里，需要提示或例子才知道能做什么 | | 结果准不准 | 点哪打哪，结果确定 | 有时理解有偏差，可能需要你再解释一下 | | 适合什么任务 | 简单、明确的操作（如上传文件、开关设置） | 复杂或多条件的任务（如"找上周类似但更便宜的方案"） | | 出错了怎么办 | 可撤销、重试，操作步骤清晰 | 系统会问你确认，或让你修改说法 | | 能不能自动干活 | 得自己一步步点 | 一句话就能触发一连串自动操作（比如查数据+发邮件） |

关键洞察：GUI 的操作"翻译"为自然语言，仍是"人主导、系统执行一步"。

LUI vs Agentic UI

LUI 侧重"用自然语言操控界面"
Agentic UI 侧重"给目标，由智能体规划并执行，过程可见可控"

| 维度 | LUI（语言用户界面） | Agentic UI（智能体用户界面） | | -------------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | 核心理念 | "你说话，我照做"——把你的指令用自然语言说出来，系统帮你完成一步操作 | "你定目标，我来搞定"——你告诉它要达成什么目标，它自己想办法、分步骤完成，还能随时让你知道进展 | | 谁在干活？ | 主要是你在操作，系统只是帮你"翻译"语言成点击或填写。比如你说"发邮件"，它弹出草稿，但还得你点"发送" | 主要是智能体（AI助手）在干活，它会自己查资料、填表格、发消息、调工具……但关键步骤会问你："这样行吗？" | | 适合做什么？ | 简单、一次性的任务：比如"总结这篇文章""把这段话改得更正式""查一下明天天气" | 复杂、多步骤的任务：比如"帮我策划一场线上活动，包括写文案、找场地、发邀请、跟踪报名情况" | | 怎么用工具？ | 一次用一个工具，比如你说"翻译"，它就调翻译功能；你说"查数据"，它就查。不会自己组合多个工具 | 能自己决定用哪些工具、什么时候用、怎么组合。比如先查日历空闲时间，再写邮件，再发日程邀请，一气呵成 | | 你能看到过程吗？ | 通常只看到结果："好了，这是你要的摘要。"中间怎么做的？不太清楚 | 你能看到它"怎么想的""做了什么""卡在哪了"。比如："第一步我查了客户名单，第二步准备发邮件，但需要你确认模板" |

核心升级：从"语言控制界面"升级为"目标驱动的智能体协作者"。

🚀 快速开始

安装

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

基础示例：AI 对话气泡

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

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

任务列表组件

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

<TaskList
  tasks={[
    { id: 1, title: '数据查询', status: 'completed' },
    { id: 2, title: '数据分析', status: 'in_progress' },
    { id: 3, title: '生成报告', status: 'pending' },
  ]}
/>;

工具调用展示

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

<ToolUseBar
  toolName="database_query"
  status="running"
  params={{ table: 'users', limit: 100 }}
  result={{ count: 1000, data: [...] }}
/>

Markdown 编辑器（支持流式输出）

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

<MarkdownEditor
  initValue="# AI 生成内容"
  typewriter={true} // 打字机效果
  readonly={false}
/>;

🧩 完整组件列表

🤖 核心智能体组件

| 组件 | 描述 | 主要功能 | | ------------------ | ------------------ | -------------------------------------------- | | AgenticLayout | 智能体布局容器 | 提供统一的智能体应用布局结构 | | AgentRunBar | 智能体运行状态栏 | 显示运行、暂停、停止等状态控制 | | Bubble | AI/用户对话气泡 | 展示对话内容，支持 AI 和用户消息的差异化展示 | | ThoughtChainList | 思维链可视化 | 展示"思考—行动—观察"的完整推理过程 | | TaskList | 任务列表与进度跟踪 | 多步骤任务的状态管理与展示 | | ToolUseBar | 工具调用展示 | 可视化 API 调用、参数、状态与结果 | | Workspace | 智能体工作空间 | 文件管理、浏览器、实时跟踪等功能 |

✍️ 编辑与输入组件

| 组件 | 描述 | 主要功能 | | -------------------- | ---------------------- | -------------------------------------------- | | MarkdownEditor | 富文本 Markdown 编辑器 | 支持流式输出、打字机效果、完整 Markdown 语法 | | MarkdownInputField | Markdown 输入框 | 支持多模态输入、文件上传、语音输入 |

📋 布局与容器组件

| 组件 | 描述 | 主要功能 | | ---------------- | ------------ | ------------------------------------ | | ChatLayout | 聊天布局容器 | 标准聊天界面布局，支持左右栏、全屏等 | | History | 历史记录组件 | 会话历史管理，支持搜索、筛选、导出 | | WelcomeMessage | 欢迎语组件 | 应用启动欢迎语，展示功能介绍 | | Quote | 引用组件 | 引用消息或内容 |

🎯 交互与反馈组件

| 组件 | 描述 | 主要功能 | | ---------------- | ------------- | -------------------------------- | | AnswerAlert | 答案提醒组件 | 显示成功、错误、警告、加载等状态 | | BackTo | 返回顶部/底部 | 快速滚动到页面顶部或底部 | | Loading | 加载动画 | 多种样式的加载状态展示 | | SuggestionList | 建议列表 | 智能推荐问题或操作 | | ActionIconBox | 操作图标容器 | 统一的操作按钮样式 |

🧠 智能体专属组件

| 组件 | 描述 | 主要功能 | | ---------------- | -------------- | ---------------------------- | | ChatBootPage | 对话启动页组件 | 快速回复、案例推荐等引导功能 | | SchemaEditor | Schema 编辑器 | 结构化数据编辑 | | SchemaForm | Schema 表单 | 基于 Schema 自动生成表单 | | SchemaRenderer | Schema 渲染器 | 渲染结构化数据 |

🔌 插件组件

| 插件类型 | 描述 | 支持功能 | | ----------- | -------------- | ------------------------------- | | code | 代码高亮插件 | 支持 100+ 编程语言语法高亮 | | katex | 数学公式插件 | 支持 LaTeX 数学公式渲染 | | mermaid | 图表插件 | 支持流程图、时序图、甘特图等 | | chart | 数据图表插件 | 支持 ECharts 各类数据可视化图表 | | formatter | 代码格式化插件 | 自动格式化代码 |

🛠️ 工具函数与 Hooks

| 名称 | 类型 | 描述 | | -------------------- | ---- | ---------------------- | | useAutoScroll | Hook | 自动滚动到底部 | | useCopied | Hook | 复制到剪贴板 | | useLanguage | Hook | 国际化语言切换 | | useSpeechSynthesis | Hook | 语音合成（文字转语音） | | useClickAway | Hook | 点击外部区域 | | useDebounceFn | Hook | 防抖函数 | | useThrottleFn | Hook | 节流函数 |

📦 特性

• ✅ 开箱即用 - 预设样式与交互，快速集成
• ✅ TypeScript - 完整的类型定义
• ✅ 主题定制 - 基于 Ant Design 主题系统
• ✅ 响应式 - 适配桌面端与移动端
• ✅ 流式输出 - 支持打字机效果
• ✅ 多模态 - 支持文本、图像、语音
• ✅ 插件化 - 可扩展的插件系统
• ✅ 国际化 - 内置多语言支持

📖 文档与示例

• 在线演示
• 完整文档
• 组件 API
• 设计规范

🌟 推荐使用场景

• 🤖 企业 Copilot - 智能办公助手
• 💬 智能客服 - 知识检索与自动问答
• 📊 数据分析与 BI - 智能分析助理
• 🔄 流程自动化（RPA） - 协同智能体

🤝 贡献

欢迎贡献代码、报告问题或提出建议！

查看 贡献指南 了解详情。

📄 许可证

MIT License

让 AI 的思考过程透明化，让智能体真正成为你的协作伙伴 🤖