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 - more to come)
  • --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
npx create-sbc-app my-app --template react --api-key your-api-key

🎨 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"
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