WebMCP

registerTools exposes snapshot, act, and query through the browser's document.modelContext API. It uses the bridge you created in Get Started, so you register the tools once for your app.

For a complete example with ChatGPT prompts, follow the Guide.

Register the Tools

Import registerTools from the same package as your bridge:

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, 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:

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 to decide which requested actions your app accepts.