x402 Next.js + AI Starter Kit

x402 is a new protocol built on top of HTTP for doing fully accountless payments easily, quickly, cheaply and securely.

This template built with Next.js, AI SDK, AI Elements, and AI Gateway and the Coinbase CDP shows off using x402 with a modern AI stack.

Demo: https://x402-ai-starter.vercel.app/

Features

• AI Chat + API playground to see x402 in action
• AI agent that can pay for tools
• Remote MCP server with "paid" tools
• Paywalled APIs
• Paywalled pages (for bots)
• Secure server managed wallets

Tech Stack

• Next.js
• AI SDK
• AI Elements
• AI Gateway
• Coinbase CDP
• x402

Getting Started

git clone https://github.com/vercel-labs/x402-ai-starter
cd x402-ai-starter
pnpm install

Running Locally

1. Sign into the Coinbase CDP portal

2. Following .env.example, set the following environment variables in .env.local:

• CDP_API_KEY_ID
• CDP_API_KEY_SECRET
• CDP_WALLET_SECRET

Using AI Gateway requires either a Vercel OIDC token, or an API Key. To get an OIDC token, simply run vc link then vc env pull. An API can be obtained from the AI Gateway dashboard.

Using AI Gateway isn't required, you can use any AI SDK model provider and its associated credentials.

3. Run pnpm dev

4. Open http://localhost:3000 in your browser to see the app in action.

Testing Payments

By default, the app uses the base-sepolia network, or "testnet". This is a testing network with fake money. The app is configured to automically request more funds from a faucet (source of testnet money) when your account is running low. You can also do this yourself in the Coinbase CDP dashboard.

Going to Production

When you're ready to deploy your SaaS application to production, follow these steps:

Deploy to Vercel

1. Push your code to a GitHub repository.
2. Connect your repository to Vercel and deploy it.
3. Follow the Vercel deployment process, which will guide you through setting up your project.

Add environment variables

In your Vercel project settings (or during deployment), add all the necessary environment variables. Make sure to update the values for the production environment, including:

• CDP_API_KEY_ID
• CDP_API_KEY_SECRET
• CDP_WALLET_SECRET

Moving to mainnet

To move to mainnet, set the NETWORK environment variable to base.

Make sure that the Purchaser account has enough funds to pay for the tools you're using. To fund the account, you can send USDC to the account's address in the Coinbase CDP dashboard.