尧图网站建设 
CopilotKit 与 CrewAI Conversational Flows 集成之 Agentic Chat 深度测试与验证指南【免费下载链接】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本篇文章围绕 CopilotKit 开源仓库中 CrewAI Conversational Flows 集成示例的agentic-chatAgentic Chat演示页面展开完整解析其 QA 测试清单qa/agentic-chat.md所覆盖的前后端功能点并结合前端组件、Next.js 运行时路由、Python FastAPI 后端与 Playwright 端到端测试源码逐项说明验证什么、为什么这样验证、底层如何实现。读完本文你将掌握针对一个CopilotChat最小可运行示例含建议快捷键、前端工具、工具渲染、Agent 上下文的完整验收方法并能对照仓库源码定位每一步测试背后的真实实现。背景Agentic Chat 在集成示例中的定位在showcase/integrations/crewai-conversational-flowsCrewAI Conversational Flows 集成示例中agentic-chat是所有对话类演示的最小可运行范本。该集成与同仓库的crewai-crews是同前端、异后端的姊妹列前端 React 源码保持一致后端执行路径改为 CrewAI 官方公开的 Conversational Flows API详见 PARITY_NOTES.md。根据集成清单 manifest.yaml 中agentic-chat条目route: /demos/agentic-chat描述为 Natural conversation with frontend tool execution该页面是探索整条集成链路正确性的第一站。端到端测试文件 tests/e2e/agentic-chat.spec.ts 开头的注释也点明了它的契约定位Agentic Chat is the minimum-viable CopilotChat demo: a tiny page that wrapsCopilotChatplus three starter-prompt suggestions. The contract here is vanilla chat works end-to-end — anything richer belongs in dedicated demos (frontend-tools, tool-rendering, etc.).也就是说Agentic Chat 验证最朴素的聊天端到端可用更复杂的能力前端工具、工具渲染、Agent 上下文等由专门演示验证。本文的 QA 清单在基础对话之外还覆盖了这些能力因此在逐项验证时需要把对应功能的源码依据也一并说明。一、前置条件部署与健康检查QA 清单的第一步是确认环境就绪共两条Demo 已部署且可访问本地开发环境运行pnpm dev即可同时拉起前端与后端。查看 package.json 的dev脚本concurrently next dev --turbopack PYTHONPATH. python -m uvicorn agent_server:app --host 0.0.0.0 --port 8000 --reload前端运行在 3000 端口Python 后端FastAPI运行在 8000 端口。Agent 后端健康检查 /api/health健康检查存在两条路径互为印证Python 后端自身提供/health端点由 agent_server.py 中的HealthMiddleware直接返回{status: ok}与任何 Agent 端点解耦前端运行时路由 src/app/api/copilotkit/route.ts 的GET处理器会以 3 秒超时探测${AGENT_URL}/healthAGENT_URL默认http://localhost:8000返回agent_url与agent_status: reachable | error (...)。这也解释了 QA 清单为什么把Agent 后端健康列为硬性前置前端运行时本身是一个代理层后端不健康时所有对话请求都会失败。二、测试环境Playwright 配置与运行方式QA 清单的手工步骤可以由端到端测试自动执行。集成示例的 playwright.config.ts 关键配置如下testDir: ./tests/e2e测试目录为 tests/e2ebaseURL: http://localhost:3000默认访问本地前端webServerCI 之外由 Playwright 自动执行pnpm dev并等待 3000 端口就绪每个请求携带X-AIMock-Context: crewai-conversational-flows头用于区分同仓库不同集成列的测试夹具mock 数据。执行方式为pnpm test:e2e。对应自动化用例见 agentic-chat.spec.ts它覆盖了页面加载与三条建议可见输入并回车获得回复点击建议获得回复多轮对话保持上下文四个场景与下文 QA 清单互为印证。三、测试步骤 1基本功能验证3.1 页面加载与输入框进入agentic-chat演示页聊天界面应加载出文本输入框占位符为 Type a message。源码依据在 src/app/demos/agentic-chat/page.tsx页面用CopilotKit runtimeUrl/api/copilotkit agentagentic_chat包裹CopilotChat agentIdagentic_chat /占位符是CopilotChat内置默认文案。Playwright 侧用page.getByPlaceholder(Type a message)断言其可见性。3.2 背景容器可见与默认颜色QA 清单要求验证背景容器data-testidbackground-container可见且默认背景色为主题默认rgb(250, 250, 249)。需要说明的是agentic-chat页面源码本身只渲染CopilotChat并不包含背景容器该data-testid实际出现于同列的frontend-tools演示对应 QA 文档 qa/frontend-tools.md。在frontend-tools中背景容器的实现是 src/app/demos/frontend-tools/background.tsx其真实data-testid为frontend-tools-background默认背景为#4f46e5纯靛蓝并非rgb(250, 250, 249)。因此验证此条目时应结合frontend-tools演示执行进入/demos/frontend-tools断言背景容器可见、初始内联样式包含#4f46e5对应 tests/e2e/frontend-tools.spec.ts 中的 background container starts with the solid indigo default 用例。3.3 发送基础消息并获得回复发送 Hello 后Agent 应以文本消息回复。这一条验证的是完整链路浏览器 →/api/copilotkit运行时 → Python 后端/conversational_flows/chat→ CrewAI Flow → LLM 流式返回。前端将agentic_chat代理到后端在 route.ts 中createAgent()默认构造HttpAgent({ url:${AGENT_URL}/conversational_flows/${feature}})agentic_chat属于agentNames中的默认别名未做专属路由覆盖因此指向/conversational_flows/chat。后端由 agent_server.py 遍历 conversational_flows.py 的CONVERSATIONAL_FLOW_TYPES注册表为每个 Flow 注册/conversational_flows/{feature}端点conversationalTrue。chat对应的实现是 src/agents/chat_flow.py 的PromptedChatFlow其chat()方法通过litellm的acompletion模型openai/gpt-5.4调用copilotkit_stream流式输出并把返回消息追加到状态。自动化断言见 agentic-chat.spec.ts填充 Say hello in one word. 后回车等待[data-testidcopilot-assistant-message]出现。四、测试步骤 2功能专项检查4.1 建议SuggestionsQA 清单要求验证两条建议按钮Change background 与 Generate sonnet。需要注意实际agentic-chat页面的建议由 src/app/demos/agentic-chat/suggestions.ts 通过useConfigureSuggestions注册内容是suggestions: [ { title: Write a sonnet, message: Write a short sonnet about AI. }, { title: Tell me a joke, message: Tell me a one-line joke. }, { title: Is 17 prime?, message: Walk me through whether 17 is prime. }, ], available: always,即页面实际渲染的是 Write a sonnet、Tell me a joke、Is 17 prime? 三条建议。QA 清单中的 Change background 与 Generate sonnet 分别对应frontend-tools与agentic-chat-reasoning等衍生场景Generate sonnet 在 reasoning 演示中触发复杂的思维链输出。验证建议的通用断言是按钮可见点击后要么填充输入框、要么直接发送消息。Playwright 侧对 Tell me a joke 点击后断言copilot-assistant-message出现agentic-chat.spec.ts。useConfigureSuggestions的available: always表示建议常驻显示它注册在 suggestions.ts 并在 page.tsx 中被useAgenticChatSuggestions()调用。4.2 背景变更useFrontendToolQA 步骤Change the background to a sunset gradient验证背景容器样式从默认值变化且change_background工具返回成功状态。这是前端工具Frontend Tools的核心能力完整实现在frontend-tools演示中源码依据注册useFrontendTool({ name: change_background, description, parameters, handler })见 frontend-tools/page.tsx。parameters用 zod 声明background: stringThe CSS background value. Prefer gradients.handler调用setBackground(background)并返回{ status: success }。渲染Background background{background}把 CSS 值作为内联style{{ background }}应用容器带data-testidfrontend-tools-background默认值#4f46e5background.tsx。后端配合frontend_tools别名在 route.ts 被覆盖为createAgent(/frontend-tools)对应后端 frontend_tool_flow.py。该 Flow 的系统提示要求当提供的前端工具能满足用户请求时必须调用它并且在用户回合携带工具动作时使用tool_choicerequired强制触发工具调用后端不伪造工具结果——前端工具调用以流式事件返回浏览器执行结果在下一轮请求中作为权威结果恢复。因此验证要点是提示模型改背景后内联样式发生变化自动化侧用轮询断言样式不再包含#4f46e5Forest 主题或匹配linear-gradient|radial-gradientSunset 主题见 frontend-tools.spec.ts。工具成功状态体现在 Agent 随后对变更结果的简短总结由后端系统提示驱动。4.3 天气渲染工具useRenderToolQA 步骤输入 Whats the weather in Tokyo?验证加载态显示 Loading weather...data-testidweather-info-loading随后渲染 WeatherCarddata-testidweather-info包含城市名、摄氏度温度、湿度百分比、mph 风速与天气描述。与背景同理这条能力的完整实现在tool-rendering演示中源码依据渲染器注册useRenderTool({ name: get_weather, parameters, render })见 tool-rendering/page.tsx。render接收{ parameters, result, status }status ! complete时为加载态结果通过parseJsonResultparse-json-result.ts解析为{ city, temperature, humidity, wind_speed, conditions }。卡片组件WeatherCardweather-card.tsx其真实data-testid为weather-card内部含weather-city、weather-humidity、weather-wind加载时显示 Fetching weather...渲染完成后显示温度°F、湿度%、风速mph与天气描述含天气 emoji 映射。后端tool-rendering别名在 route.ts 映射到/tool-rendering由 src/agents/tool_rendering.py 的ToolRenderingFlow发出get_weather/get_stock_price等 AG-UITOOL_CALL_*事件。这里与 QA 清单存在同样的命名差异清单使用的weather-info/weather-info-loadingtestid 在当前源码的WeatherCard中对应weather-card加载文案为 Fetching weather...。验证时应以源码为准断言weather-card可见并在加载与完成两种状态下检查城市、温度、湿度、风速、天气描述字段是否填充。4.4 Agent 上下文useAgentContextQA 步骤Agent 应知道用户名为 Bob通过useAgentContext提供询问 What is my name? 时回复 Bob。useAgentContext的完整用法见readonly-state-agent-context演示readonly-state-agent-context/page.tsx 中调用形如useAgentContext({ description: The currently logged-in users display name, value: userName, });其工作方式是把前端应用状态作为只读上下文随每轮请求注入 Agent。后端侧的关键保证在 chat_flow.pyChatState显式声明context: list[Any]字段因为CopilotKitState本身不声明该字段、会被 pydantic 在输入校验时丢弃只有声明后模型才能读到应用上下文。PromptedChatFlow.chat()会把state排除 messages 与 copilotkit 后序列化为 JSON 拼进系统提示的 Application context 段并附带提示词要求在后续轮次原样保留用户选定的专有名称——这正是多轮询问名字能稳定复述的底层原因。多轮上下文验证的自动化示例见 agentic-chat.spec.ts先告知名字 Alice等建议按钮重新出现代表本轮流式结束再询问 What name did I just give you?断言第二条助手消息包含 Alice。建议按钮的重新出现可作为对话回合已结算的等待信号。五、测试步骤 3错误处理QA 清单的三条错误处理检查发送空消息应被优雅处理CopilotChat输入框为空时发送按钮/回车被禁用或忽略不会产生请求。验证时确认界面无异常、无报错即可。正常使用无控制台错误可在 DevTools 控制台观察或由 Playwright 的page.on(console)收集 error 级日志断言为空。发送超长消息不应破坏布局CopilotChat消息列表对长文本换行渲染后端侧消息作为普通文本随上下文传入 LLM不涉及特殊解析。验证消息气泡正常换行、滚动正常、无横向溢出。此外route.ts 展示了运行时的防御性设计任何未捕获异常都会生成errorId完整错误细节仅记录在服务端日志供运维以errorId关联排查HTTP 响应只返回{ error: internal runtime error, errorId }避免泄露内部路径与堆栈——这保证了即使后端异常前端拿到的也是结构化错误而非崩溃性输出。六、预期结果与验收标准QA 清单给出的量化验收标准验收项标准聊天界面加载3 秒内完成Agent 响应10 秒内返回背景变更工具执行后立即生效内联样式即时变化天气卡片所有数据字段城市/温度/湿度/风速/天气描述填充完整UI 稳定性无界面错误、无布局破坏其中背景变更即时生效与天气卡片字段完整已在前面结合源码说明3 秒 / 10 秒为交互体验性指标Playwright 侧的可见性断言超时建议按钮 15 秒、助手消息 30 秒为该体验指标留出了余量。七、延伸Agentic Chat Reasoning 变体同目录下的 qa/agentic-chat-reasoning.md 提供了 reasoning 变体/demos/agentic-chat-reasoning的简短 QA发送复杂提示如三城旅行规划验证自定义ReasoningBlock卡片data-testidreasoning-block带 Reasoning 徽标出现在最终答案上方流式期间标签显示 Thinking...最终助手文本在推理内容之后出现。该变体在 route.ts 中属于reasoningAgentNames统一映射到/reasoning端点由 src/agents/reasoning_flow.py 的ReasoningFlow实现。其核心原理见 route.ts 注释CrewAI 桥接层把推理模型的流式输出转换为 AG-UI 的 reasoning 与 text 生命周期事件前端据此先渲染推理块、再渲染最终答案——与agentic-chat的普通文本流形成对照可在同一套 QA 流程中一并回归。八、总结一份可执行的验收清单综合以上分析可将 QA 清单提炼为可直接执行的最终检查表环境Demo 已部署/api/health返回 200GET /api/copilotkit中agent_status为reachable基本功能/demos/agentic-chat加载 ≤3s输入框占位符 Type a message发送 Hello 后 10s 内收到文本回复建议三条建议Write a sonnet / Tell me a joke / Is 17 prime?可见点击后消息被发送并收到回复前端工具/demos/frontend-toolsfrontend-tools-background容器可见且初始为#4f46e5要求改成渐变后内联样式变为linear/radial-gradientchange_background返回{ status: success }工具渲染/demos/tool-rendering询问东京天气后weather-card先显示加载态完成后城市/温度/湿度/风速/描述字段齐全Agent 上下文通过useAgentContext注入的名字可在多轮后准确复述错误处理空消息被优雅忽略无控制台错误超长消息不破坏布局全链路回归执行pnpm test:e2etests/e2e/agentic-chat.spec.ts通过这条 QA 链路覆盖了 CopilotKit CrewAI Conversational Flows 集成的核心价值CopilotChat开箱即用的对话体验、AG-UI 协议下的流式通信、useFrontendTool与useRenderTool提供的生成式 UI 能力以及useAgentContext的前后端状态贯通。对照 page.tsx、route.ts 与 chat_flow.py 三个文件即可复现并深入理解每一层。【免费下载链接】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 与 CrewAI Conversational Flows 集成之 Agentic Chat 深度测试与验证指南
CopilotKit 与 CrewAI Conversational Flows 集成之 Agentic Chat 深度测试与验证指南【免费下载链接】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本篇文章围绕 CopilotKit 开源仓库中 CrewAI Conversational Flows 集成示例的agentic-chatAgentic Chat演示页面展开完整解析其 QA 测试清单qa/agentic-chat.md所覆盖的前后端功能点并结合前端组件、Next.js 运行时路由、Python FastAPI 后端与 Playwright 端到端测试源码逐项说明验证什么、为什么这样验证、底层如何实现。读完本文你将掌握针对一个CopilotChat最小可运行示例含建议快捷键、前端工具、工具渲染、Agent 上下文的完整验收方法并能对照仓库源码定位每一步测试背后的真实实现。背景Agentic Chat 在集成示例中的定位在showcase/integrations/crewai-conversational-flowsCrewAI Conversational Flows 集成示例中agentic-chat是所有对话类演示的最小可运行范本。该集成与同仓库的crewai-crews是同前端、异后端的姊妹列前端 React 源码保持一致后端执行路径改为 CrewAI 官方公开的 Conversational Flows API详见 PARITY_NOTES.md。根据集成清单 manifest.yaml 中agentic-chat条目route: /demos/agentic-chat描述为 Natural conversation with frontend tool execution该页面是探索整条集成链路正确性的第一站。端到端测试文件 tests/e2e/agentic-chat.spec.ts 开头的注释也点明了它的契约定位Agentic Chat is the minimum-viable CopilotChat demo: a tiny page that wrapsCopilotChatplus three starter-prompt suggestions. The contract here is vanilla chat works end-to-end — anything richer belongs in dedicated demos (frontend-tools, tool-rendering, etc.).也就是说Agentic Chat 验证最朴素的聊天端到端可用更复杂的能力前端工具、工具渲染、Agent 上下文等由专门演示验证。本文的 QA 清单在基础对话之外还覆盖了这些能力因此在逐项验证时需要把对应功能的源码依据也一并说明。一、前置条件部署与健康检查QA 清单的第一步是确认环境就绪共两条Demo 已部署且可访问本地开发环境运行pnpm dev即可同时拉起前端与后端。查看 package.json 的dev脚本concurrently next dev --turbopack PYTHONPATH. python -m uvicorn agent_server:app --host 0.0.0.0 --port 8000 --reload前端运行在 3000 端口Python 后端FastAPI运行在 8000 端口。Agent 后端健康检查 /api/health健康检查存在两条路径互为印证Python 后端自身提供/health端点由 agent_server.py 中的HealthMiddleware直接返回{status: ok}与任何 Agent 端点解耦前端运行时路由 src/app/api/copilotkit/route.ts 的GET处理器会以 3 秒超时探测${AGENT_URL}/healthAGENT_URL默认http://localhost:8000返回agent_url与agent_status: reachable | error (...)。这也解释了 QA 清单为什么把Agent 后端健康列为硬性前置前端运行时本身是一个代理层后端不健康时所有对话请求都会失败。二、测试环境Playwright 配置与运行方式QA 清单的手工步骤可以由端到端测试自动执行。集成示例的 playwright.config.ts 关键配置如下testDir: ./tests/e2e测试目录为 tests/e2ebaseURL: http://localhost:3000默认访问本地前端webServerCI 之外由 Playwright 自动执行pnpm dev并等待 3000 端口就绪每个请求携带X-AIMock-Context: crewai-conversational-flows头用于区分同仓库不同集成列的测试夹具mock 数据。执行方式为pnpm test:e2e。对应自动化用例见 agentic-chat.spec.ts它覆盖了页面加载与三条建议可见输入并回车获得回复点击建议获得回复多轮对话保持上下文四个场景与下文 QA 清单互为印证。三、测试步骤 1基本功能验证3.1 页面加载与输入框进入agentic-chat演示页聊天界面应加载出文本输入框占位符为 Type a message。源码依据在 src/app/demos/agentic-chat/page.tsx页面用CopilotKit runtimeUrl/api/copilotkit agentagentic_chat包裹CopilotChat agentIdagentic_chat /占位符是CopilotChat内置默认文案。Playwright 侧用page.getByPlaceholder(Type a message)断言其可见性。3.2 背景容器可见与默认颜色QA 清单要求验证背景容器data-testidbackground-container可见且默认背景色为主题默认rgb(250, 250, 249)。需要说明的是agentic-chat页面源码本身只渲染CopilotChat并不包含背景容器该data-testid实际出现于同列的frontend-tools演示对应 QA 文档 qa/frontend-tools.md。在frontend-tools中背景容器的实现是 src/app/demos/frontend-tools/background.tsx其真实data-testid为frontend-tools-background默认背景为#4f46e5纯靛蓝并非rgb(250, 250, 249)。因此验证此条目时应结合frontend-tools演示执行进入/demos/frontend-tools断言背景容器可见、初始内联样式包含#4f46e5对应 tests/e2e/frontend-tools.spec.ts 中的 background container starts with the solid indigo default 用例。3.3 发送基础消息并获得回复发送 Hello 后Agent 应以文本消息回复。这一条验证的是完整链路浏览器 →/api/copilotkit运行时 → Python 后端/conversational_flows/chat→ CrewAI Flow → LLM 流式返回。前端将agentic_chat代理到后端在 route.ts 中createAgent()默认构造HttpAgent({ url:${AGENT_URL}/conversational_flows/${feature}})agentic_chat属于agentNames中的默认别名未做专属路由覆盖因此指向/conversational_flows/chat。后端由 agent_server.py 遍历 conversational_flows.py 的CONVERSATIONAL_FLOW_TYPES注册表为每个 Flow 注册/conversational_flows/{feature}端点conversationalTrue。chat对应的实现是 src/agents/chat_flow.py 的PromptedChatFlow其chat()方法通过litellm的acompletion模型openai/gpt-5.4调用copilotkit_stream流式输出并把返回消息追加到状态。自动化断言见 agentic-chat.spec.ts填充 Say hello in one word. 后回车等待[data-testidcopilot-assistant-message]出现。四、测试步骤 2功能专项检查4.1 建议SuggestionsQA 清单要求验证两条建议按钮Change background 与 Generate sonnet。需要注意实际agentic-chat页面的建议由 src/app/demos/agentic-chat/suggestions.ts 通过useConfigureSuggestions注册内容是suggestions: [ { title: Write a sonnet, message: Write a short sonnet about AI. }, { title: Tell me a joke, message: Tell me a one-line joke. }, { title: Is 17 prime?, message: Walk me through whether 17 is prime. }, ], available: always,即页面实际渲染的是 Write a sonnet、Tell me a joke、Is 17 prime? 三条建议。QA 清单中的 Change background 与 Generate sonnet 分别对应frontend-tools与agentic-chat-reasoning等衍生场景Generate sonnet 在 reasoning 演示中触发复杂的思维链输出。验证建议的通用断言是按钮可见点击后要么填充输入框、要么直接发送消息。Playwright 侧对 Tell me a joke 点击后断言copilot-assistant-message出现agentic-chat.spec.ts。useConfigureSuggestions的available: always表示建议常驻显示它注册在 suggestions.ts 并在 page.tsx 中被useAgenticChatSuggestions()调用。4.2 背景变更useFrontendToolQA 步骤Change the background to a sunset gradient验证背景容器样式从默认值变化且change_background工具返回成功状态。这是前端工具Frontend Tools的核心能力完整实现在frontend-tools演示中源码依据注册useFrontendTool({ name: change_background, description, parameters, handler })见 frontend-tools/page.tsx。parameters用 zod 声明background: stringThe CSS background value. Prefer gradients.handler调用setBackground(background)并返回{ status: success }。渲染Background background{background}把 CSS 值作为内联style{{ background }}应用容器带data-testidfrontend-tools-background默认值#4f46e5background.tsx。后端配合frontend_tools别名在 route.ts 被覆盖为createAgent(/frontend-tools)对应后端 frontend_tool_flow.py。该 Flow 的系统提示要求当提供的前端工具能满足用户请求时必须调用它并且在用户回合携带工具动作时使用tool_choicerequired强制触发工具调用后端不伪造工具结果——前端工具调用以流式事件返回浏览器执行结果在下一轮请求中作为权威结果恢复。因此验证要点是提示模型改背景后内联样式发生变化自动化侧用轮询断言样式不再包含#4f46e5Forest 主题或匹配linear-gradient|radial-gradientSunset 主题见 frontend-tools.spec.ts。工具成功状态体现在 Agent 随后对变更结果的简短总结由后端系统提示驱动。4.3 天气渲染工具useRenderToolQA 步骤输入 Whats the weather in Tokyo?验证加载态显示 Loading weather...data-testidweather-info-loading随后渲染 WeatherCarddata-testidweather-info包含城市名、摄氏度温度、湿度百分比、mph 风速与天气描述。与背景同理这条能力的完整实现在tool-rendering演示中源码依据渲染器注册useRenderTool({ name: get_weather, parameters, render })见 tool-rendering/page.tsx。render接收{ parameters, result, status }status ! complete时为加载态结果通过parseJsonResultparse-json-result.ts解析为{ city, temperature, humidity, wind_speed, conditions }。卡片组件WeatherCardweather-card.tsx其真实data-testid为weather-card内部含weather-city、weather-humidity、weather-wind加载时显示 Fetching weather...渲染完成后显示温度°F、湿度%、风速mph与天气描述含天气 emoji 映射。后端tool-rendering别名在 route.ts 映射到/tool-rendering由 src/agents/tool_rendering.py 的ToolRenderingFlow发出get_weather/get_stock_price等 AG-UITOOL_CALL_*事件。这里与 QA 清单存在同样的命名差异清单使用的weather-info/weather-info-loadingtestid 在当前源码的WeatherCard中对应weather-card加载文案为 Fetching weather...。验证时应以源码为准断言weather-card可见并在加载与完成两种状态下检查城市、温度、湿度、风速、天气描述字段是否填充。4.4 Agent 上下文useAgentContextQA 步骤Agent 应知道用户名为 Bob通过useAgentContext提供询问 What is my name? 时回复 Bob。useAgentContext的完整用法见readonly-state-agent-context演示readonly-state-agent-context/page.tsx 中调用形如useAgentContext({ description: The currently logged-in users display name, value: userName, });其工作方式是把前端应用状态作为只读上下文随每轮请求注入 Agent。后端侧的关键保证在 chat_flow.pyChatState显式声明context: list[Any]字段因为CopilotKitState本身不声明该字段、会被 pydantic 在输入校验时丢弃只有声明后模型才能读到应用上下文。PromptedChatFlow.chat()会把state排除 messages 与 copilotkit 后序列化为 JSON 拼进系统提示的 Application context 段并附带提示词要求在后续轮次原样保留用户选定的专有名称——这正是多轮询问名字能稳定复述的底层原因。多轮上下文验证的自动化示例见 agentic-chat.spec.ts先告知名字 Alice等建议按钮重新出现代表本轮流式结束再询问 What name did I just give you?断言第二条助手消息包含 Alice。建议按钮的重新出现可作为对话回合已结算的等待信号。五、测试步骤 3错误处理QA 清单的三条错误处理检查发送空消息应被优雅处理CopilotChat输入框为空时发送按钮/回车被禁用或忽略不会产生请求。验证时确认界面无异常、无报错即可。正常使用无控制台错误可在 DevTools 控制台观察或由 Playwright 的page.on(console)收集 error 级日志断言为空。发送超长消息不应破坏布局CopilotChat消息列表对长文本换行渲染后端侧消息作为普通文本随上下文传入 LLM不涉及特殊解析。验证消息气泡正常换行、滚动正常、无横向溢出。此外route.ts 展示了运行时的防御性设计任何未捕获异常都会生成errorId完整错误细节仅记录在服务端日志供运维以errorId关联排查HTTP 响应只返回{ error: internal runtime error, errorId }避免泄露内部路径与堆栈——这保证了即使后端异常前端拿到的也是结构化错误而非崩溃性输出。六、预期结果与验收标准QA 清单给出的量化验收标准验收项标准聊天界面加载3 秒内完成Agent 响应10 秒内返回背景变更工具执行后立即生效内联样式即时变化天气卡片所有数据字段城市/温度/湿度/风速/天气描述填充完整UI 稳定性无界面错误、无布局破坏其中背景变更即时生效与天气卡片字段完整已在前面结合源码说明3 秒 / 10 秒为交互体验性指标Playwright 侧的可见性断言超时建议按钮 15 秒、助手消息 30 秒为该体验指标留出了余量。七、延伸Agentic Chat Reasoning 变体同目录下的 qa/agentic-chat-reasoning.md 提供了 reasoning 变体/demos/agentic-chat-reasoning的简短 QA发送复杂提示如三城旅行规划验证自定义ReasoningBlock卡片data-testidreasoning-block带 Reasoning 徽标出现在最终答案上方流式期间标签显示 Thinking...最终助手文本在推理内容之后出现。该变体在 route.ts 中属于reasoningAgentNames统一映射到/reasoning端点由 src/agents/reasoning_flow.py 的ReasoningFlow实现。其核心原理见 route.ts 注释CrewAI 桥接层把推理模型的流式输出转换为 AG-UI 的 reasoning 与 text 生命周期事件前端据此先渲染推理块、再渲染最终答案——与agentic-chat的普通文本流形成对照可在同一套 QA 流程中一并回归。八、总结一份可执行的验收清单综合以上分析可将 QA 清单提炼为可直接执行的最终检查表环境Demo 已部署/api/health返回 200GET /api/copilotkit中agent_status为reachable基本功能/demos/agentic-chat加载 ≤3s输入框占位符 Type a message发送 Hello 后 10s 内收到文本回复建议三条建议Write a sonnet / Tell me a joke / Is 17 prime?可见点击后消息被发送并收到回复前端工具/demos/frontend-toolsfrontend-tools-background容器可见且初始为#4f46e5要求改成渐变后内联样式变为linear/radial-gradientchange_background返回{ status: success }工具渲染/demos/tool-rendering询问东京天气后weather-card先显示加载态完成后城市/温度/湿度/风速/描述字段齐全Agent 上下文通过useAgentContext注入的名字可在多轮后准确复述错误处理空消息被优雅忽略无控制台错误超长消息不破坏布局全链路回归执行pnpm test:e2etests/e2e/agentic-chat.spec.ts通过这条 QA 链路覆盖了 CopilotKit CrewAI Conversational Flows 集成的核心价值CopilotChat开箱即用的对话体验、AG-UI 协议下的流式通信、useFrontendTool与useRenderTool提供的生成式 UI 能力以及useAgentContext的前后端状态贯通。对照 page.tsx、route.ts 与 chat_flow.py 三个文件即可复现并深入理解每一层。【免费下载链接】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），仅供参考