Connect WebMCP tools to your bot

If your website exposes tools through WebMCP, the Chat Thing widget can offer them to your bot automatically, so the bot can use actions your page already provides, such as searching a catalogue, adding an item to a basket or moving around your app.

WebMCP is a proposed browser standard that lets a web page register tools on document.modelContext for AI agents to use. Chat Thing turns each compatible tool into a client-side power-up.

Before you start

• Who can do this: team owners and admins.
• The Chat Thing chat widget is on your page. See Install the chat widget.
• Your page registers its tools on document.modelContext, either through the browser's own WebMCP support or your own compatible shim.

Steps

1. Open your bot and go to the Channels tab, then open the settings for the website (web) channel.
2. Under Advanced features, turn on Advanced SDK features and click Update settings. Without this, the bot ignores tools registered by the page. See Turn on Advanced SDK features.
3. On your page, set webMcp: true in window.chatThingConfig before the widget script loads:

<script>
  window.chatThingConfig = {
    webMcp: true,
  };
</script>
<script
  src="https://chatthing.ai/chat-widget.js"
  type="text/javascript"
  id="YOUR_BOT_ID"
  async
  defer
></script>

Use the widget snippet from your bot's Embed button rather than copying this one, so it has your bot ID and any settings you've already chosen.

When the widget starts, it finds the tools your page has registered, and keeps the list up to date when the page adds, changes or removes tools (the toolchange event).

Check it works

1. Open your page in a browser with WebMCP support (or with your shim loaded).
2. Open the browser console and check there are no Chat Thing warnings about WebMCP or skipped tools.
3. Ask the bot to do something one of your tools handles, and check the tool runs.

Browser support and fallback

The widget checks whether document.modelContext is available. If it's missing, or doesn't provide what's needed, the widget logs a warning in the console and skips WebMCP. The rest of the chat works normally.

Chat Thing doesn't include a WebMCP polyfill. To support browsers without WebMCP, load your own compatible shim before the widget, and use the browser's own support when it's there.

The WebMCP demo and source code shows a complete example that prefers the browser's WebMCP support and falls back to a local shim.

Which tools work

A tool's inputSchema is passed to the bot unchanged, so any JSON Schema keyword works, including integer, pattern, minimum, format, default, enum, tuples and oneOf.

A tool is skipped only when its schema can't be passed on safely: it isn't valid JSON Schema, it wouldn't survive being converted to JSON and back (NaN, undefined, functions), it uses a remote $ref, or it's larger than the size limits for power-up schemas. Each skipped tool logs the reason in the browser console, with what to change.

Troubleshooting

The bot doesn't see my tools

• Check Advanced SDK features is turned on for the bot's website channel.
• Check webMcp: true is set in window.chatThingConfig before the widget script loads.
• Look in the browser console for a warning that document.modelContext isn't available, or that a tool was skipped.

A tool is skipped

The console message names the problem. Usually the schema is too large or uses a remote $ref. Simplify the schema or inline the referenced part.