代理视图前端

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

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

设置

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

yarn install
make demo-with-mock

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

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

make demo

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

# Terminal 1
make mock-server

# Terminal 2
make demo

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

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

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

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

# 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

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

脚本

连接用户界面到AI服务

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

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

在演示中 - 打开 调试选项选择后端,粘贴一个无记名标志 单击 重新装入棋盘。见 demo/App.tsx 为何 baseUrl + 键 /api/v1 成为 URL 道具.

在你的应用中:

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 区域,用于基础客户端.

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

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

<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 代替 。 在此模式下, 模式加载其定义, 创建 ,并浏览关闭/成功页.

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:

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

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

发布 alpha 版本

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

npm run publish:alpha

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

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

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

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

国家预防机制的使用

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

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

导入组件和样式 :

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服务的工作).

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 财务报告和审定财务报表 连接用户界面到AI服务。 。 。 .