---
title: WebMCP Agents
description: Let AI agents use your web page, and let the person on it see every step.
sidebar:
  # The "Get started" heading opens this page, so it needs no row of its own under it.
  label: Get started
  hidden: true
---

With [WebMCP](https://developer.chrome.com/docs/ai/webmcp), a page hands an AI agent **tools** it can call: "add to
cart", "place order". WebMCP Agents makes every call visible to the person on the page: a ghost cursor flies to the
control, types the agent's values into the real fields, and stops for a real click on anything that matters.

<video autoPlay loop muted playsInline data-no-zoom width="960">
  <source src="/blume-assets/content/_/57483bdb165c55eb.webm" type="video/webm" />
  <source src="/blume-assets/content/_/7727424589c22846.mp4" type="video/mp4" />
</video>

*An agent adds a tee to the cart: the cursor flies to the form, types the values and clicks, and the cart opens.*

## A tool is one function with two callers

You already have the function. A person clicks the button; an agent calls the tool.

```tsx
// An agent calls this.
useWebTool({
  id: "clear_cart",
  title: "Clear cart",
  description: "Empty the cart. The user confirms on the page.",
  requireConfirmation: true,
  execute: clear,
});

// A person clicks this.
<Button onClick={clear}>Clear cart</Button>
```

Nothing is added to the button for the cursor: it finds the control by its name, like a screen reader would. With
`requireConfirmation` it parks there, and `clear` runs only after the person's own click.

## Choose your framework

Pick one. The docs remember it, and every page after shows that framework's code.

{/* The five ways in. Shown on the docs home and on Installation: edit it here, once. */}

**[Vite](/docs/installation/vite)**

A single-page app with React.

**[Next.js](/docs/installation/nextjs)**

The App Router, with client components for the tools.

**[TanStack Start](/docs/installation/tanstack-start)**

Full-stack React on Vite and TanStack Router.

**[Astro](/docs/installation/astro)**

Server-rendered pages with a React island.

**[No framework](/docs/installation/no-framework)**

Plain HTML and TypeScript, with `createWebAgents`.

## Already set up?

Go straight to what you want to do. Each page shows your framework's code.

| I want to… | Read |
|---|---|
| Let an agent press a button on my page | [Define a tool](/docs/build/define-a-tool) |
| Let it fill in a form | [Tools with input](/docs/build/tools-with-input) |
| Make it wait for the person's click | [Confirm before it runs](/docs/build/confirm-before-it-runs) |
| Have tools for the whole app, on the right pages | [Tools across your app](/docs/build/tools-across-your-app) |
| Give it the time, the location, the current page | [Common tools](/docs/build/common-tools) |
| Run a tool from my own button | [Call a tool](/docs/build/call-a-tool) |
| Tell the assistant how my site works | [Define an agent](/docs/build/define-an-agent) |
| Put a chat on the page | [Add the chat](/docs/build/add-the-chat) |
| Run the assistant without a chat | [Call an agent](/docs/build/call-an-agent) |
| See what the agent sees, and run tools myself | [Devtools](/docs/build/devtools) |
| Run the model in the browser, with no server | [On-device agent](/docs/more/on-device-agent) |
| Ship it | [Deploy](/docs/more/deploy) |

Looking for one API? Open the [reference](/docs/reference).

:::note[WebMCP is still a preview]
WebMCP ships in Chrome behind an origin trial, and its shapes still move between versions. WebMCP Agents absorbs
those differences, so your code does not have to. In any other browser, the provider loads a
[polyfill](/docs/more/polyfill) of the same API by itself.
:::