Live Interactive Demo

Cosmic Books

Same bookstore. Two realities. On the left, an AI agent sees chaos. On the right, it sees clean, typed, callable tools.

The tools below are real — registered right now on this page via @webmcpregistry/react. Try them in the panel below, or open DevTools and call navigator.modelContext.getTools().

Without WebMCP

Cosmic Books

No SDK

sci-fi

Dune

Frank Herbert

sci-fi

Neuromancer

William Gibson

fiction

The Great Gatsby

F. Scott Fitzgerald

dystopian

1984

George Orwell

non-fiction

Sapiens

Yuval Noah Harari

sci-fi

Project Hail Mary

Andy Weir

What an AI agent sees

Raw HTML DOM

<div class="shop-grid" id="main">
  <div class="book-card" data-v-3a81f>
    <div class="bc__cover" style="bg:#c27">
      <span class="bc__badge">sci-fi</span>
    </div>
    <h3 class="bc__title">Dune</h3>
    <p class="bc__author">Frank Herbert</p>
    <span class="bc__price">$14.99</span>
    <button class="btn btn--primary btn--sm
      js-add-cart" data-pid="dune"
      onclick="__cart.add('dune',1)">
      Add to Cart
    </button>
  </div>
  <div class="book-card" data-v-3a81f>
    <div class="bc__cover" style="bg:#1a8">
      ...
    </div>
    ...
  </div>
  <!-- 4 more cards... -->
</div>
<form id="search-form" class="sf"
  action="/api/search" method="GET">
  <input class="sf__input" name="q"
    placeholder="Search books...">
  <select class="sf__select" name="cat">
    <option value="">All</option>
    <option value="sci-fi">Sci-Fi</option>
    ...
  </select>
</form>

The agent must:

1. Parse HTML → guess what .btn.js-add-cart does

2. Reverse-engineer __cart.add('dune',1)

3. Fill form inputs → submit → scrape response page

4. Hope selectors don't change in the next deploy

5. No idea if any action is destructive

With WebMCP

Cosmic Books

WebMCP Enabled

sci-fi

Dune

Frank Herbert

$14.99

sci-fi

Neuromancer

William Gibson

$12.99

fiction

The Great Gatsby

F. Scott Fitzgerald

$9.99

dystopian

1984

George Orwell

$11.99

non-fiction

Sapiens

Yuval Noah Harari

$16.99

sci-fi

Project Hail Mary

Andy Weir

$15.99

What an AI agent sees

navigator.modelContext.getTools()

[
  {
    "name": "search_books",
    "description": "Search the Cosmic Books
      catalog by keyword, genre, or price",
    "safetyLevel": "read",
    "inputSchema": {
      "properties": {
        "query":     { "type": "string" },
        "genre":     { "enum": ["sci-fi",
          "fiction", "dystopian",
          "non-fiction"] },
        "max_price": { "type": "number" }
      }
    }
  },
  {
    "name": "add_to_cart",
    "description": "Add a book to the cart",
    "safetyLevel": "write",
    "inputSchema": {
      "properties": {
        "book_id":  { "type": "string" },
        "quantity": { "type": "integer" }
      },
      "required": ["book_id"]
    }
  },
  {
    "name": "get_book_details",
    "description": "Get full book details",
    "safetyLevel": "read",
    "inputSchema": {
      "properties": {
        "book_id": { "type": "string" }
      },
      "required": ["book_id"]
    }
  }
]

The agent calls:

search_books({ genre: "sci-fi", max_price: 20 })

→ Typed JSON with 3 results, prices, ratings, IDs

add_to_cart({ book_id: "dune" })

→ { success: true, message: "Added 1x Dune to cart" }

Discovery

Without:Scrape DOM, guess button purposes, parse CSS class names

With:getTools() returns a typed catalog of every available action

Interaction

Without:Click buttons, fill forms, wait for DOM changes, pray

With:tool.execute(input) returns structured JSON — no DOM needed

Safety

Without:No way to know if an action is destructive until it's done

With:safetyLevel: "write" tells the agent to confirm before acting

Try It Live

Click an example to execute a real WebMCP tool call on this page

Example Queries

Tool Call Log

Click an example to see the tool call and response here

These tools are live. Open DevTools console and run:

const tools = navigator.modelContext.getTools()await tools[0].execute({ genre: "sci-fi", max_price: 20 })

3 tools registered on this page right now: search_books, add_to_cart, get_book_details