WebMCP Proxy
Integrate your existing MCP server on your website for browsing agent
What is WebMCP Proxy?
WebMCP Proxy is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to integrate your existing mcp server on your website for browsing agent
Integrate your existing MCP server on your website for browsing agent
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Integrate your existing MCP server on your website for brows
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx webmcp-proxyConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use WebMCP Proxy
WebMCP Proxy is a client-side JavaScript library that bridges existing MCP servers running on remote HTTP/SSE endpoints to in-browser AI agents via the WebMCP API (document.modelContext). It dynamically discovers all tools exposed by a remote MCP server and registers them in the browser context, enabling web-based AI agents to call those tools without any server-side code changes. This is ideal for embedding AI assistant capabilities directly on websites that already operate an MCP server.
Prerequisites
- An existing MCP server accessible over HTTP or SSE (Streamable HTTP transport)
- The remote MCP server must allow CORS requests from your browser origin
- A browser that supports the WebMCP API (document.modelContext)
- Node.js and npm for installing the library
- A web application (vanilla JS, React, or Vue) to integrate the proxy
Install the webmcp-proxy library
Add the library to your web project using npm.
npm install webmcp-proxyConfigure CORS on your MCP server
Ensure your remote MCP server responds with CORS headers that allow requests from your website's origin. This is required for the browser-side proxy to connect. Example header: Access-Control-Allow-Origin: https://your-website.com
Create the proxy in your application
Import and initialize the proxy with the URL of your remote MCP server. The proxy will connect, discover all available tools, and register them via the WebMCP API.
import { createWebMcpProxy } from 'webmcp-proxy';
const proxy = await createWebMcpProxy({
url: 'https://mcp.example.com/mcp',
headers: {
'Authorization': 'Bearer YOUR_TOKEN' // optional
}
});
console.log('Registered tools:', proxy.tools);Use with React
If using React, webmcp-proxy provides a component wrapper that manages the proxy lifecycle.
import { WebMcpProxy } from 'webmcp-proxy/react';
export function App() {
return (
<WebMcpProxy url="https://mcp.example.com/mcp">
{/* your AI agent component */}
</WebMcpProxy>
);
}Test tool discovery
After initialization, log the proxy.tools array to verify that all tools from your remote MCP server have been discovered and registered correctly.
const proxy = await createWebMcpProxy({ url: 'https://mcp.example.com/mcp' });
proxy.tools.forEach(tool => console.log(tool.name, tool.description));WebMCP Proxy Examples
Client configuration
WebMCP Proxy runs in the browser, not as a standalone MCP server entry in claude_desktop_config.json. Configure it in your web application code targeting your existing MCP server endpoint.
{
"mcpServers": {
"webmcp-proxy": {
"command": "npx",
"args": ["webmcp-proxy"],
"env": {
"MCP_SERVER_URL": "https://mcp.example.com/mcp"
}
}
}
}Prompts to try
Once your browsing agent has access to the registered tools from your remote MCP server, try these interaction patterns.
- "List all tools available from my MCP server."
- "Use the available tools to fetch the latest data from my backend."
- "Connect to my MCP server and run the search tool with query 'product catalog'."
- "What capabilities does my website's MCP server expose?"Troubleshooting WebMCP Proxy
Tools are not discovered — proxy.tools is empty
Verify that your remote MCP server supports Streamable HTTP or SSE transport, and that it returns a valid tools/list response. Check browser network tab for errors on the MCP endpoint request.
CORS errors when connecting to the remote MCP server
Add Access-Control-Allow-Origin headers to your MCP server responses. For development, allow all origins temporarily; for production, specify your exact website domain.
document.modelContext is undefined
The WebMCP API is not available in all browsers. Ensure you are using a browser build that supports the WebMCP specification, or check the browser compatibility documentation for webmcp-proxy.
Frequently Asked Questions about WebMCP Proxy
What is WebMCP Proxy?
WebMCP Proxy is a Model Context Protocol (MCP) server that integrate your existing mcp server on your website for browsing agent It connects AI assistants to external tools and data sources through a standardized interface.
How do I install WebMCP Proxy?
Follow the installation instructions on the WebMCP Proxy GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with WebMCP Proxy?
WebMCP Proxy works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is WebMCP Proxy free to use?
Yes, WebMCP Proxy is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
WebMCP Proxy Alternatives — Similar Browser Automation Servers
Looking for alternatives to WebMCP Proxy? 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 Proxy 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 Proxy?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.