About copilotkit
A skill for implementing CopilotKit agent interfaces, aimed at developers wiring frontend state, actions, runtime providers, and human-in-the-loop flows. It emphasizes selecting the runtime topology and keeping shared-state contracts and interrupt handling explicit.
Key features
- 01Runtime と provider の構成
- 02目的別 hooks とアクション
- 03共有状態スキーマの設計
- 04HITL 割り込みフロー
- 05永続化と再開の検証
Use cases
- 01CopilotKit の runtime endpoint 設定
- 02エージェント状態の UI 連携
- 03フロントエンドアクションの実装
- 04割り込み後の処理再開
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ outlinedriven/ odin-codex-plugin --skill copilotkitAfter installing, type/copilotkitin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
agents/openai.yamlreferences/coagents-shared-state.mdhitl-and-troubleshooting.mdhooks-and-actions.mdruntime-and-provider.mdDetails
From the project READMECopilotKit
Use this skill to implement CopilotKit-based agent UX with correct provider wiring, runtime selection, shared state, frontend actions, and interrupt handling.
Quick Triage
- Use this skill for CopilotKit provider setup, runtime endpoints, hooks, shared-state rendering, and human-in-the-loop UX.
- Switch to
$langgraphwhen backend graph behavior is the main issue. - Switch to
$ag-uiwhen protocol event compliance is the main issue. - Switch to
$langchainwhen core model/tool orchestration logic is the main issue.
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
useCoAgentfor state coupling,useCopilotActionfor 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.
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.
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.
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
Comments
Markdown supported