webmcp demos

To check before proceeding

• Enable a Chrome Flag chrome://flags/#enable-webmcp-testing
• Install the Chrome Extension WebMCP Model Context Tool Inspector
• Add a Gemini API Key from aistudio.google.com
• Serve locally with pnpx vite

• DEMO 1: Dholl Puri Stand

  A roadside food stand. Your agent takes the order, you eat.

• DEMO 2: Pixel Painter

  A 16×16 canvas. Ask for a heart, get a heart. Usually.

• DEMO 3: Trip Splitter

  A shared trip tab. Your agent keeps score of who owes whom. Built with Vue and the vue-webmcp composable.

• DEMO 4: Beach Permit

  A camping permit office. Two plain HTML forms, no hand-written schema — the browser reads the fields and your agent fills them in.

• DEMO 5: Tool Inspector

  The other direction. This page is the agent — it discovers the tools on itself and calls them, no extension needed.