Connect Claude Desktop to a Browser-Based MCP Server

What is Claude Desktop?

Claude Desktop is Anthropic's official desktop application for macOS and Windows. It was the first major AI client to implement the Model Context Protocol (MCP), allowing users to extend Claude with custom tools, file access, databases, and APIs. When an MCP server is connected, Claude can directly call your tools during conversations.

Agent MCP Studio lets you build those tools visually in your browser — Python, SQL, and JavaScript — and expose them to Claude Desktop without running any server software locally.

Prerequisites

• Claude Desktop installed — download from claude.ai/download
• Node.js 18+ installed — nodejs.org (only needed for bridge.js)
• A modern browser (Chrome, Edge, or Firefox) open to agentmcp.studio

Step-by-Step Setup

1. Open Agent MCP Studio and go to Settings

   Navigate to agentmcp.studio, click the Settings tab, then scroll to the MCP Relay Bridge card. You'll see a unique session URL like wss://agentmcp.studio/api/relay/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx. This is your personal relay URL — nobody else has this UUID.

2. Download bridge.js

   Download the bridge script directly from the studio:

   curl -O https://agentmcp.studio/bridge.js

   Save it somewhere permanent, for example ~/mcp/bridge.js. Then install its one dependency:

   cd ~/mcp
   npm install ws

3. Click "Connect" in the Studio

   Back in the Settings tab, click the Connect button under MCP Relay Bridge. The status will show "Waiting for bridge.js…" — that's correct, it's waiting for the next step.

4. Configure Claude Desktop's MCP server

   Open (or create) your Claude Desktop config file. Copy your relay URL from the studio and paste it into the config:

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

   {
     "mcpServers": {
       "agent-mcp-studio": {
         "command": "node",
         "args": [
           "/Users/you/mcp/bridge.js",
           "wss://agentmcp.studio/api/relay/YOUR-SESSION-UUID"
         ]
       }
     }
   }

   Important

   Replace YOUR-SESSION-UUID with the actual UUID shown in your studio's Settings tab. Replace /Users/you/mcp/bridge.js with the absolute path where you saved the file.

5. Restart Claude Desktop

   Fully quit Claude Desktop (Cmd+Q on Mac, close from taskbar on Windows) and reopen it. Claude Desktop launches bridge.js automatically, which connects outbound to the relay.

   In the studio's status bar you'll see the 🌉 Bridge chip turn green and show "Live" — and in Claude Desktop you'll see a small hammer/tools icon indicating MCP tools are active.

6. Build tools and use them in Claude

   In Agent MCP Studio, go to the Generate tab, describe a tool in plain English, and click Register Tool. Immediately type in Claude Desktop: "What tools do you have available?" — Claude will list your new tool and can call it in real time.

How the Relay Works

Unlike traditional MCP setups that require a local server listening on a port, Agent MCP Studio uses a cloud relay:

• Your browser tab connects outbound to wss://agentmcp.studio/api/relay/{uuid} as the browser peer
• bridge.js connects outbound to the same URL as the bridge peer
• The relay server matches them by UUID and passes MCP JSON-RPC messages between them
• Claude Desktop → stdio → bridge.js → WSS → relay → browser tab → Pyodide / DuckDB

Because both connections are outbound, no firewall rules or port forwarding are needed. Each UUID session is completely isolated — 10,000 users can be connected simultaneously without any interference.

Troubleshooting

Claude Desktop doesn't show tools

• Make sure you clicked Connect in the Studio before restarting Claude Desktop
• Check that the UUID in your config matches the one shown in Settings exactly
• Verify the absolute path to bridge.js is correct
• Run node /path/to/bridge.js wss://agentmcp.studio/api/relay/UUID manually in a terminal to see error output

Bridge chip stays "Connecting…"

• Your browser may be blocking WSS connections — try a different browser or check extensions
• Corporate firewalls sometimes block WebSocket — try on a personal network

Tools disappear after refreshing the browser

The relay session is tied to the browser tab. If you close or refresh the studio, click Connect again — the UUID stays the same across refreshes, so you don't need to update your Claude Desktop config.

Frequently Asked Questions

Does Claude Desktop support MCP servers natively?▾

Yes — Claude Desktop has built-in MCP support on macOS and Windows. You list servers in claude_desktop_config.json and Claude Desktop launches them automatically each time it starts.

Where is the claude_desktop_config.json file?▾

On macOS: ~/Library/Application Support/Claude/claude_desktop_config.json. On Windows: %APPDATA%\Claude\claude_desktop_config.json. If the file doesn't exist, create it — Claude Desktop reads it on launch.

Do I need Python to connect Claude Desktop to Agent MCP Studio?▾

No. Agent MCP Studio uses bridge.js (Node.js), not Python. Install Node.js 18+ from nodejs.org and run npm install ws in the bridge folder — that's the only requirement.

Why aren't my MCP tools appearing in Claude Desktop?▾

Check four things: (1) the UUID in your config matches the one in Studio Settings exactly, (2) the absolute path to bridge.js is correct, (3) you clicked Connect in the Studio before restarting Claude, and (4) Claude was fully quit (Cmd+Q / close from taskbar) and reopened.

Do I need to restart Claude Desktop every time I add a new tool?▾

No. New tools registered in Agent MCP Studio appear in Claude Desktop immediately without restarting — the bridge stays connected and Claude discovers updated tools dynamically via the MCP protocol.

Related Integrations