Suede Agent Studio WebMCP Storefront

Inspiration

Visual marketplaces are designed for people, but browser agents still have to infer meaning from buttons and page layout. A service marketplace becomes meaningfully better when the browser exposes a small, stable set of structured tools: the agent can search by intent, inspect exact terms, and preview safely while the person retains the payment boundary.

What it does

Suede Agent Studio exposes six curated services from its 31-listing public directory through four page-scoped WebMCP tools:

1. find_services searches the published service shelf by job-to-be-done.
2. get_service returns the current price, exact input contract, review policy, data-handling statement, and worked examples.
3. preview_service records a free dry-run receipt without model inference or payment.
4. buy_service uses only prepaid workspace credit after server-side origin, rate-limit, buyability, and exact-price checks.

The fixed tool set stays constant as inventory grows, avoiding one tool per service and keeping the browser agent's context bounded.

How people and agents work together

The agent handles discovery and contract reading. The person keeps control over the meaningful boundary: whether to preview and whether to authorize a purchase. The challenge demo uses synthetic purchase-order and invoice data, stops after a free preview, and performs no purchase or model inference.

How we built it

The existing Next.js application was extended during the challenge window with a browser compatibility layer, four fixed tool descriptors, page-scoped registration, bounded result formatting, a server-owned purchase contract, mutation guards, and focused regression coverage. Tools are mounted only on /agents and /a/[slug]. Creator-authored catalog text is marked as untrusted. Purchase authority never moves into page JavaScript.

The public history preserves the pre-WebMCP baseline (f4943a1) and the challenge implementation (e2c3b11), followed by hardening and evidence commits. The focused WebMCP suite contains 71 tests covering protocol compatibility, shelf parsing, descriptors, preview budgets, server guards, and mount scope.

Challenges we ran into

WebMCP's shipping namespace changed across Chrome versions, so the compatibility layer supports the current document-scoped API while retaining the origin-trial alias. Registration also handles both synchronous browser bridges and Promise-returning native APIs; a regression test confirms that an undefined return still registers all four tools. We also had to keep every descriptor and result inside strict field budgets, distinguish a durable preview from a read-only operation, and ensure no client-side tool could bypass server-side price and payment authority.

Accomplishments we're proud of

• Four stable tools serve a growing marketplace without context bloat.
• The agent receives terms and examples before acting.
• Free preview is honest about what did and did not run.
• Purchase uses exact-price binding and prepaid credit only.
• The public demo uses synthetic data and cannot accidentally spend money.
• The implementation is public, MIT-licensed, and separated from the pre-challenge baseline in Git history.

What we learned

The strongest WebMCP experiences do not copy every button into a tool. They expose the smallest task-oriented contract that helps the agent reason while preserving human control where risk or irreversible action begins.

What's next

Expand the service shelf without expanding the tool namespace, add more contract-first preview patterns, and continue testing the same human-agent boundary across compatible browsers.

Built With

• a2a
• ap2
• next.js
• react
• sqlite
• typescript
• vercel
• vitest
• webmcp
• x402
• zod