Implementing an MCP Client with Browser-based OAuth について
OAuth 対応の Streamable HTTP サーバーに接続するブラウザベースの MCP クライアントです。開発者が接続やツール呼び出しを調べられますが、プロンプトとリソースの一覧表示は未実装です。
主な機能
- 01ブラウザでの OAuth フロー
- 02Streamable HTTP サーバーへの接続
- 03サーバーツールの一覧表示
- 04入力パラメーターによるツール実行
- 05ツール応答の確認
活用シーン
- 01OAuth 保護された MCP サーバーのテスト
- 02通信とメッセージ交換の確認
- 03ツールの実行と応答の確認
MCP 対応
`/authorize` と `/token` エンドポイントを提供する Streamable HTTP サーバーに接続する MCP クライアントです。サーバーの機能を取得し、ツールの一覧表示と実行、応答の確認を行います。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。
ツール
ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。
詳細
ブラウザーを利用した OAuth による MCP クライアントの実装
概要
このプロジェクトの目的は、ストリーミング可能な HTTP サーバーに対するエンドツーエンドの OAuth をサポートする MCP クライアントを実装し、それを使ってトランスポートと MCP サーバーとの間でやり取りされるメッセージを調べることです。
デモ
https://github.com/user-attachments/assets/278bf15e-a762-47ac-8b2d-8f4a8e64eada
動作モード
最低限、セッションストレージに認証情報を保存・取得する OAuthClientProvider を実装する必要があります。ユーザーが Connect パネルでサーバーへの接続を要求すると、クライアントは useConnection フックを通じて処理します。ここで、connect メソッドは次の 2 つのステップで動作します。
Step 1: アクセストークンがない場合 → (1) サーバーの authorize エンドポイントを通じて OAuth フローを開始する、(2) サーバーが認証コードを返したときにアクセストークンを取得する
Step 2: アクセストークンはあるがトランスポートが設定されていない場合：(1) クライアントとトランスポートを作成する、(2) サーバーに接続する、(3) サーバーの機能を取得する
認証を必要とする MCP サーバーと通信するには、Step 1 を Step 2 より先に実行します。そのため、このクライアントはクライアント認証を実装したサーバー、具体的には /authorize および /token エンドポイントを備えたサーバーでのみ動作します。
クライアントがサーバーに接続し、サーバーの機能を利用できるようになると、Tools タブにツールを一覧表示するオプションがユーザーに提供されます。サーバーで利用できるプロンプトやリソースの一覧表示はまだ実装されていません（これらのタブには何も表示されません）。
ツールの一覧が表示されたら、ユーザーは Run パネルに必要な入力パラメーターを入力して、任意のツールを呼び出せます。
ツールの実行中（サーバー経由）、ユーザーは Inspect パネルで応答を確認できます。
補足：これが MCP Inspector に似ているように思えるなら、それは偶然ではありません。このプロジェクトは、できる限りシンプルさを保ちながら、多くの部分で MCP Inspector を参考にしています。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。