@b4run/ag-ui (英语)
为 B4. 运行时流、客户端输入、中断、活动和SSE 响应支持 AG-UI 协议翻译.
当 : 您正在为 AG- UI 客户端翻译 B4. 运行或活动快照 .
安装
pnpm add @b4run/ag-ui
要求数 @ag-ui/core 1.0.2和1.0.2 (中文(简体) ) @b4run/sdk (匹配的 B4. run 发布,用于共享内容- 部分类型),两者都依赖关系. @ag-ui/client >=1.0.1 <2.0.0 是一个可选的对等点.
示例
import { fromRunAgentInput, toAguiEvents } from "@b4run/ag-ui"
import { agUiContentType, encodeAgUiEvent } from "@b4run/ag-ui/sse"
const b4Input = fromRunAgentInput(runAgentInput)
const accept = request.headers.accept
response.writeHead(200, { "content-type": agUiContentType(accept) })
for await (const event of toAguiEvents(b4Chunks, { threadId, runId })) {
response.write(encodeAgUiEvent(event, accept))
}
accept 选择 AG- UI HTTP 绑定: SSE 除非信头承认 application/vnd.ag-ui.event+proto 带有正质量(名称,或通过通配符,例如 */*),再由4字节的大-endian长度前缀原生取出. 无法读取 protobuf 名的客户端 text/event-stream· ; @ag-ui/client 和副驾驶Kit做.
计划活动快照在根地上翻译;在准确的识别资料和有效载荷合同中使用重点突出的API参考。 AG-UI 1.0的副剂 SUBAGENT_STARTED/FINISHED/ERROR 儿童所做的一切 都会像普通事件一样被释放出来 subagentRunId。 。 。 .
内建规划一出. A 类 writeTodos 计划活动被排放的呼号不会 TOOL_CALL_* 事件,与模型的工具调用标识相关, task 列入,保持不变。 该规则未打开,所以当活动无法产生时,普通工具事件会被保留. 因此,没有登记活动的客户不认为 writeTodos:活性快照是它的犬形表面.
简化工具调用参数
A 类 tool_call_args 块与 data: { id, name, delta } 携带一个碎片
根工具调用时的参数 tool_call 发布。 第一个
以 TOOL_CALL_START; 每个非空
片段为一 TOOL_CALL_ARGS 三角洲; 公告,仍然带有
完全输入,释放任何三角洲没有覆盖,然后
TOOL_CALL_END三角洲与单三角洲a的结合
非流式调用载体,所以一个附带它们的客户端 逐字看到相同的
辩论JSON的方式。 A 类 tool_call 没有之前的碎片拿走
单德尔塔路径不变。 运行完成、 中断和错误结束任何
流式呼叫仍然打开。 两个管弦乐工具从不流出.
示范信息框架
模型标志可以包括 messageId 和他们的字符串一起 dataA级
message_end 块与 data: { messageId } 结束源消息。 这个
翻译器为每个源和路由互通分配 AG- UI 消息ID
内容独立,包括嵌入式模型调用并行工具内.
空模型不会产生短信 。 运行完成、 中断和错误
关闭任何剩余的打开信件.
每个 TOOL_CALL_START 携带 parentMessageId: 模型的AG-UI标识
消息,宣布电话。 A 类 tool_call (或 tool_call_args) 块名
其模式 data.messageId其标志所携带的身份
call 的父词是引用文本所用的标识,或者在引用文本时使用新的标识
引用只是所谓的工具。 构建事件消息列表的客户端
并有一个
用于只使用工具的助手消息。 没有身份的电话加入
在他们面前的匿名文本, 直到结果结束模型转折.
eventsFromState 重复播放的文件呼叫方式相同, 在检查点下
相声的ID.
匿名信使在工具事件时保留其隐含的界限并运行结束.
CLI通过流程中块、NDJSON和活转来携带身份
示意图. Raw Agent 协议 SSE 保留其现有的字符串 chunk 有效载荷;
使用 AG- UI 当消耗独立设置的模型消息时 .
信件身份不重复图检点重放重复的工作. 在批准后操作前, 在一个单独的工具步骤中完成生成 当生成的反应在恢复时不得重复.
HTTP 客户端
@b4run/ag-ui/client 出口 B4HttpAgent,一个 @ag-ui/client HttpAgent
谁 getCapabilities() 读取 GET /agui/{routeId},路线的AG-UI
包含代理服务器的 URL、信头和 fetch注册
无论你在哪里登记 HttpAgent; 副驾驶 小杰的运行时间报告什么
返回从 /info它会给出一个非-2xx的答案. @ag-ui/client 是一个
可选对等依赖,仅此子路径需要.
import { B4HttpAgent } from "@b4run/ag-ui/client"
const agent = new B4HttpAgent({ url: "http://127.0.0.1:3001/agui/%2Fchat%23agent" })
responseSchema jSON Schema 路线的最终答案必须匹配: 代理
每跑一次就发出来 forwardedProps.responseSchemaB4. 运行绑起它
路由模型作为提供者的结构输出. 工具呼叫转弯
不受影响。 路径必须允许密钥进入 server.agui.clientForwardedProps。 。 。 .
forwardIdentity({ headers, resolve, fetch? }) 返回 a fetch (单位:千美元)
服务器端客户端, 代表浏览器与 B4. 运行, 例如
副驾驶 Kit跑道路线. 每个电话都删掉 headers 从
随你怎么说(副驾驶) Kit 复制了浏览器 authorization 财务报告和审定财务报表
x-* 浏览器可以自行发送,然后设置
数值 resolve() 返回当前请求,或返回时无此请求
undefined。 。 。 . resolve 运行每个呼叫,因为经纪人和跑者共享
从请求范围状态读取呼叫器,例如:
AsyncLocalStorage。通过相同的 fetch 改为 B4HttpAgent 转至
createB4AgentRunner,所以运行和线程重放 都携带它。 已导出
从 ./client 财务报告和审定财务报表 ./copilotkit-runtime。 。 。 .
import { B4HttpAgent, forwardIdentity } from "@b4run/ag-ui/client"
const fetch = forwardIdentity({
headers: ["x-b4-visitor"],
resolve: () => {
const visitorId = visitorContext.getStore()?.visitorId
return visitorId === undefined ? undefined : { "x-b4-visitor": visitorId }
},
})
const agent = new B4HttpAgent({ url, fetch, responseSchema })
活动构成部分
@b4run/ag-ui/react 反应活动包 : TurnActivity 使简单语言(摘要行和步骤列表,为子剂嵌入), ApprovalCard 使一个已停放的站台中断,并排行Step, (中文(简体) ), StepGroup, (中文(简体) ), PlanStep, (中文(简体) ), ReasoningStep, (中文(简体) ), SubagentStep)和构件(Disclosure, (中文(简体) ), StepIcon, (中文(简体) ), StatusText, (中文(简体) ), Checklist为自定义步骤而导出。 部件采用普通道具 @b4run/ag-ui/view (单位:千美元)reduceTurns),条目没有副驾驶Kit依赖。 在CopilotKit聊天中,下面的连接器将它接通:
import "@b4run/ag-ui/styles.css"
import { B4Activity, useB4ChatSlots } from "@b4run/ag-ui/react/copilotkit"
import { CopilotChat, CopilotKit } from "@copilotkit/react-core/v2"
function Chat() {
return <CopilotChat {...useB4ChatSlots()} />
}
export default function Page() {
return (
<CopilotKit runtimeUrl="/api/copilotkit" useSingleEndpoint={false}>
<B4Activity>
<Chat />
</B4Activity>
</CopilotKit>
)
}
副驾驶 Kit 连接器
@b4run/ag-ui/react/copilotkit 是进口的唯一条目 @copilotkit/react-core;它需要一个捆绑器(CopilotKit的捆绑导入了自己的CSS),所以从捆绑的Reactapp中导入,而不是从节点或边缘运行时间中导入.
B4Activity覆盖您的聊天: 它隐藏了 CopilotKit 的通用工具行, 使一个ApprovalCard每个停放中断, 并保持线的转动流 从代理的事件;labels, (中文(简体) ),hiddenTools财务报告和审定财务报表renderStep每个工具重写、隐藏或重交步骤.renderInChat(默认)true)让副驾驶 把批准卡放进去<CopilotChat>,在留言后;renderInChat={false}让他们在之后B4Activity代之以孩子们,一个有自己笔录的主持人.useB4ActivityContext()返回转弯,labels, (中文(简体) ),renderStep和时钟B4Activity提供聊天室外的主机UI, 如地图或副工作表; 它向外扔B4Activity。 。 。 .useB4ChatSlots()返回要传播的道具<CopilotChat>: 每转一行TurnActivity(该回合的第一个助理信息带有工具呼叫,在它有一些文本之后,保持每个回合的呼号),没有工具栏,没有工具栏下的工具栏,也没有单独的推理栏,用于一个回合TurnActivity已经显示出这种推理.mergeTurnMessages这是transformMessages函数useB4ChatSlots()安装 : 它保留了该回合的第一个助理消息, 包含工具调用, 文本与否, 作为活动行并移动该回合的后继调用到它上. 后来调用消息保留了它的文本而不用调用,后来只使用工具的信息被丢弃,副代理信息被丢弃(他们的文本生活在被嵌入的转弯中).useB4Turns()是代理人的线程作为转弯( t)reduceTurns+) 加上 (中文(简体) )markResuming()在发送履历前打电话clearResuming()当恢复请求失败时, 忘记它.
B4Activity 拥有 CopilotKit 中各有一个插槽的部分 :
- 副驾驶Kit有一个中断插槽. 又一个
useInterrupt默认值renderInChat同一应用程序的任何地方都取代了B4.run的核准卡. - 通关卡
useRenderTool({ name: "*" })注册是最后的胜利,从未移除,所以也不要打电话useDefaultRenderTool()。 。 。 . - 核准支助
approvals.grants: "off"只有这个 副驾驶Kitresolve(payload)仅载有决定,因此在复会时从未重复给予中断的许可"optional"或者说"required"服务器以 409 回复了简历 .
react 财务报告和审定财务报表 @copilotkit/react-core (单位:千美元)>=1.76.0)是可选的同伴依赖关系,仅供 ./react 财务报告和审定财务报表 ./react/copilotkit 子路径; 只 ./react/copilotkit 导入 CopilotKit 。 导入根或 ./sse 条目从不加载它们,所以只安装服务器的消费者不会额外安装. 楼层跟踪电线协议:1.76.0是第一个 @copilotkit/react-core 其捆绑的AG-UI客户端会说1.0,协议B4.run服务,更早的发布会解析出一个前1.0 @ag-ui/* (0.59, 1.70–1.75) (中文(简体) ). pnpm 警告一个未满足的可选对等点; npm 7+ 拒绝它 ERESOLVE。 。 。 .
角活性工具包
@b4run/ag-ui/angular 与Angular 22 或以后的相同:, OnPush 包含信号输入的组件(<b4-turn-activity>, (中文(简体) ), <b4-approval-card>,步骤行,如 <li b4-step>与反应包相同的DOM合同 @b4run/ag-ui/view 值,用同一张工作表来排序。 两个连接器把它们放在聊天:
-
@b4run/ag-ui/angular/events取任何 AG- UI 事件流( 一个 RxJS)Observable<BaseEvent>,或任何与相同的东西subscribe),没有"副驾驶Kit"——你自己的笔录,或者另一个聊天框架的每个消息槽:provideB4Turns折成一个B4TurnsStore, (中文(简体) ),<b4-message-activity>使第一个助理信息(消息携带其工具呼叫为toolCalls: { id }[]或者说toolCallIds: string[]),以及<b4-approvals>使停放的卡中断批准卡.toResumeEntries(decisions, interrupts)从@b4run/ag-ui/view把牌的决定变成跑步resume一旦决定每一次停放中断, 响应每笔赠款在metadata.grant数字 :const parked = pendingApprovals(store.turns(), store.labels).map((card) => card.approval) const result = toResumeEntries(decisions, parked) if (result.ok) await agent.runAgent({ resume: result.entries }) -
@b4run/ag-ui/angular/copilotkit驱动副驾驶 Kit 的<copilot-chat>(单位:千美元)@copilotkit/angular>=0.5.3,唯一进口它的角条目:provideB4Activity跟着聊天的代理人转弯,然后B4ActivityAssistantMessageComponent, (中文(简体) ),B4ActivityReasoningMessageComponent财务报告和审定财务报表B4ActivityApprovalsComponent去谈吧[assistantMessageComponent], (中文(简体) ),[reasoningMessageComponent]财务报告和审定财务报表[messageViewChildrenComponent]。推理信息使副驾驶 Kit自己的一行 除了推理 转弯的活动已经显示,如React的useB4ChatSlots已经.
import { Component, inject } from "@angular/core"
import { CopilotChat } from "@copilotkit/angular"
import {
B4ActivityApprovalsComponent,
B4ActivityAssistantMessageComponent,
B4ActivityReasoningMessageComponent,
B4ActivityStore,
provideB4Activity,
} from "@b4run/ag-ui/angular/copilotkit"
@Component({
selector: "app-chat",
imports: [CopilotChat],
providers: [provideB4Activity({ agentId: "default" })],
template: `<copilot-chat agentId="default"
[assistantMessageComponent]="assistant"
[reasoningMessageComponent]="reasoning"
[messageViewChildrenComponent]="approvals" />`,
})
export class ChatComponent {
readonly activity = inject(B4ActivityStore) // created with the chat, so it sees every event
readonly assistant = B4ActivityAssistantMessageComponent
readonly reasoning = B4ActivityReasoningMessageComponent
readonly approvals = B4ActivityApprovalsComponent
}
装入工作表一次, 例如在 angular.json是因为 styles (单位:千美元)"@b4run/ag-ui/styles.css") (中文(简体) ). @angular/core, (中文(简体) ), @angular/common, (中文(简体) ), @angular/platform-browser (单位:千美元)^22.0.0和 @copilotkit/angular 是可选的对等依赖;其他条目从不加载。 以 Angular 部分编译格式的 Angular 条目船, 您的 Angular CLI 构建链接 .
样式
装有 B4. run 的可选样式表的外观特征的邮轮. 每一条规则都包含在内 @layer b4-activity,所以任何没有层次的应用程序 CSS 在没有特定游戏的情况下获胜. 没有样式表,组件会渲染结构化的,没有样式的标记.
import "@b4run/ag-ui/styles.css"
要重作样式, 请覆盖您 CSS 中的设计符号 :
:root {
--b4-activity-radius-card: 8px;
--b4-activity-font-mono: "JetBrains Mono", monospace;
}
调色符是值得注意的 :root 块在黑暗中获胜
模式,所以单一的硬编码颜色适用于两个主题——取值
工作在每张工作表上,或者按照工作表的方式,在主机的黑暗中
选择器 :
:root {
--b4-activity-running: #6d28d9;
}
.dark,
[data-theme="dark"],
:root[data-b4-theme="dark"] {
--b4-activity-running: #a78bfa;
}
设计标志是 --b4-activity- 加号 surface, (中文(简体) ), surface-alt, (中文(简体) ), border, (中文(简体) ), text, (中文(简体) ), muted, (中文(简体) ), running, (中文(简体) ), running-bg, (中文(简体) ), complete, (中文(简体) ), failed, (中文(简体) ), failed-bg, (中文(简体) ), primary, (中文(简体) ), on-primary, (中文(简体) ), radius, (中文(简体) ), radius-card, (中文(简体) ), radius-pill,以及 font-mono。 。 。 .
把控制器放进无层CSS 尾风 @theme 块不是替换: 已声明该工作表丢失的符号值.
光明和黑暗的价值 船出盒子。 黑暗跟随主机,而不是OS: a .dark 或者说 [data-theme="dark"] 祖先选择它; 设置 data-b4-theme="dark" 或者说 data-b4-theme="light" 将根元素加成一,或 data-b4-theme="auto" 接下来 prefers-color-scheme。所有三个表的标志块都被包裹在 :where(),所以它们没有任何特殊性 和你自己的 :root 块在每个主题中获胜,以浏览器先解析的工作表为准.
除了纪念品外,该套套装还有稳定的课(.b4-turn, (中文(简体) ), .b4-step, (中文(简体) ), .b4-approval 联合国 __ (编)和 data-state编号 :data-kind 属性,因此无层次的应用程序CSS可以瞄准任意部分. 对于细节需要自己观点的一步,通过 renderStep (每个工具)到 B4Activity 或者说 TurnActivity;对于完全不同的演示文稿,以 reduceTurns 从 ./view 和块 ./react 出口.
无框架视图
@b4run/ag-ui/view 没有反应的客户端的一半 : reduceTurns(view, event) 将 AG- UI 事件折叠成线程的转折 — 工具步骤 b4.step 标签、计划、推理、嵌入式副剂转接,以及附在呼叫门上的批准 stepLabel编号 :groupSteps 将步骤变成句子. ./react 财务报告和审定财务报表 ./angular 在此基础上更进一步;任何其他框架也是如此.
import { EMPTY_TURNS, reduceTurns } from "@b4run/ag-ui/view"
let view = EMPTY_TURNS
for (const event of events) view = reduceTurns(view, event)
运行时间和稳定性
@b4run/ag-ui是一个支持的,边缘安全的整合表面.@b4run/ag-ui/sse是一个支持的,边缘安全的整合表面.@b4run/ag-ui/client是一个支持的,边缘安全的整合表面.@b4run/ag-ui/view是一个支持的,边缘安全的整合表面,没有反应依赖.@b4run/ag-ui/react是一个支持的 React 应用程序表面,为浏览器捆绑而构建. B4. 运行记录为node-only,这只意味着它没有通过 B4.run 的边缘安全警卫——而不是它需要节点: React 自己的 JSX 运行时间读取process.env.NODE_ENV,但更严格的边后卫拒绝。 其他条目从不装入.@b4run/ag-ui/react/copilotkit是支持的 React 应用程序表面记录为browser-only:它进口了CopilotKit,后者的捆绑进口了自己的CSS,所以它需要一个捆绑机. 浏览器捆绑:从捆绑的React app导入,而不是从节点或边缘运行时间导入. 其他条目从不装入.@b4run/ag-ui/angular, (中文(简体) ),@b4run/ag-ui/angular/events财务报告和审定财务报表@b4run/ag-ui/angular/copilotkit被支持角应用表面记录为browser-only:它们以Angular的部分编译格式发运,一个Angular所建的链接器完成(一个平地节点导入失败,因为缺少Angular的JIT编译器). 从使用 Angular CLI 构建的 Angular 应用程序导入它们. 其他条目从来不装入.@b4run/ag-ui/copilotkit-runtime是一个支持的应用程序表面,记录为edge-safe数字 :createB4AgentRunner(InMemoryAgentRunner, options)扩展路线经过的“副驾驶 Kit 跑者”类别( 该条目从未导入)@copilotkit/runtime; 它只导入rxjs,经常依赖,并使用fetch),所以它运行在你的"副驾驶Kit"运行路线运行的地方,节点或边缘运行时间. 它属于服务器,在那个路线旁边。 其他条目从不装入.@b4run/ag-ui/styles.css是一个支持的集成表面,带有两个包的默认外观. 它是一个样式表资产,所以它根本没有运行时间分类:一个捆绑器解决了它,没有任何东西把它评价为JavaScript. 与您的全局 CSS 一起导入一次; 它是可选的, 每个样式元素的规则都会被范围化到b4-activity前缀( 工作表也声明)--b4-activity-*自定义属性在:root这三个街区的每一个都围着:where()因此,一个应用程序自己的:root胜负总是会赢的).
他们翻译协议数据;他们不认证呼叫者或使客户提供的国家权威.
相关
- AG-UI API 参考文献 精确的适配器、活度和制造器合同.
- AG-UI 和网络客户端 ——客户和运输设置.
- 代理协议 —— B4. 运行时间终点基础.
成熟和支持
B4.run为1.0前置,其公用地表可以改变. 所有可公布的 B4. 运行包作为一个固定组一起发布; 审查 @b4run/ag-ui 更改日志 财务报告和审定财务报表 升级指南 升级前。 用于支持, 使用 GitHub 讨论; 报告缺陷 GitHub 问题。 。 。 .
许可证
麻省理工学院. 见 仓库许可证。 。 。 .