WebMCP Tools

L'Atelier is a high-fidelity hotel booking application demo designed to showcase the Web Model Context Protocol (WebMCP). It demonstrates how AI agents can interact with a modern web application using both imperative and declarative tools to perform tasks like searching for hotels, filtering amenities, and completing bookings.

Key features include:

• Dynamic Search: Location-based property searches.
• Amenity Filtering: Real-time filtering by price and luxury amenities.
• Immersive Details: High-resolution galleries and policy highlighting.
• Seamless Booking: A multi-step flow supporting AI-driven automation.

The Travel WebMCP Demo is a React-based flight search application designed to demonstrate WebMCP integration. It showcases how a web application can expose structured tools to an AI agent or automation layer, allowing the agent to programmatically interact with the UI (searching flights, applying filters, reading results) via a standardized interface.

Key Features:

• Flight Search: Search by origin, destination, dates, and passengers.
• Interactive Results: View detailed pricing and duration information.
• Advanced Filtering: Filter by price range, airlines, stops, and times.
• WebMCP Integration: Uses document.modelContext to register tools for AI agents.

The Coffee Shop WebMCP Demo ('The Morning Ritual') is a multi-page static site demonstration of a WebMCP implementation for a specialty coffee shop. It showcases how an AI agent can navigate a multi-page website, retrieve personal order history, and perform actions that are visually synchronized with the UI.

Key Capabilities Demonstrated:

• Multi-page Context: An agent can use navigation tools on a homepage to reach specialized product pages.
• UI Synchronization: Tools provide immediate visual feedback, such as incrementing cart counters, showing toast notifications, or scrolling the user to specific sections of a page.

WebMCP Studio is a developer tool designed to accelerate Web Model Context Protocol (WebMCP) deployments. It uses autonomous agents (via Chrome DevTools MCP or Google Antigravity) to browse your website, identify functional UI elements (like search bars, filters, and forms), and automatically generate the necessary WebMCP code.

It solves the 'cold start' problem by automating the discovery and implementation of tools, providing both Imperative JavaScript and Declarative HTML outputs, along with automated test cases.

The WebMCP Smart Home demo is a React-based dashboard designed to showcase WebMCP implementation. It demonstrates how an AI agent can programmatically reconfigure a dashboard's layout—adding, removing, or re-ordering control widgets—to match a user's situational needs and intent.

Key Features:

• Dynamic UI Synchronization: Uses the Imperative WebMCP API to update React state, mounting or unmounting widgets with Framer Motion animations.
• Visual Feedback: Displays an animated status banner with a spinning gear icon ⚙️ and an explanation message whenever the agent performs an action. The banner persists for 2 seconds.

The pizza-maker demo is an imperative WebMCP implementation of an interactive pizza builder. It demonstrates how an AI agent can interact directly with application state by registering fine-grained tools. This allows an agent to perform actions like changing pizza size, setting styles, managing layers (sauce/cheese), adding/removing toppings, and generating shareable URLs.

To ensure compatibility in browsers without native WebMCP support, this project imports the WebMCP Polyfill.

🚀 Live Demo: https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/

The WebMCP Explainer demo visualizes the difference between how AI agents interact with web pages via traditional site scraping versus using the WebMCP protocol.

Key features demonstrated include:

• Side-by-side comparison: A calendar button demo showing traditional interaction vs. interaction via the WebMCP extension.
• WebMCP Mechanics: Explanations of how pages declare structured tools.
• Resources: Links to the WebMCP specification and feedback channels.

You can view the live demo at: https://googlechromelabs.github.io/webmcp-tools/demos/explainer/

CineFlow is a WebMCP imperative demo that simulates a movie ticket purchase flow. It demonstrates how an AI agent can interact with a web application to:

• Update Location: Change the user's city (e.g., London, Paris, New York) to filter available movies.
• Query Content: Filter the movie catalog by genres (e.g., "horror", "action", "comedy").
• Select Showtime: Choose a specific movie, date, and time to automatically navigate the user to the checkout section.

Key technical features include real-time filtering, URL-based state synchronization (using search parameters for location/genre and hash navigation for movie details), and toast notifications for agent actions.

For more complex logic that cannot be handled by simple HTML forms, use the Imperative WebMCP approach. You can register custom tools directly in JavaScript using the document.modelContext.registerTool method. This allows you to define custom functions that the AI model can invoke to perform specific actions within the application state.

// Example of registering an imperative tool
document.modelContext.registerTool({
  name: 'talk',
  description: 'Allows the model to talk to the whispering woods',
  execute: async (args) => {
    // Custom logic here
    console.log('Talking...', args);
  }
});

The demo utilizes the Imperative WebMCP API via document.modelContext.registerTool to expose site-wide navigation and product-specific capabilities to an AI agent.

When tools are called, they are designed to trigger specific UI behaviors:

• Cart Updates: Reordering a product increments the cart counter and displays a toast notification.
• Visual Navigation: Requesting technical specifications triggers a smooth scroll and a visual highlight on the relevant section of the page.

// Conceptual usage of the Imperative WebMCP API used in this demo
document.modelContext.registerTool({
  // tool definition details
});