InBrowserMCP Project

InBrowserMCP プロジェクト

このプロジェクトは、ブラウザー拡張機能を介して AI モデルがウェブブラウザーとやり取りできる、Model Context Protocol（MCP）に基づくシステムを実装しています。

概要

このプロジェクトは、主に次の 3 つの要素で構成されています。

1. フロントエンド（frontend/）：AI とやり取りし、ブラウザーの状態を表示するユーザーインターフェースを提供する、React ベースのウェブアプリケーションです。MCP サーバーと通信します。
2. MCP サーバー（mcp-server/）：MCP 仕様を実装する Node.js バックエンドサーバーです。フロントエンド、AI モデル（暗黙的に想定）、ブラウザー拡張機能間の通信を調整します。
3. ブラウザー拡張機能（extension/）：WebSocket を介して MCP サーバーに接続し、サーバーから受信したコマンドに基づいてブラウザー操作（移動、クリック、入力、コンテンツの取得など）を実行する Chrome 拡張機能です。

アーキテクチャ

+-----------------+      +-----------------+      +---------------------+
| Frontend (React)| <--> | MCP Server (Node)| <--> | Browser Extension   |
| (localhost:5173)|      | (localhost:3000) |      | (via WebSocket 8081)|
+-----------------+      +-----------------+      +---------------------+
       |                      ^
       | User Interaction       | AI Model Interaction (Conceptual)
       v                      |
+-----------------+      +-----------------+
| User's Browser  |      | AI Model        |
+-----------------+      +-----------------+

• フロントエンドは、ユーザーコマンド（または AI からの指示）をMCP サーバーに送信します。
• MCP サーバーはこれらのコマンドを解釈し、必要に応じて AI モデルとやり取りし（ここでは明示的に実装されていませんが、想定されています）、操作を MCP ツール呼び出しに変換します。
• MCP サーバーは、WebSocket を介してブラウザー拡張機能にブラウザー操作コマンドを送信します。
• ブラウザー拡張機能は、ユーザーのブラウザー内でこれらの操作を実行します（移動、クリック、コンテンツのスクレイピングなど）。
• ブラウザー拡張機能は、結果（ページスナップショットやコマンドの実行結果など）をMCP サーバーに返します。
• MCP サーバーは結果を処理し、Server-Sent Events（SSE）を介して更新または最終応答をフロントエンドにストリーミングします。

はじめに

各コンポーネントの README ファイルに記載されている手順に従ってください。

• フロントエンド README
• MCP サーバー README
• ブラウザー拡張機能 README（作成予定、または手順がここに追加される予定です）

一般的なワークフロー

1. MCP サーバーを起動します（cd mcp-server && pnpm dev）。
2. Chrome でブラウザー拡張機能を読み込みます（chrome://extensions/）。
3. フロントエンドを起動します（cd frontend && pnpm dev）。
4. ブラウザーでフロントエンドアプリケーションを開きます（通常は http://localhost:5173）。
5. フロントエンドがサーバーとの MCP セッションを初期化し、サーバーが拡張機能に接続します。
6. フロントエンドを操作して、拡張機能を介してブラウザーを制御するコマンドを送信します。

コントリビューション

（該当する場合はコントリビューションガイドラインを追加してください）

ライセンス

（プロジェクトのライセンスを指定してください。例：MIT）