WebMCP MCP server

WebMCP is a system that allows websites to share tools, resources, and prompts with client-side Large Language Models (LLMs) without requiring API keys. It creates a bridge between websites and your local LLM, letting you use any model you want while interacting with WebMCP-enabled sites.

Installation for LLM Users

Quick Setup

The easiest way to install WebMCP is by specifying your MCP client:

npx -y @jason.today/webmcp@latest --config claude

Supported clients include claude, cursor, cline, windsurf, or you can provide a path to a custom JSON configuration.

If you prefer manual setup:

npx -y @jason.today/webmcp@latest --mcp

Connecting to Websites

To connect to a WebMCP-enabled website:

1. Ask your LLM to generate an MCP token
2. Copy the token
3. Paste it into the website's WebMCP input
4. The website will register with the token (which is then discarded)

If you prefer not to expose the token to your model, you can manually generate one:

npx @jason.today/webmcp --new

Note: Some MCP clients, including Claude Desktop, require a restart to access new tools.

Disconnecting

You can disconnect from a website by:

• Closing the browser tab
• Clicking "disconnect" on the WebMCP widget
• Shutting down the server with:

  npx @jason.today/webmcp -q
  

All configuration files are stored in the ~/.webmcp directory.

Adding WebMCP to Your Website

Basic Implementation

To add WebMCP to your website, include the WebMCP script:

<script src="webmcp.js"></script>

The WebMCP widget will automatically initialize and appear in the bottom right corner of your page. When clicked, it will prompt the user for a WebMCP token.

How WebMCP Works

WebMCP operates through a localhost-only websocket server, which acts as a bridge between the MCP client and websites. The process flow is:

1. The MCP client connects to the server using an auto-generated server token
2. A registration token is generated when requested
3. Web clients connect using this token and their domain
4. Web pages connect to their assigned channel based on their domain
5. When an LLM wants to use a tool/resource/prompt, the request flows:
   • MCP Client → MCP Server → WebSocket Server → Web Page
6. The web page performs the request and sends results back through the same path
7. Multiple web pages can connect simultaneously, each with their own tools and tokens

Using Docker

For those who prefer containerization, WebMCP supports Docker:

1. Use the included docker-compose.yml to run the websocket server
2. Start your MCP client with the --docker flag:

   npx -y @jason.today/webmcp@latest --config claude --docker
   

This allows you to dockerize the main process (websocket server) while your MCP client connects to the container via websocket.

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "webmcp" '{"command":"npx","args":["-y","@jason.today/webmcp@latest"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "webmcp": {
            "command": "npx",
            "args": [
                "-y",
                "@jason.today/webmcp@latest"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "webmcp": {
            "command": "npx",
            "args": [
                "-y",
                "@jason.today/webmcp@latest"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect