# @burtson-labs/agent-ui 中文文档

规范地址：https://npmcn.com/package/%40burtson-labs/agent-ui/

版本：1\.0\.90
npm 元数据更新时间：2026-11-08T03:12:12.569Z
中文译文更新时间：2026-11-09T18:48:10.758Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40burtson-labs/agent-ui
原文对照：https://npmcn.com/package/%40burtson-labs/agent-ui/?lang=original
项目主页：https://github.com/Burtson-Labs/bandit-agent-framework/tree/main/packages/agent-ui#readme
源码仓库：https://github.com/Burtson-Labs/bandit-agent-framework

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：970 kB，381 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：react \>=18\.2\.0 \<20\.0\.0，react-dom \>=18\.2\.0 \<20\.0\.0，@mui/material \>=7\.0\.0，@emotion/react \>=11\.0\.0，@emotion/styled \>=11\.0\.0，@mui/icons-material \>=7\.0\.0
- 首次发布：2026-06-05T02:34:15.286Z
- 最新版本发布：2026-11-08T03:12:12.381Z
- 近 30 天下载量：1856（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：77（近 12 个月 77 个）

## 中文简介

UI原始人为"匪帮特工框架".

## 安装

```sh
npm install @burtson-labs/agent-ui
```

也可以使用：`pnpm add @burtson-labs/agent-ui`、`yarn add @burtson-labs/agent-ui`、`bun add @burtson-labs/agent-ui`

## README

[![Burtson Labs](https://cdn.burtson.ai/logos/burtson-labs-logo.png)](https://burtson.ai/)

# @ burtson-labs/ 代理人 - ii

**由"盗贼隐形"网络应用和"VS代码扩展网页视图"共享的UI原始.**

主机不可知论 反应组件——它们从运行时间消耗出一个正态的事件流,并且不知道它们是在Vite内部渲染,VS代码的网页视图,还是工作台的吊带.

* * *

## ![](https://icons.burtson.ai/svg-accent/download.svg) 安装

```bash
pnpm add @burtson-labs/agent-ui
```

Per-dependers on React 19,MUI 7和情感——主机应用程序提供. 运行时侧( 组件所消耗的事件流) 来源于 [`@burtson-labs/agent-core`](https://www.npmjs.com/package/@burtson-labs/agent-core) 或预线 [`@burtson-labs/stealth-core-runtime`](https://www.npmjs.com/package/@burtson-labs/stealth-core-runtime)。 。 。 .

## ![](https://icons.burtson.ai/svg-accent/zap.svg) 快开始

组件是纯正的——它们消耗道具而不能接触到任何宿主. 将 CSS 导入到您的应用程序根后, 然后将组件放入 :

```tsx
import {
  MarkdownMessage,
  ChatComposer,
  ChatConversation,
  PlanTree,
  DiffStream,
  TelemetryPanel,
  AgentConsole
} from "@burtson-labs/agent-ui";
import "@burtson-labs/agent-ui/styles/agent-ui.css";

function ChatPanel({ messages, onSend }) {
  return (
    <>
      <ChatConversation messages={messages} />
      <ChatComposer onSubmit={onSend} placeholder="Type a message…" />
    </>
  );
}
```

从软件包根导入 . `import` 解析到 ES 模块构建, 包只标记它的样式表作为副作用, 所以捆绑者只保留您使用的组件 : 根的一卡会添加大约 7 KB, 而不是整个库 . `require` 仍然得到共同JS的建设.

### 盒子里的东西

| 构成部分 | 它意味着什么 |
| --- | --- |
| `ChatComposer` | 多行输入 + 提交, 包括取型器、 模式切换和技能芯片 |
| `ChatConversation` | 使用助手 / 用户 / 工具 / 推理块流出信件列表 |
| `MarkdownMessage` | 单信息泡-标记下+语法突出+文件参考链接 |
| `PlanTree` | 计划+步骤树,进展状况 |
| `PlanActivity` | 每步活动种子(工具调用、 diffs 、 日志) |
| `DiffStream` | 用于拟议编辑的 Live 统一动态查看器 |
| `DiffReview/DiffReviewPanel` | 申请前多文件接受/ 拒绝 |
| `TelemetryPanel` | Token 使用量 + 每发时间; 计算一个提供者从未报告过“ 未知” |
| `UsageMeter` 编号 : `ContextMeter` | 显示未知用途且未取出栏而未报告限额的限用表 |
| `AgentConsole` | 合并聊天+计划+简易驾驶舱 |
| `PermissionCard` | 内置允许/ 拒绝写入工具执行 。 过 `status` 让主机拥有决定状态( e)`pending`, (中文(简体) ), `submitting`, (中文(简体) ), `resolved`, (中文(简体) ), `error`, (中文(简体) ), `expired`请求中从未报告过决定。 在等待时集中注意力(不滚动页面); `autoFocus={false}` 选择退出 |
| `QuestionCard` | `ask_user` 问题:无线电选项,打出答案,标签加数个问题的检讨步骤. `toUserInputResponse` 构建主机 `userInputResponse` 留言。 在不滚动页面的情况下注重挂载; `autoFocus={false}` 选择退出( 如折叠下方的演示) |
| `TaskList` | 飞行中和最近代理运行的压缩列表 |
| `BackgroundTaskTile` | 母体转生的副体活瓦 |

## ![](https://icons.burtson.ai/svg-accent/badge-check.svg) 状态

稳住 被"盗贼隐形"网络应用,"盗贼VS代码"扩展网页视图所使用,并被模拟驱动dev工作台. 打破变革需要消费者之间协调一致的公关.

## ![](https://icons.burtson.ai/svg-accent/wrench.svg) 撰写新组件

成分生活在 `src/components/`每一方应:

1.  仅控制道具——没有全球状态,没有特定主机的进口
2.  从模拟事件源工具中测试
3.  匹配现有的视觉语言( MUI 原始语, 暗/ 淡主题意识)

## 许可证

[Apache 许可证 2.0](https://npmcn.com/package/LICENSE) ——版权2026 Burtson Labs.

## 常见问题

### @burtson-labs/agent-ui 是什么？

UI原始人为"匪帮特工框架"\.

### 如何安装 @burtson-labs/agent-ui？

在项目目录运行 npm install @burtson-labs/agent-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.2\.0 \<20\.0\.0）、react-dom（\>=18\.2\.0 \<20\.0\.0）、@mui/material（\>=7\.0\.0）、@emotion/react（\>=11\.0\.0）、@emotion/styled（\>=11\.0\.0）、@mui/icons-material（\>=7\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @burtson-labs/agent-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @burtson-labs/agent-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @burtson-labs/agent-ui 可以商用吗？

@burtson-labs/agent-ui 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @burtson-labs/agent-ui 的下载量有多少？

根据 npm 官方下载统计，@burtson-labs/agent-ui 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,856 次，日均约 62 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @burtson-labs/agent-ui 还在维护吗？

最新版本 1\.0\.90 发布于 2026/11/08（1 天前）；至今共发布 77 个版本，其中过去 12 个月发布了 77 个；首次发布于 2026/06/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。