copilotkit-integrations

CopilotKit のインテグレーション

ライブドキュメント（MCP）

このプラグインには、ライブの CopilotKit ドキュメントとソースコードを検索する search-docs ツールと search-code ツールを提供する MCP サーバー（copilotkit-docs）が含まれています。フレームワーク固有のインテグレーションの詳細を調べるのに便利です。

• Claude Code： プラグインの .mcp.json によって自動設定されるため、セットアップは不要です。
• Codex： 手動での設定が必要です。手順については、copilotkit-debug スキルを参照してください。

概要

CopilotKit は、AG-UI（Agent-UI）プロトコルを介して外部エージェントフレームワークと接続します。これは、フロントエンドの CopilotKit アプリケーションとバックエンドのエージェント間の双方向通信を可能にするストリーミングプロトコルです。すべてのインテグレーションは、同じアーキテクチャパターンに従います。

1. エージェントサーバー -- エージェントフレームワークを HTTP サーバーとして実行します（通常、Python では FastAPI/uvicorn、JS/TS では Express/Next.js のルートを使用します）
2. AG-UI アダプター -- フレームワーク固有のアダプターが、エージェントのネイティブインターフェースと AG-UI ワイヤープロトコルの間を変換します
3. CopilotKit ランタイム -- Next.js API ルートが、AG-UI クライアントクラスを介してエージェントに接続する CopilotRuntime を作成します
4. フロントエンド -- React コンポーネントが useAgent、useFrontendTool、useRenderToolCall、useHumanInTheLoop を使用してエージェントとやり取りします

対応インテグレーション

フレームワーク	言語	AG-UI クライアント（route.ts）	AG-UI サーバーアダプター	エージェントのポート
LangGraph（Python、セルフホスト）	Python	@copilotkit/runtime/langgraph の LangGraphHttpAgent	ag-ui-langgraph（add_langgraph_fastapi_endpoint）	8123
LangGraph（Python、LangGraph Platform）	Python	@copilotkit/runtime/langgraph の LangGraphAgent	LangGraph Platform（マネージド）	可変
LangGraph（JS）	TypeScript	@copilotkit/runtime/langgraph の LangGraphAgent	@copilotkit/sdk-js/langgraph に組み込み	8123
CrewAI Flows	Python	@ag-ui/client の HttpAgent	ag-ui-crewai（add_crewai_flow_fastapi_endpoint）	8000
CrewAI Crews	Python	@ag-ui/crewai の CrewAIAgent	ag-ui-crewai（add_crewai_crew_fastapi_endpoint）	8000
PydanticAI	Python	@ag-ui/client の HttpAgent	pydantic-ai-slim[ag-ui]（agent.to_ag_ui()）	8000
Mastra	TypeScript	@ag-ui/mastra の MastraAgent	@ag-ui/mastra に組み込み	Next.js 開発サーバー
Google ADK	Python	@ag-ui/client の HttpAgent	ag-ui-adk（add_adk_fastapi_endpoint）	8000
LlamaIndex	Python	@ag-ui/llamaindex の LlamaIndexAgent	llama-index-protocols-ag-ui（get_ag_ui_workflow_router）	9000
Agno	Python	@ag-ui/client の HttpAgent	agno（組み込みの AgentOS と AGUI インターフェース）	8000
Strands	Python	@ag-ui/client の HttpAgent	ag_ui_strands（create_strands_app）	8000
Microsoft Agent Framework（Python）	Python	@ag-ui/client の HttpAgent	agent-framework-ag-ui（add_agent_framework_fastapi_endpoint）	8000
Microsoft Agent Framework（.NET）	C#	@ag-ui/client の HttpAgent	Microsoft.Agents.AI.Hosting.AGUI.AspNetCore（MapAGUI）	8000
A2A Middleware	Python + TS	@ag-ui/a2a-middleware の A2AMiddlewareAgent	エージェントごと（混在するフレームワーク）	9000-9002
MCP Apps	TypeScript	MCPAppsMiddleware を備えた BuiltInAgent	該当なし（BuiltInAgent 上のミドルウェア）	3108

選択フロー

適切なインテグレーションを選ぶ際に使用してください。

Is your agent written in TypeScript/JavaScript?
  YES --> Is it a Mastra agent?
    YES --> Use Mastra integration (references/integrations/mastra.md)
    NO  --> Is it a LangGraph JS agent?
      YES --> Use LangGraph JS integration (references/integrations/langgraph.md, JS section)
      NO  --> Use BuiltInAgent with MCP Apps middleware or HttpAgent
  NO (Python or .NET) -->
    Which framework?
      LangGraph     --> references/integrations/langgraph.md
      CrewAI        --> references/integrations/crewai.md
      PydanticAI    --> references/integrations/pydantic-ai.md
      Google ADK    --> references/integrations/adk.md
      LlamaIndex    --> references/integrations/llamaindex.md
      Agno          --> references/integrations/agno.md
      Strands       --> references/integrations/strands.md
      MS Agent Fw   --> references/integrations/ms-agent-framework.md
      Multiple agents (A2A) --> references/integrations/a2a.md

AG-UI プロトコルの共通パターン

すべてのインテグレーションで、フロントエンド側に次のパターンが共通して使われます。

CopilotKit プロバイダー（layout.tsx）

import { CopilotKitProvider } from "@copilotkit/react";
import "@copilotkit/react/styles.css";

export default function RootLayout({ children }) {
  return (
    <CopilotKitProvider runtimeUrl="/api/copilotkit" agent="my_agent_name">
      {children}
    </CopilotKitProvider>
  );
}

agent プロパティは、CopilotRuntime({ agents: { my_agent_name: ... } }) で使用するキーと一致している必要があります。

API ルートのパターン（route.ts）

すべてのインテグレーションで、src/app/api/copilotkit/route.ts に Next.js API ルートを作成します。

import {
  CopilotRuntime,
  ExperimentalEmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
// Import the appropriate agent class for your framework

const runtime = new CopilotRuntime({
  agents: {
    my_agent: new SomeAgentClass({ url: "http://localhost:8000/" }),
  },
});

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter: new ExperimentalEmptyAdapter(),
    endpoint: "/api/copilotkit",
  });
  return handleRequest(req);
};

共有状態（useAgent）

const { state, setState } = useAgent<{ proverbs: string[] }>({
  name: "my_agent",
  initialState: { proverbs: [] },
});

フロントエンドツール（useFrontendTool）

useFrontendTool({
  name: "setThemeColor",
  parameters: [
    { name: "themeColor", description: "Hex color value", required: true },
  ],
  handler({ themeColor }) {
    setThemeColor(themeColor);
  },
});

生成 UI（useRenderToolCall）

useRenderToolCall({
  name: "get_weather",
  description: "Get weather for a location.",
  parameters: [{ name: "location", type: "string", required: true }],
  render: ({ args }) => <WeatherCard location={args.location} />,
}, []);

Human in the Loop（useHumanInTheLoop）

useHumanInTheLoop({
  name: "go_to_moon",
  description: "Go to the moon on request.",
  render: ({ respond, status }) => (
    <MoonCard status={status} respond={respond} />
  ),
}, []);

エージェント側の状態管理

エージェント側では、共有状態の管理方法はフレームワークごとに異なりますが、プロトコルは同じです。エージェントは STATE_SNAPSHOT イベントを送信して、フロントエンドを更新します。フレームワーク固有のパターンについては、各統合ガイドを参照してください。

主要なパッケージ

フロントエンド（すべての統合）：

• @copilotkit/react -- フック（useAgent、useFrontendTool、useRenderToolCall、useHumanInTheLoop）と UI コンポーネント（CopilotSidebar、CopilotPopup）
• @copilotkit/runtime -- サーバーランタイム（CopilotRuntime、ExperimentalEmptyAdapter）

AG-UI クライアントクラス（統合ごとに 1 つ選択）：

• @copilotkit/runtime/langgraph -- LangGraphAgent、LangGraphHttpAgent
• @ag-ui/client -- HttpAgent（汎用。あらゆる AG-UI サーバーで動作します）
• @ag-ui/crewai -- CrewAIAgent
• @ag-ui/mastra -- MastraAgent
• @ag-ui/llamaindex -- LlamaIndexAgent
• @ag-ui/a2a-middleware -- A2AMiddlewareAgent
• @ag-ui/mcp-apps-middleware -- MCPAppsMiddleware