Prerequisites You should have installed Node.js (version 18.0.0 or higher) and pnpm package manager.

​
Getting Started

Step 1. Clone the WebMCP repository: 
git clone https://github.com/MiguelsPizza/WebMCP.git
cd WebMCP
Step 2. Install dependencies: 
pnpm install
Step 3. Build shared packages first: 
pnpm build:shared
Step 4. Start development mode: 
pnpm dev
This runs all applications in development mode with hot reloading.

​
Development Ports

The WebMCP development environment uses the following ports:
  • Main dev server: 5173-5174
  • Extension dev server: 3000
  • Native host: 12306
Make sure these ports are available before starting development.

​
Repository Structure

WebMCP/
├── apps/                    # Application packages
│   ├── extension/          # Browser extension
│   ├── backend/            # Backend server (Cloudflare Workers)
│   └── native-server/      # Native messaging host
├── shared/                 # Internal shared packages
│   └── utils/             # Shared utility functions
└── e2e-tests/             # End-to-end tests

​
Building Specific Components

​
Extension Development

For extension-specific development with hot reloading: 
pnpm --filter @mcp-b/extension dev

​
Building Extension for Production

pnpm --filter @mcp-b/extension build
The built extension will be available in ./apps/extension/.output/chrome-mv3 for loading as an unpacked extension.

​
Troubleshooting

​
Additional Resources

  • NPM Packages: Core packages (@mcp-b/transports, @mcp-b/mcp-react-hooks, etc.)
  • Examples Repository: Starter projects and demos
  • Web Demo: Full-stack demo site with documentation
  • Userscripts: Tampermonkey scripts for popular websites
For more examples and detailed integration guides, check out the MCP-B Examples Repository.