It is definitely possible to expose your UI-driven WebMCP tools to your application’s chatbot backend. Since WebMCP is designed as a browser-native standard, the tools you register on the page are essentially "waiting" for an MCP-aware client to discover them.
Here is how you can bridge the gap between your frontend tools and your backend LLM.
1. The Bridge: Relay Tools to the Backend
To make the tools available to your chatbot backend, you need a transport layer that can bridge the browser’s navigator.modelContext to your server.
The Relay Pattern: You can use a library like @mcp-b/webmcp-local-relay. By embedding a small script snippet on your page, you can relay the registered tools to an external MCP server.
The Workflow: 1. Your UI components register themselves via navigator.modelContext.registerTool().
2. A relay script (or a custom postMessage bridge) sends the tool schemas (name, description, JSON input schema) to your chatbot's backend.
3. When the LLM decides to use a tool, the backend sends a "call" command back through the websocket/relay to the browser.
4. The browser executes the local JS function and returns the result (e.g., "State updated" or "Form submitted") back to the chatbot.
2. Implementation Options
Depending on how your chatbot is architected, you have two primary paths:Method How it Works Best For
Local Relay Uses a pre-packaged snippet to expose tools to a local or remote MCP client. Testing with tools like Claude Desktop or custom agents.
postMessage Bridge If your chatbot is an iframe or a widget on the same page, you can listen for tool calls via standard browser messaging. Seamlessly integrating a "built-in" chat widget with the parent page's tools.
Custom Backend Proxy Your backend acts as the "orchestrator," keeping a registry of "Live Tools" for every active user session. Enterprise-grade apps where the backend needs full control over the session state.