WebContainersを使用して、ブラウザでモデルコンテキストプロトコル(MCP)のstdioサーバーを実行します。

************ 開発者ノート**: このプロジェクトには、独立して他のプロジェクトで使用することができるスタンドアローンWebContainer MCPトランスポート実装が含まれています。 API のドキュメントと使用例の README のトランスポートをチェック!

お問い合わせ

これは何ですか?

このプロジェクトでは、AIツールサーバー、自動化ボット、カスタム CLI ツールなどの Node.js ベースの MCP サーバーを、WebContainers が機能するブラウザーで直接実行できます。 MCP サーバーを始め、停止、および操作するための美しいインタラクティブなダッシュボードを提供します。

• プロセス構成: JSON を貼り付け、編集して MCP サーバーを定義して実行 (ローカルまたは npm から)。 -ライブシステムログ: リアルタイム出力、スピナー/プログレスラインフィルタリング、ロングラインスクロール可能、ワンクリックコピーを任意のログラインで参照してください。
• ツールの発見と呼び出し: 利用可能なMCPツールのリスト、フォームを記入し、ツールをインタラクティブに呼び出します。
• 永続状態: すべての入力フィールドとリロードを横断するパーシストの設定。
• モダンUI / UX:レスポンシブ、テーマアウェア、アクセス可能。

お問い合わせ

主な特長

WebContainer MCP System

Run any Model Context Protocol (MCP) stdio server in your browser using WebContainers.

🔧 Developer Note: This project includes a standalone WebContainer MCP Transport implementation that can be used independently in other projects. Check out the transport README for API documentation and usage examples!

---

What is this?

This project lets you run Node.js-based MCP servers—such as AI tool servers, automation bots, or custom CLI tools—directly in your browser, powered by WebContainers.
It provides a beautiful, interactive dashboard for starting, stopping, and interacting with MCP servers, including:

• Process configuration: Paste or edit JSON to define the MCP server to run (local or from npm).
• Live system log: See real-time output, with spinner/progress lines filtered, long lines scrollable, and one-click copy for any log line.
• Tool discovery and invocation: List available MCP tools, fill out forms, and call tools interactively.
• Persistent state: All input fields and config persist across reloads.
• Modern UI/UX: Responsive, theme-aware, and accessible.

---

Key Features

• Run any MCP stdio server (from local code or npm) in a browser tab.
• WebContainer-powered: True Node.js environment, no remote backend required.
• Interactive dashboard: List tools, call them, and view logs.

---

Usage

1. Clone and install:

   git clone --recurse-submodules https://github.com/ahmedrowaihi/webcontainer-mcp-browser.git
   cd webcontainer-mcp-browser
   pnpm install
   pnpm dev
   # or npm/yarn as you prefer
   

2. Open in your browser:
   Go to http://localhost:3000

3. Configure and run an MCP server:

   • Paste a process config JSON (e.g., to run an npm MCP server).
   • Click “Start Server”.
   • Use the dashboard to list tools, call them, and view logs.

---

Example MCP Server Config

{
  "command": "npx",
  "args": ["-y", "@yourorg/your-mcp-server"],
  "env": {
    "YOUR_API_KEY": "..."
  }
}

---

Why WebContainers?

WebContainers let you run real Node.js processes in the browser, with full filesystem and process isolation.
This project leverages that to make any MCP stdio server instantly available—no backend, no Docker, no local Node.js required.

---

Tech Stack

• WebContainers
• React + TypeScript
• Tailwind CSS
• Radix UI (for tooltips, etc.)
• Lucide Icons

---

Repository

https://github.com/ahmedrowaihi/webcontainer-mcp-browser

---

License

MIT