WebMCP Documentation

WebMCP lets websites expose tools that AI agents can discover and call. This section covers the different ways agents can connect to your tools.

Connection Options

Embedded Agent

Recommended - Drop-in AI assistant for your website

AI Browsers

Native browser AI (Chrome AI, Perplexity, etc.)

MCP-B Extension

Browser extension for any website

Chrome DevTools MCP

Development and testing via DevTools Protocol

Comparison

Method	Setup	Best For	Requirements
Embedded Agent	Add `<webmcp-agent>` element	Production websites	App ID
AI Browsers	None	Future-proof integration	AI-enabled browser
MCP-B Extension	Install extension	Testing, any website	Chrome extension
Chrome DevTools MCP	MCP client config	Development, automation	Chrome + MCP client

How It Works

All methods follow the same pattern:

Your website registers tools via navigator.modelContext
The agent discovers available tools
When needed, the agent calls tools with arguments
Tools execute in the browser and return results

Quick Start

The fastest way to get started is with the Embedded Agent:

<script type="module">
  import 'https://unpkg.com/@mcp-b/global@latest/dist/index.esm.js';
  import 'https://unpkg.com/@mcp-b/embedded-agent@latest/dist/web-component.esm.js';
</script>

<webmcp-agent
  app-id="your-app-id"
  api-base="https://your-api-endpoint"
/>

Get Started with Embedded Agent

Complete setup guide and configuration options

Start Here

Calling WebMCP Tools

Connection Options

Embedded Agent

AI Browsers

MCP-B Extension

Chrome DevTools MCP

Comparison

How It Works

Quick Start

Get Started with Embedded Agent

​Connection Options

Embedded Agent

AI Browsers

MCP-B Extension

Chrome DevTools MCP

​Comparison

​How It Works

​Quick Start

Get Started with Embedded Agent

Connection Options

Comparison

How It Works

Quick Start