CopilotKit 前端协作与生成式 UI

前端 AI 的三个真问题

把大模型接进前端，最常见的做法是加一个聊天框：请求发出去，文本流回来，结束。真正要落地时会撞上三类问题。一是交互形态，业务结果通常是表格、表单、卡片、看板，而不是一段自然语言。二是状态割裂，agent 的任务进度、工具调用、待确认信息与 React 或 Angular 的组件状态各自维护，刷新一次或跨页面跳转就断。三是流程缺少人工卡点，复杂操作不适合无监督自动执行，但前端又很难描述「这一步需要人来点确认」。

技能的工作方式

该技能围绕 CopilotKit 把 agent 原生能力接进前端，重点在四个可验证的能力面：

• 共享状态：前端通过 useCoAgentState 读写与 agent 同步的状态，agent 运行时的状态变化会落到应用侧，而不是停在独立的聊天窗口里。
• 后端代理与任务处理：通过 useCoAgent 与 CopilotKit 的后端代理对接，代理负责把请求路由到模型端点并驱动任务生命周期，前端只关心渲染与交互。
• 应用操作：在应用中定义 actions 作为可被 agent 调用的能力入口，让模型触发明确的前端操作，而不是把业务逻辑藏在提示词里。
• 人工参与：需要用户确认或补充信息时，流程回到界面上等待输入；用户确认后，任务继续推进。

先决条件包括已有 React 或 Angular 应用、CopilotKit 包、后端代理或模型端点、应用操作处理程序，以及模型提供商凭证。

适用边界与注意点

这个技能不替你实现具体业务页面，也不规定必须使用某个模型供应商。它解决的是前端如何承接 agent：状态同步、工具触发、人工卡点和任务推进的边界需要开发者按业务确定。

需要注意三点：

• 不覆盖安全边界：工具注册和敏感操作仍需要开发者控制权限，不能把高风险动作无差别暴露给 agent。
• 不简化状态设计：useCoAgentState 适合与 agent 相关的状态，不要把全量应用状态都塞进共享状态，避免状态膨胀和调试困难。
• 不替代后端职责：任务编排、模型路由和凭证管理仍应放在后端代理侧，前端负责交互与反馈。