オープンMCPクライアント：ウェブベースのMCPクライアント、あらゆるMCPサービスに素早く接続-Chief AI Sharing Circle

中国初のAI IDE インテリジェント・プログラミング・ソフトウェア 🚀体験への招待 Trae 中国語版ダウンロードDeepSeek-R1とDoubao-proは無制限で利用できる！

はじめに

オープンエムシーピークライアントはオープンソースのツールで、ウェブベースのMCP（Model Context Protocol）クライアントを提供し、ユーザーがMCPサーバーをインストールすることなく、任意のMCPサーバーに接続してチャットができることが特徴です。また、独自のアプリケーションにチャット機能を組み込むこともできる。CopilotKitチームによって開発され、LangChainのラングラフテクノロジー、プロジェクトはVercelプラットフォーム上にデプロイされ、コードはGitHubにホストされ、最終更新日は2025年3月10日である。手軽なテスト・サーバーであれ、カスタムAIインタラクションの開発であれ、このツールはシンプルで便利であり、特に便利な体験を好むユーザーや開発者に適している。

オープンMCPクライアント：ウェブベースのMCPクライアントで、あらゆるMCPサービスに素早く接続-1

機能一覧

ウェブベースのMCPクライアントを提供し、任意のMCPサーバーに直接接続し、リアルタイムでチャットを行うことができます。
インストールは不要で、ウェブ版の機能はブラウザから利用できる。
ユーザー自身のアプリケーションへのチャット機能の統合をサポート。
LangGraphテクノロジーを使って、サーバーツールに接続するインテリジェントなエージェントを構築。
オープンソースのコードはGitHubでホストされており、閲覧や変更が可能だ。
フロントエンドはCopilotKitをベースにしており、インターフェイスとステートの同期を確保している。

ヘルプの使用

オープンMCPクライアントを始めるには

Open MCP Clientを使用するには、ウェブベースのMCP Clientで簡単に体験する方法と、ローカルに展開してアプリケーションに統合する方法の2つの方法があります。以下は、使い始めるための詳細な手順です。

1.ウェブベースのMCPクライアントを使用する

WebバージョンはOpen MCP Clientのコア機能で、インストールなしでMCPサーバーに素早く接続するのに適しています。

ステップ1：ウェブ版にアクセスする
ブラウザーを開き、アドレスを入力する：open-mcp-client.vercel.app.これはCopilotKitチームによってVercel上にデプロイされたMCPクライアントの公式ウェブバージョンで、すぐに使用できます。
ステップ2：MCPサーバーのURLを取得する
有効なMCPサーバーのURLが必要です。コンポジオなどのプラットフォームで入手できます。Composioのウェブサイトにログインし、MCPサーバーを作成または選択し、そのURLをコピーします（通常は以下の形式です）。 https://example.com/mcp).
ステップ3：サーバーへの接続
ウェブ版のインターフェイスで、URL入力ボックス（通常、ページの目立つ位置）を探し、コピーしたMCPサーバーのURLを貼り付けます。"Connect "ボタンをクリックすると、システムが接続を確立しようとします。接続」ボタンをクリックすると、システムが接続の確立を試みます。成功すると、数秒以内にチャット画面がロードされます。
ステップ 4: チャット開始
接続したら、入力ボックスに「今日の天気は」とか「コードを書くのを手伝って」とかメッセージを入力して送信する。または「コードを書いてください」と入力して送信する。サーバーはリアルタイムで返信を返し、インターフェイスには対話内容が表示される。

2.現地展開と統合

ローカルで実行したり、プロジェクトに機能を統合する必要がある場合は、以下の開発ステップに従ってください。

ステップ1: GitHubリポジトリをクローンする
ターミナルで以下のコマンドを実行し、プロジェクトをローカルにダウンロードする：

git clone https://github.com/CopilotKit/open-mcp-client.git

次にプロジェクト・ディレクトリに移動する：

cd open-mcp-client

ステップ2：ルート・ディレクトリ環境変数の設定
プロジェクトのルート・ディレクトリに 環境 ドキュメンテーション

タッチ.env

ファイルを開き、以下を追加する（実際のAPIキーに置き換える）：

LANGSMITH_API_KEY=lsv2_...

このキーはLangSmithサービスに接続するために使用され、LangSmithウェブサイトで登録することで入手できます。

ステップ 3: エージェント環境変数の設定
入る エージェント フォルダー

cd エージェント
.env をタッチする

ある エージェント/.env ファイルが追加される：

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEYはOpenAIのウェブサイトから取得し、LangGraphエージェント機能をサポートするために使用されます。

ステップ 4: 依存関係のインストール
ルート・ディレクトリに戻り、実行する：

npmインストール

またはpnpmを使う（推奨）：

pnpmインストール

CopilotKitやLangGraphなどの依存関係をインストールします。Node.jsがローカルにインストールされていることを確認します（推奨バージョン18以上）。

ステップ5：開発モードの起動
プロジェクトはフロントエンド(/アプリ)とエージェント(/エージェント)の2つの部品は、2つの別々の端子に接続することをお勧めします：
ターミナル1（フロントエンド）：
```
pnpm run dev-frontend
```
ターミナル2（代理店）：
```
pnpm run dev-agent
```

または、1つのコマンドで両方を開始する：

pnpm run dev

起動後 http://localhost:3000ローカル・インターフェイスを見ることができる。

ステップ6：接続とチャットのテスト
ローカル・インターフェースにMCPサーバーのURLを入力し（ウェブ版と同じ方法）、「接続」をクリックします。接続に成功したら、メッセージを入力してチャット機能をテストできます。
ステップ7：アプリケーションへの統合
フロントエンドのコードは /アプリ フォルダで、CopilotKit 管理インターフェースとステータス同期を使用します。エージェントコードは /エージェント フォルダに追加して、LangGraphをベースにしたサーバに接続してください。このコードを再利用することもできますし、GitHubのREADME.mdを参照して統合を変更することもできます。

主要機能の詳細操作

ウェブベースのMCPクライアント
ウェブ版は最高の機能で、URLを入力するだけで接続できる。接続に失敗した場合は、URLが正しいか、サーバーがオンラインかどうかをチェックする。インターフェイスはCopilotKitによって駆動され、スムーズな操作が可能。
ライブチャット
チャットインターフェースは、ウェブ版とローカル版の両方で、リアルタイムの入力と返信表示に対応しています。メッセージ送信後、LangGraphエージェントがリクエストを処理し、サーバツールを呼び出し、結果は自動的に表示されます。
デバッグとカスタマイズ
ローカルランタイム , 利用可能なブラウザ開発者ツール（F12）ログとネットワーク要求を表示する。コードがオープンソース、変更することができます /アプリ を調整します。 /エージェント のプロキシロジックは