Webcontainer MCP Browser

WebContainer MCP系统

使用WebContainer在浏览器中运行任何模型上下文协议（MCP）stdio服务器。

🔧 开发者说明：此项目包括一个独立的 网络集装箱MCP运输 可以在其他项目中独立使用的实现。查看API文档和使用示例的传输自述文件！

______________________________________________________________________

这是什么？

该项目允许您直接在浏览器中运行基于Node.js的MCP服务器，如AI工具服务器、自动化机器人或自定义CLI工具，由 网络容器.\ 它提供了一个漂亮的交互式仪表板，用于启动、停止和与MCP服务器交互，包括：

• 工艺配置：粘贴或编辑JSON以定义要运行的MCP服务器（本地或从npm）。
• 实时系统日志：查看实时输出，过滤微调器/进度线，滚动长线，一键复制任何日志行。
• 工具发现和调用：列出可用的MCP工具，填写表格，并交互式调用工具。
• 持久状态：所有输入字段和配置在重新加载时都会保持不变。
• 现代UI/UX：响应迅速、主题敏感且易于访问。

______________________________________________________________________

主要特点

• 运行任何MCP stdio服务器 （来自本地代码或npm）在浏览器选项卡中。
• WebContainer供电：真正的Node.js环境，不需要远程后端。
• 交互式仪表板：列出工具，调用它们并查看日志。

______________________________________________________________________

用法

1. 克隆并安装：

   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

1. 在浏览器中打开：\

首选 http://localhost:3000

1. 配置并运行MCP服务器：

- 粘贴进程配置JSON（例如，运行npm MCP服务器）。 - 单击“启动服务器”。 - 使用仪表板列出工具、调用工具和查看日志。

______________________________________________________________________

MCP服务器配置示例

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

______________________________________________________________________

为什么选择WebContainer？

WebContainer允许您在浏览器中运行真正的Node.js进程，具有完整的文件系统和进程隔离。\ 该项目利用这一点使任何MCP stdio服务器立即可用，无需后端、Docker或本地Node.js。

______________________________________________________________________

技术栈

• 网络容器
• 反应 + TypeScript
• 顺风CSS
• Radix UI （用于工具提示等）
• Lucide图标

______________________________________________________________________

仓库

______________________________________________________________________

许可证

麻省理工学院