WebMCP Bridge
Bridge local MCP clients to browser WebMCP tools through Playwright, using native WebMCP when available and injected adapters when not.
What is WebMCP Bridge?
WebMCP Bridge is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to bridge local mcp clients to browser webmcp tools through playwright, using native webmcp when available and injected adapters when not.
Bridge local MCP clients to browser WebMCP tools through Playwright, using native WebMCP when available and injected adapters when not.
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Bridge local MCP clients to browser WebMCP tools through Pla
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx webmcp-bridgeConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use WebMCP Bridge
WebMCP Bridge connects local MCP clients (like Claude Desktop or Claude Code) to browser-based WebMCP tools through Playwright-driven browser automation. It uses native WebMCP when the target website supports it, and falls back to injected JavaScript adapters for sites that do not, giving AI agents a unified tool interface to web applications. Developers building agentic workflows that need to interact with SaaS tools, collaboration boards, or social platforms can use WebMCP Bridge to expose those browser-based tools to any MCP client without writing custom integrations.
Prerequisites
- Node.js 18+ and npm or pnpm installed
- Playwright installed and browser binaries downloaded (`npx playwright install`)
- An MCP-compatible client such as Claude Desktop or Claude Code
- A target website that supports native WebMCP, or a compatible adapter module
Install Playwright browser binaries
WebMCP Bridge uses Playwright to drive a browser. Install the required browser binaries before first use.
npx playwright installInstall the webmcp-bridge package
Install the local-mcp package from npm globally, or use npx to run it directly without a permanent install.
npm i -g @webmcp-bridge/local-mcp
# or run directly with npx
npx -y @webmcp-bridge/local-mcp --url https://board.holon.run --headlessChoose your connection mode
Connect to a native WebMCP site using --url, select a built-in adapter with --site (options: x, weibo, fixture), or point to a third-party adapter module with --adapter-module. Use --headless for background operation or --no-headless to show the browser window.
# Native WebMCP site
npx -y @webmcp-bridge/local-mcp --url https://board.holon.run --headless
# Built-in adapter for X (Twitter)
npx -y @webmcp-bridge/local-mcp --site x --no-headlessConfigure your MCP client
Add WebMCP Bridge to your claude_desktop_config.json pointing to the target site. The browser session persists in a profile directory so you stay logged in across restarts.
Authenticate in the browser (first run)
On first run with --no-headless, log in to the target site in the Playwright-controlled browser window. The session is saved to ~/.uxc/webmcp-profile/<site> for future headless sessions.
npx -y @webmcp-bridge/local-mcp --site x --no-headless --user-data-dir ~/.uxc/webmcp-profile/xWebMCP Bridge Examples
Client configuration
Claude Desktop configuration connecting WebMCP Bridge to the Holon board demo site in headless mode.
{
"mcpServers": {
"webmcp-bridge": {
"command": "npx",
"args": [
"-y",
"@webmcp-bridge/local-mcp",
"--url",
"https://board.holon.run",
"--headless"
]
}
}
}Prompts to try
Once connected to the Holon board demo via WebMCP Bridge, try these prompts with Claude.
- "Get the current diagram content from the board"
- "Load the demo diagram and set the title to 'My Architecture'"
- "Export the current board diagram as PNG"
- "Show me the current selection on the board"
- "Check the bridge session status"Troubleshooting WebMCP Bridge
Browser fails to launch with 'Executable doesn't exist' error
Run `npx playwright install` to download the required browser binaries. By default, Playwright installs Chromium; this must be done before WebMCP Bridge can start a browser session.
Native WebMCP tools are not discovered on the target site
Not all sites support native WebMCP. Try using --site with a built-in adapter name (x, weibo, fixture) or --adapter-module with a third-party adapter package. Run with --no-headless to visually inspect whether the site loaded correctly.
Session expires and requires re-login every time
Always pass --user-data-dir pointing to a persistent profile directory (e.g., ~/.uxc/webmcp-profile/sitename). This preserves cookies and session data between runs so you only need to log in once.
Frequently Asked Questions about WebMCP Bridge
What is WebMCP Bridge?
WebMCP Bridge is a Model Context Protocol (MCP) server that bridge local mcp clients to browser webmcp tools through playwright, using native webmcp when available and injected adapters when not. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install WebMCP Bridge?
Follow the installation instructions on the WebMCP Bridge GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with WebMCP Bridge?
WebMCP Bridge works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is WebMCP Bridge free to use?
Yes, WebMCP Bridge is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
WebMCP Bridge Alternatives — Similar Browser Automation Servers
Looking for alternatives to WebMCP Bridge? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up WebMCP Bridge in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use WebMCP Bridge?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.