@coinbase/create-cdp-app
CLI command, which allows developers to quickly bootstrap a React App using the CDP Web SDK.
Quickstart
This guide will help you get started with@coinbase/create-cdp-app
. You’ll learn how to create a new CDP-enabled React application with just a few commands.
Prerequisites
Before you begin, make sure you have one of the following package managers installed: Gather your project ID and whitelist your app from the CDP Portal:- Sign in or create an account on the CDP Portal
- Copy your Project ID from the dashboard
- Go to the Embedded Wallets CORS settings
- Click add origin and whitelist
http://localhost:3000
(or wherever your app will run)
Create Your First CDP App
You can create a new CDP app using any of these methods:- Enter your project name (defaults to “cdp-app”)
- Select a template (currently supports “React Components”)
- Enter your CDP Project ID
- Confirm you have whitelisted your app domain on the CDP Portal
- Confirm directory overwrite if needed
Available Templates
Currently,create-cdp-app
offers the following template:
- React (
react
): A React application template that includes:- Vite for fast development and building
- TypeScript for type safety
- CDP React components for authentication
- Example transaction components
- Base Sepolia integration
- Next.js (
nextjs
): A Next.js application template that includes:- Next.js 15 App Router
- CDP React components for authentication and wallet management
- Example transaction components for Base Sepolia
- Built-in TypeScript support
- ESLint with Next.js configuration
- Viem for type-safe Ethereum interactions
Command-Line Arguments
You can also pass command-line arguments to pre-configure the setup process.Argument | Description |
---|---|
<directory> | Optional. The name of the directory to create the project in. Defaults to cdp-app . |
--template <name> | Specifies the project template to use. Options: react , nextjs , react-native . |
--project-id <id> | Your CDP Project ID from the portal. |
--smart-accounts | Enables Smart Accounts for the project. |
--no-smart-accounts | Disables Smart Accounts for the project. |
--onramp | Enables Coinbase Onramp. Note: This is only compatible with the nextjs template. If no template is specified, nextjs will be used automatically. If an incompatible template (e.g., react ) is specified, this flag will be ignored and Onramp will be disabled. |
--no-onramp | Disables Coinbase Onramp. |