CopilotKit via LangGraph : クイックスタート | バイブコーディング MCP

Posted on by Masashi Okumura

CopilotKit は、フルスタックのエージェント型アプリケーション、生成 UI、チャットアプリケーションを構築するためのクラス最高の SDK です。
このクイックスタートでは、LangGraph をエージェント・ネイティブなアプリケーションに 10 分で変換します。

CopilotKit via LangGraph : クイックスタート | バイブコーディング MCP

作成 : Masashi Okumura (@classcat.com)
作成日時 : 02/06/2026
バージョン : v1.51.3

* 本記事は docs.copilotkit.ai の以下のページを参考にしています :

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

 

 

CopilotKit via LangGraph : クイックスタート

CopilotKit は、フルスタックのエージェント型アプリケーション、生成 UI、チャットアプリケーションを構築するためのクラス最高の SDK です。

このクイックスタートでは、LangGraph をエージェント・ネイティブなアプリケーションに 10 分で変換します。

 

前提条件

始める前に、以下が必要です :

  • OpenAI API キー

  • Node.js 20+

  • 好みのパッケージマネージャ

  • (オプション) LangSmith API キー – 既存の LangGraph エージェントを使用する場合のみ必要です

 

Getting started

  1. CLI の実行
    まず、CLI を使用して新しいプロジェクトを作成します。Python または JavaScript を選択します :

    Python

    npx copilotkit@latest create -f langgraph-py

    JavaScript

    npx copilotkit@latest create -f langgraph-js

  2. 依存関係のインストール

    pnpm install

  3. 環境の構成
    agent ディレクトリで .env ファイルを作成して OpenAI API キーを追加します :

    OPENAI_API_KEY=your_openai_api_key

    ℹ️ 他のモデルについて
    The starter template is configured to use OpenAI’s GPT-4o by default, but you can modify it to use any language model supported by LangGraph.

  4. 開発サーバの起動

    pnpm dev

    これは UI サーバとエージェントサーバの両方を同時に起動します。

  5. 🎉 チャットを始めましょう！
    AI エージェントが使用できるようになりました！幾つか質問をしてみましょう :

    Can you tell me a joke?

Can you help me understand AI?

What do you think about React?

 

CopilotKit via LangGraph : クイックスタート

MCP サーバを使用して、LangGraph エージェントを CopilotKit に接続できます。

 

概要

CopilotKit MCP サーバは、AI コーディングエージェントに CopilotKit の API, パターンとベストプラクティスに関する深い知識を装備させます。開発環境に接続した場合、AI アシスタントは以下が可能になります :

  • 専門知識のガイダンスの提供

  • 正確なコードの生成

  • AI エージェントにユーザーインターフェイスを提供

  • Copilotkit の機能を正しく実装する支援

ℹ️ Powered by 🪄 Tadata – The platform for instantly building and hosting MCP servers.

 

Cursor

Cursor は生産性向上のために構築された AI 搭載コードエディタです。組み込み AI アシスタンスを備え、外部ツールで AI 機能を拡張するために MCP をサポートしています。

  1. Cursor で MCP 設定を開く

    1. Shift+Command+J (Mac) または Shift+Ctrl+J (Windows/Linux) を押して、Cursor の設定を開きます。
    2. 左側のサイドバーのカテゴリーで “MCP Tools” を探します。
    3. “Add Custom MCP” をクリックします。これはエディタで mcp.json を開きます、これを編集する必要があります。

     

  2. MCP サーバの Cursor への追加
    CopilotKit MCP の設定をコピーして、mcp.json ファイルの mcpServers キーの下に貼り付けます。

    HTTP

    {
  "mcpServers": {
    "CopilotKit MCP": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.copilotkit.ai"
      ]
    }
  }
}

    SSE

    {
  "mcpServers": {
    "CopilotKit MCP": {
      "url": "https://mcp.copilotkit.ai/sse"
    }
  }
}

 

以上