This Free Protocol Puts AI In Any App

Modern web applications deliver immense power, yet users often grapple with clunky, manual interfaces. Navigating intricate menus, inputting precise data into countless fields, and mastering complex workflows remains the norm. This reliance on manual interaction creates friction, hindering productivity and limiting the intuitive potential of sophisticated software.

Imagine a future where you simply tell an application what you want it to do, using natural language. Instead of painstakingly adjusting sliders or typing values into forms, you articulate your desires, and the software instantly complies. This paradigm shift transforms user experience, making powerful tools accessible and intuitive through simple, conversational commands.

WebMCP, the Web Model Control Protocol, is the foundational technology enabling this profound shift. It moves far beyond simple chatbots, which primarily answer questions, to facilitate true AI-driven application control. This open standard allows artificial intelligence to directly interface with and manipulate the underlying data models—or "stores"—of any web application, translating conversational prompts into precise, actionable commands. WebMCP simplifies augmenting site functionality for applications already following a Model-View-Controller (MVC) pattern, common in frameworks like Redux React or Zustand React.

Jack Herrington, a prominent tech educator, recently provided a compelling demonstration of WebMCP's revolutionary potential in his video, "WebMCP Is A Free AI In Your App Let's." Herrington showcased a traditional 3D parametric modeling application, specifically designed for Multiboard projects, now imbued with AI capabilities. Previously, users manually measured components with calipers and laboriously entered dimensions into an OpenSCAD-rendered interface, a process Herrington described as "sucks."

With WebMCP and the MCP-B extension installed in the browser, an AI can now directly interpret commands such as "set the height to 81 mm and close off the front panel." The application, built with WASM for OpenSCAD rendering and Three.js for display, seamlessly integrates WebMCP. Developers register "tools"—functions like `list parameters`, `get parameters`, and `set parameters`—providing the AI with a structured way to interact. The AI uses the tool's description and input schema to determine how to send the correct arguments and execute functions. This direct, programmatic connection dramatically enhances an application's value, making it instantly more intelligent and user-friendly without requiring complex AI hosting.

Jack Herrington, a prominent figure in web development, recently showcased WebMCP's transformative power with a compelling real-world use case: a parametric 3D modeling tool for the Multiboard organization system. This open-source, 3D-printable system allows users to create custom panels and accessories for shop organization. Herrington's application lets users design bespoke parts, rendered from OpenSCAD code, making it invaluable for custom fabrication within the Multiboard ecosystem.

Previously, configuring these intricate models was a painstaking process, embodying a significant pain point for designers. Users would retrieve their physical calipers, meticulously measure real-world components, and then manually input dozens of precise dimensional parameters into the modeling interface. This manual data entry for each length, width, height, and panel cut-out was not only time-consuming and repetitive but also highly susceptible to errors, turning a creative design task into a tedious, detail-oriented chore.

WebMCP radically streamlines this interaction. Herrington demonstrated the 'after' scenario by simply speaking commands to an integrated AI via the MCP-B browser extension. Prompts like "set the height to 81mm and close off the front panel" instantly update the complex 3D model. AI interprets these natural language instructions, modifies the underlying OpenSCAD parameters, and the application, leveraging WASM for OpenSCAD execution and Three.js for rendering, immediately displays the revised, fully formed model.

This shift transforms a cumbersome, manual process into a fluid, conversational design experience. What once required precise numerical input and repetitive manual adjustments now responds to intuitive voice commands, delivering immediate, tangible value. WebMCP effectively abstracts away the complexity of managing dozens of input fields, allowing creators to focus on design intent rather than interface mechanics, making advanced parametric modeling accessible, efficient, and remarkably intuitive for any user.

WebMCP, or Web Model Context Protocol, emerges not as another JavaScript library or standalone application, but as a proposed web standard. Its fundamental goal is to standardize how artificial intelligence agents communicate directly with web applications, enabling seamless, programmatic interaction. This protocol aims to transform how AI understands and manipulates web content.

At its core, WebMCP dictates that websites expose their specific functionalities as structured "tools." These might include granular operations like `set_parameter` to adjust a value in a 3D model, or `get_data` to retrieve information from a database. Developers register these capabilities via a new browser API, `navigator.modelContext`, creating a machine-readable contract for their application's logic.

This direct API access starkly contrasts with the brittle, old-school method of AI interaction: screen scraping. Traditional AI agents often rely on visually parsing a web page, analyzing pixels and DOM elements to infer functionality. Such approaches are inherently slow, computationally expensive, and frequently break with even minor UI updates, making them unreliable for robust automation.

WebMCP offers a semantic, robust, and efficient alternative, allowing AI to bypass the visual layer entirely and interact directly with an app's underlying data model. This direct line of communication is a paradigm shift. While still a W3C Draft Community Group Report, indicating ongoing development and industry interest, its potential is clear, with early previews and discussions already surfacing, as highlighted in the Chrome for Developers blog: WebMCP is available for early preview | Blog - Chrome for Developers.

Implementing WebMCP effectively creates a programmatic interface for any web application, turning complex user interfaces into accessible sets of commands for AI. This not only streamlines automation but also unlocks entirely new possibilities for intelligent agents to assist users within existing web ecosystems, enhancing productivity without requiring a complete application overhaul.

WebMCP seamlessly integrates with existing application architectures, particularly those built on a Model-View-Controller (MVC) or similar state-driven paradigm. Jack Herrington's Multiboard 3D modeling tool exemplifies this by leveraging a robust, modern web stack to create an AI-ready experience.

At the core of this stack lies TanStack Store, a powerful library managing the application's mutable state. For the heavy lifting of 3D generation, the application compiles OpenSCAD—a text-based parametric CAD kernel—directly to WASM (WebAssembly). This allows complex geometric computations to run efficiently within the browser. Finally, Three.js takes the mesh output from OpenSCAD and renders it into an interactive 3D scene.

This state-driven architecture provides the perfect foundation for WebMCP. An AI, acting as an intelligent external controller, issues commands that directly interact with the application's "model" – its core data and state. This clear separation of concerns ensures that AI commands have a predictable and controlled impact on the application's behavior.

Consider the data flow: an AI, via the MCP-B browser extension, calls a registered WebMCP tool within the application, such as "set parameter." This tool, designed to validate and process the AI's input (e.g., "set height to 81mm"), then triggers an update to the TanStack Store. This store modification represents a change in the application's fundamental state, like a parameter value for a 3D model.

Crucially, this change in state automatically propagates through the application. The updated parameters in the TanStack Store prompt the WASM-compiled OpenSCAD engine to re-evaluate and regenerate the 3D model. The new mesh is then fed to Three.js, which instantly re-renders the updated object on screen. This reactive loop ensures the UI always reflects the current state, driven by AI commands.

Developers do not need to rebuild their applications from scratch to become WebMCP-compatible. Instead, they simply need to expose specific functions or actions within their existing state management system as WebMCP tools. This involves defining the tool's purpose, expected input schema, and the `execute` function that hooks directly into their store's `setState` methods. This minimal integration effort unlocks powerful AI control for any well-structured web application.

Herrington's implementation of WebMCP begins with a dedicated `registerWebMcpTools` function, invoked at the application's launch. This function first polyfills the WebMCP context if necessary, ensuring broad browser compatibility. It then retrieves the `model context` from the browser's `navigator` object, which serves as the central hub for registering all AI-callable tools available within the application.

Each tool registered with WebMCP requires three critical components for the AI to interact effectively. Developers define a unique name for the tool, such as "set parameter" or "list parameters," making its purpose immediately clear. Crucially, a clear, concise description guides the AI in understanding the tool's exact function and the appropriate scenarios for its invocation. This natural language explanation is paramount for the AI's decision-making process, allowing it to intelligently choose the right action.

An input schema, leveraging the robust capabilities of JSON schema, dictates the precise structure and validation rules for arguments the AI sends to the tool. This rigorous validation ensures the AI provides correctly formatted and valid data, preventing errors and improving the overall reliability of AI-driven interactions. Finally, the `execute` function encapsulates the core application logic. When the AI requests a tool's action, this function runs, translating the AI's high-level intent into concrete, executable application operations.

Consider the "set parameter" tool within Herrington's Multiboard application. This tool's primary role is to adjust a specific parametric value, like height or width, for the underlying 3D model. Its `execute` function dedicates significant code to robust input validation, parsing the incoming AI request against its defined JSON schema. If the AI provides malformed or out-of-range arguments, the system returns a detailed response, intelligently guiding the AI toward a correct input format for subsequent attempts.

Upon successful validation, the `execute` function calls `project_actions.set_override`. This crucial step directly updates the application's internal state by modifying the relevant parameter within the TanStack Store. The `project_store` functions as the single source of truth for the entire project's state, meaning any change automatically triggers a cascade of reactive updates. This includes a re-render of the OpenSCAD model.

This seamless process involves re-running the OpenSCAD code through WASM with the updated parameters, generating a new mesh, and rendering it efficiently in the browser via Three.js. All these complex display mechanics occur automatically, without requiring direct user interface interaction or explicit AI instruction. This architecture powerfully demonstrates WebMCP's potential: connecting an AI directly to an application's internal state management, abstracting away the complexities of the rendering pipeline.

The AI doesn't need to understand specific UI elements or rendering engines; it simply interacts with well-defined tools and schemas. This abstraction makes integrating sophisticated AI capabilities into existing web applications remarkably straightforward and efficient, enhancing user interaction with minimal development overhead.

WebMCP, while a groundbreaking proposed web standard for seamless AI integration, does not require waiting for native browser implementation to unlock its potential. Developers can harness its powerful capabilities today through a critical polyfill: the MCP-B Extension. This browser extension for Chrome implements the `navigator.modelContext` API, effectively bringing WebMCP’s core functionality to current browsers and enabling the vision of AI-powered applications right now.

This extension serves as your AI's indispensable bridge, transforming passive web pages into interactive AI platforms. It robustly allows intelligent agents, such as Claude, to actively discover and interact with the specific tools and functionalities exposed by a local web application. This bidirectional communication channel is crucial for an AI to not just understand the application's context, but also to manipulate its internal state and execute precise commands.

Installing the MCP-B Extension is a quick, user-friendly process, available directly from the Chrome Web Store. Once active, the extension’s interface immediately displays the tools registered from `localhost` (e.g., `list parameters`, `set parameters`, `get parameters`), precisely as demonstrated in Jack Herrington’s insightful video. This instant visual confirmation verifies your application’s successful readiness for AI interaction, showcasing its exposed functions for immediate use.

AI agents utilize the rich descriptive metadata and structured input schemas provided by these registered tools to comprehend their purpose, required arguments, and how to invoke them safely and accurately. This enables sophisticated natural language commands to drive complex application actions, transitioning from tedious manual UI adjustments to intuitive conversational prompts. For those exploring robust data management solutions that complement such reactive systems, the TanStack Start Overview | TanStack Start React Docs offers valuable architectural context. Developers gain a powerful, open mechanism to imbue existing apps with an intelligent, conversational layer without proprietary AI hosting, making any app AI-ready.

WebMCP fundamentally changes the landscape for AI web automation, rendering traditional screen scraping obsolete. Instead of relying on brittle visual parsing, this proposed standard enables AI to communicate directly with an application's exposed internal logic. This paradigm shift offers a robust, efficient, and secure alternative to the often-frustrating world of DOM-based automation.

Reliability stands as a primary differentiator. Conventional screen scraping tools, such as those built with Selenium or Puppeteer, operate by parsing HTML structures and targeting specific DOM elements. Even minor changes to a button's CSS class or an element's position can immediately break these scripts. WebMCP, conversely, establishes a stable, explicit API contract directly with the application's state and available actions. This contract remains immutable regardless of frontend UI modifications, ensuring consistent, unbreakable automation for AI agents.

Efficiency and cost savings are profoundly impacted. Feeding an entire HTML document to an AI for parsing is a token-intensive and expensive process. WebMCP dramatically reduces this overhead by transmitting only structured, relevant data payloads—for instance, the precise parameters required to configure a 3D model, not the entire page. This targeted data exchange leads to significant resource optimization; early statistics indicate a remarkable 53% reduction in operational cost and an impressive 78.6% decrease in token consumption for AI interactions, making advanced capabilities far more accessible.

Security and user control receive a critical upgrade. Headless automation scripts often execute in the background, potentially without explicit user consent, and can introduce considerable security vulnerabilities. WebMCP operates entirely within the user's own browser environment, leveraging its robust, built-in security models. The MCP-B extension acts as an explicit gatekeeper, requiring user activation and explicit permission before any AI access occurs. This design empowers users with granular control, transforming AI into a trusted, in-browser assistant rather than a potentially intrusive external agent.

Beyond simply viewing pixels and interpreting HTML, WebMCP ushers in a profound paradigm shift: your application isn't just seen, it's intrinsically understood. The traditional web, designed for human eyes, presents information. WebMCP transforms this into a functional web for artificial intelligences, where applications explicitly declare their capabilities.

Central to this transformation is the Tool Contract. Each WebMCP-enabled application publishes a formal, machine-readable contract detailing what functions it offers and precisely how an AI agent can invoke them. This isn't about guessing button clicks; it's an explicit declaration: "here is what I can do, and here is how you ask me to do it."

This explicit understanding enables AI to perform complex, multi-step actions with unparalleled reliability. The AI comprehends the app's underlying logic and available tools, not merely its visual layout. When an AI needs to adjust a Multiboard dimension, it doesn't navigate a UI; it calls the `set parameter` tool with specific values, as demonstrated by Jack Herrington's project.

Fragile screen scraping and brittle UI automation become obsolete. Instead, AI agents interact directly with the app's programmatic interface, ensuring actions succeed even if the visual design changes. This foundational shift empowers AI to become a truly capable co-pilot within your applications, executing tasks with precision and consistency.

Ultimately, WebMCP elevates your application to a first-class citizen in the burgeoning world of AI agents. It moves beyond being a passive interface, becoming an active, programmable endpoint that contributes meaningfully to sophisticated AI-driven workflows. Your app becomes an intelligent service, directly consumable and orchestratable by advanced AI, unlocking new levels of automation and user experience.

WebMCP's most compelling feature lies in its model-agnostic design. Unlike proprietary AI integrations that tether applications to a single vendor's large language model (LLM), WebMCP proposes an open, universal communication standard. This protocol acts as a neutral bridge, allowing any AI agent that understands its language to interact with a WebMCP-enabled application. This fundamentally shifts control away from AI providers and back to developers and users.

Imagine an ecosystem where your chosen AI assistant, whether it's Google's Gemini, Anthropic's Claude, OpenAI's GPT, or a locally run open-source model, can seamlessly understand and manipulate any WebMCP-compliant website. This prevents developers from suffering vendor lock-in, ensuring their applications' AI capabilities remain future-proof against shifts in the LLM landscape. An application built today with WebMCP won't become obsolete if a new, more powerful AI model emerges tomorrow.

This open approach unlocks a powerful vision for the web: users bring their preferred AI assistant to any site to help them accomplish tasks. Instead of being confined to a site's built-in, often limited, AI features, users gain the freedom to deploy their personal, customized AI to manage complex workflows, automate data entry, or even generate designs, as seen with Jack Herrington's Multiboard system. For more on the physical designs, explore the MultiBuild | Free 3D-Printed Modular Organization System.

Ultimately, WebMCP champions a decentralized AI future. It transforms web applications from passive interfaces into active, intelligent environments that welcome diverse AI collaboration. This standard promises a truly interoperable web, where the power of AI is dictated by user choice and open innovation, not by the walled gardens of tech giants.

Developers now stand at the precipice of a truly AI-native web. Jack Herrington’s OpenSCAD example clearly demonstrates how to imbue existing applications with intelligent, programmatic control. The path to integrating AI into your app’s core functionality is clearer than ever, moving beyond visual scraping to direct, API-level engagement.

Begin your journey by exploring Herrington’s robust proof-of-concept. His jherr/webmcp-openscad GitHub repository provides a complete, working example, showcasing how TanStack Store, WASM-compiled OpenSCAD, and Three.js form an AI-accessible backend. This detailed codebase offers an invaluable blueprint for exposing internal state and actions, making it the perfect starting point for your own experimentation and development.

Next, install the essential MCP-B Chrome Extension from the Chrome Web Store. This crucial browser bridge enables your local machine to communicate seamlessly with WebMCP-enabled applications. It allows you to interact with their exposed tools using an AI model of your choice, representing the immediate entry point to experiencing and building within this revolutionary new paradigm.

Now, turn your critical eye to your own applications. What manual, repetitive tasks do your users frequently perform that could benefit from intelligent automation? Think about complex configuration workflows, multi-step data entry, or sequences of actions that, while simple individually, become tedious when repeated. WebMCP allows you to define these critical application actions as callable functions, complete with precise input schemas and human-readable descriptions for an AI.

This isn't about replacing your existing user interface; it's about profoundly augmenting it with an intelligent, conversational layer. By making your app's internal logic programmatically accessible, you empower AIs to understand and manipulate its functions directly, driving unprecedented efficiency and opening entirely new interaction modalities for users. WebMCP champions an open, model-agnostic standard, ensuring your AI integrations remain flexible, interoperable, and future-proof. Take these first steps and help shape the future of application interaction.

What is WebMCP (Web Model Context Protocol)?

WebMCP is a proposed open web standard that allows websites to expose their functionality as structured 'tools' that AI agents can call directly, enabling more reliable and efficient in-browser automation.

How is WebMCP different from screen scraping?

Instead of parsing fragile HTML, which breaks with UI changes, WebMCP provides a stable, machine-readable API contract. This makes AI interactions faster, cheaper, and vastly more reliable.

Do I need to host my own AI model to use WebMCP?

No. WebMCP allows your website to connect with AI agents already running in the user's browser (via extensions like MCP-B). You simply provide the tools; the user brings their own AI.

Is WebMCP ready for production use?

WebMCP is currently in an experimental, early preview stage. It is available in Chrome Canary behind a feature flag and is being incubated by the W3C, but it is not yet a broadly supported web standard.