A Next.js application implementing the x402 protocol - an HTTP 402 Payment Required standard for blockchain micro-payments. This app demonstrates pay-per-message AI chat functionality powered by Solana USDC payments, where users pay for each AI interaction in real-time.
- x402 Standard: Implements HTTP 402 Payment Required protocol for blockchain micro-payments
- Solana USDC Payments: Lightning-fast payments using USDC on Solana Devnet
- Local Keypair Management: Secure generation and management of Solana keypairs
- Wallet Integration: Seamless connection to Solana wallets (Phantom, Solflare, etc.)
- Real-time Balance Display: Live USDC balance updates with manual refresh capability
- Pay-per-message: Each chat message costs $0.01 USDC via x402 protocol
- Streaming Responses: Real-time streaming of AI responses
- Balance Validation: Pre-flight checks to ensure sufficient funds
- Payment Confirmation: Visual confirmation of successful x402 payments
- Transaction Transparency: Persistent transaction signatures with Solscan explorer links
- Insufficient Funds Protection: Prevents requests when balance is too low
- Payment Status Tracking: Shows processing → completed → confirmed states
- Error Handling: Graceful handling of payment failures
- Transaction Verification: Links to Solscan explorer for transaction details
- Responsive Design: Works on desktop and mobile devices
- Dark/Light Theme Support: Clean, modern interface
- Real-time Updates: Balance and payment status update automatically
- Professional Payment Display: Compact, informative payment confirmations
- Frontend: Next.js 15 with TypeScript
- Styling: Tailwind CSS with Solana-themed UI components
- Blockchain: Solana (Devnet)
- Payment Protocol: x402 - HTTP 402 Payment Required standard
- Wallet: Solana Wallet Standard integration
- AI: GPT-4 with streaming responses
- Payment Libraries: x402-fetch, x402-next middleware
├── app/
│ ├── api/chat/ # AI chat API endpoint with payment middleware
│ ├── hooks/ # Custom React hooks
│ │ └── useProtectedChat.ts # Payment-protected chat functionality
│ ├── utils/ # Utility functions
│ │ ├── keypair.ts # Local keypair management
│ │ └── index.ts # Solana utilities (balance, transfers)
│ ├── page.tsx # Main chat interface
│ └── WalletContext.tsx # Wallet connection context
├── components/ # Reusable UI components
│ ├── USDCBalance.tsx # Balance display component
│ ├── TransferModal.tsx # USDC transfer interface
│ ├── ConnectWalletBtn.tsx # Wallet connection button
│ └── ...
├── middleware.ts # x402 payment middleware configuration
└── lib/ # Utility libraries
Implements HTTP 402 Payment Required for protected routes:
/api/chat- $0.01 per message- Payment validation and processing
- Transaction signature generation
Manages the entire x402 payment → chat flow:
- Balance validation before requests
- Payment processing with x402 protocol integration
- Streaming response handling with transaction signature storage
- Comprehensive error management and recovery
Real-time balance display:
- Fetches balance from Solana devnet
- Auto-refreshes after transactions
- Shows loading states
Facilitates USDC transfers:
- Transfer from connected wallet to local keypair
- Transaction confirmation
- Balance refresh triggers
- Node.js 18+ and pnpm
- Solana wallet (Phantom, Solflare, etc.)
- USDC on Solana Devnet (can be obtained from faucets)
# Clone the repository
git clone https://github.com/pratikbuilds/402x-solana-ui.git
cd 402x-solana-ui
# Install dependencies
pnpm install
# Run development server
pnpm dev- Connect Wallet: Click "Connect Wallet" to connect your Solana wallet
- Generate Local Keypair: Create a local keypair for payments
- Transfer USDC: Transfer USDC from your wallet to the local keypair
- Start Chatting: Send messages to the AI (costs $0.01 USDC each)
- View Transactions: Click transaction signatures to view on Solscan
The payment middleware is configured in middleware.ts:
- Resource Wallet:
Du3X3wKN3LHfSbXtX2PW5jhnSHit8j8NSb19VZW6V9mu - Network:
solana-devnet - Price per message:
$0.01
- Balance Check: Validates sufficient USDC balance ($0.01 minimum)
- Payment Processing: Creates and signs payment transaction
- API Request: Sends payment header with chat request
- Transaction Confirmation: Receives transaction signature
- Balance Update: Refreshes balance after successful payment
- Pre-flight Balance Validation: Prevents insufficient fund requests
- Local Keypair Security: Private keys stored locally, never transmitted
- Payment Verification: All transactions verifiable on Solana blockchain
- Error Handling: Graceful handling of payment failures
@solana/kit- Solana blockchain interactionsx402-next- HTTP 402 middlewarex402-fetch- Payment-enabled fetch wrappergill- Solana utilities and explorer links
The application uses Solana Devnet by default. No additional environment variables required for basic functionality.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is MIT licensed.
- Repository: https://github.com/pratikbuilds/402x-solana-ui
- Solana Devnet Explorer: https://explorer.solana.com/?cluster=devnet
- USDC Devnet Mint:
4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU
Built with ❤️ using Next.js and Solana