WebMCP is MCP for Single Page Apps!

WebMCP: Enabling AI Agent Interaction with Single Page Applications

Key Concepts:

• WebMCP: A new version of the Model Context Protocol (MCP) designed to enable Single Page Applications (SPAs) to interact with AI agents.
• MCP (Model Context Protocol): A standard for communication between AI models and applications, allowing agents to utilize application functionality.
• MCP-B Extension: A Google Chrome extension providing a polyfill for WebMCP, enabling its use in browsers that don't natively support it.
• Zustand: A small, fast, and scalable bearbones state-management solution used in the example React application.
• JSON Schema: A vocabulary that allows you to annotate and validate JSON documents. Used to define input parameters for WebMCP tools.
• Agentic: The ability of an AI agent to autonomously take actions and achieve goals.

1. Introduction to WebMCP and its Potential

The video introduces WebMCP, a new iteration of the Model Context Protocol (MCP), specifically tailored for Single Page Applications (SPAs). The core benefit of WebMCP is enabling SPAs to become integrated into the broader AI ecosystem, allowing AI agents to interact with and utilize the functionality of these applications. The presenter emphasizes the potential for this technology to be ahead of mainstream adoption, similar to the initial rollout of MCP.

2. Demonstration with a TanStack Start Application

A practical demonstration is conducted using a simple TanStack Start application (a SPA) available on GitHub (link in the description). The application simulates an online ordering system where users can add items to a cart. The presenter utilizes the free MCP-B extension for Google Chrome to polyfill the WebMCP standard, allowing the SPA to communicate with AI agents. The application initially registers six WebMCP tools: “get menu,” “add to cart,” and “get cart” (the presenter notes a potential bug causing the duplication).

3. Agentic Interaction: Ordering a Steak and Pretzel Combo

The presenter demonstrates agentic interaction by prompting the system for a “steak in pretzel combo.” The AI agent, leveraging the “get menu” tool, retrieves the menu data directly from the page (avoiding the need for web scraping). It then recommends a “classic wiz” or “provolone steak.” Upon requesting to add all recommended items to the cart, the agent successfully utilizes the “add to cart” tool, updating the cart in real-time. The final cart total is $72.

4. Code Implementation: Connecting Zustand State to WebMCP

The video delves into the code implementation, revealing that the application is built with React and utilizes Zustand for state management. Zustand is described as a model-view-controller approach where Zustand serves as the model. The core components include:

• useStore Hook: A Zustand hook used to access and modify the application state (cart items, menu items, etc.).
• registerWebMCPTools Function: This function, executed during client-side startup, registers the application’s tools with WebMCP. It checks for the presence of navigator.modelContext (or the WebMCP polyfill) before registering.
• Tool Registration: Each tool (e.g., get_menu) requires a name, description, input schema (defined using JSON Schema), and an execute function.
• Payload Structure: The execute function returns a payload in MCP format, containing a content object with a type (e.g., "text") and text (a JSON stringified output).
• State Management Integration: The execute function interacts with the Zustand store (or other state management solution like Redux) to perform actions like adding items to the cart.

5. Extending Functionality with MCP-B and Claude Desktop

The presenter showcases the extensibility of WebMCP-B by demonstrating its integration with Claude Desktop. The MCP-B settings provide an MCP URL that can be added as a connector to Claude. This allows Claude to directly interact with the SPA through the MCP-B server and Chrome extension. A successful demonstration involves Claude ordering a “mushroom Swiss” from Philly’s Finest, which is then added to the cart.

6. Technical Architecture and Data Flow

The video highlights the complex data flow: Claude Desktop communicates with a cloud server running MCP-B, which then interacts with the MCP-B Chrome extension. The extension, in turn, communicates with the webpage, executing the WebMCP-registered functions. This layered architecture enables seamless interaction between a desktop AI agent and a web application.

7. Key Argument and Perspective

The presenter argues that WebMCP represents a significant step towards enabling more sophisticated and agentic AI interactions with web applications. He believes this technology is currently underutilized but has the potential to become a dominant paradigm in the future, drawing a parallel to the early adoption of MCP. He encourages developers with SPAs to experiment with WebMCP to explore its capabilities.

8. Notable Quote

“Like a lot of the stuff that I present on this channel, what you're seeing now is probably six months ahead of when this thing actually gets out into the real world, like I did with MCP back before it became the super big thing that it is today.” – The presenter, emphasizing the forward-looking nature of the technology.

9. Data and Statistics

The video doesn't present extensive data or statistics, but it demonstrates a functional application with a cart total of $72, illustrating a real-world use case.

10. Conclusion and Takeaways

WebMCP offers a powerful mechanism for integrating SPAs into the AI ecosystem, enabling agentic interactions and unlocking new possibilities for automation and user experience. The demonstration highlights the seamless communication between AI agents (Claude), a cloud server (MCP-B), a browser extension (MCP-B), and a web application (TanStack Start). Developers are encouraged to explore WebMCP and its potential to enhance their applications, as it represents a potentially transformative technology in the evolving landscape of AI and web development. The availability of free code and the MCP-B extension lowers the barrier to entry for experimentation.