在浏览器中使用WebContainers运行任意模型上下文协议（MCP）标准服务器。

** 🔧 开发者说明**：本项目包含一个独立的WebContainer MCP Transport实现，可独立用于其他项目。请查看传输README获取API文档和使用示例！

---

这是什么？

该项目允许您直接在浏览器中运行基于 Node.js 的 MCP 服务器——如 AI 工具服务器、自动化机器人或自定义 CLI 工具，由 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