---
title: "Add an AI copilot to a WebMCP website with Chat Thing"
canonical_url: "https://chatthing.ai/blog/chat-thing-webmcp-website-copilot"
last_updated: "2026-09-21T11:28:50.431Z"
meta:
  description: "Chat Thing now supports WebMCP. Its embedded agent can discover and use the structured tools exposed by a website, with an opt-in SDK bridge and safe fallback."
  "og:description": "Chat Thing now supports WebMCP. Its embedded agent can discover and use the structured tools exposed by a website, with an opt-in SDK bridge and safe fallback."
  "og:title": "Turn a WebMCP-enabled website into a copilot with Chat Thing - Blog - Chat Thing"
  "twitter:description": "Chat Thing now supports WebMCP. Its embedded agent can discover and use the structured tools exposed by a website, with an opt-in SDK bridge and safe fallback."
  "twitter:title": "Turn a WebMCP-enabled website into a copilot with Chat Thing - Blog - Chat Thing"
---

[← Back to blog](https://chatthing.ai/blog)**Blog**# **Turn a WebMCP-enabled website into a copilot with Chat Thing**

![Zef](https://res.cloudinary.com/djyjvrw5u/image/upload/v1710941716/IMG_2278_d3b5e4fa69.jpg)

Zef

21 Sept 2026

~ 4 min read

---

![Turn a WebMCP-enabled website into a copilot with Chat Thing](https://res.cloudinary.com/djyjvrw5u/image/upload/v1789726192/chat_thing_webmcp_blog_hero_f20eb2715d.png)

---

### **On this page**

1. [From answering questions to using the website](#from-answering-questions-to-using-the-website)
2. [We tried one bridge across six very different sites](#we-tried-one-bridge-across-six-very-different-sites)
3. [Switch it on](#switch-it-on)
4. [Experimental, opt-in and backwards-compatible](#experimental-opt-in-and-backwards-compatible)
5. [Why this feels like a big deal](#why-this-feels-like-a-big-deal)

A WebMCP-enabled website already knows how to tell AI agents what it can do. Until now, it still needed an agent that could listen.

Chat Thing can now be that agent.

We have shipped experimental WebMCP support in the Chat Thing SDK. Put a Chat Thing widget on a WebMCP-enabled page and the agent can discover the tools that page exposes, use them in conversation, and send the result back through the website's own interface.

That means a website that already exposes actions such as `search-products`, `add-to-basket`, `update-chart` or `book-appointment` can gain a conversational copilot without building a separate agent integration for every action.

The bit we are excited about is how little glue is required. With your Chat Thing embed already on the page, enabling the bridge takes one web-channel setting and one config flag.

See the bridge working across four different sites:

## From answering questions to using the website

Most website assistants can answer questions about the page. They cannot use the product they sit inside unless somebody gives them a separate set of custom tools.

[WebMCP](https://github.com/webmachinelearning/webmcp) gives websites a standard way to expose those tools in the browser. The page names each action, describes when it is useful and supplies a JSON Schema for its inputs. A compatible agent can call the action directly rather than hunting through the interface with screenshots and simulated clicks.

Chat Thing now connects the two sides.

When the widget loads with WebMCP enabled, it:

1. finds the tools registered on `document.modelContext`;
2. makes them available to the Chat Thing agent as client-side power-ups;
3. forwards the agent's tool call back to the page;
4. returns the result to the conversation;
5. keeps the tool list in sync if the page changes it while the user is browsing.

The page stays in control of the functions it exposes. The user stays in the normal website. Chat Thing supplies the conversational agent.

## We tried one bridge across six very different sites

We tested the integration against six synthetic demos from [Google Chrome Labs](https://github.com/GoogleChromeLabs/webmcp-tools).

The same embedded Chat Thing agent:

- reordered a previous coffee order and updated the bag;
- filtered a cinema catalogue to horror films;
- rearranged a smart-home dashboard around the controls the user wanted;
- changed an analytics view to show 404 responses grouped by path;
- configured a large pesto pizza without cheese using several tools;
- started a maze, inspected it and made a valid move.

![An embedded Chat Thing agent beside an analytics dashboard after using the page's WebMCP tool to show 404 requests by path](https://res.cloudinary.com/djyjvrw5u/image/upload/v1789415603/analytics_dashboard_after_2618dc6b9d.png)

Across all six demos, the same Chat Thing bridge used each page's actions without a separate copilot integration for every site.

We also tested a small fake storefront end to end. The assistant searched the catalogue for a warm lamp under £70, chose the matching product, added it to the bag and changed the visible bag count from zero to one.

[Watch the 24-second storefront demo](https://files.catbox.moe/6izvwd.mp4) or [inspect the demo source](https://github.com/pixelhop/chatthing-webmcp-demo).

## Switch it on

First, open your agent's **Web channel** settings and enable **Advanced SDK features**. This is the server-side permission that allows a page to register client-side tools.

Then add `webMcp: true` before loading the normal Chat Thing widget:

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

```

The page must expose its tools through `document.modelContext`. Chat Thing does not create the website's WebMCP tools for you. It discovers the tools that are already there and gives your agent a safe route to call them.

The bridge carries each tool's raw JSON Schema through to the model rather than translating a short list of keywords. That means schemas using constraints such as `integer`, `pattern`, `minimum`, `enum`, tuples or `oneOf` retain their meaning. Schemas are still checked and bounded before they reach the model. Invalid, remote or over-sized definitions are skipped with a diagnostic instead of being silently weakened.

## Experimental, opt-in and backwards-compatible

WebMCP is still an experimental browser API. Chrome and Edge have origin trials, ChatGPT Desktop is listed as supporting it, and Brave has experimental support in Leo. The API and browser behaviour may continue to change.

Chat Thing's integration is opt-in for the same reason. It only starts when both **Advanced SDK features** and `webMcp: true` are enabled.

If the browser does not expose a compatible `document.modelContext`, the bridge stops and the rest of the Chat Thing widget carries on normally. You can supply your own compatible shim or polyfill for development and fallback support, but the SDK does not install one automatically.

There is an important security boundary too. Tool names, descriptions, arguments and results come from the host page and may be sent to the model. Only enable the feature on pages you control. Each tool should validate its inputs, enforce the current user's permissions and put confirmation around destructive or sensitive actions.

## Why this feels like a big deal

WebMCP is getting a lot of attention right now. OpenAI has just run its WebMCP Challenge with support from Google Chrome, Shopify, Cloudflare, Netlify, Vercel and Render. Chrome and Edge are running origin trials, and the official implementation tracker now covers browser agents as well as browsers.

The standard is early, but the product idea is strong: websites should be able to tell agents what useful actions they support instead of making every agent reverse-engineer the interface.

Chat Thing makes the in-page version immediately useful. The website brings its tools. Chat Thing brings the agent, conversation, model choice, knowledge, conversation history and the rest of the platform around it.

If you already have a WebMCP-enabled site, try the bridge on one low-risk, visible action first. Let the agent search, filter or configure something the user can inspect and reverse. Then build out from there.

Read the [Chat Thing SDK guide](https://chatthing.ai/docs/sdk#connect-webmcp-tools) for the full setup and safety notes.

### **Related articles **

[![SupportBench: we tested 7 AI models as customer support agents](https://res.cloudinary.com/djyjvrw5u/image/upload/v1787909980/supportbench_a_v3_wordmark_e65734419a.png)](https://chatthing.ai/blog/supportbench) [<h4>SupportBench: we tested 7 AI models as customer support agents</h4>](https://chatthing.ai/blog/supportbench)

We tested seven AI models on 1,085 support conversations. Gemini 3.7 Flash led the main score, while Grok 4.6 wrote the preferred reply most often.

[![Our co-working space down the road just got an AI agent. Here's what happened.](https://chatthing.ai/open-graph.png)](https://chatthing.ai/blog/blog-coworking-space-agent) [<h4>Our co-working space down the road just got an AI agent. Here's what happened.</h4>](https://chatthing.ai/blog/blog-coworking-space-agent)

C-Space is a coastal coworking space in Newquay with hot desks, private offices and event hire. This case study looks at how their AI agent answers the everyday questions, parking, opening hours, walk-ins, the moment they come in, so the team can stay focused on running the space instead of sitting on the inbox.

[![Password Protection: Keep Your Agents Private](https://res.cloudinary.com/djyjvrw5u/image/upload/v1785753697/image_5_c24cc874c4.png)](https://chatthing.ai/blog/password-protection) [<h4>Password Protection: Keep Your Agents Private</h4>](https://chatthing.ai/blog/password-protection)

Not every agent should be open to the world. Whether it holds internal docs, serves paying customers only, or is still in testing, Chat Thing lets you lock down any agent's hosted page and chat widget with a password, in just a few clicks.

<dl>

<dt>**Previous **</dt>
<dd>[← SupportBench: we tested 7 AI models as customer support agents](https://chatthing.ai/blog/supportbench)</dd>

</dl>