Suede Agent Studio WebMCP Storefront

Why WebMCP fits

A service marketplace asks people and agents to make the same decisions: find a service for a job, understand its inputs and price, and decide whether to proceed. An agent that only sees a visual page has to infer buttons, fields, and changing layouts. Suede Agent Studio exposes the storefront as four structured tools in the visitor's current browser page: find_services, get_service, preview_service, and buy_service.

The tool set stays constant as the catalog grows. Agents search by intent, then inspect the selected service instead of loading a separate tool definition for every listing.

A better experience for people and agents

The agent handles discovery and contract reading. The person can review the service's exact price, input schema, review policy, data handling, and worked example before deciding whether to act. Creator-authored catalog text is marked as untrusted content, and returned results are bounded.

The demo follows a concrete purchasing-operations task: find a service that compares a purchase order with an invoice, inspect PO Match Gate, and run a free preview using synthetic documents. The worked example illustrates a $15 discrepancy. The actual preview is explicitly a dry run: it records a run and returns a receipt without model inference, payment, or settlement. It is not presented as a fresh model-generated discrepancy analysis.

How WebMCP was implemented

The existing Next.js, React, and TypeScript application was extended with page-scoped WebMCP tools on /agents and /a/[slug]. Browser registration and same-origin tool execution live in StorefrontTools.tsx; typed tool contracts and result formatting live in src/lib/webmcp.

Discovery and contract inspection are read-only. Preview is correctly labeled as a write because it records a durable run. The separate purchase route retains server-side authority, validates origin and request size, applies rate limits, checks service availability, and rechecks the exact accepted price before spending prepaid workspace credit. Purchase receipts preserve the run identifier and charged amount. The public demo does not execute buy_service.

Challenges and lessons

The central design challenge was making useful agent actions available without turning catalog text into instructions or treating a preview as a purchase. Explicit tool contracts, bounded results, untrusted-content markers, and server-side price checks make those boundaries inspectable. A dry run still changes state when it records a receipt, so preview is labeled as a write even when no funds move.

Work completed during the challenge

Suede Agent Studio predates the challenge. This entry focuses on its WebMCP storefront extension added after August 25, 2026. The public MIT-licensed repository preserves the pre-WebMCP baseline and separate feature and hardening commits, with an implementation map and reproducible validation instructions in CHALLENGE_EVIDENCE.md. The September 1 verification passed type checking, lint, the production build, and 70 focused WebMCP tests.

Try it

Open https://agents.suedeai.ai/agents in ChatGPT's in-app browser or a compatible Chrome browser with WebMCP enabled. Ask the agent to find a service for comparing a purchase order with an invoice, inspect po-match-gate-mkgu0, and run its free dry-run preview using synthetic documents. Do not buy anything. The preview receipt should show status done, totalCostUsdc 0, settled false, and mode dry-run. README.md, DEMO_SCRIPT.md, and CHALLENGE_EVIDENCE.md in the public repository provide the full walkthrough and local setup.

The remade 2:29 live-interface demo is https://www.youtube.com/watch?v=ZR1At7lX6-E.