Skip to content

feat: add AgentPay x402 payment demo#96

Open
up2itnow0822 wants to merge 1 commit intoGoogleChromeLabs:mainfrom
up2itnow0822:demos/x402-payment
Open

feat: add AgentPay x402 payment demo#96
up2itnow0822 wants to merge 1 commit intoGoogleChromeLabs:mainfrom
up2itnow0822:demos/x402-payment

Conversation

@up2itnow0822
Copy link
Copy Markdown

Summary

Adds a self-contained WebMCP demo showing an AI agent making x402 micropayments through navigator.modelContext. When a paid API returns HTTP 402, the AgentPay wallet automatically signs a payment on Base and retries — all inside the browser.

What's included

  • demos/x402-payment/index.html — main demo page
  • demos/x402-payment/script.js — WebMCP tool registration + x402 logic
  • demos/x402-payment/style.css — clean, professional UI
  • demos/x402-payment/README.md — setup + architecture docs
  • Updated AWESOME_WEBMCP.md — entry added under Demos

Features

  • Both declarative and imperative tool registration patterns
  • ✅ Three tools: fetch_paid_api, check_wallet_balance, get_payment_history
  • ✅ Client-side x402 API simulation (no backend required)
  • ✅ Live wallet UI: balance, spend limits, payment log
  • ✅ Agent-active CSS states (:tool-form-active, :tool-submit-active)
  • ✅ Works in Chrome 146+ with WebMCP enabled

Example prompt

"Buy premium market data from this API using x402 payment"

Tech

Package Version Role
agentpay-mcp 4.0.0 x402 payment layer
agentwallet-sdk 6.0.4 Non-custodial agent wallet
webmcp-sdk 0.5.7 WebMCP developer toolkit
Base Mainnet Payment chain

x402 Protocol — Patent Pending. Non-custodial smart contract wallet owned via NFT.

CLA

✅ CLA already signed for up2itnow0822

@google-cla
Copy link
Copy Markdown

google-cla Bot commented Mar 23, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

Adds a WebMCP demo showcasing x402 micropayments (HTTP 402 Payment Required)
through navigator.modelContext on Base chain.

Demo features:
- Both declarative (toolname/tooldescription HTML attributes) and imperative
  (navigator.modelContext.registerTool) tool registration patterns
- Three tools: fetch_paid_api, check_wallet_balance, get_payment_history
- Simulated x402 API server (client-side, no backend required)
- Clean UI: wallet status, activity log, payment history, API response
- Full error handling and agent-active CSS states

Tech: agentpay-mcp v4.0.0, agentwallet-sdk v6.0.4, webmcp-sdk v0.5.7
Protocol: x402 (Patent Pending) | Chain: Base | Non-custodial wallet via NFT

Also adds entry to AWESOME_WEBMCP.md under Demos section.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant