Live Demo

Try it: The demo is a tiny shopping cart where addToCart is an existing function made agent-readable with one line. The Inspect panel below is simple-webmcp/inspect — same tools agents see.

Open demo in new tab → · Works with native Chrome WebMCP or dev-polyfill shim.

Shopping Cart

Products

• MacBook — £1,299
• Keyboard — £99

Cart — add_to_cart tool via WebMCP

Agent: “Add a keyboard to my cart.”
→ add_to_cart({ productId: 'keyboard', quantity: 1 })
→ { ok: true } — UI updates

Chrome canary with WebMCP origin trial + inspector extension. In other browsers, uses simple-webmcp/dev-polyfill for local testing (in-memory, not real cross-browser). For production cross-browser, the demo also works with @mcp-b/webmcp-polyfill.

How it's built — one function

// app/cart.ts — your existing app logic, no rewrite
async function addToCart({ productId, quantity }: { productId: string; quantity: number }) {
  cart.push({ productId, quantity });
  return { ok: true, cart };
}

// expose — same function, one line
import { webmcp } from 'simple-webmcp';
const addToCartTool = webmcp(addToCart, { description: 'Add product to shopping cart' });

// React page — visible while mounted
import { useWebMCP } from 'simple-webmcp/react';
function CartPage() {
  const tool = useWebMCP(addToCartTool); // or useWebMCP(addToCart, {description})
  return <CartUI />;
}

Without simple-webmcp:

document.modelContext.registerTool({
  name: 'add_to_cart',
  description: 'Add a product...',
  inputSchema: { type:'object', properties:{ productId:{type:'string'}, quantity:{type:'number'}}, required:['productId','quantity']},
  execute: ({productId, quantity}) => addToCart({productId, quantity})
}, {signal});

Same function. Same app. One line vs manual inputSchema + execute wrapper + lifecycle.

Admin dashboard (e-commerce/CRM)

Ordinary functions:

const searchCustomers = async (input) => db.search(input);
const getCustomer = async (input) => db.get(input);
const updateCustomer = async (input) => db.update(input);

const tools = [webmcp(searchCustomers), webmcp(getCustomer), webmcp(updateCustomer)];

From the active component only:

function CustomersView() {
  const t = useWebMCP(searchCustomers, { description: 'Search customers' });
  return <Table />;
}

Component lifecycle = agent capability. Route hierarchy (app/customers/layout.tsx → <Scope>) naturally scopes tools.

Run locally

# in repo
npm run build
# demo is static — open examples/demo/index.html or run docs
npm run docs:dev # http://localhost:5173/simple-webmcp/demo/

Video

15-second screen capture: agent says “Add a keyboard” → add_to_cart executes → cart updates. Placeholder — record in Chrome canary with WebMCP inspector.

---

Get Started → · Why simple-webmcp? → · GitHub