เดโมgooglechromelabs.github.io
Explainer mini-site
An interactive comparison between DOM-driven agent interaction and pages that publish explicit, structured WebMCP tools.
ตัวอย่าง เครื่องมือ และคู่มือ WebMCP
สำรวจเดโม ไลบรารี เครื่องมือ และคู่มืออย่างเป็นทางการที่คัดสรรมาเพื่อทดลองและพัฒนาด้วย WebMCP WebMCP คืออะไร?
แหล่งข้อมูล 65 รายการ
เดโมgooglechromelabs.github.io
Le Petit Bistro
A restaurant booking flow whose annotated form lets an agent validate details and submit a reservation through a declared tool.
เดโมgooglechromelabs.github.io
React Flight Search
A React travel search interface that exposes flight criteria and results as callable tools while keeping the UI in sync.
เดโมgooglechromelabs.github.io
WebMCP zaMaker!
A hands-on pizza configurator where imperative tools let an agent choose the size, style, sauce, toppings, and extras.
เดโมgooglechromelabs.github.io
Mystery Doors
A small multi-page adventure that demonstrates how declarative form tools and imperative JavaScript tools can work together.
เดโมgooglechromelabs.github.io
WebMCP Maze
A maze game designed to be started, inspected, and solved entirely through an agent calling page-level tools.
เดโมgooglechromelabs.github.io
CineFlow
A cinema checkout prototype where agents can change location, filter films, choose a showing, and begin a ticket order.
เดโมgooglechromelabs.github.io
Order Tracking
A simulated retail account that declares tools for looking up recent deliveries and starting a return from the same page.
เดโมgooglechromelabs.github.io
L'Atelier Hotel Chain
A polished hotel finder that combines annotated forms with registered functions for searching properties and comparing amenities.
เดโมgooglechromelabs.github.io
WebMCP Sports
An Angular sporting-goods shop that lets agents search its catalog and operate the cart through both WebMCP API styles.
เดโมandreinwald.github.io
Shoe store
A React storefront that makes product discovery, cart management, and the purchase path available to an agent.
เดโมwebmcp-flight-demo.netlify.app
Flight booking
A compact flight finder published in parallel imperative and declarative versions for easy implementation comparison.
เดโม65s6dw.csb.app
Animal Viewer
A minimal CodeSandbox example in which a page tool switches the displayed image between a cat and a dog.
เดโมmatipojo.github.io
React Chess
A chessboard that publishes tools for reading the position, listing legal moves, moving pieces, promoting pawns, and restarting.
คู่มือmedium.com
Moving Beyond Screen Scraping
A tutorial and sample booking app that contrasts agent-native tool calls with screen scraping, including a token-use case study.
เว็บไซต์audit.wordlift.io
AI Audit
A live service whose page tool launches an agent-readiness review covering discoverability, structured data, content, and SEO.
เดโมwebmcp-blackjack.heejae.dev
Blackjack Agents
A blackjack table where separate player, opponent, and dealer agents repeatedly observe state and act through described tools.
เครื่องมือh3manth.com
WebMCP Bridge
A browser-side bridge that projects tools from a remote MCP server into the page API so in-browser agents can call them.
เดโมshidh.in
WebMCP × Excalidraw × WebAI
A diagramming pipeline that turns a natural-language request into Mermaid, validates it, and renders the result in Excalidraw.
เดโมwebmcp-flow.vercel.app
WebMCP Flow
An agent-operated architecture canvas with tools for adding nodes, connecting edges, labeling relationships, and applying layout.
เดโมgooglechromelabs.github.io
The Morning Ritual
A premium coffee shop prototype with agent-friendly catalog navigation, repeat ordering, and product specification lookup.
เดโมgooglechromelabs.github.io
UrbanEstates
A property map whose registered tools let an agent change location, price, amenity, and map filters from a request.
เดโมgooglechromelabs.github.io
Luxe Leather
An Angular leather-goods store with declared tools for product search, policy checks, and shopping-cart actions.
เดโมgooglechromelabs.github.io
WebMCP Smart Home
A configurable home dashboard where tools reveal and rearrange controls for cameras, lighting, climate, and energy.
เว็บไซต์webmcp.cool
webmcp.cool
A searchable directory of WebMCP-enabled sites with a JSON discovery API and its own tools for querying and submitting entries.
เดโมgooglechromelabs.github.io
WebMCP Page Agent
A Gemini-powered controller that accepts natural language and invokes tools offered by another WebMCP-enabled page.
เดโมjsonstat.com
JSON-stat WebMCP Explorer
A statistics workbench that can fetch JSON-stat datasets, filter dimensions, build cross-tabs, and export the selection to CSV.
เว็บไซต์stacktr.ee
Stacktree
A no-sign-in publishing service whose page tool accepts generated HTML and returns a private share link plus an ownership claim link.
เดโมsnugug.github.io
Wordup
A casual guessing game that uses the browser Prompt API to generate words and exposes the complete game loop through WebMCP.
เดโมcrema-and-co-client.fly.dev
Crema & Co.
A full-stack espresso store where agents compare machines, check compatibility with owned gear, highlight decisive specs, manage the cart, and place orders.
เดโมcodex-modeling-studio.openai.chatgpt.site
Codex Modeling Studio
A browser-based 3D studio where an agent can inspect scenes, edit geometry and materials, and render assets while the user watches in the same viewport.
เดโมmargin-local-docs.openai.chatgpt.site
Margin Editor
A local note editor where an agent can create notes, read comments, and respond under its own identity inside the document.
เดโมcrossword-desk-studio.openai.chatgpt.site
Crossword Desk
A shared crossword workspace where an agent can propose themed words, build a grid, refine clues, and solve alongside the user.
เดโมfieldwork-beat-machine.openai.chatgpt.site
Fieldwork // 12
A 12-voice beat machine whose tools let an agent compose patterns, tune groove and sounds, and iterate while playback stays editable.
เดโมwandernote.openai.chatgpt.site
WanderNote
An editable trip planner where an agent turns context into an hourly itinerary and map, then responds to comments and revisions.
เดโมwebroom.openai.chatgpt.site
Webroom
A browser photo editor where an agent can adjust exposure, color, composition, and image state while the user reviews each change.
เดโมsundaytable.openai.chatgpt.site
Sunday Table
A shared weekly meal planner that lets an agent coordinate recipes, groceries, and preferences without overwriting the user's edits.
เดโมcubecade.openai.chatgpt.site
Cubecade
A 3D puzzle cube whose tools expose every face and accept move sequences, allowing an agent to plan and animate a solution.
เดโมpaperie-webmcp-greeting-cards.openai.chatgpt.site
Paperie
A greeting-card canvas where an agent can supply artwork and copy, then refine format, messages, and envelope details with the user.
เดโมverdant-market-grocery.openai.chatgpt.site
Verdant Market
A grocery storefront where an agent can search 110 products, inspect items, and manage a shared cart through structured page tools.
ไลบรารีlatch.tools
Latch
A one-script integration that detects common search, cart, and form handlers, then registers matching WebMCP tools without a framework.
ไลบรารีnpmjs.com
use-webmcp-tool
A React hook that registers a page tool when a component mounts and automatically handles updates and unregistration.
ไลบรารีnpmjs.com
webmcp-types
A TypeScript declaration package for applications that use the experimental browser WebMCP interfaces.
เครื่องมือgithub.com
Model Context Tool Inspector
A Chrome extension for discovering a page's WebMCP tools, viewing their input schemas, invoking them manually, and diagnosing failures.
เครื่องมือgithub.com
webmcpify
An agent skill that inventories an existing app, proposes a tool surface, implements approved tools, and verifies them in a browser.
เครื่องมือgithub.com
MCP Webcomic Site Server
A tutorial template that gives an 11ty comic archive a website, an MCP server, and browser tools for reading and navigation.
ข้อกำหนดwebmachinelearning.github.io
WebMCP Draft Specification
The canonical Web Machine Learning Community Group draft defining declarative form tools and the imperative model-context API.
คู่มือdeveloper.chrome.com
Chrome for Developers: WebMCP
Chrome's practical introduction to WebMCP, including setup, API choices, security constraints, examples, and testing guidance.
คู่มือdeveloper.chrome.com
WebMCP Imperative API
Official Chrome guidance for registering JavaScript tools with names, descriptions, JSON input schemas, annotations, and asynchronous handlers.
คู่มือdeveloper.chrome.com
WebMCP Declarative API
Official Chrome guidance for turning standard HTML forms into agent-callable tools with declarative names, descriptions, and field semantics.
คู่มือdeveloper.chrome.com
When to Use WebMCP and MCP
An official comparison of the in-page and server protocols, their different trust and execution boundaries, and how they work together in agentic products.
คู่มือdeveloper.chrome.com
How WebMCP Fits in User Journeys
A user- and agent-centered guide to choosing critical journeys where structured page tools can make common tasks faster and more reliable.
คู่มือdeveloper.chrome.com
WebMCP Best Practices
Official planning guidance for defining a focused tool strategy, mapping tools to user needs, and keeping agent-facing contracts understandable.
คู่มือdeveloper.chrome.com
Build Agentic Workflows with WebMCP Tools
Official guidance for designing useful tool boundaries, names, descriptions, schemas, responses, and workflows for a website or web application.
คู่มือdeveloper.chrome.com
Evaluate WebMCP Tools
Official testing guidance for checking whether agents select the right tool, supply valid arguments, execute successfully, and return acceptable results.
คู่มือgithub.com
Awesome WebMCP (GoogleChromeLabs)
The GoogleChromeLabs-maintained index that collects live WebMCP demonstrations, reusable libraries, and developer utilities.
เครื่องมือgithub.com
WebMCP Evals
A command-line evaluation harness for checking whether an interactive model selects the expected tool and produces valid arguments.
ไลบรารีgithub.com
WebMCP Polyfill
A lightweight compatibility layer used by the GoogleChromeLabs demos to emulate WebMCP tools and related CSS states in other browsers.
คู่มือgithub.com
Awesome WebMCP (W3C CG)
The Web Machine Learning Community Group's curated index of WebMCP explainers, demos, frameworks, tools, tutorials, and talks.
คู่มือdeveloper.chrome.com
WebMCP Origin Trial
Chrome's guide to enrolling an origin in the WebMCP trial from Chrome 149, including token setup, deployment, and rollout constraints.
คู่มือdeveloper.chrome.com
WebMCP Tool Security
Official guidance for designing safer WebMCP tools, including annotations, trusted origins, data exposure, and tool-description budgets.
คู่มือangular.dev
Angular WebMCP
Angular's guide to app-, route-, and service-scoped tools with typed inputs, lifecycle cleanup, Signal Forms, and testing.
เครื่องมือchromewebstore.google.com
WebMCP Radar
A Chrome extension that detects WebMCP tools as you browse, shows the count on the toolbar, and lets you inspect names, descriptions, annotations, and input schemas without executing them.
เครื่องมือchromewebstore.google.com
nekuda WebMCP Workbench
A Chrome side-panel workbench for inspecting and invoking page tools, running evaluations and audits, tracing calls, and replaying saved tests.
คู่มือdevelopers.cloudflare.com
WebMCP with Cloudflare Browser Run
Documentation for testing WebMCP in remote Chrome lab sessions and connecting agents through Chrome DevTools MCP.