Connect Claude Code to any web application using the Model Context Protocol (MCP)
This demo shows how to build a browser extension that enables Claude Code (or any MCP client) to interact with web applications directly. The example includes a simple e-commerce shop that Claude can control via natural language commands.
- MCP Server: A Node.js server that implements the MCP protocol
- Browser Extension: Bridges between the MCP server and web applications
- Web App Integration: How to expose your app's functionality to MCP clients
┌─────────────────┐ ┌───────────────────────────┐
│ Claude Code │◄─── stdio ─────►│ MCP Server │
│ (MCP Client) │ │ (WebSocket port 3456) │
└─────────────────┘ └───────────┬───────────────┘
│ WebSocket
┌───────────▼───────────────┐
│ Browser Extension │
│ (Chrome content script) │
└───────────┬───────────────┘
│ window.postMessage
┌───────────▼───────────────┐
│ Web Application │
│ window.__MCP_BRIDGE__ │
└───────────────────────────┘
- Claude Code communicates with the MCP server via stdio (standard input/output)
- MCP Server runs a WebSocket server on localhost:3456
- Browser Extension connects to this WebSocket and injects into web pages
- Web App exposes
window.__MCP_BRIDGE__with tools Claude can call
mcp-web-bridge-demo/
├── web-app/ # Demo e-commerce shop
│ ├── index.html # Main HTML
│ ├── styles.css # Styling
│ ├── store.js # State management
│ ├── app.js # UI rendering
│ └── mcp-bridge.js # MCP tool definitions
├── extension/ # Chrome browser extension
│ ├── manifest.json # Extension manifest
│ ├── background.js # Service worker
│ ├── content.js # Content script (WebSocket connection)
│ ├── page-script.js # Page script (bridge access)
│ └── icons/ # Extension icons
└── mcp-server/ # Node.js MCP server
├── package.json
└── index.js # MCP protocol handler
cd web-app
# Serve with any static file server
npx serve -p 8080
# Or use Python
python3 -m http.server 8080Open http://localhost:8080 in Chrome.
- Open
chrome://extensions/in Chrome - Enable Developer mode (top right toggle)
- Click Load unpacked
- Select the
extension/folder
cd mcp-server
npm installAdd to your ~/.claude.json (in the project's mcpServers section):
{
"mcpServers": {
"demo-shop": {
"type": "stdio",
"command": "node",
"args": ["/path/to/mcp-web-bridge-demo/mcp-server/index.js"]
}
}
}Or use the CLI:
claude mcp add --transport stdio demo-shop -- node /path/to/mcp-server/index.jsRestart Claude Code and try:
> List all products in the shop
> Add the wireless headphones to my cart
> What's in my cart?
> Search for electronics
> Checkout
The demo shop exposes these MCP tools:
| Tool | Description |
|---|---|
listProducts |
List products with optional search/category filter |
getProduct |
Get details about a specific product |
searchProducts |
Search and update the UI |
addToCart |
Add a product to the cart |
removeFromCart |
Remove a product from the cart |
updateCartQuantity |
Change quantity of a cart item |
getCart |
Get current cart contents |
clearCart |
Empty the cart |
checkout |
Complete the purchase |
In your web app, create a bridge object:
window.__MCP_BRIDGE__ = {
isReady: true,
handleRequest: async (request) => {
// Handle MCP protocol requests
// See web-app/mcp-bridge.js for full example
},
getTools: () => [
// Your tool definitions
],
};
// Notify extension when ready
window.dispatchEvent(new CustomEvent('mcp-bridge-ready'));const TOOLS = [
{
name: 'myTool',
description: 'What this tool does',
inputSchema: {
type: 'object',
properties: {
param1: { type: 'string', description: 'Description' },
},
required: ['param1'],
},
},
];Add your domain to manifest.json:
{
"host_permissions": ["https://your-app.com/*"],
"content_scripts": [{
"matches": ["https://your-app.com/*"],
...
}]
}- Check that the web app is open in Chrome
- Look for
[MCP Extension]logs in browser console (F12) - Verify the MCP server is running (
[mcp-web-bridge]in terminal)
- Check
/mcpin Claude Code to see if the server is listed - Restart Claude Code after adding the MCP server config
- Look for errors in the MCP server output
- Make sure
window.__MCP_BRIDGE__exists in your web app - Check that
isReady: trueis set - Verify the bridge's
handleRequestfunction works