# @arbor-education/agent-view-frontend 中文文档

规范地址：https://npmcn.com/package/%40arbor-education/agent-view-frontend/

版本：1\.4\.1
npm 元数据更新时间：2026-11-05T15:37:27.099Z
中文译文更新时间：2026-11-06T18:33:47.392Z
软件包许可：UNLICENSED

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

原始 npm 页面：https://www.npmjs.com/package/%40arbor-education/agent-view-frontend
原文对照：https://npmcn.com/package/%40arbor-education/agent-view-frontend/?lang=original
项目主页：https://github.com/arbor-education/ai.agent-view-frontend#readme
源码仓库：https://github.com/arbor-education/ai.agent-view-frontend

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

- 包体积（解压后）：561 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，@arbor-education/ask-arbor-chat-panel \>=2\.0\.1，@arbor-education/design-system\.components \>=4\.0\.0
- 首次发布：2026-07-16T15:52:15.752Z
- 最新版本发布：2026-11-05T15:37:26.878Z
- 近 30 天下载量：2479（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：55（近 12 个月 55 个）

## 中文简介

Arbor AI 特工的 Kanban 式代理身份委员会

## 安装

```sh
npm install @arbor-education/agent-view-frontend
```

也可以使用：`pnpm add @arbor-education/agent-view-frontend`、`yarn add @arbor-education/agent-view-frontend`、`bun add @arbor-education/agent-view-frontend`

## README

# 代理视图前端

反应组件,支持代理MATs倡议的开发.

联合调查的目的是打击 **AI代理服务** - 不只是当地的嘲弄 服务器。 主机从其服务来源(参见演示)来组成完整的端点URL. `AgentMonitorKanban` 列出/创建这些 URL 的代理; `AgentView` 可挂载 并获取清单、资源和聊天。 两个都说 捆绑 **AI 服务 SDK** (单位:千美元)`AgentServiceClient`) (中文(简体) ). 演示船的预设 模拟,当地(`localhost:8001`)和中转后端 [连接用户界面到AI服务](https://npmcn.com/package/%40arbor-education/agent-view-frontend/#readme-wiring-the-ui-to-the-ai-service)。 。 。 .

* * *

## 设置

**所需经费:** 节点.js和雅恩.

```bash
yarn install
make demo-with-mock
```

打开 **http://localhost:4174/ (英语)**演示开始于 **后端** 模式并自动从本地模拟代理服务装入代理.

只运行演示用户界面( 没有后端- 使用) **调试选项** 切换到 Moc 数据, Sparse, 或空 :

```bash
make demo
```

或者运行模拟服务器并在单独的终端中演示:

```bash
# Terminal 1
make mock-server

# Terminal 2
make demo
```

如果您更改了模拟服务器代码, 请重新启动它, 这样演示会提取 API 更改 .

使用 **调试选项** 在工具栏中切换后端 :

| 预设 | 服务 URL | 页:1 |
| --- | --- | --- |
| **模拟服务器** | `/api/ai-agent-service` | 本地种子数据通过演示代理. 手持者证可选. |
| **当地人工智能服务** | `http://localhost:8001` | 真正的AI代理服务 在你的机器。 需要手持证物. |
| **显示 AI 服务** | `https://ai-agent-service.qa.arbor.engineering` | QA环境. 需要手持证物. |

您也可以将任何服务来源粘贴到 **服务 URL** 字段(演示) 附录 `/api/v1/…` 当构建端点 URL 道具时.

您也可以不打开调试面板而配置演示:

```bash
# Via URL query params (token is stripped from the address bar after load)
http://localhost:4174/?serviceUrl=http://localhost:3001&token=your-bearer-token

# Via environment variables (or copy `demo/.env.example` → `demo/.env`)
AGENT_SERVICE_URL=https://ai-agent-service.qa.arbor.engineering \
AGENT_SERVICE_TOKEN=your-bearer-token \
make demo
```

| 变量 | 默认 | 目的 |
| --- | --- | --- |
| `MOCK_SERVER_PORT` | `3001` | 模拟代理服务的端口 |
| `AGENT_SERVICE_PROXY_TARGET` | `http://localhost:3001` | 演示代理 `/api/ai-agent-service` |
| `AGENT_SERVICE_URL` | `/api/ai-agent-service` | 演示的初始服务 URL (在调试选项中可以覆盖) |
| `AGENT_SERVICE_TOKEN` | _(空虚)_ | 演示的初始无记名符号 |
| `PUSHER_REPOLL` | 如果按键+ 组集设置自动 | `true`编号 :`false` - 初始状态 **使用推手重投** 调试切换 |
| `PUSHER_KEY` | _(空虚)_ | 公共 Pusher 应用密钥( 客户订阅) |
| `PUSHER_CLUSTER` | _(空虚)_ | Pusher集群(如:. `eu`(中文(简体) ) |
| `PUSHER_CHANNEL_PREFIX` | `arbor-agent-` | 频道前缀; 完整频道为 `{prefix}{agent.id}` |
| `PUSHER_SECRET` | _(空虚)_ | **没有** 被浏览器所曝光——仅在本地触发脚本中使用 |
| `PUSHER_APP_ID` | _(空虚)_ | 与以上相同;服务器侧 `pusher` 软件包脚本 |

复制 `demo/.env.example` 改为 `demo/.env` 并填写Pusher证书. 调试面板只显示一个 **使用推手重投** 切换,它覆盖 `PUSHER_REPOLL` 为当前会话; 密钥、 集群和频道前缀仅通过 env 配置并传递到 `AgentMonitorKanban` 作为 `pusherKey` 编号 : `pusherCluster` 编号 : `pusherChannelPrefix`。 。 。 . `AgentView` 当设置这些道具时, 拥有 Pusher 客户端( 主机仍可注入) `subscribeToPusher` )),用于再使用已存在的客户端. 从演示根装入 Vite 加载 env; 仅向客户端曝光允许上市的一组前缀(`PUSHER_SECRET` (不包括).

* * *

## 脚本

| 命令 | 它会做什么 |
| --- | --- |
| `yarn demo` 编号 : `make demo` | 用热重装启动演示应用程序 |
| `yarn demo:with-mock` 编号 : `make demo-with-mock` | 一起启动模拟服务器 + 演示 |
| `yarn mock-server` 编号 : `make mock-server` | 启动本地 AI 代理服务模拟服务器 |
| `yarn dev` 编号 : `make dev` | 别名 `demo` |
| `yarn build` 编号 : `make build` | 图书馆的建设 `dist/` |
| `yarn test` 编号 : `make test` | 运行虚拟测试套件 |
| `yarn test:watch` 编号 : `make test-watch` | 监视模式下的维特 |
| `yarn check-types` 编号 : `make typecheck` | 类型脚本检查( 无发出) |
| `yarn lint` 编号 : `make lint` | TS/TSX的ESLint检查 |
| `yarn lint:fix` | 带有自动修正的 ESLint |
| `yarn style-lint` 编号 : `make style-lint` | SCSS 的样式林特检查 |
| `make check` | 类型检查 + lint + 测试 + 构建 |
| `make clean` | 删除 `dist` 和 Vite 缓存 |

* * *

## 连接用户界面到AI服务

图书馆组件获取 **全端点 URL** (无) `baseUrl` (原始内容存档于2013-10-12). Prop. 宿主——比如说. 演示 - 解决服务源并构建每个 URL.

-   **`AgentMonitorKanban`** - 列出代理人/定义、卡片核对表、创建代理人.
-   **`AgentView`** 独立的工作空间;获取清单、资源和聊天本身. 重新命名打开的代理( 标题) 用途 `PATCH` 关于现有 `agentUrl` —— 说 没有额外的 URL 道具 。 Kanban 卡片标题在下一个代理商列表中刷新再装入 .

**在演示中** - 打开 **调试选项**选择后端,粘贴一个无记名标志 单击 **重新装入棋盘**。见 [`demo/App.tsx`](https://npmcn.com/package/%40arbor-education/agent-view-frontend/demo/App.tsx) 为何 `baseUrl` + 键 `/api/v1` 成为 URL 道具.

**在你的应用中:**

```tsx
import { AgentMonitorKanban, AgentView } from 'agent-view-frontend';
import 'agent-view-frontend/style.css';
import '@arbor-education/design-system.components/dist/index.css';

const api = 'https://ai-agent-service.qa.arbor.engineering/api/v1';

<AgentMonitorKanban
  jwt={jwt}
  headers={{ 'X-Arbor-Application': 'agent-view' }}
  agentDefinitionsUrl={`${api}/agent-definitions`}
  agentsUrl={`${api}/agents`}
  agentUrl={`${api}/agents/:invocationId`}
  agentChecklistUrl={`${api}/agents/:invocationId/checklist`}
  agentResourcesUrl={`${api}/agents/:invocationId/resources`}
  agentTimelineUrl={`${api}/agents/:invocationId/agent-timeline`}
  agentChatUrl={`${api}/agents/:invocationId/chat`}
  agentConversationUrl={`${api}/conversations/:invocationId`}
/>;

// Or mount the workspace alone:
<AgentView
  agent={agent}
  invocationId={agent.invocation_id}
  open
  onClose={onClose}
  jwt={jwt}
  agentUrl={`${api}/agents/:invocationId`}
  agentChecklistUrl={`${api}/agents/:invocationId/checklist`}
  agentResourcesUrl={`${api}/agents/:invocationId/resources`}
  agentTimelineUrl={`${api}/agents/:invocationId/agent-timeline`}
  agentChatUrl={`${api}/agents/:invocationId/chat`}
  agentConversationUrl={`${api}/conversations/:invocationId`}
/>;
```

参数化路线取代 `:invocationId` 占位符 。 见 [AI 服务 SDK](https://npmcn.com/package/%40arbor-education/agent-view-frontend/#readme-ai-service-sdk) 区域,用于基础客户端.

### 管理信息系统外的东道主(学校采取者)

代理服务解决学校从 `X-Arbor-Application-Url`,则 `Referer`,则 `Origin`. 不是管理信息系统网页(例如门户)的主机 有一个 `Origin` 所以董事会必须亲自送信头. 过 `getMisInstances`,一个加速器像 `getToken`,返回页 用户可以打开的学校 :

```tsx
<AgentMonitorKanban
  getToken={getToken}
  getMisInstances={async ({pageNumber, pageSize}) => ({
    items: [{name: 'Ash Grove Primary', url: 'https://ash-grove.uk.arbor.sc'}],
    totalRecords: 1,
  })}
  {...endpointUrls}
/>;
```

-   `pageNumber` 以 1 为基础。 董事会要求100页,直到 `totalRecords` 因此,一个不 pagnation 的主机可以忽略 args 并返回所有 `totalRecords: items.length`。 。 。 .
-   `url` 是学校的套房目录 `homeUrl`页:1 `X-Arbor-Application-Url` 每一个请求.
-   一所学校:它被直接使用,没有显示下降.
-   几所学校:董事会头部显示学校降级,在选择代理服务之前不要求代理服务。 选择被保存在 `localStorage` 每名用户都可以从同一下架中更改,该下架为新学校重新挂载了棋盘.
-   没有学校,或 `getMisInstances` 拒绝: 显示一个空或出错状态( 带有 Retry) , 没有代理服务请求 .
-   奥米 `getMisInstances` (如管理信息系统所做的)针对现有行为。 如果 `headers` 已包含 `X-Arbor-Application-Url`。 。 。 .

### 独立 `NewAgentModal`

`NewAgentModal` 通常作为儿童 `AgentMonitorKanban` (董事会) 用品 `agentDefinitions` 还有一个 `onStart` 处理者)。 也可以搭载在 自身——例如作为服务器的 `new-agent-modal` 部件——通过 端点 URL 代替 。 在此模式下, 模式加载其定义, 创建 ,并浏览关闭/成功页.

```tsx
import { NewAgentModal } from 'agent-view-frontend';

const api = 'https://ai-agent-service.qa.arbor.engineering/api/v1';

<NewAgentModal
  open
  authToken={jwt}
  headers={{ 'X-Arbor-Application': 'agent-view' }}
  agentDefinitionsUrl={`${api}/agent-definitions`}
  agentsUrl={`${api}/agents`}
  closeUrl="/dashboard"
  viewAgentUrlPrefix="/?/agent-ui/index/agent-id"
  preselectAgent="school_trip_agents"
/>;
```

在管理信息系统内托管时 `ui:window` (或已经提供 对话框,通过 `embedded` 因此,内容使内含而不是打开一个 第二套设计-系统 Modal(其门户网站为 `document.body`:

```tsx
<NewAgentModal open embedded {...standaloneProps} />
```

| Prop | 属性 | 需求 | 目的 |
| --- | --- | --- | --- |
| `agentDefinitionsUrl` | `agent-definitions-url` | 对 | 获取代理定义列表的完整 URL . |
| `agentsUrl` | `agents-url` | 对 | POST 新代理的完整 URL . |
| `authToken` | `auth-token` | 没有 | 每一个请求都附有持枪者标志. |
| `headers` | `headers` | 没有 | 额外的信头合并到每个请求中. |
| `open` | `open` | 没有 | 模式是否打开 . |
| `embedded` | —— 说 | 没有 | 没有设计-系统 Modal 门户网站的 Render inline. |
| `closeUrl` | `close-url` | 没有 | 页面导航到模式关闭时 . |
| `successUrl` | `success-url` | 没有 | 页面导航到成功启动之后 `viewAgentUrlPrefix` 未设定. |
| `viewAgentUrlPrefix` | `view-agent-url-prefix` | 没有 | 创建后, 导航到 `{prefix}/{id}` 使用新代理 `id`。 。 。 . |
| `preselectAgent` | `preselect-agent` | 没有 | 预选定义. **临时 :** 匹配定义 `ref`,从 API 绘制 `name`。切换到 API `code` 当后端加入. 匹配时, 选定步骤显示 `Start the {display_name}` 而不是掉下来. |
| `agentContext` | —— 说 | 没有 | 公布的不透明对象不变 `agent_context` 打开 `POST /agents`。 。 。 . `AgentMonitorKanban` 接受相同的道具并转发. |

导航用途 `window.location.assign`。 。 。 . `closeUrl`编号 :`successUrl`编号 :`viewAgentUrlPrefix` 可选的—— 省去它们(和通过) `onClose`编号 :`onStart`保持模式的充分控制. `onStart` 接收 `(payload, { id })` 在成功创造之后.

* * *

## 发布 alpha 版本

确保您登录到 npm (`npm whoami`),并且是下列组织的成员: `@arbor-education` npm 组织,然后运行:

```bash
npm run publish:alpha
```

这让预发版(`0.4.x-alpha.0`, (中文(简体) ), `0.4.x-alpha.1`,并按 `alpha` dis. 必须是运行 `npm run`没有 `yarn` ——线条截取出版步骤,并会迅速获得线条证书取而代之.

版本凸起修改 `package.json` ——不承担这一改变. 在提升或合并您的公关前还原它 .

要在另一个工程中安装已公布的α :

```bash
yarn add @arbor-education/agent-view-frontend@alpha
```

* * *

## 国家预防机制的使用

安装软件包及其对等依赖 :

```bash
yarn add agent-view-frontend @arbor-education/design-system.components react react-dom
```

导入组件和样式 :

```tsx
import { AgentMonitorKanban } from 'agent-view-frontend';
import 'agent-view-frontend/style.css';
import '@arbor-education/design-system.components/dist/index.css';

function Page() {
  const api = '/api/ai-agent-service/api/v1';
  return (
    <AgentMonitorKanban
      agentsUrl={`${api}/agents`}
      agentDefinitionsUrl={`${api}/agent-definitions`}
      agentUrl={`${api}/agents/:invocationId`}
      agentChecklistUrl={`${api}/agents/:invocationId/checklist`}
      agentResourcesUrl={`${api}/agents/:invocationId/resources`}
      agentTimelineUrl={`${api}/agents/:invocationId/agent-timeline`}
      agentChatUrl={`${api}/agents/:invocationId/chat`}
      agentConversationUrl={`${api}/conversations/:invocationId`}
    />
  );
}
```

* * *

## AI 服务 SDK

该软件包为AI代理服务提供框架不可知客户端 `/api/v1/agents/*` 端点(针对本地模拟服务器或真实的AI服务的工作).

```ts
import {
  AgentServiceClient,
  createHttpChatConnectorFactory,
  mapApiAgent,
  mapApiChecklistResponse,
} from 'agent-view-frontend';

const client = new AgentServiceClient({
  baseUrl: '/api/ai-agent-service', // or 'http://localhost:3001'
  token: jwt,                       // Bearer token; "Bearer " prefix optional
});

// List / detail (mapped into the UI's Agent + checklist shapes)
const agents = (await client.listAgents()).map(mapApiAgent);
const detail = await client.getAgent(invocationId);
const checklist = mapApiChecklistResponse(invocationId, detail);

// Lifecycle
await client.createAgent('school_trip_agents');
await client.updateAgent(agentId, { invocationName: 'Year 6 trip' });
await client.pauseAgent(agentId);
await client.archiveAgent(agentId);

// Streaming chat (SSE)
const connectorFor = createHttpChatConnectorFactory(client);
const connector = connectorFor(agents[0]);
const reply = await connector.sendMessage('What have you done so far?');
```

`AgentServiceClient` 还接受 `headers` (合并为每项请求) `urls` 覆盖——相同的选项 `AgentMonitorKanban` 从它的 `headers` 财务报告和审定财务报表 `urls` 道具来.

`client.chat(agentId, request, { onEvent })` 解决最后的 SSE 事件 引用 `onEvent` 每个帧。 非-2xx回复和 `event: error` 边框 丢出一个 `AgentServiceError` 携带 `status` 和解析 `detail`。 。 。 .

演示线 **雾**, (中文(简体) ), **当地**,以及 **粘贴** 后端通过这个 SDK —— 看 [`demo/backendApi.ts`](https://npmcn.com/package/%40arbor-education/agent-view-frontend/demo/backendApi.ts) 财务报告和审定财务报表 [连接用户界面到AI服务](https://npmcn.com/package/%40arbor-education/agent-view-frontend/#readme-wiring-the-ui-to-the-ai-service)。 。 。 .

## 常见问题

### @arbor-education/agent-view-frontend 是什么？

Arbor AI 特工的 Kanban 式代理身份委员会

### 如何安装 @arbor-education/agent-view-frontend？

在项目目录运行 npm install @arbor-education/agent-view-frontend，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、@arbor-education/ask-arbor-chat-panel（\>=2\.0\.1）、@arbor-education/design-system\.components（\>=4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @arbor-education/agent-view-frontend 支持 TypeScript 吗？

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

### @arbor-education/agent-view-frontend 支持 ESM 还是 CommonJS？

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

### @arbor-education/agent-view-frontend 可以商用吗？

@arbor-education/agent-view-frontend 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @arbor-education/agent-view-frontend 的下载量有多少？

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

### @arbor-education/agent-view-frontend 还在维护吗？

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