：Agentic Chat 的 QA 清单与实现验证指南)
CopilotKit × MS Agent Framework (.NET)Agentic Chat 的 QA 清单与实现验证指南【免费下载链接】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 仓库中 MS Agent Framework (.NET) 集成演示的 QA 校验清单 qa/agentic-chat.md 为主线逐条走查 Agentic Chat 演示在仓库中的实际接线方式CopilotKit Provider、CopilotChat、useConfigureSuggestions并对照 Playwright e2e 规格与 aimock 夹具给出可复现的验证链路。读完后你将掌握如何在该 .NET 集成上完整验证一次 agentic 对话基础聊天、建议芯片、前端工具change_background、渲染工具天气卡片与 Agent 上下文。一、演示定位与前置条件QA 清单对应的是 manifest.yaml 中注册的agentic-chat演示项路由/demos/agentic-chat描述为 Natural conversation with frontend tool execution关键文件manifest 的 highlight 字段agent/Program.cs、src/app/demos/agentic-chat/page.tsx、src/app/api/copilotkit/route.ts能力声明manifest 的features列表L34-L74同时包含agentic-chat、frontend-tools、tool-rendering、readonly-state-agent-context等能力项QA 清单实际上是把这几个演示的功能点汇总成一张跨演示校验表。QA 文档开篇给出的两条前置条件Prerequisites是Demo is deployed and accessible—— 该集成根目录提供 Dockerfile 与 entrypoint.shmanifest 中deployed: true表明演示以部署形态供验证Agent backend is healthy (check /api/health)—— 仓库中存在对应的健康检查路由目录 src/app/api/health/验证前应先确认该端点可用。对于本地从零起步manifest 中还登记了 CLI 启动命令L79-L84npx copilotkitlatest init --framework ms-agent-dotnet二、演示页实现走查Provider、CopilotChat 与建议页面入口 只有 24 行结构非常清晰use client; import React from react; import { CopilotKit, CopilotChat } from copilotkit/react-core/v2; import { useAgenticChatSuggestions } from ./suggestions; export default function AgenticChatDemo() { // region[provider-setup] CopilotKit runtimeUrl/api/copilotkit agentagentic_chat Chat / /CopilotKit // endregion[provider-setup] } // region[chat-component] function Chat() { useAgenticChatSuggestions(); // region[render-chat] return CopilotChat agentIdagentic_chat /; // endregion[render-chat] } // endregion[chat-component]两个关键接线点runtimeUrl/api/copilotkit把前端请求指向 Next.js 代理路由再转发到 .NET Agent Framework 后端agentagentic_chat指定后端 agent 标识CopilotChat上再通过agentId绑定同一 agent。文件中的region[...]/endregion[...]注释块是文档代码段标记用于向文档站抽取代码片段该目录下的 README.md 也解释了演示要点自然对话、经 AG-UI 逐 token 流式响应、建议芯片。建议芯片的实现suggestions.ts 用useConfigureSuggestions注册了三个静态建议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, });available: always表示建议芯片始终可用每个芯片由title按钮文案与message点击后实际发送的完整提示词两部分组成。三、基础功能验证对应清单 Basic FunctionalityQA 清单的基础功能项逐条对应到仓库证据QA 清单检查项仓库证据聊天界面加载输入框占位符为 Type a messageagentic-chat.spec.ts 断言page.getByPlaceholder(Type a message)可见发送一条消息如 Helloagent 以文本消息回应规格在 L23-L33 发送 Say hello in one word.并断言[data-testidcopilot-assistant-message]出现背景容器data-testidbackground-container可见、默认色 rgb(250, 250, 249)见下文 4.2 节说明该 testid 属于跨集成模板值多轮上下文保持规格 L45-L66 先发送 My name is Alice.再问 What name did I just give you?断言第二条回复包含 Alice关于背景容器一项需要说明agentic-chat页面本身并不渲染背景容器该集成中的背景容器位于 frontend-tools 演示见 4.2 节testid 为frontend-tools-background默认背景为靛蓝#4f46e5。清单中的background-container与 rgb(250, 250, 249) 是从源码结构看更接近其他兄弟集成如 langgraph-python的模板取值说明这份 QA 文档是一份跨集成的通用校验模板落到本集成时个别 testid 与默认色需要以实际代码为准。四、功能级检查对应清单 Feature-Specific Checks4.1 Suggestions建议芯片清单要求校验 Change background 与 Generate sonnet 两个建议按钮可见且点击后要么填充输入框要么直接发送消息。本集成的实际芯片为 Write a sonnet / Tell me a joke / Is 17 prime?见第二节的 suggestions.ts 源码e2e 规格 L35-L43 验证了点击建议即发送的行为await page.getByRole(button, { name: Tell me a joke }).click(); await expect( page.locator([data-testidcopilot-assistant-message]).first(), ).toBeVisible({ timeout: 30000 });规格 L12-L21 还断言页面加载后三个芯片按钮都在 15 秒内可见。4.2 背景更换useFrontendTool清单步骤发送 Change the background to a sunset gradient验证背景样式从默认值变化且change_background工具返回 success 状态。该功能在本集成中由 frontend-tools/page.tsx 实现useFrontendTool({ name: change_background, description: Change the page background. Accepts any valid CSS background value — colors, linear or radial gradients, etc., parameters: z.object({ background: z.string().describe(The CSS background value. Prefer gradients.), }), handler: async ({ background }) { setBackground(background); return { status: success }; }, });要点工具用 Zod 声明参数background: string描述引导模型优先产出渐变值handler 更新 React state 后返回{ status: success }与清单中 change_background 工具返回 success 状态 一一对应背景载体是 background.tsx 中的Background组件data-testidfrontend-tools-background、700ms 背景过渡动画默认值DEFAULT_BACKGROUND #4f46e5。在离线夹具侧aimock/d4/ms-agent-dotnet/chat.json 预置了 sunset-themed gradient 匹配项返回的change_background调用参数为linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, #ffd194 100%)——这就是清单里日落渐变场景的可重放版本。4.3 天气渲染useRenderTool清单步骤输入 Whats the weather in Tokyo?验证加载态文案 Loading weather...data-testidweather-info-loading以及 WeatherCarddata-testidweather-info渲染城市名、温度°C、湿度百分比、风速mph、天气状况。本集成的天气卡片实现在 tool-rendering/weather-card.tsx根节点data-testidweather-cardL24加载中占位文案为Fetching weather...L40城市名在data-testidweather-cityL33-L38温度渲染为大号数字并固定单位°FL50-L53湿度%与风速mph在 L54-L71 的两栏网格中展示。需要如实指出的差异清单写的是 Loading weather... 与 °C而本集成卡片实际是 Fetching weather... 与 °F 展示weather-card.tsx夹具侧 chat.json 中 weather summary 的模拟回复文本为 Tokyo is 22°C...。验证时应以组件源码中的单位与 testid 为准。4.4 Agent 上下文useAgentContext清单要求agent 应知道用户名是 Bob经useAgentContext提供问 What is my name? 时回复 Bob。对应证据有两处能力侧manifest 中的 readonly-state-agent-context 演示项 描述为 Frontend provides read-only context to the agent via useAgentContext是useAgentContext的对应演示数据侧aimock 夹具 chat.json 中 What is my name? 的预置回复是 your name isJamie。这说明清单中的 Bob 是模板占位值具体上下文值随演示实现而定验证本集成时以夹具/演示注入的实际上下文为准。五、错误处理与预期结果清单 Error Handling 部分要求空消息应被优雅处理、正常使用期间控制台无错误、超长消息不导致 UI 破损。Expected Results 给出量化预期聊天 3 秒内加载、agent 10 秒内响应、工具执行后背景立即变化、天气卡片字段完整、无布局破损。对照自动化规格e2e 的等待预算明显比人工清单宽松建议芯片 15sL18、助手回复 30sL32、多轮回复 30s/5sL64-L65。可以推断人工清单的 3s/10s 阈值面向真实部署体验而 CI 中的规格超时是为了容忍 CI 环境与 mock 后端抖动两者服务于不同目的验证时都需执行。六、自动化验证链路Playwright 规格与 aimock 夹具整条验证链由三层组成Playwright e2etests/e2e/agentic-chat.spec.ts 定义了四个用例——页面加载与三个建议芯片可见、发送手输消息得到回复、点击建议芯片得到回复、多轮对话保持上下文Alice 用例。集成根目录提供 playwright.config.ts运行命令以 package.json 中的 scripts 为准。aimock D4 夹具aimock/d4/ms-agent-dotnet/chat.json 按match.userMessage子串 context: ms-agent-dotnet匹配用户消息回放预置的文本或工具调用。与 agentic-chat 直接相关的夹具包括Say hello in one word →Hello!L882-L890sonnet → 一首关于 AI 的十四行诗L891-L90017 is prime → 逐步验证 17 是否为素数的推理文本L901-L910What name did I just give → You said your name is Alice.L735-L743支撑多轮上下文断言。真实后端跳过 aimock 时请求经 src/app/api/copilotkit/route.ts 代理到 agent/Program.cs 启动的 .NET Agent Framework 服务。七、清单条目与仓库证据对照总表清单检查项qa/agentic-chat.md本集成中的实际实现/证据一致性说明输入框占位符 Type a messagee2e 断言一致建议按钮可见且可点击实际芯片为 Write a sonnet / Tell me a joke / Is 17 prime?suggestions.ts文案随集成不同行为一致background-container默认 rgb(250, 250, 249)实际为frontend-tools-background默认#4f46e5background.tsx模板取值需以代码为准change_background返回 successhandler 返回{ status: success }一致天气卡片加载态与五字段weather-card.tsxtestidweather-card、文案 Fetching weather...、单位 °F字段齐全文案/单位与模板不同Agent 上下文名字 Bob夹具回复 Jamiechat.json对应 readonly-state-agent-context 演示模板占位值实际值随演示注入3s 加载 / 10s 响应e2e 超时 15s/30sCI 宽松阈值人工阈值与 CI 阈值分工不同八、小结这份 QA 清单的价值在于把agentic chat 是否真正跑通拆解为可勾选的原子断言占位符与建议芯片可见、消息发送与流式回复、前端工具执行成功、渲染工具卡片字段完整、agent 上下文可达、异常输入不破坏 UI。在 MS Agent Framework (.NET) 集成中这些断言大部分已被 tests/e2e/agentic-chat.spec.ts 自动化配合 aimock 夹具 可以在无真实 LLM 的环境下重放同一行为。人工验证时建议以清单为脚本、以本文章列出的源码路径为对照重点核对本集成与模板清单在 testid、文案与单位上的三处差异。【免费下载链接】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 × MS Agent Framework (.NET)：Agentic Chat 的 QA 清单与实现验证指南
CopilotKit × MS Agent Framework (.NET)Agentic Chat 的 QA 清单与实现验证指南【免费下载链接】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 仓库中 MS Agent Framework (.NET) 集成演示的 QA 校验清单 qa/agentic-chat.md 为主线逐条走查 Agentic Chat 演示在仓库中的实际接线方式CopilotKit Provider、CopilotChat、useConfigureSuggestions并对照 Playwright e2e 规格与 aimock 夹具给出可复现的验证链路。读完后你将掌握如何在该 .NET 集成上完整验证一次 agentic 对话基础聊天、建议芯片、前端工具change_background、渲染工具天气卡片与 Agent 上下文。一、演示定位与前置条件QA 清单对应的是 manifest.yaml 中注册的agentic-chat演示项路由/demos/agentic-chat描述为 Natural conversation with frontend tool execution关键文件manifest 的 highlight 字段agent/Program.cs、src/app/demos/agentic-chat/page.tsx、src/app/api/copilotkit/route.ts能力声明manifest 的features列表L34-L74同时包含agentic-chat、frontend-tools、tool-rendering、readonly-state-agent-context等能力项QA 清单实际上是把这几个演示的功能点汇总成一张跨演示校验表。QA 文档开篇给出的两条前置条件Prerequisites是Demo is deployed and accessible—— 该集成根目录提供 Dockerfile 与 entrypoint.shmanifest 中deployed: true表明演示以部署形态供验证Agent backend is healthy (check /api/health)—— 仓库中存在对应的健康检查路由目录 src/app/api/health/验证前应先确认该端点可用。对于本地从零起步manifest 中还登记了 CLI 启动命令L79-L84npx copilotkitlatest init --framework ms-agent-dotnet二、演示页实现走查Provider、CopilotChat 与建议页面入口 只有 24 行结构非常清晰use client; import React from react; import { CopilotKit, CopilotChat } from copilotkit/react-core/v2; import { useAgenticChatSuggestions } from ./suggestions; export default function AgenticChatDemo() { // region[provider-setup] CopilotKit runtimeUrl/api/copilotkit agentagentic_chat Chat / /CopilotKit // endregion[provider-setup] } // region[chat-component] function Chat() { useAgenticChatSuggestions(); // region[render-chat] return CopilotChat agentIdagentic_chat /; // endregion[render-chat] } // endregion[chat-component]两个关键接线点runtimeUrl/api/copilotkit把前端请求指向 Next.js 代理路由再转发到 .NET Agent Framework 后端agentagentic_chat指定后端 agent 标识CopilotChat上再通过agentId绑定同一 agent。文件中的region[...]/endregion[...]注释块是文档代码段标记用于向文档站抽取代码片段该目录下的 README.md 也解释了演示要点自然对话、经 AG-UI 逐 token 流式响应、建议芯片。建议芯片的实现suggestions.ts 用useConfigureSuggestions注册了三个静态建议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, });available: always表示建议芯片始终可用每个芯片由title按钮文案与message点击后实际发送的完整提示词两部分组成。三、基础功能验证对应清单 Basic FunctionalityQA 清单的基础功能项逐条对应到仓库证据QA 清单检查项仓库证据聊天界面加载输入框占位符为 Type a messageagentic-chat.spec.ts 断言page.getByPlaceholder(Type a message)可见发送一条消息如 Helloagent 以文本消息回应规格在 L23-L33 发送 Say hello in one word.并断言[data-testidcopilot-assistant-message]出现背景容器data-testidbackground-container可见、默认色 rgb(250, 250, 249)见下文 4.2 节说明该 testid 属于跨集成模板值多轮上下文保持规格 L45-L66 先发送 My name is Alice.再问 What name did I just give you?断言第二条回复包含 Alice关于背景容器一项需要说明agentic-chat页面本身并不渲染背景容器该集成中的背景容器位于 frontend-tools 演示见 4.2 节testid 为frontend-tools-background默认背景为靛蓝#4f46e5。清单中的background-container与 rgb(250, 250, 249) 是从源码结构看更接近其他兄弟集成如 langgraph-python的模板取值说明这份 QA 文档是一份跨集成的通用校验模板落到本集成时个别 testid 与默认色需要以实际代码为准。四、功能级检查对应清单 Feature-Specific Checks4.1 Suggestions建议芯片清单要求校验 Change background 与 Generate sonnet 两个建议按钮可见且点击后要么填充输入框要么直接发送消息。本集成的实际芯片为 Write a sonnet / Tell me a joke / Is 17 prime?见第二节的 suggestions.ts 源码e2e 规格 L35-L43 验证了点击建议即发送的行为await page.getByRole(button, { name: Tell me a joke }).click(); await expect( page.locator([data-testidcopilot-assistant-message]).first(), ).toBeVisible({ timeout: 30000 });规格 L12-L21 还断言页面加载后三个芯片按钮都在 15 秒内可见。4.2 背景更换useFrontendTool清单步骤发送 Change the background to a sunset gradient验证背景样式从默认值变化且change_background工具返回 success 状态。该功能在本集成中由 frontend-tools/page.tsx 实现useFrontendTool({ name: change_background, description: Change the page background. Accepts any valid CSS background value — colors, linear or radial gradients, etc., parameters: z.object({ background: z.string().describe(The CSS background value. Prefer gradients.), }), handler: async ({ background }) { setBackground(background); return { status: success }; }, });要点工具用 Zod 声明参数background: string描述引导模型优先产出渐变值handler 更新 React state 后返回{ status: success }与清单中 change_background 工具返回 success 状态 一一对应背景载体是 background.tsx 中的Background组件data-testidfrontend-tools-background、700ms 背景过渡动画默认值DEFAULT_BACKGROUND #4f46e5。在离线夹具侧aimock/d4/ms-agent-dotnet/chat.json 预置了 sunset-themed gradient 匹配项返回的change_background调用参数为linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, #ffd194 100%)——这就是清单里日落渐变场景的可重放版本。4.3 天气渲染useRenderTool清单步骤输入 Whats the weather in Tokyo?验证加载态文案 Loading weather...data-testidweather-info-loading以及 WeatherCarddata-testidweather-info渲染城市名、温度°C、湿度百分比、风速mph、天气状况。本集成的天气卡片实现在 tool-rendering/weather-card.tsx根节点data-testidweather-cardL24加载中占位文案为Fetching weather...L40城市名在data-testidweather-cityL33-L38温度渲染为大号数字并固定单位°FL50-L53湿度%与风速mph在 L54-L71 的两栏网格中展示。需要如实指出的差异清单写的是 Loading weather... 与 °C而本集成卡片实际是 Fetching weather... 与 °F 展示weather-card.tsx夹具侧 chat.json 中 weather summary 的模拟回复文本为 Tokyo is 22°C...。验证时应以组件源码中的单位与 testid 为准。4.4 Agent 上下文useAgentContext清单要求agent 应知道用户名是 Bob经useAgentContext提供问 What is my name? 时回复 Bob。对应证据有两处能力侧manifest 中的 readonly-state-agent-context 演示项 描述为 Frontend provides read-only context to the agent via useAgentContext是useAgentContext的对应演示数据侧aimock 夹具 chat.json 中 What is my name? 的预置回复是 your name isJamie。这说明清单中的 Bob 是模板占位值具体上下文值随演示实现而定验证本集成时以夹具/演示注入的实际上下文为准。五、错误处理与预期结果清单 Error Handling 部分要求空消息应被优雅处理、正常使用期间控制台无错误、超长消息不导致 UI 破损。Expected Results 给出量化预期聊天 3 秒内加载、agent 10 秒内响应、工具执行后背景立即变化、天气卡片字段完整、无布局破损。对照自动化规格e2e 的等待预算明显比人工清单宽松建议芯片 15sL18、助手回复 30sL32、多轮回复 30s/5sL64-L65。可以推断人工清单的 3s/10s 阈值面向真实部署体验而 CI 中的规格超时是为了容忍 CI 环境与 mock 后端抖动两者服务于不同目的验证时都需执行。六、自动化验证链路Playwright 规格与 aimock 夹具整条验证链由三层组成Playwright e2etests/e2e/agentic-chat.spec.ts 定义了四个用例——页面加载与三个建议芯片可见、发送手输消息得到回复、点击建议芯片得到回复、多轮对话保持上下文Alice 用例。集成根目录提供 playwright.config.ts运行命令以 package.json 中的 scripts 为准。aimock D4 夹具aimock/d4/ms-agent-dotnet/chat.json 按match.userMessage子串 context: ms-agent-dotnet匹配用户消息回放预置的文本或工具调用。与 agentic-chat 直接相关的夹具包括Say hello in one word →Hello!L882-L890sonnet → 一首关于 AI 的十四行诗L891-L90017 is prime → 逐步验证 17 是否为素数的推理文本L901-L910What name did I just give → You said your name is Alice.L735-L743支撑多轮上下文断言。真实后端跳过 aimock 时请求经 src/app/api/copilotkit/route.ts 代理到 agent/Program.cs 启动的 .NET Agent Framework 服务。七、清单条目与仓库证据对照总表清单检查项qa/agentic-chat.md本集成中的实际实现/证据一致性说明输入框占位符 Type a messagee2e 断言一致建议按钮可见且可点击实际芯片为 Write a sonnet / Tell me a joke / Is 17 prime?suggestions.ts文案随集成不同行为一致background-container默认 rgb(250, 250, 249)实际为frontend-tools-background默认#4f46e5background.tsx模板取值需以代码为准change_background返回 successhandler 返回{ status: success }一致天气卡片加载态与五字段weather-card.tsxtestidweather-card、文案 Fetching weather...、单位 °F字段齐全文案/单位与模板不同Agent 上下文名字 Bob夹具回复 Jamiechat.json对应 readonly-state-agent-context 演示模板占位值实际值随演示注入3s 加载 / 10s 响应e2e 超时 15s/30sCI 宽松阈值人工阈值与 CI 阈值分工不同八、小结这份 QA 清单的价值在于把agentic chat 是否真正跑通拆解为可勾选的原子断言占位符与建议芯片可见、消息发送与流式回复、前端工具执行成功、渲染工具卡片字段完整、agent 上下文可达、异常输入不破坏 UI。在 MS Agent Framework (.NET) 集成中这些断言大部分已被 tests/e2e/agentic-chat.spec.ts 自动化配合 aimock 夹具 可以在无真实 LLM 的环境下重放同一行为。人工验证时建议以清单为脚本、以本文章列出的源码路径为对照重点核对本集成与模板清单在 testid、文案与单位上的三处差异。【免费下载链接】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），仅供参考