Pay-Per-Use AI Image Generator

A complete pay-per-use AI image generation system built with the x402 payment protocol. This project includes both the backend API and a beautiful frontend web application.

Features

• ✅ x402 Payment Protocol: Uses HTTP 402 status code for seamless payment integration
• 💰 Micropayments: Charges $0.001 USDC per image generation
• 🤖 AI Image Generation: Powered by Replicate API with Stable Diffusion
• 🌐 Production-Ready Frontend: Beautiful Next.js web application
• ⚡ Frictionless: No accounts, API keys, or complex authentication
• 📘 TypeScript: Built with TypeScript for type safety

Contact Me

If you have any question or something, feel free to reach out me anytime.

You're always welcome

Telegram: @crypmancer

Project Structure

.
├── src/                    # Backend API (Express + TypeScript)
│   ├── server.ts
│   ├── config.ts
│   ├── services/
│   └── types/
├── frontend/               # Frontend (Next.js + TypeScript)
│   ├── app/
│   ├── components/
│   └── lib/
└── README.md

Quick Start

Backend Setup

1. Install dependencies:

   npm install

2. Configure environment: Create .env file (see setup instructions below)

3. Run the server:

   npm run dev

   Server runs on http://localhost:3000

Frontend Setup

1. Navigate to frontend:

   cd frontend
   npm install

2. Configure API URL: Create frontend/.env.local:

   NEXT_PUBLIC_API_URL=http://localhost:3000

3. Run frontend:

   npm run dev

   Frontend runs on http://localhost:3001

Environment Setup

Backend (.env)

# Server Configuration
PORT=3000

# x402 Payment Configuration
API_PRICE=0.001
NETWORK=base-sepolia
WALLET_ADDRESS=0xYourWalletAddressHere
FACILITATOR_URL=https://facilitator.x402.org

# Replicate API Configuration (Required for Image Generation)
REPLICATE_API_KEY=your_replicate_api_key_here

Frontend (.env.local)

NEXT_PUBLIC_API_URL=http://localhost:3000

Getting API Keys

Replicate API Key

1. Go to https://replicate.com
2. Sign up for a free account
3. Get your API token from Account Settings
4. Add it to backend .env as REPLICATE_API_KEY

How It Works

1. User enters prompt in the frontend
2. Frontend requests image from backend API
3. Backend responds with 402 (Payment Required) including payment details
4. User pays via wallet or facilitator (USDC on Base network)
5. User submits transaction hash to verify payment
6. Backend verifies payment and generates image
7. Image is returned and displayed in the gallery

Deployment

Backend (Vercel)

1. Install Vercel CLI: npm i -g vercel
2. Deploy: vercel
3. Add environment variables in Vercel dashboard

Frontend (Vercel)

1. Navigate to frontend directory
2. Deploy: vercel
3. Set NEXT_PUBLIC_API_URL to your backend URL

API Endpoints

POST /generate-image

Generates an image from a prompt. Requires payment via x402 protocol.

Request:

{
  "prompt": "a beautiful sunset over mountains"
}

First Response (402):

{
  "payment": {
    "id": "payment-id",
    "amount": "0.001",
    "currency": "USDC",
    "network": "base-sepolia",
    "recipient": "0x...",
    "facilitator": "https://facilitator.x402.org"
  }
}

After Payment (200):

{
  "success": true,
  "image": {
    "url": "https://...",
    "prompt": "...",
    "timestamp": "..."
  },
  "paymentId": "...",
  "transactionHash": "..."
}

POST /verify-payment

Verifies a payment transaction.

GET /health

Health check endpoint.

Technologies

Backend

• Express.js
• TypeScript
• Replicate API
• x402 Protocol

Frontend

• Next.js 14
• React 18
• Tailwind CSS
• TypeScript

Production Considerations

• Database: Replace in-memory paymentStore with a database
• Payment Verification: Implement proper on-chain transaction verification
• Rate Limiting: Add rate limiting to prevent abuse
• CORS: Configure CORS for production domains
• Error Handling: Add comprehensive error handling and logging
• Monitoring: Set up monitoring and alerts

Resources

• x402 Protocol Documentation
• x402.org
• Base Network
• Replicate

License

MIT

Built with ❤️ using the x402 protocol.