Inspiration
AI agents can discover useful information, compare sources, and recommend what to buy—but most workflows stop at a checkout designed for human hands. The alternative, giving an agent unrestricted payment authority, is worse. We built SpendMCP around a clearer division of responsibility: the agent decides what is worth buying; the human defines the economic authority.
Machine-payable supply is already emerging: an independent x402-list.com snapshot, published under CC BY 4.0, lists 575 services, 3,532 endpoints, and 522 payment-ready services as of August 29, 2026. This is ecosystem-supply evidence, not a claim of SpendMCP adoption; the snapshot and limitations are documented publicly.
What it does
SpendMCP is a browser-native payment and permission layer for paid web capabilities. The demo is a research workspace where an agent compares EV-battery datasets, previews publisher metadata and sample rows for free, requests a quote, and purchases the cheapest adequate source under a human-defined budget.
The human controls the per-purchase cap, session budget, and auto-approval threshold on the same page. Purchases inside policy proceed without interruption. Requests outside policy are refused or escalated to an on-page approval sheet. Every completed purchase appears in a receipt ledger.
The key moment is visible: the page starts with 9 WebMCP tools. After a verified payment, it dynamically registers a tenth tool, query_premium_dataset. Payment does not merely flip an “authorized” flag; it changes what the agent can do.
Why WebMCP
The valuable context already lives in the page: available sources, previews, prices, the human’s policy, approval decisions, unlocked resources, and receipts. WebMCP gives the human and agent typed access to that same live session instead of relying on screen-scraping.
This is also why SpendMCP is more than an x402 fetch wrapper. Nine typed tools handle discovery, preview, quotes, policy, purchase, unlocked resources, receipts, and delivery claims. The premium query capability is absent until settlement succeeds, then registers dynamically. WebMCP turns a commercial transaction into a new browser capability.
How people and agents work together
- The agent discovers and compares sources, previews before spending, selects an adequate dataset, and uses the purchased data.
- The human sets durable limits, approves exceptions in context, and audits spend and delivery.
- The page enforces the boundary between reasoning and payment, then exposes the purchased capability to both participants.
Without SpendMCP, the agent can recommend a paid source but the task stops at checkout. With SpendMCP, the same research task completes end to end while the human retains control.
How we built it
SpendMCP is built with TypeScript, Next.js 16, React 19, and a small internal WebMCP/x402 SDK. Tools register through navigator.modelContext ?? document.modelContext with narrow input schemas and explicit untrusted-content annotations.
The payment path follows HTTP 402: receive bounded requirements, check policy, produce an EIP-3009 USDC authorization, verify the signature and quote server-side, consume a single-use nonce, settle, and return a receipt. The agent only passes opaque resource and quote identifiers; it cannot choose the amount, recipient, asset, or network.
Idempotency keys make uncertain retries return the original receipt instead of charging twice. Receipts bind the quote, resource, delivered dataset hash, amount, asset, network, payer, recipient, and settlement identifier.
Instant Demo Mode requires no account, wallet, or funds. It generates a testnet wallet and uses real EIP-3009 signatures while clearly labeling settlement as simulated. We also completed a real x402 settlement on Base Sepolia for 0.04 testnet USDC: https://sepolia.basescan.org/tx/0xd29ec7c8113b1ee7a392a72e0668bff4bd891314f3796d4f7c9bbe9a64510a19
Challenges we ran into
The hardest part was making capability registration follow verified payment state without creating a pre-registered “premium” tool that only returns an authorization error. We also had to keep human UI state and agent-visible tool state consistent across purchases, approvals, denials, and refreshes.
Payment retries and concurrency were another challenge. Quote consumption, nonce replay protection, server spending guards, settlement rollback, and client budget updates must agree even when a request fails or is repeated.
Accomplishments that we're proud of
- A complete zero-setup human-and-agent workflow in one shared workspace.
- Dynamic 9 → 10 tool registration after settlement.
- A real Base Sepolia x402 settlement plus a clearly labeled instant demo path.
- 146 automated tests: 131 unit/integration tests and 15 Playwright E2E scenarios, verified in bundled Chromium and Chrome 152.
- Adversarial coverage for duplicate payment retries, concurrent budget races, tampered signatures, wrong recipients, underpayment, cross-chain and cross-token requests, expired authorization, settlement failure, approval denial, stale browser grants, invalid tool input, and duplicate delivery claims.
- Public Apache-2.0 source with architecture, security, threat-model, and judge documentation.
What we learned
Payment alone is not the product. A usable agent-commerce system needs explicit authority boundaries, preview-before-purchase, idempotency, and receipts that prove delivery as well as payment. WebMCP is especially powerful when a page’s capability surface can evolve with the shared session.
What's next for SpendMCP
Next we would add persistent merchant storage, independent publisher integrations, a reusable adapter for paid WebMCP tools, and external usability testing with researchers. The current evidence proves implementation behavior and browser compatibility; we do not claim publisher adoption or production user outcomes yet.
Try it in under a minute
- Open https://spendmcp-x402.vercel.app in ChatGPT’s in-app browser or WebMCP-enabled Chrome.
- Copy the research prompt shown at the top of the page.
- Watch the agent preview sources and purchase the $0.04 dataset under the default policy.
- Confirm the capability panel changes from 9 tools to 10 and query the unlocked dataset.
- Try the $0.12 forecast source to see the guardrail and human-approval path.
Built With
- base
- eip-3009
- next.js
- playwright
- react
- typescript
- usdc
- vercel
- viem
- vitest
- webmcp
- x402
Log in or sign up for Devpost to join the conversation.