在 CopilotKit 中实现开放生成式 UIOpen-Ended Generative UI以 CrewAI Conversational Flows 集成为例【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit开放生成式 UIOpen-Ended Generative UI是 CopilotKit 生成式 UI 能力中自由度最高的一种形态Agent 不再局限于预定义的工具渲染器而是直接以 HTML CSS 编写界面再由前端把这段代理编写的网页挂载进沙箱 iframe 中运行。本文以仓库中 CrewAI Conversational Flows 集成的 QA 文档 open-gen-ui.md 为骨架结合演示源码、运行时路由与 Playwright 端到端测试完整梳理最小化开放生成式 UI的启用方式、运行链路、安全模型与自动化验证手段。读完本文你将能够在自己的 CopilotKit 应用中用几行配置复刻这一能力并理解其底层原理。从 QA 检查清单看核心验收标准该 QA 文档是全仓库自动化验证体系的组成部分它以检查清单的形式规定了开放生成式 UI 最小演示必须通过的验收标准导航到/demos/open-gen-ui页面点击3D axis visualization (model airplane)建议suggestion pill验证 Agent 流式产出open-generative-uiactivity并且沙箱 iframe 渲染出可视化内容验证沙箱 UI自动运行动画无需任何用户交互。四条标准恰好对应开放生成式 UI 的四个关键特征零预定义工具的聊天入口、Agent 生成的 HTML/CSS 走 activity 通道回传、沙箱 iframe 渲染、以及自运行self-running可视化。仓库中同时存在最小化minimal与进阶advanced两个 demo 目录本文主线聚焦 QA 文档对应的 minimal 版本最后补充 advanced 版本的能力延伸。运行链路从建议 pill 到沙箱 iframe结合演示源码 page.tsx、运行时路由 route.ts 和测试注释整条链路可以归纳为用户点击建议 pill或输入提示词CopilotChat把消息发给 AgentAgent 端流式返回一个generateSandboxedUi工具调用内含 LLM 自主编写的css、html、initialHeight与placeholderMessages运行时中间件Runtime Middleware监听该工具调用把它转换为open-generative-uiactivity 事件前端内置的OpenGenerativeUIActivityRenderer接收该事件将 HTML CSS 组合进srcdoc挂载到iframe sandboxallow-scripts中由于该活动渲染器由CopilotKitProvider自动注册页面无需注册任何自定义工具渲染器。正如 page.tsx 注释所述No custom sandbox functions, no custom tools — just chat这是该形态与声明式生成式 UI依赖前端预先注册的工具渲染器最本质的区别界面结构由 Agent 当场编写前端只负责安全地执行它。最小化前端一个 Provider 配置就够/demos/open-gen-ui的页面代码极为精简完整的前端配置如下// src/app/demos/open-gen-ui/page.tsx节选 use client; import React from react; import { CopilotKit } from copilotkit/react-core/v2; import { VISUALIZATION_DESIGN_SKILL } from ./design-skill; import { Chat } from ./chat; export default function OpenGenUiDemo() { return ( CopilotKit runtimeUrl/api/copilotkit-ogui agentopen-gen-ui openGenerativeUI{{ designSkill: VISUALIZATION_DESIGN_SKILL }} div classNameflex justify-center items-center h-screen w-full div classNameh-full w-full max-w-4xl flex flex-col p-3 Chat / /div /div /CopilotKit ); }三个关键配置项runtimeUrl/api/copilotkit-ogui指向一个专用运行时路由。该 demo 刻意把开放生成式 UI 与默认运行时隔离原因见下一节。agentopen-gen-ui指定要连接的 Agent 标识必须与运行时路由中注册的 Agent 名称一致。openGenerativeUI{{ designSkill: VISUALIZATION_DESIGN_SKILL }}向 LLM 注入视觉设计技能提示词。把openGenerativeUI传给CopilotKit的同时也激活了内置的OpenGenerativeUIActivityRenderer。聊天本体更简单chat.tsx 只做两件事调用useOpenGenUISuggestions()注入建议 pill然后渲染一个普通的CopilotChatimport { CopilotChat } from copilotkit/react-core/v2; import { useOpenGenUISuggestions } from ./suggestions; export function Chat() { useOpenGenUISuggestions(); return CopilotChat agentIdopen-gen-ui classNameflex-1 rounded-2xl /; }专用运行时路由开放生成式 UI 的隔离策略前端指向的/api/copilotkit-ogui是一个独立于默认运行时的路由。源码 route.ts 给出了明确的隔离理由因为openGenerativeUI运行时标志会在探测probe响应上全局置位openGenerativeUIEnabled: true否则会影响默认运行时上每个 demo 各自的工具注册。也就是说开放生成式 UI 是一个运行时级全局开关打开后会对所有经由该路由的 Agent 生效为了不干扰同仓库其他 demo 的工具注册仓库将其隔离到独立路由。核心配置如下// src/app/api/copilotkit-ogui/route.ts节选 const AGENT_URL process.env.AGENT_URL || http://localhost:8000; function createAgent() { return new HttpAgent({ url: ${AGENT_URL}/conversational_flows/frontend-tools, }); } const agents: Recordstring, AbstractAgent { open-gen-ui: createAgent(), open-gen-ui-advanced: createAgent(), }; export const POST async (req: NextRequest) { const copilotHandler createCopilotRuntimeHandler({ runtime: new CopilotRuntime({ agents, openGenerativeUI: { agents: [open-gen-ui, open-gen-ui-advanced], }, }), basePath: /api/copilotkit-ogui, mode: single-route, }); return await copilotHandler(req); };值得注意的细节Agent 通过HttpAgent来自ag-ui/client桥接到后端的 CrewAI 服务端点/conversational_flows/frontend-tools默认地址http://localhost:8000可用环境变量AGENT_URL覆盖openGenerativeUI: { agents: [...] }明确声明哪些 Agent 启用开放生成式 UI这是运行时中间件把generateSandboxedUi流转换为open-generative-uiactivity 的触发条件mode: single-route表示该路由采用单路由处理模式。建议 pill可预测的入口设计chat.tsx 调用的useOpenGenUISuggestions()定义在 suggestions.ts提供了四个 QA 文档中点名的基础建议标题title消息message3D axis visualization3D axis visualization (model airplane)How a neural network worksHow a neural network worksQuicksort visualizationQuicksort visualizationFourier: square wave from sinesFourier: square wave from sines建议的实现通过useConfigureSuggestions注入available: always表示建议常驻。源码注释揭示了一个工程细节message字符串同时充当 aimock 夹具fixture的确定性匹配键。在自动化测试中夹具数据d5-all.json会先于通用兜底夹具加载因此first-match-wins的顺序能让每个 pill 点击命中稳定的generateSandboxedUi工具调用而不会落入对hi的通用兜底回复。这意味着pill 文案的修改必须同步维护夹具键否则测试会退化。designSkill用提示词约束 Agent 的网页设计品味QA 文档强调的可视化必须自动动画其保障机制之一是 design-skill.ts 中定义的VISUALIZATION_DESIGN_SKILL。这段提示词替换了默认的 shadcn 风格设计技能作为generateSandboxedUi工具的 Agent 上下文注入对输出提出了硬性约束其中与本 QA 场景强相关的要点包括渲染方式几何内容优先使用内联 SVG 或canvas禁止用大量div拼形状建议 600×400 内容区、16-24px 边距用viewBoxpreserveAspectRatio保证缩放动画方式优先 CSSkeyframestransition而非 JSsetInterval循环动画用animation-iteration-count: infinite必须用 JS 时使用requestAnimationFrame用animation-delay错开相关元素教学性每个坐标轴要有标签、每个色系要有图例、要有文字标注如 Input layer、Forward pass、顶部要有标题与副标题调色板规定了语义化配色主强调色 indigo#6366f1、成功色 emerald#10b981、警示色 amber#f59e0b、错误色 rose#ef4444、中性 slate#64748b等自运行约束本 minimal 场景没有宿主侧沙箱函数明确禁止fetch、XHR、localStorage、cookie以及Websandbox.connection.remote调用场景必须自行循环或自动推进——这正是 QA 第 4 条自动动画、无需交互的提示词层保证输出契约按顺序产出initialHeight典型 480-560、2-3 行placeholderMessages、完整的css与html可访问性文本对比度 ≥ 4.5:1不单靠颜色区分序列。从代码结构可以推断这套设计技能机制是开放生成式 UI 控制输出质量的主要杠杆不写死界面但通过提示词约束界面的结构与风格。沙箱渲染与安全模型QA 第 3 条要求验证沙箱 iframe 渲染出可视化其安全实现细节在测试注释中交代得最清楚渲染器把 Agent 编写的 HTML CSS 组合进srcdoc属性测试优先断言srcdoc非空src作为回退iframe 只授予sandboxallow-scripts不授予allow-same-origin。由于沙箱 iframe 处于 null origin宿主页面无法通过contentFrame()直接窥探 iframe 内部 DOM——测试因此只断言宿主成功填入了 iframe而不检查内部 HTML 的具体正确性这样既允许 Agent 产出的脚本在 iframe 内运行实现自运行动画又切断了脚本触达宿主页面 DOM 与存储的路径构成了不可信内容在可信边界内执行的隔离模型。自动化验证Playwright 端到端测试QA 文档的验收标准由 open-gen-ui.spec.ts 自动化落实。测试文件开头的注释明确标注了对应的 QA 参考、演示源码与 aimock 夹具路径形成QA 文档 → 演示源码 → 夹具 → e2e 测试的完整可追溯链。测试覆盖两个层次1. 页面加载与 pill 可见性——断言聊天输入框可见并逐一断言四个建议 pill 可见pill 标题与suggestions.ts逐字对齐const expected [ 3D axis visualization, How a neural network works, Quicksort visualization, Fourier: square wave from sines, ];2. 点击 pill → iframe 挂载——测试辅助函数assertPillRendersIframe点击 pill 后等待iframe[sandbox*allow-scripts]出现再用轮询断言srcdoc首选或src存在且非空。四个 pillFourier、3D axis、Neural network、Quicksort各有一条独立用例整套用例超时上限为 120 秒。这里还有两个工程细节值得借鉴断言粒度刻意保守Renders something 只意味着宿主成功填充了 iframe内部 HTML 是否正确不属于本测试范围——因为 Agent 生成的 HTML 每次运行都可能不同无法做 DOM 级快照断言aimock 优先级夹具d5-all.json在feature-parity.json之前加载其 first-match-wins 顺序会优先命中与 pillmessage精确匹配的高优先级条目从而稳定产出generateSandboxedUi工具调用。能力延伸sandboxFunctions 让沙箱 UI 调用宿主能力QA 文档针对的是 minimal 形态无宿主侧函数但同目录的兄弟文档与源码展示了同一条管线的进阶能力可作为理解完整能力边界的参照。进阶 demo open-gen-ui-advanced/page.tsx 通过向CopilotKit传入openGenerativeUI{{ sandboxFunctions: [...] }}把宿主函数桥接进 Agent 生成的 iframe。以 sandbox-functions.ts 中的evaluateExpression为例宿主函数遵循名称 描述 Zod 参数 Schema handler的结构{ name: evaluateExpression, description: Safely evaluate a basic arithmetic expression on the host page and return the numeric result., parameters: z.object({ expression: z.string().describe(An arithmetic expression, e.g. 12 * (3 4.5)), }), handler: async ({ expression }: { expression: string }) { if (!/^[\d\-*/().\s]$/.test(expression)) { return { ok: false, error: Unsupported characters in expression. }; } // ... return { ok: true, value }; }, }这些函数的名称、描述与 Zod 派生 JSON Schema 会注入 Agent 上下文使其在编写 HTML/JS 时知道有哪些可用的桥生成的 iframe 内脚本通过Websandbox.connection.remote.name(args)调用处理器运行在宿主页面返回值回传给 iframe 内的调用方。进阶 e2e 测试 open-gen-ui-advanced.spec.ts 甚至驱动 iframe 内按钮验证宿主日志带[open-gen-ui/advanced]前缀与 iframe 输出元素形成完整的iframe → 宿主 → iframe往返验证。实践要点与注意事项综合 QA 文档、源码与测试在 CopilotKit 中落地开放生成式 UI 时有几个值得注意的工程要点运行时开关是全局的openGenerativeUI会在探测响应上全局置位与多个 demo 共享一个运行时路由时应像本仓库一样为开放生成式 UI 单独开辟路由前端与运行时必须同时开启前端CopilotKit传openGenerativeUI激活内置活动渲染器运行时CopilotRuntime配openGenerativeUI.agents激活流转换中间件两者缺一不可Agent 标识要一致前端agent/CopilotChat的agentId与运行时路由中注册的 Agent 名称及openGenerativeUI.agents列表必须对齐设计技能是输出质量的抓手需要特定风格教育可视化、数据看板、计算器等时通过openGenerativeUI.designSkill覆盖默认设计技能用提示词约束结构、动画、配色与自运行行为自动化验证的边界由于 Agent 输出不可枚举e2e 断言应聚焦iframes 挂载 非空 srcdoc这类管线级结果需要确定性输入时可借助 aimock 夹具让建议文案命中稳定的工具调用。QA 文档四行检查清单背后是前端最小配置 运行时全局标志 提示词约束输出 沙箱隔离执行 e2e 自动化验收一整套工程闭环。参考本仓库的 minimal 与 advanced 两个 demo 及其测试可以在自己的 CopilotKit 应用中快速复现并安全地扩展这一能力。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 CopilotKit 中实现开放生成式 UI（Open-Ended Generative UI）：以 CrewAI Conversational Flows 集成为例
在 CopilotKit 中实现开放生成式 UIOpen-Ended Generative UI以 CrewAI Conversational Flows 集成为例【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit开放生成式 UIOpen-Ended Generative UI是 CopilotKit 生成式 UI 能力中自由度最高的一种形态Agent 不再局限于预定义的工具渲染器而是直接以 HTML CSS 编写界面再由前端把这段代理编写的网页挂载进沙箱 iframe 中运行。本文以仓库中 CrewAI Conversational Flows 集成的 QA 文档 open-gen-ui.md 为骨架结合演示源码、运行时路由与 Playwright 端到端测试完整梳理最小化开放生成式 UI的启用方式、运行链路、安全模型与自动化验证手段。读完本文你将能够在自己的 CopilotKit 应用中用几行配置复刻这一能力并理解其底层原理。从 QA 检查清单看核心验收标准该 QA 文档是全仓库自动化验证体系的组成部分它以检查清单的形式规定了开放生成式 UI 最小演示必须通过的验收标准导航到/demos/open-gen-ui页面点击3D axis visualization (model airplane)建议suggestion pill验证 Agent 流式产出open-generative-uiactivity并且沙箱 iframe 渲染出可视化内容验证沙箱 UI自动运行动画无需任何用户交互。四条标准恰好对应开放生成式 UI 的四个关键特征零预定义工具的聊天入口、Agent 生成的 HTML/CSS 走 activity 通道回传、沙箱 iframe 渲染、以及自运行self-running可视化。仓库中同时存在最小化minimal与进阶advanced两个 demo 目录本文主线聚焦 QA 文档对应的 minimal 版本最后补充 advanced 版本的能力延伸。运行链路从建议 pill 到沙箱 iframe结合演示源码 page.tsx、运行时路由 route.ts 和测试注释整条链路可以归纳为用户点击建议 pill或输入提示词CopilotChat把消息发给 AgentAgent 端流式返回一个generateSandboxedUi工具调用内含 LLM 自主编写的css、html、initialHeight与placeholderMessages运行时中间件Runtime Middleware监听该工具调用把它转换为open-generative-uiactivity 事件前端内置的OpenGenerativeUIActivityRenderer接收该事件将 HTML CSS 组合进srcdoc挂载到iframe sandboxallow-scripts中由于该活动渲染器由CopilotKitProvider自动注册页面无需注册任何自定义工具渲染器。正如 page.tsx 注释所述No custom sandbox functions, no custom tools — just chat这是该形态与声明式生成式 UI依赖前端预先注册的工具渲染器最本质的区别界面结构由 Agent 当场编写前端只负责安全地执行它。最小化前端一个 Provider 配置就够/demos/open-gen-ui的页面代码极为精简完整的前端配置如下// src/app/demos/open-gen-ui/page.tsx节选 use client; import React from react; import { CopilotKit } from copilotkit/react-core/v2; import { VISUALIZATION_DESIGN_SKILL } from ./design-skill; import { Chat } from ./chat; export default function OpenGenUiDemo() { return ( CopilotKit runtimeUrl/api/copilotkit-ogui agentopen-gen-ui openGenerativeUI{{ designSkill: VISUALIZATION_DESIGN_SKILL }} div classNameflex justify-center items-center h-screen w-full div classNameh-full w-full max-w-4xl flex flex-col p-3 Chat / /div /div /CopilotKit ); }三个关键配置项runtimeUrl/api/copilotkit-ogui指向一个专用运行时路由。该 demo 刻意把开放生成式 UI 与默认运行时隔离原因见下一节。agentopen-gen-ui指定要连接的 Agent 标识必须与运行时路由中注册的 Agent 名称一致。openGenerativeUI{{ designSkill: VISUALIZATION_DESIGN_SKILL }}向 LLM 注入视觉设计技能提示词。把openGenerativeUI传给CopilotKit的同时也激活了内置的OpenGenerativeUIActivityRenderer。聊天本体更简单chat.tsx 只做两件事调用useOpenGenUISuggestions()注入建议 pill然后渲染一个普通的CopilotChatimport { CopilotChat } from copilotkit/react-core/v2; import { useOpenGenUISuggestions } from ./suggestions; export function Chat() { useOpenGenUISuggestions(); return CopilotChat agentIdopen-gen-ui classNameflex-1 rounded-2xl /; }专用运行时路由开放生成式 UI 的隔离策略前端指向的/api/copilotkit-ogui是一个独立于默认运行时的路由。源码 route.ts 给出了明确的隔离理由因为openGenerativeUI运行时标志会在探测probe响应上全局置位openGenerativeUIEnabled: true否则会影响默认运行时上每个 demo 各自的工具注册。也就是说开放生成式 UI 是一个运行时级全局开关打开后会对所有经由该路由的 Agent 生效为了不干扰同仓库其他 demo 的工具注册仓库将其隔离到独立路由。核心配置如下// src/app/api/copilotkit-ogui/route.ts节选 const AGENT_URL process.env.AGENT_URL || http://localhost:8000; function createAgent() { return new HttpAgent({ url: ${AGENT_URL}/conversational_flows/frontend-tools, }); } const agents: Recordstring, AbstractAgent { open-gen-ui: createAgent(), open-gen-ui-advanced: createAgent(), }; export const POST async (req: NextRequest) { const copilotHandler createCopilotRuntimeHandler({ runtime: new CopilotRuntime({ agents, openGenerativeUI: { agents: [open-gen-ui, open-gen-ui-advanced], }, }), basePath: /api/copilotkit-ogui, mode: single-route, }); return await copilotHandler(req); };值得注意的细节Agent 通过HttpAgent来自ag-ui/client桥接到后端的 CrewAI 服务端点/conversational_flows/frontend-tools默认地址http://localhost:8000可用环境变量AGENT_URL覆盖openGenerativeUI: { agents: [...] }明确声明哪些 Agent 启用开放生成式 UI这是运行时中间件把generateSandboxedUi流转换为open-generative-uiactivity 的触发条件mode: single-route表示该路由采用单路由处理模式。建议 pill可预测的入口设计chat.tsx 调用的useOpenGenUISuggestions()定义在 suggestions.ts提供了四个 QA 文档中点名的基础建议标题title消息message3D axis visualization3D axis visualization (model airplane)How a neural network worksHow a neural network worksQuicksort visualizationQuicksort visualizationFourier: square wave from sinesFourier: square wave from sines建议的实现通过useConfigureSuggestions注入available: always表示建议常驻。源码注释揭示了一个工程细节message字符串同时充当 aimock 夹具fixture的确定性匹配键。在自动化测试中夹具数据d5-all.json会先于通用兜底夹具加载因此first-match-wins的顺序能让每个 pill 点击命中稳定的generateSandboxedUi工具调用而不会落入对hi的通用兜底回复。这意味着pill 文案的修改必须同步维护夹具键否则测试会退化。designSkill用提示词约束 Agent 的网页设计品味QA 文档强调的可视化必须自动动画其保障机制之一是 design-skill.ts 中定义的VISUALIZATION_DESIGN_SKILL。这段提示词替换了默认的 shadcn 风格设计技能作为generateSandboxedUi工具的 Agent 上下文注入对输出提出了硬性约束其中与本 QA 场景强相关的要点包括渲染方式几何内容优先使用内联 SVG 或canvas禁止用大量div拼形状建议 600×400 内容区、16-24px 边距用viewBoxpreserveAspectRatio保证缩放动画方式优先 CSSkeyframestransition而非 JSsetInterval循环动画用animation-iteration-count: infinite必须用 JS 时使用requestAnimationFrame用animation-delay错开相关元素教学性每个坐标轴要有标签、每个色系要有图例、要有文字标注如 Input layer、Forward pass、顶部要有标题与副标题调色板规定了语义化配色主强调色 indigo#6366f1、成功色 emerald#10b981、警示色 amber#f59e0b、错误色 rose#ef4444、中性 slate#64748b等自运行约束本 minimal 场景没有宿主侧沙箱函数明确禁止fetch、XHR、localStorage、cookie以及Websandbox.connection.remote调用场景必须自行循环或自动推进——这正是 QA 第 4 条自动动画、无需交互的提示词层保证输出契约按顺序产出initialHeight典型 480-560、2-3 行placeholderMessages、完整的css与html可访问性文本对比度 ≥ 4.5:1不单靠颜色区分序列。从代码结构可以推断这套设计技能机制是开放生成式 UI 控制输出质量的主要杠杆不写死界面但通过提示词约束界面的结构与风格。沙箱渲染与安全模型QA 第 3 条要求验证沙箱 iframe 渲染出可视化其安全实现细节在测试注释中交代得最清楚渲染器把 Agent 编写的 HTML CSS 组合进srcdoc属性测试优先断言srcdoc非空src作为回退iframe 只授予sandboxallow-scripts不授予allow-same-origin。由于沙箱 iframe 处于 null origin宿主页面无法通过contentFrame()直接窥探 iframe 内部 DOM——测试因此只断言宿主成功填入了 iframe而不检查内部 HTML 的具体正确性这样既允许 Agent 产出的脚本在 iframe 内运行实现自运行动画又切断了脚本触达宿主页面 DOM 与存储的路径构成了不可信内容在可信边界内执行的隔离模型。自动化验证Playwright 端到端测试QA 文档的验收标准由 open-gen-ui.spec.ts 自动化落实。测试文件开头的注释明确标注了对应的 QA 参考、演示源码与 aimock 夹具路径形成QA 文档 → 演示源码 → 夹具 → e2e 测试的完整可追溯链。测试覆盖两个层次1. 页面加载与 pill 可见性——断言聊天输入框可见并逐一断言四个建议 pill 可见pill 标题与suggestions.ts逐字对齐const expected [ 3D axis visualization, How a neural network works, Quicksort visualization, Fourier: square wave from sines, ];2. 点击 pill → iframe 挂载——测试辅助函数assertPillRendersIframe点击 pill 后等待iframe[sandbox*allow-scripts]出现再用轮询断言srcdoc首选或src存在且非空。四个 pillFourier、3D axis、Neural network、Quicksort各有一条独立用例整套用例超时上限为 120 秒。这里还有两个工程细节值得借鉴断言粒度刻意保守Renders something 只意味着宿主成功填充了 iframe内部 HTML 是否正确不属于本测试范围——因为 Agent 生成的 HTML 每次运行都可能不同无法做 DOM 级快照断言aimock 优先级夹具d5-all.json在feature-parity.json之前加载其 first-match-wins 顺序会优先命中与 pillmessage精确匹配的高优先级条目从而稳定产出generateSandboxedUi工具调用。能力延伸sandboxFunctions 让沙箱 UI 调用宿主能力QA 文档针对的是 minimal 形态无宿主侧函数但同目录的兄弟文档与源码展示了同一条管线的进阶能力可作为理解完整能力边界的参照。进阶 demo open-gen-ui-advanced/page.tsx 通过向CopilotKit传入openGenerativeUI{{ sandboxFunctions: [...] }}把宿主函数桥接进 Agent 生成的 iframe。以 sandbox-functions.ts 中的evaluateExpression为例宿主函数遵循名称 描述 Zod 参数 Schema handler的结构{ name: evaluateExpression, description: Safely evaluate a basic arithmetic expression on the host page and return the numeric result., parameters: z.object({ expression: z.string().describe(An arithmetic expression, e.g. 12 * (3 4.5)), }), handler: async ({ expression }: { expression: string }) { if (!/^[\d\-*/().\s]$/.test(expression)) { return { ok: false, error: Unsupported characters in expression. }; } // ... return { ok: true, value }; }, }这些函数的名称、描述与 Zod 派生 JSON Schema 会注入 Agent 上下文使其在编写 HTML/JS 时知道有哪些可用的桥生成的 iframe 内脚本通过Websandbox.connection.remote.name(args)调用处理器运行在宿主页面返回值回传给 iframe 内的调用方。进阶 e2e 测试 open-gen-ui-advanced.spec.ts 甚至驱动 iframe 内按钮验证宿主日志带[open-gen-ui/advanced]前缀与 iframe 输出元素形成完整的iframe → 宿主 → iframe往返验证。实践要点与注意事项综合 QA 文档、源码与测试在 CopilotKit 中落地开放生成式 UI 时有几个值得注意的工程要点运行时开关是全局的openGenerativeUI会在探测响应上全局置位与多个 demo 共享一个运行时路由时应像本仓库一样为开放生成式 UI 单独开辟路由前端与运行时必须同时开启前端CopilotKit传openGenerativeUI激活内置活动渲染器运行时CopilotRuntime配openGenerativeUI.agents激活流转换中间件两者缺一不可Agent 标识要一致前端agent/CopilotChat的agentId与运行时路由中注册的 Agent 名称及openGenerativeUI.agents列表必须对齐设计技能是输出质量的抓手需要特定风格教育可视化、数据看板、计算器等时通过openGenerativeUI.designSkill覆盖默认设计技能用提示词约束结构、动画、配色与自运行行为自动化验证的边界由于 Agent 输出不可枚举e2e 断言应聚焦iframes 挂载 非空 srcdoc这类管线级结果需要确定性输入时可借助 aimock 夹具让建议文案命中稳定的工具调用。QA 文档四行检查清单背后是前端最小配置 运行时全局标志 提示词约束输出 沙箱隔离执行 e2e 自动化验收一整套工程闭环。参考本仓库的 minimal 与 advanced 两个 demo 及其测试可以在自己的 CopilotKit 应用中快速复现并安全地扩展这一能力。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考