Vscode Simple Browser MCP

🚀 VS Code Simple Browser MCP Server

このModel Context Protocol (MCP)サーバーは、大規模言語モデル(LLMs)がVS CodeのSimple Browserと対話できるようにし、ウェブサイトとの対話機能やコンソールログの監視を提供します。

✨ 主な機能

ブラウザ制御

• URLを開く: VS CodeのSimple Browserでウェブサイトを起動します。
• ナビゲーション: 異なるURL間を移動します。
• ページの更新: 現在のページを再読み込みします。
• ブラウザの状態: 現在のURLとブラウザの状態を取得します。
• ブラウザを閉じる: Simple Browserウィンドウを閉じます。

コンソールログの監視

• リアルタイムロギング: ウェブページからのコンソールメッセージをキャプチャします。
• ログフィルタリング: レベル(log、warn、error、info、debug)でログをフィルタリングします。
• 履歴ログ: タイムスタンプとソース情報付きでログを取得します。
• ログ管理: コンソールログの履歴をクリアします。

JavaScriptの実行

• コード実行: ブラウザコンテキストでJavaScriptコードを実行します。
• 結果の処理: 実行したコードから戻り値を取得します。
• DOM操作: JavaScriptを通じてページ要素と対話します。

利用可能なツール

📦 インストール

1. リポジトリをクローンする:

   git clone https://github.com/YOUR_USERNAME/vscode-simple-browser-mcp.git
   cd vscode-simple-browser-mcp
   

2. 依存関係をインストールする:

   npm install
   

3. プロジェクトをビルドする:

   npm run build
   

💻 使用例

Claude Desktopでの使用

サーバーをClaude Desktopの設定ファイルに追加します。

macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\\Claude\\claude_desktop_config.json

{
  "mcpServers": {
    "vscode-simple-browser": {
      "command": "node",
      "args": [
        "/path/to/your/vscode-simple-browser-mcp/build/index.js"
      ]
    }
  }
}

スタンドアローンでの使用

サーバーを直接実行します。

npm start

基本的な使用法

ウェブサイトを開く

Please open https://example.com in the Simple Browser

JavaScriptを実行する

Execute JavaScript to get the page title: document.title

コンソールログを監視する

Get the latest console logs from the browser

ブラウザの状態を取得する

What's the current state of the browser?

📚 ドキュメント

プロジェクト構造

vscode-simple-browser-mcp/
├── src/
│   └── index.ts           # メインのMCPサーバー実装
├── build/                 # コンパイルされたJavaScriptの出力
├── .vscode/
│   ├── mcp.json          # MCPサーバーの設定
│   └── tasks.json        # VS Codeのタスク
├── .github/
│   └── copilot-instructions.md
├── package.json
├── tsconfig.json
└── README.md

開発コマンド

• npm run build - TypeScriptプロジェクトをビルドします。
• npm run dev - 開発用のウォッチモードです。
• npm start - コンパイルされたサーバーを実行します。

新しいツールの追加

1. MCP SDKを使用してツールを定義します。

   server.tool(
     "tool_name",
     "Tool description",
     {
       parameter: z.string().describe("Parameter description"),
     },
     async ({ parameter }) => {
       // Tool implementation
       return {
         content: [
           {
             type: "text",
             text: "Tool result",
           },
         ],
       };
     }
   );
   

2. このREADMEに新しいツールの情報を更新します。

🔧 技術詳細

現在の実装

これは基本的な実装で、以下を提供します。

• 模擬VS Codeコマンドによる基本的なブラウザ制御
• メモリ内のコンソールログの保存
• JavaScript実行の模擬

将来の機能強化

本番環境での実装には、以下を検討してください。

• 直接のVS Code拡張APIの統合
• リアルタイムのウェブビューメッセージの送信
• 高度なコンソールログのキャプチャメカニズム
• スクリーンショット機能
• ネットワークリクエストの監視
• 要素検査ツール

貢献方法

1. リポジトリをフォークします。
2. 機能ブランチを作成します: git checkout -b feature/your-feature-name
3. 変更を加えます。
4. 必要に応じてテストを追加します。
5. 変更をコミットします: git commit -am 'Add some feature'
6. ブランチにプッシュします: git push origin feature/your-feature-name
7. プルリクエストを送信します。

問題とバグレポート

問題やバグに遭遇した場合は、GitHubで以下の情報を含めてイシューを作成してください。

• 問題の明確な説明
• 問題を再現する手順
• 環境の詳細(OS、VS Codeのバージョン、Node.jsのバージョン)
• 関連するエラーメッセージやログ

📄 ライセンス

ISC License

サポート

問題や質問については、以下を参照してください。

• MCPのドキュメントを確認する
• VS Code拡張APIのドキュメントを確認する
• このリポジトリでイシューを作成する
• MCPコミュニティのディスカッションに参加する

ロードマップ

将来の機能強化予定:

• [ ] リアルタイムのコンソールログのストリーミング
• [ ] ネットワークリクエストの監視
• [ ] スクリーンショットのキャプチャ機能
• [ ] 高度なDOM検査ツール
• [ ] パフォーマンス監視の統合
• [ ] マルチタブブラウザのサポート