** WebContainers를 사용하여 브라우저에서 모델 Context Protocol (MCP) stdio 서버가 없습니다. **

** 개발자 노트**: 이 프로젝트는 독립적으로 다른 프로젝트에서 사용될 수 있는 독립 WebContainer MCP 수송 구현을 포함합니다. API 문서 및 사용 예제에 대한 전송 README를 확인하십시오!

---

이것은 무엇입니까?

이 프로젝트는 AI 툴 서버, 자동화 봇, 또는 사용자 정의 CLI 도구와 같은 Node.js 기반 MCP 서버를 실행할 수 있습니다. 브라우저에서 직접, WebContainers에 의해 구동. 그것은 시작, 정지, 및 MCP 서버와 상호 작용을위한 아름다운 대화 형 대시보드를 제공합니다.

• Process 구성: 붙여넣거나 JSON을 편집하여 MCP 서버를 실행하기 위해 (현지 또는 npm에서).
• Live 시스템 로그: Spinner/progress line filtered, long line scrollable 및 log line에 대한 원클릭 복사본을 사용하여 실시간 출력을 볼 수 있습니다. -Tool discovery 및 invocation: MCP 도구 목록, 양식을 작성하고 대화형으로 호출 할 수 있습니다.
• ** 영구 상태**: 모든 입력 필드 및 구성 persist reloads.
• Modern 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