See WebMCP in action
Watch the same product search through two paths: interpreting a website’s interface and using a structured tool.
Same task. A clearer path.
“Find a backpack under $60.” One request, two ways to search the same catalog.
Illustrative simulation, not a live AI run or speed benchmark. The steps and timing are scripted; no external requests or native tool calls are made.
Interpret the interface
Go places.
Carry less.
Bags for the everyday adventure.
- Read the website and locate its search bar.
- Type “backpack” into the search bar.
- Set the maximum price to $60.
- Press Search and wait for the response.
- Read the matching search results.
- Select the Canvas backpack result.
Use an explicit tool contract
Go places.
Carry less.
Bags for the everyday adventure.
- Discover search_products and its defined inputs.
- Call search_products with { query: "backpack", maxPrice: 60 }.
- Read the structured product result.
The interface-driven path has to interpret fields and read visible results. The tool-driven path receives named inputs and structured output. It can reuse the site’s search logic even if the layout changes. Poor tool descriptions or broken implementations can still cause failures.
Understand the tools behind the demo
Explore what WebMCP is, how registration works, and the JavaScript and HTML examples.
Read the WebMCP guide