Skip to content

Create SBC App

The fastest way to start building with SBC Account Abstraction. Instantly scaffold a feature-rich, gasless smart account app with a single command.

🚀 Quick Start

# Create a new SBC app
npx create-sbc-app my-app
 
# Or specify a template directly
npx create-sbc-app my-app --template react
 
cd my-app
pnpm install   # or npm install
pnpm dev       # or npm run dev

🛠 CLI Usage

npx create-sbc-app [project-directory] [options]
Options:
  • -t, --template <type>: Template to use (react, react-dynamic, react-para, or react-turnkey)
  • -c, --chain <chain>: Chain to use (baseSepolia, base, radiusTestnet, or radius)
  • --api-key <apiKey>: Pre-configure your SBC API key
  • -h, --help: Show help
Examples: 
npx create-sbc-app my-app
npx create-sbc-app my-app --template react --chain radius
npx create-sbc-app my-app --template react-dynamic --chain base
npx create-sbc-app my-app --template react-para --api-key your-key
npx create-sbc-app my-app --template react-turnkey --chain base
Available Templates:
  • react — React + Vite with SBC integration (default)
  • react-dynamic — React + Vite with Dynamic wallet integration
  • react-para — React + Vite with Para wallet integration
  • react-turnkey — React + Vite + Express backend with Turnkey embedded wallets
Available Chains:
  • baseSepolia — Base Sepolia testnet (default)
  • base — Base mainnet
  • radiusTestnet — Radius testnet (react and react-para templates)
  • radius — Radius mainnet (react and react-para templates)

Note: Radius chains are supported by the react and react-para templates. The react-dynamic and react-turnkey templates only support Base chains.

🎨 Features

  • Wallet Connection: MetaMask, Coinbase Wallet, WalletConnect
  • Smart Account Management: Automatic, gasless, and secure
  • Gasless Transactions: Send ETH or interact with contracts without gas
  • Batch Transactions: Multiple operations in one go
  • Balance Tracking: EOA and smart account balances
  • Modern UI: Responsive, accessible, and easy to customize
  • TypeScript: Full type safety and best practices

📝 Configuration

Environment Variables

After creating your app, configure your .env file:

VITE_SBC_API_KEY=your_api_key_here
VITE_SBC_CHAIN="baseSepolia"  # "baseSepolia" | "base" | "radiusTestnet" | "radius"
VITE_SBC_DEBUG=true

Get your API key from the SBC Dashboard.

📚 Template Structure

  • src/App.tsx: Main app logic and SBC integration
  • src/main.tsx: Vite entry point
  • src/App.css, src/index.css: Styles
  • .env: Environment variables

🧑‍💻 Customization

  • Change API Key: Edit src/App.tsx or .env
  • Switch Chain: Change VITE_SBC_CHAIN and update the import in App.tsx
  • UI/UX: Edit App.tsx and styles as needed
  • Add Features: Use SBC hooks and SDK to add custom logic

📖 Learn More