How to add WebMCP to your website
Updated
WebMCP lets a web page offer tools to the AI agent in a visitor's browser, so the agent calls a function instead of clicking through the page. With Kaiva Bridge you publish an MCP server for your API, database or documents, choose which of its tools are public, and paste one snippet into your page. WebMCP support in Kaiva Bridge is in beta, and browsers with WebMCP are Chrome so far.
Step by step
- Publish a serverConnect an API, a database, documents or a spreadsheet and publish it. Tools that read are the ones a website can offer.
- Choose the public toolsOn the server's Connect tab choose Your website (WebMCP), turn on the tools anyone may call, and confirm that anyone can call them and see their results.
- List your sitesGive the exact address of each site, for example https://app.example.com. Use https; http is allowed for localhost while you build.
- Paste the code into your pageClick Generate website code and paste the snippet into your page, for example just before </body>. It is plain code you can read, and it loads no script from Kaiva.
- Check it worksOpen your site in a browser with WebMCP. The browser console shows [Kaiva WebMCP] ready and the tools offered, and the Connect tab shows the last tool call from your site.
What the snippet does
In a browser with WebMCP it asks your server for its public tools and registers each one with document.modelContext. When the browser's AI agent calls a tool, the call goes to your server's address like any other MCP call, and appears in Tool calls and your usage.
In other browsers it does nothing, and your page works as before. window.kaivaWebMcp tells you which happened: ready, unsupported or error.
The key in your page is public
Anyone can read the snippet, so anyone can copy its key. A website key is built for that: it reaches only the tools you made public on it, and only tools that read can be public. If a public tool changes, or the server's source or credential changes, the key stops offering it until you approve it again. Tools you expose later are never added on their own.
The site list stops other websites from using the key in a browser. It is not a password. Make public only tools whose results anyone may see; private data needs each visitor to sign in, which website keys do not do.
Change it later
Edit a website key on the Connect tab to change its sites or public tools. The key stays the same, so the code on your site keeps working. Revoke it to stop it at once.
Free includes 3 MCP servers, 200,000 tool calls a month and 200 pages of documents, with no card.
Other ways to do it
- Write WebMCP tools yourselfRegister tools with document.modelContext in your own code and call your own backend. Best when a tool should act on the signed-in visitor's own account.
- Connect an AI client insteadIf people use Claude, ChatGPT or Cursor rather than a browser agent, add your server to the client over MCP. No website code is needed.
Questions
- What is WebMCP?
- A proposed web standard that lets a page offer tools to the AI agent in the visitor's browser through document.modelContext. It is in Chrome so far.
- Is it safe to put the key in my page?
- Yes, for tools you are happy for anyone to call. The key reaches only the tools you made public, and only tools that read can be public.
- What happens in browsers without WebMCP?
- Nothing. The snippet sees no WebMCP, offers no tools and your page works as before.
- Can a website key change data?
- No. Only tools that read can be made public.
- Do the calls count towards my plan?
- Yes. They are tool calls like any other, and appear in Tool calls.