Creative Tim UICreative Tim UI

x402 Payment Protocol Blocks based on shadcn/ui

Files
app/x402-payment/page.tsx
import X402Payment01 from "@/components/creative-tim/blocks/x402-payment-01"

export default function Page() {
  return <X402Payment01 />
}
x402 payment protocol demonstration with AI agent payments
x402-payment-01
x402 Payment Protocol Demo
Visual demonstration of payment flow on Base Sepolia testnet

Wallet Status

Not connected

Visual DemoBase Sepolia TestnetMulti-Wallet Support
S

Welcome to the x402 Payment Protocol demo. This is a visual demonstration of the payment flow. Connect your wallet to start!

Please connect your wallet to start the demo

About x402 Protocol Demo:

This is a visual demonstration of the x402 payment protocol UI. All transactions are simulated for display purposes. The actual blockchain integration is separate from the UI components.

import X402Payment01 from "@/components/creative-tim/blocks/x402-payment-01"

export default function Page() {
  return <X402Payment01 />
}
Files
app/x402-ai-agent-chat/page.tsx
import X402AIAgentChat01 from "@/components/creative-tim/blocks/x402-ai-agent-chat-01"

export default function Page() {
  return <X402AIAgentChat01 />
}
AI agent chat with x402 pay-per-request protocol
x402-ai-agent-chat-01
x402 AI Agent Chat
Pay-per-request AI powered by the x402 protocol (Demo)

Status

Not connected

How x402 Protocol Works (Demo):

1. Initialize your wallet (simulated payment)
2. Ask a question - Agent responds with "402 Payment Required"
3. Payment is simulated (0.001 ETH)
4. Agent verifies and provides response
5. Each interaction follows this micropayment flow

Visual Demo:

This is a UI demonstration. All payments and transactions are simulated for display purposes only. Actual blockchain integration is separate from the visual components.

import X402AIAgentChat01 from "@/components/creative-tim/blocks/x402-ai-agent-chat-01"

export default function Page() {
  return <X402AIAgentChat01 />
}