WebMCP examples

Example pages are complete web pages that show the WebMCP embed in use. Each card below is one page. Choose View and copy to read and copy its code, or Download to save the file. Then put it on a test page of your website.

• 01-minimal.html

  The paste-in snippet, and whether this browser can offer tools.

  View and copy Download
• 02-programmatic.html

  init with every option, its result, destroy, and starting again with another key.

  View and copy Download
• 03-inspect-and-call.html

  Lists the tools the script registers and lets you call any of them yourself, in any browser.

  View and copy Download
• 04-check-setup.html

  A setup checker: secure page, WebMCP support, and your integration's tool list or the exact error.

  View and copy Download
• 05-visitor-journey.html

  Plays the part of an AI assistant, asking a question and a follow-up, registering interest, sharing requirements and getting a link to a specialist.

  View and copy Download

Examples 01 and 02 need a browser with WebMCP switched on (the results are in the developer console). Examples 03, 04 and 05 work in any browser.

Steps#

1. Make a WebMCP integration for testing (see Set up the integration).
2. Copy the page you want, and replace the placeholders (wmk_YOUR_KEY and so on). A comment above each one says what to put there and where to find it in the dashboard.
3. Open the page on a website address listed under Websites where it's embedded on the integration, over https://, such as a test page of your website. Opening the file from your computer won't work.

Seeing and calling the tools without an AI assistant#

Before the snippet loads, example 03 puts a small wrapper in front of document.modelContext. The wrapper records each tool as the script registers it, then passes it on to the browser. In a browser without WebMCP it stands in for WebMCP, so the script still registers and you can call the tools from the page in any browser. AI assistants won't see them in that case. The first script in 03-inspect-and-call.html is the code to copy.

Before you click "Call"#

Examples 03 and 05 call your real tools. register_interest, share_requirements and book_callback create real contacts, leads and bookings in your account, and answer_question uses AI credit. Use test details, and tidy up afterwards.