# WebMCP

Let the agent built into a browser read and use your components.

`registerTools` exposes `snapshot`, `act`, and `query` through the browser's `document.modelContext` API. It uses the bridge you created in [Get Started](/docs/agents/connect-an-agent), so you register the tools once for your app.

For a complete example with ChatGPT prompts, follow the [Guide](/docs/agents/connect-an-agent/guide).

## Register the Tools

Import `registerTools` from the same package as your bridge:

```ts
import { registerTools } from "@ui-sdk/react/agent"
import { agent } from "./agent"

const unregister = registerTools(agent, {
  allow: (step) => step.action !== "press" || confirm(`Press ${step.args[0]}?`),
})
```

The browser's agent can now read components and call their actions. You didn't write that agent, so `registerTools` asks for an `allow` of its own. It runs for every step the browser's agent asks for, after your bridge's [permissions](/docs/agents/connect-an-agent/permissions), and works the same way: return `false` to refuse a step. Here it asks you before every press. To let every step run, pass `allow: () => true`. Your change callbacks still apply.

Registration requires a browser that provides `document.modelContext.registerTool`. In a browser without it, `registerTools` does nothing.

## Remove the Tools

Call the returned function when your integration is no longer needed:

```ts
unregister()
```

This removes the browser tools. You can still call methods on `agent` directly.

## Tool Annotations

`snapshot` and `query` have `readOnlyHint: true`. All three tools have `untrustedContentHint: true` because their results include page content, such as labels and text people entered.

These are hints for the tool consumer. `snapshot` and `query` never open a component. Use [Permissions](/docs/agents/connect-an-agent/permissions) to decide which requested actions your app accepts.