copilotkit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

CopilotKit

Use this skill to implement CopilotKit-based agent UX with correct provider wiring, runtime selection, shared state, frontend actions, and interrupt handling.

使用本技能可实现基于CopilotKit的Agent用户体验，包含正确的服务商连接、运行时选择、共享状态、前端操作以及中断处理功能。

Quick Triage

快速排查

Use this skill for CopilotKit provider setup, runtime endpoints, hooks, shared-state rendering, and human-in-the-loop UX.
Switch to
```
$langgraph
```
when backend graph behavior is the main issue.
Switch to
```
$ag-ui
```
when protocol event compliance is the main issue.
Switch to
```
$langchain
```
when core model/tool orchestration logic is the main issue.

本技能适用于CopilotKit服务商设置、运行时端点、钩子函数、共享状态渲染以及人在环（HITL）用户体验相关场景。
若主要问题为后端图行为，请切换至
```
$langgraph
```
。
若主要问题为协议事件合规性，请切换至
```
$ag-ui
```
。
若主要问题为核心模型/工具编排逻辑，请切换至
```
$langchain
```
。

Workflow

工作流程

Choose runtime topology. Decide LangGraph platform endpoint vs remote backend runtime before UI edits.
Configure provider boundary. Set
```
<CopilotKit>
```
provider and runtime endpoint settings first.
Select hooks by responsibility. Use
```
useCoAgent
```
for state coupling,
```
useCopilotAction
```
for frontend actions, and interrupt hooks for HITL flow.
Define shared state contract. Separate input/output/internal state and keep serialization stable.
Implement HITL path. Map interrupt payloads to explicit frontend action handlers.
Implement persistence behavior. Choose thread/message persistence strategy and ensure resume consistency.
Validate end-to-end UX. Test streaming, tool visibility, shared-state render, and resume flow.

选择运行时拓扑结构。在进行UI编辑前，确定使用LangGraph平台端点还是远程后端运行时。
配置服务商边界。首先设置
```
<CopilotKit>
```
服务商及运行时端点参数。
按职责选择钩子函数。使用
```
useCoAgent
```
进行状态耦合，
```
useCopilotAction
```
处理前端操作，使用中断钩子函数实现人在环（HITL）流程。
定义共享状态契约。分离输入/输出/内部状态，确保序列化稳定性。
实现人在环（HITL）路径。将中断负载映射至明确的前端操作处理器。
实现持久化行为。选择对话线程/消息持久化策略，确保恢复一致性。
端到端用户体验验证。测试流式传输、工具可见性、共享状态渲染以及恢复流程。

Default Patterns

默认模式

Keep runtime and UI concerns separated.
Keep shared-state schema explicit and minimal.
Keep action handlers idempotent.
Treat interrupts as typed control flow, not free-form messages.

分离运行时与UI关注点。
保持共享状态模式明确且精简。
确保操作处理器具备幂等性。
将中断视为类型化控制流，而非自由格式消息。

Failure Modes

故障模式

Endpoint mismatch (wrong runtime URL/type).
Hooks bound to wrong agent name or provider scope.
Shared-state updates not reflected due schema mismatch.
Interrupt action handlers not wired to expected payload type.

端点不匹配（错误的运行时URL/类型）。
钩子函数绑定至错误的Agent名称或服务商范围。
因模式不匹配导致共享状态更新未同步。
中断操作处理器未连接至预期的负载类型。

Reference Map

参考映射

Load only what is needed for the current subtask.

Runtime and provider setup:
```
references/runtime-and-provider.md
```
Hooks and actions:
```
references/hooks-and-actions.md
```
CoAgents and shared state:
```
references/coagents-shared-state.md
```
HITL and troubleshooting:
```
references/hitl-and-troubleshooting.md
```

仅加载当前子任务所需内容。

运行时与服务商设置：
```
references/runtime-and-provider.md
```
钩子函数与操作：
```
references/hooks-and-actions.md
```
CoAgents与共享状态：
```
references/coagents-shared-state.md
```
人在环（HITL）与故障排查：
```
references/hitl-and-troubleshooting.md
```