Use WebMCP to build sites that work better with AI agents.
Get started Join the origin trial

How WebMCP works

In just three steps, your site tells agents exactly what they can do.
Step 1

Your site declares the actions an agent can take, as WebMCP tools. Each tool has a name, description, and JSON schema.

// Imperative API
document.modelContext.registerTool({
  name: "bookSlot",
  title: "Book a consultation slot",
  description: "Reserve a 30-minute consultation.",
  inputSchema: {
    type: "object",
    properties: {
      date:  { type: "string", format: "date" },
      time:  { type: "string" },
      name:  { type: "string" },
      email: { type: "string", format: "email" }
    },
    required: ["date", "time", "name", "email"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input, client) => {
    return await api.book(input);
  }
});
Step 2

The browser collects and presents these tools to the user's WebMCP-aware agent, alongside the page's URL, title, and origin permission scope.

Your site speaks to the browser, which translates for the agent.
Step 3

The agent sees a contract, supplies structured arguments, and your code does the rest. The user stays in the loop for permission and confirmation. It's faster, more reliable than actuation.

// the agent's view
{
  "tool": "bookSlot",
  "arguments": {
    "date": "2026-07-31",
    "time": "14:00",
    "name": "Jerry Jones",
    "email": "jerry.jones@example.com"
  }
}

WebMCP APIs

Dive deeper into the WebMCP APIs and documentation.

What is WebMCP and why should you care?

Read the doc

Define WebMCP tools with standard JavaScript to execute site-specific functions, such as form input and site navigation.

Read the doc

Transform your standard HTML forms into WebMCP tools by adding annotations.

Read the doc

Together, WebMCP and MCP help agents accomplish personalized tasks on behalf of human users.

Read the doc

Optimize your site for agents

Create secure tools that match your user's needs and your site's capabilities.

Read examples from a user and agent's perspective to understand what WebMCP tools to support a critical user journey (CUJ).

Read the doc

Just as you'd do for any software application, your first step should be to plan your tool strategy.

Read the doc

Learn how you can define and build WebMCP tools that are useful for your website or web application.

Read the doc

Read our early guidance on security for those building tools with WebMCP.

Read the doc

Before releasing WebMCP tools, test to confirm agents understand when to call the tool, how to execute it, and what answers are acceptable.

Read the doc

Build with AI agents

Use Modern Web Guidance with your favorite AI coding agents, so you can access web best practices in your preferred workflow. 
npx modern-web-guidance@latest install
Read the docs
Use Modern Web Guidance to build extensiopns faster, with the help of coding agents.
Read the doc

Safety considerations for agent developers

Agent developers must design protections against malicious text from untrusted content. We identify some security techniques relevant to agents using WebMCP.
Read our guidance

AI assistance, right in your browser. Get key takeaways, clarify concepts, and find answers based on the context of your open tabs.

Gemini works across your Google apps to help you power through your day.

Discover Gemini in Chrome

Introducing AI agents

web.dev
Understand the basics and definitions of the various emerging technologies, often referred to as AI.
Read the doc
web.dev
As web practitioners, it's critical that we build new technology thoughtfully and responsibly.
Read the doc
web.dev
Build a foundation of knowledge about AI to add features to your websites and web applications.
Take the course