The web interface for the API marketplace where AI agents pay with USDC, not API keys.
x402 Bazaar is an autonomous API marketplace built on the HTTP 402 Payment Required standard. Developers browse services, register their own APIs, and connect their wallets to pay in USDC -- all from a glassmorphism web interface with full bilingual support (English / French).
- Service Catalog -- Browse, search, and filter 112+ API services with real-time data from the backend.
- Register Your API -- Submit your own API service to the marketplace with an on-chain USDC payment.
- Wallet Connect -- MetaMask and Coinbase Wallet via wagmi/viem with automatic network detection (Base, SKALE on Base, Polygon).
- ChainSelector -- 3-way toggle (Base / SKALE on Base / Polygon) for multi-chain payment routing.
- MCP Installation Guide -- Step-by-step setup for Claude Desktop, Cursor, VS Code, and Claude Code.
- Agent Integration Docs -- Code examples in JavaScript and Python for building x402 agents.
- One-Line CLI --
npx x402-bazaar initprominently featured for instant setup. - Bilingual (EN/FR) -- Full i18n with localStorage persistence and toggle in the navbar.
- Glassmorphism UI -- Glass cards, glow effects, gradient buttons, animated hero, scroll reveal animations.
- Responsive -- Mobile-first design with burger menu and compact wallet display.
- SEO Optimized -- Meta tags, Open Graph, Twitter Cards, sitemap.xml, robots.txt, structured data.
git clone https://github.com/Wintyx57/x402-frontend.git
cd x402-frontend
npm install
cp .env.example .env # Set VITE_API_URL
npm run devOpen http://localhost:5173 in your browser.
| Route | Page | Description |
|---|---|---|
/ |
Home | Hero with CLI one-liner, live stats, service categories, how-it-works flow |
/services |
Services | Searchable service catalog with glass cards, sorting, x402 Native badges |
/services/:id |
Service Detail | Individual service page with full description and reviews |
/register |
Register | Service registration form with USDC payment flow |
/developers |
Developers | API documentation, protocol reference, code examples |
/integrate |
Integrate | Integration guides for MCP, ChatGPT, LangChain, and CLI |
/mcp |
MCP | MCP server installation for Claude Desktop, Cursor, VS Code, Claude Code |
/playground |
Playground | Interactive API playground to test endpoints live |
/compare |
Compare | Side-by-side price comparison across services |
/docs |
Docs | Full platform documentation |
/status |
Status | Service uptime and health monitoring |
/analytics |
Analytics | Public usage analytics and traffic stats |
/budget |
Budget | Budget calculator for API cost planning |
/faq |
FAQ | Frequently asked questions |
/creators |
Creators | Guide and benefits for API creators/providers |
/quickstart |
Quickstart | Quick start guide to integrate x402 in minutes |
src/
main.tsx Entry point (WagmiProvider, QueryClient, BrowserRouter, LanguageProvider)
App.tsx Route definitions
config.ts API URL + USDC contract ABI
wagmi.ts Wallet config (Base + Base Sepolia, injected + coinbaseWallet)
index.css Tailwind v4 + custom utilities (glass, glow, gradients, animations)
i18n/
translations.ts EN + FR translation strings (~110 keys per language)
LanguageContext.tsx React Context + useTranslation() hook + localStorage
components/
Navbar.tsx Sticky glass navbar + 3 dropdowns + burger menu mobile + language toggle
ConnectButton.tsx Wallet connect/disconnect + responsive compact mode
ServiceCard.tsx Glass card with glow hover + x402 Native badge
CategoryIcon.tsx Category icon mapper for service cards
LanguageToggle.tsx FR/EN toggle pill
ScrollToTop.tsx Scroll reset on route change
pages/
Home.tsx Hero glow orbs, animated stats, categories, how-it-works
Services.tsx Service grid + glass search input + skeleton loading
Register.tsx Glass form + USDC payment flow + validation
Developers.tsx API docs with scroll reveal + code examples
Integrate.tsx Agent integration guide (JS + Python, use cases)
MCP.tsx MCP server setup guide (CLI + manual accordion)
Playground.tsx Interactive API playground
Compare.tsx Side-by-side price comparison
Docs.tsx Full platform documentation
Status.tsx Service uptime monitoring
Analytics.tsx Public usage analytics
Budget.tsx Budget calculator
FAQ.tsx Frequently asked questions
Creators.tsx Guide for API providers
Quickstart.tsx Quick start guide
hooks/
useReveal.ts IntersectionObserver for scroll animations
| Layer | Technology |
|---|---|
| Framework | React 19 |
| Build | Vite 7 |
| Styling | Tailwind CSS v4 |
| Wallet | wagmi + viem (Base + SKALE on Base + Polygon) |
| Routing | React Router v7 |
| State | TanStack React Query |
| i18n | Custom React Context (EN/FR) |
| Deployment | Vercel (auto-deploy on push) |
| Domain | x402bazaar.org (Namecheap + Vercel DNS) |
| Variable | Description |
|---|---|
VITE_API_URL |
Backend API URL (default: https://x402-api.onrender.com) |
VITE_NETWORK |
mainnet or testnet |
npm run dev # Start dev server (localhost:5173)
npm run build # Production build to dist/
npm run preview # Preview production build locally
npm run lint # Run ESLint
npm run test # Run test suite (Vitest)The frontend auto-deploys to Vercel on every push to main.
- Production URL: x402bazaar.org
- Vercel URL: x402-frontend-one.vercel.app
- DNS: Namecheap A record -> Vercel, SSL via Let's Encrypt
Contributions are welcome. See CONTRIBUTING.md for guidelines on how to get started, coding standards, and the pull request process.
| Repository | Description |
|---|---|
| x402-backend | API server, 112 native endpoints, payment middleware, MCP server |
| x402-frontend | React + TypeScript UI (this repo) |
| x402-bazaar-cli | npx x402-bazaar -- CLI with 7 commands |
| x402-sdk | TypeScript SDK for AI agents |
| x402-langchain | Python LangChain tools |
| x402-fast-monetization-template | FastAPI template to monetize any Python function |
Live: x402bazaar.org | API: x402-api.onrender.com | CLI: npx x402-bazaar init
MIT