WebMCP and AI agents
Build websites and applications that work for users and their AI agents.
How WebMCP works
In just three steps, your site tells agents exactly what they can do.
Step 1
Your site registers tools
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 exposes them
The browser collects and presents these tools to the user's WebMCP-aware agent, alongside the page's URL, title, and origin permission scope.
Step 3
The agent takes action, no guessing needed
The agent sees a contract, supplies structured arguments, and your code does the rest. The user stays in the loop for permission and confirmation. No more guessing.
// the agent's view { "tool": "bookSlot", "arguments": { "date": "2026-07-31", "time": "14:00", "name": "Jerry Jones", "email": "jerry.jones@example.com" } }
Build tools for agents
Dive deeper into the WebMCP APIs and documentation.
When to use WebMCP
Discover opportunities for your site to help users and agents be more efficient, by adding WebMCP tools.
Imperative API
Define WebMCP tools with standard JavaScript to execute site-specific functions, such as form input and site navigation.
Declarative API
Transform your standard HTML forms into WebMCP tools by adding annotations.
WebMCP Evals
Test your tools to confirm agents understand when to call the tool, how to execute it, and what answers are acceptable.
Best practices
Learn best practices for using WebMCP APIs.
WebMCP tool security
Learn how to build secure tools for your website.
WebMCP and MCP
Together, WebMCP and MCP help agents accomplish personalized tasks on behalf of human users.
Build with AI agents
Modern web guidance
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
Build extensions with coding agents
Use Modern Web Guidance to build extensiopns faster, with the help of coding agents.
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.
Meet Gemini in Chrome
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.
Introducing AI agents
What are AI agents?
Understand the basics and definitions of the various emerging technologies, often referred to as AI.
Build agent-friendly websites
As web practitioners, it's critical that we build new technology thoughtfully and responsibly.