← プロジェクト一覧に戻る

CopilotKit

エージェントの利用者側の半分。画面の何を読ませ、何を操作させ、結果として何を表示させるかを担う

MIT
スター
37.1k
フォーク
4.6k
オープンIssue
366
最終コミット
2026年8月27日

CopilotKitとは

文字を返すだけのエージェントは、それが置かれているアプリケーションを活かしきれません。CopilotKitはその両者をつなぎます。あるフックでアプリの状態の一部をエージェントに読ませ、別のフックで画面側の関数を呼べるように登録し、さらに別のフックで、返答を文章ではなくReactのコンポーネントとして描かせます。確認用のフォーム、グラフ、承認を求める差分などです。バックエンドとは、同じ開発元が公開しているAG-UIというプロトコルでやり取りするため、エージェント側がLangGraphでもCrewAIでもClaude Agent SDKでも、画面側の作りは変わりません。逆に、エージェントそのものは提供しません。用意するのは利用者側で、整備されている経路はReactです。

CopilotKitで何ができますか?

  • 画面に映っているものをエージェントに見せる — フックでアプリの状態の一部を公開すると、利用者が今見ている行についてそのまま答えられます。内容を説明してもらう必要がありません。
  • エージェントにボタンを押させる — 画面側の関数をエージェントが呼べる操作として登録できます。やり方を説明する代わりに、表を絞り込んだりダイアログを開いたりできます。
  • 文章ではなくコンポーネントで返す — 会話の中にReactのコンポーネントを描けます。確認フォーム、グラフ、差分などを返せば、次の動作は貼り付けではなくクリックになります。
  • 既製の画面を使うか、自分の意匠を保つか — チャット、サイドバー、ポップアップの既製部品でよくある形は足ります。見た目を持たない選択肢を選べば、実行の仕組みだけを使えます。
  • 画面を変えずにエージェントを差し替える — 画面側はAG-UIで話すため、背後のLangGraphをCrewAIやClaude Agent SDKに替えても、コンポーネントには影響しません。

CopilotKitを選ぶ前に

  • これは画面側だけの仕組みです。背後にエージェントが別途必要で、それが用意できて初めて価値が出ます。単体では、話す内容のないチャット欄が増えるだけです。
  • 実質的に整備されているのはReactです。他の画面技術やホスティング型の機能も掲げられていますが、資料も例もコンポーネント群もReactを前提に書かれています。

よくある質問

CopilotKitは商用利用できますか?

CopilotKitはMITライセンスで公開されています。OSI承認のオープンソースライセンスで、商用利用が認められています。

CopilotKitはどの形で使えますか?

CopilotKitはセルフホスト・マネージドクラウドの形で利用できます。

ドキュメント

CopilotKit/CopilotKit のREADMEより転載(MIT)。 原文を読む ↗

CopilotKit

Docs · Examples · CopilotKit Intelligence · Discord

Build agent-native applications — on any framework, on any surface.

Generative UI, shared state, and human-in-the-loop workflows for React, Angular, Vue, React Native — and in Slack and Microsoft Teams.

Bring Your Own Agent. Any Channel. — CopilotKit and AG-UI connect any agent framework to Slack, Microsoft Teams, Discord, WhatsApp, Telegram, Google Chat, iMessage, and SMS.


What is CopilotKit

CopilotKit is a best-in-class SDK for building full-stack agentic applications, Generative UI, and chat applications.

What started as a React library is now the horizontal layer between your agents and your users: the same agent can power your web app, your mobile app, and your team’s Slack or Microsoft Teams workspace.

We are the company behind the AG-UI Protocol — adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more!

Quick Start

Up and running in under five minutes. All you need is an LLM key (OpenAI, Anthropic, Gemini, etc.).

npx copilotkit@latest create

Agent Skills

CopilotKit ships agent skills that teach your coding agent (Claude Code, Codex, Cursor, Gemini, and others) how to set up, build with, integrate, debug, and upgrade CopilotKit.

Install them into any project directory:

npx copilotkit@latest skills install

Run it again any time to refresh to the latest skills.

Bring Your App to Life

https://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3

Features:

  • Chat UI – A fully customizable chat interface that supports message streaming, tool calls, and agent responses.
  • Backend Tool Rendering – Enables agents to call backend tools that return UI components rendered directly in the client.
  • Generative UI – Allows agents to generate and update UI components dynamically at runtime based on user intent and agent state.
  • Shared State – A synchronized state layer that both agents and UI components can read from and write to in real time.
  • Human-in-the-Loop – Lets agents pause execution to request user input, confirmation, or edits before continuing.
  • Self-Learning (early access) – Agents that continuously improve from user feedback via in-context reinforcement learning (CLHF).

🧩 Works With Your Stack

One agent backend. Every frontend.

PlatformStatusGet Started
⚛️ React / Next.js✅ GAQuickstart
🅰️ Angular✅ SupportedSource Code & Quickstart
💚 Vue✅ SupportedSource Code - Quickstart coming soon
📱 React Native✅ SupportedQuickstart
💬 Slack / Microsoft Teams✅ SupportedChannels · Quickstart
🔜 Discord / WhatsApp / Telegram / Google Chat / iMessage / SMS🟡 Coming soonChannels

Your agent logic stays the same — AG-UI handles the wire protocol, CopilotKit handles the UI layer for each framework and channel.

💬 Channels: One Agent, Every Chat App

The Channels SDK takes the agent you already built and drops it into the chat apps your users live in — same tools, same shared state, same human-in-the-loop, no rewrite (Learn more).

  • Slack – Agents as first-class Slack apps: threads, tool calls, and human-in-the-loop approvals right in the channel.
  • Microsoft Teams – Bring agentic workflows to the enterprise, where your org already lives.

👉 Explore Channels →

🧠 Self-Learning Agents

Improve your product by learning over time.

With Continuous Learning from Human Feedback (CLHF), part of CopilotKit Intelligence, agents improve with every interaction:

  • In-context reinforcement learning – Agents automatically improve from user interactions, no model fine-tuning required.
  • Automatic prompt augmentation – Agent behavior adapts based on recent interactions and outcomes.
  • Per-user adaptation – Agents learn individual preferences and get better for each user over time.
  • Threads & persistence – Full interaction history — generative UI, human-in-the-loop, shared state — captured across sessions.

Available via CopilotKit Cloud or self-hosted.

🔒 Early access: We’re onboarding teams now.

👉 Request early access →

https://github.com/user-attachments/assets/7372b27b-8def-40fb-a11d-1f6585f556ad

What this gives you:

  • CopilotKit installed – Core packages are fully set up in your app
  • Provider configured – Context, state, and hooks ready to use
  • Agent <> UI connected – Agents can stream actions and render UI immediately
  • Deployment-ready – Your app is ready to deploy

Complete getting started guide →

How it works:

CopilotKit connects your UI, agents, and tools into a single interaction loop.

CopilotKit Diagram — Motion x2 6 sec version

This enables:

  • Agents that ask users for input
  • Tools that render UI
  • Stateful workflows across steps and sessions
  • One agent, deployed across web, mobile, and chat platforms

⭐️ useAgent Hook

The useAgent hook sits directly on AG-UI, giving you full programmatic control over the agent connection.

// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });

// Render and update your agent's state
return <div>
  <h1>{agent.state.city}</h1>
  <button onClick={() => agent.setState({ city: "NYC" })}>
    Set City
  </button>
</div>

Check out the useAgent docs to learn more.

https://github.com/user-attachments/assets/67928406-8abc-49a1-a851-98018b52174f

Generative UI

Generative UI is a core CopilotKit pattern that allows agents to dynamically render UI as part of their workflow.

https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6

Compare the Three Types

Explore:

Generative UI educational repo →

🖥️ AG-UI: The Agent–User Interaction Protocol

Connect agent workflows to user-facing apps, with deep partnerships and 1st-party integrations across the agentic stack—including LangChain, CrewAI, Mastra, PydanticAI, and more.

AG-UI


npx create-ag-ui-app my-agent-app

🤝 Community

🙋🏽‍♂️ Contributing

Thanks for your interest in contributing to CopilotKit! 💜

We value all contributions, whether it’s through code, documentation, creating demo apps, or just spreading the word.

Here are a few useful resources to help you get started:

📄 License

This repository’s source code is available under the MIT License.

CopilotKit
AIに聞く
GitHub