Add WebMCP to your website

For people

You don't need to understand the code below. In short:

• What it is: a small script on your website that offers "tools" to AI assistants running in the browser, like list the events, fill in the contact form or register for this workshop.
• Why it matters: instead of guessing what's on a page, the AI asks your site and gets your real dates, links and details. And it can get things done: an assistant that already knows your visitor's name and email can fill in and send a form in seconds, with the visitor saying yes before anything is sent.
• What it costs: nothing. It's a web standard in the making, and it doesn't change how your site looks.
• If your site is on SpaceClub: it's already built in. Nothing to do.

Want us to do it for you? Get in touch.

For AI assistants

You've been asked to add WebMCP to the user's website. Follow these steps. Ask the user before changing anything you're unsure about, and show them what you added at the end.

1. Check what the site is built with

• A SpaceClub site (it has a spaceclub.json file): WebMCP is built in. Make sure features.webmcp is not false in spaceclub.json, then stop. Tell the user it's already on.
• A static site generator (Eleventy, Astro, Hugo, Jekyll, Next.js and so on): you'll add a data file that's built with the site, and one script.
• A hosted builder (Squarespace, Wix, WordPress.com): add the script through the platform's "code injection" or custom code setting, and write the site's data straight into the script.

2. Make a data file the tools can read

At build time, write /webmcp-data.json from the site's own content, so new pages and events show up by themselves. Keep it small and factual:

{
  "site": { "title": "Site name", "description": "One line about the site", "url": "https://example.org" },
  "pages": [{ "title": "About", "url": "/about/", "description": "Who we are" }],
  "events": [{ "slug": "june-meetup", "title": "June meetup", "date": "2026-06-12", "startTime": "6:00PM", "location": "Melbourne", "url": "/events/june-meetup/" }],
  "posts": [{ "title": "Our news", "date": "2026-05-01", "url": "/posts/our-news/", "description": "Short summary" }]
}

Leave out anything private: draft pages, members' details, admin links.

3. Add the tools script

Add /assets/js/webmcp.js and load it on every page with <script src="/assets/js/webmcp.js" defer></script>. It only runs in browsers that support WebMCP, so it's safe everywhere else.

// WebMCP: offers this site to AI assistants in the browser as tools
(function () {
  const mc = document.modelContext || navigator.modelContext;
  if (!mc) return;

  // tools reply in the MCP format: a list of text pieces
  const reply = (value) => ({ content: [{ type: "text", text: JSON.stringify(value) }] });
  const fail = (message) => ({ content: [{ type: "text", text: message }], isError: true });

  let dataPromise;
  const getData = () => (dataPromise ||= fetch("/webmcp-data.json").then((r) => r.json()));

  mc.registerTool({
    name: "get-site-info",
    description: "Get an overview of this website: what it is, and links to its main pages.",
    inputSchema: { type: "object", properties: {} },
    async execute() {
      const { site, pages } = await getData();
      return reply({ name: site.title, about: site.description, pages });
    },
  });

  mc.registerTool({
    name: "list-events",
    description: "List this site's upcoming events with their dates, times and places.",
    inputSchema: { type: "object", properties: {} },
    async execute() {
      const { events } = await getData();
      const today = new Date().toISOString().slice(0, 10);
      const upcoming = events.filter((e) => !e.date || e.date >= today);
      return upcoming.length ? reply(upcoming) : fail("There are no upcoming events.");
    },
  });

  mc.registerTool({
    name: "go-to-page",
    description: "Open a page on this website, e.g. /about/. The page reloads, so its tools are replaced by the new page's tools.",
    inputSchema: {
      type: "object",
      properties: { path: { type: "string", description: "Site path starting with /, e.g. \"/events/\"." } },
      required: ["path"],
    },
    async execute({ path }) {
      if (!path.startsWith("/") || path.startsWith("//")) return fail("Only pages on this site. Use a path starting with /.");
      setTimeout(() => { location.href = path; }, 100); // reply first, then leave the page
      return reply({ navigating: path });
    },
  });
})();

4. Choose the right tools for this site

Start with these, and only add the ones the site has content for:

Tool	What it does
get-site-info	What the site is, with links to its main pages
search-site	Searches pages, posts and events (use the site's own search index if it has one)
list-pages	Every page with its link and description
go-to-page	Opens a page on this site
list-events / get-event	Upcoming events, or one event's full details
list-posts	Recent posts, newest first
show-item	Scrolls to and highlights something on the current page
fill-contact-form	Fills in a form for the visitor, and sends it once they say yes (one per form, on the page that has it)

Then add the ones that are special to this site. Think about what visitors come to do, not just read: register for an event, book an appointment, sign up to the newsletter, request a quote, add an event to their calendar. Those are the tools that save people the most time, because their AI already knows their details.

Tools that do things

A form tool fills the fields, and only sends when the AI passes send: true after the visitor has agreed:

mc.registerTool({
  name: "fill-contact-form",
  description: "Fill in the contact form with the visitor's details. Set send to true only after the visitor has checked the details and said to send it.",
  inputSchema: {
    type: "object",
    properties: {
      name: { type: "string", description: "Your name" },
      email: { type: "string", format: "email", description: "Email" },
      message: { type: "string", description: "Message" },
      send: { type: "boolean", description: "Send the form. Only true once the visitor has said yes." },
    },
    required: ["name", "email", "message"],
  },
  async execute({ send, ...values }) {
    const form = document.querySelector("form[name=contact]");
    for (const [key, value] of Object.entries(values)) form.elements[key].value = value;
    if (!send) return reply({ filled: Object.keys(values), next: "Show the visitor the details and ask if they'd like to send it." });
    setTimeout(() => form.requestSubmit(), 100); // reply first, then send
    return reply({ sent: true });
  },
});

5. Follow these rules

• Describe tools in plain words. The description is all the AI sees, so say what it does and what it returns.
• Let the AI do things, with the visitor in charge. Tools can fill in forms, book and register, not just read. Anything that sends, books, pays or deletes needs a clear yes from the visitor first: give the tool a send (or confirm) option that the AI only sets after asking, and say so in the description.
• Build form tools from the form. Read each field's name, label, whether it's required and a select's choices, so the tool keeps working when the form changes. Reply with what was filled and what's still missing, so the AI can ask for the rest. This site's version does this for every form.
• Stay on the site. Navigation tools only accept paths on the same site.
• Spell dates out. Give "Friday 12 June 2026" alongside the date, so small models don't have to work out the day.
• Only offer a tool where it makes sense. Event tools on event pages, for example, plus the general ones everywhere.
• Reply before navigating. Leaving the page straight away loses the reply.

6. Test it

Build the site, open /webmcp-data.json and check it's correct. Then open the site in a browser with WebMCP turned on (support is still early, so check the current way to enable it) and confirm the tools are listed and each one returns sensible results. Tell the user which tools you added.

Reference

• SpaceClub's full version, with every tool above: webmcp.js on GitHub
• This site's own data file: /webmcp-data.json
• A site using it with an in-browser AI chat: localAI