A simple template to test and demonstrate Commet's billing features. Shows how to integrate seat management and usage tracking in a Next.js app.
- Commet Integration: Working examples of customers, seats, and usage tracking
- Interactive Demo:
/dashboardpage to test all Commet features - Server Actions: Clean patterns for Commet SDK calls
- Type Safety: Auto-generated types from Commet CLI
- Basic Auth: Simple org structure with Better Auth
- UI Components: Pre-built forms using shadcn/ui
.
├── apps
│ └── dashboard # Main SaaS application
│ ├── src
│ │ ├── app # Next.js App Router
│ │ │ ├── (private) # Protected routes (dashboard, demo)
│ │ │ ├── (auth) # Auth routes (login, invitations)
│ │ │ └── api # API routes
│ │ └── modules
│ │ ├── auth # Authentication logic
│ │ ├── organization # Org management
│ │ ├── dashboard # Commet demo components
│ │ └── shared # Shared utilities
│ └── .commet # Generated Commet types
├── packages
│ ├── database # Drizzle ORM + schemas
│ ├── ui # Shared UI components
│ └── typescript-config # Shared TS configs
└── docker-compose.yml # PostgreSQL for local dev
- Node.js >= 20
- pnpm >= 10.4.1
- Docker (for local PostgreSQL)
- Commet account (sign up)
- Clone and install
git clone <your-repo-url>
cd sass-b2b-starter
pnpm install- Setup database
docker-compose up -d
cd packages/database
pnpm db:push- Configure environment
Create apps/dashboard/.env.local:
# Better Auth
BETTER_AUTH_SECRET=your-secret-here
BETTER_AUTH_URL=http://localhost:3000
# Commet
COMMET_API_KEY=your-commet-api-key- Setup Commet types
cd apps/dashboard
commet login # Login to Commet
commet link # Link to your organization
commet pull # Generate TypeScript types- Start development
pnpm devVisit http://localhost:3000 and create an account to get started.
Once logged in, visit /dashboard to test Commet's billing features:
- Create 1, 10, or 50 demo organizations
- Each becomes a Commet customer automatically
- Add/remove seats for any organization
- Track seat types:
admin_seat,editor_seat,viewer_seat,api_key
- Send single or batch usage events
- Event types:
api_call,payment_transaction,sms_notification,analytics_usage,data_processing,user_activity
All events appear in your Commet dashboard (sandbox mode) in real-time.
pnpm dev- Start development serverpnpm build- Build for productionpnpm lint- Run Biome linterpnpm db:push- Push database schema (in packages/database)pnpm db:studio- Open Drizzle Studio
When you create an organization, it automatically creates a Commet customer:
await commet.customers.create({
legalName: "Acme Corp",
displayName: "Acme Corp",
billingEmail: "billing@acme.com",
externalId: organizationId,
});Track seats by type (admin, editor, viewer, API keys):
await commet.seats.add({
customerId: "cus_xxx",
seatType: "admin_seat",
count: 5,
});Send usage events for metered billing:
await commet.usage.create({
eventType: "api_call",
customerId: "cus_xxx",
properties: [
{ property: "quantity", value: "100" }
],
});- Next.js 15 - React framework with App Router
- Better Auth - Authentication with organizations
- Commet - Usage-based billing platform
- Drizzle ORM - TypeScript ORM
- PostgreSQL - Database
- Tailwind CSS - Utility-first CSS
- shadcn/ui - UI components
- Radix UI - Accessible primitives
- Turborepo - Monorepo build system
- Biome - Linter and formatter
- TypeScript - Type safety
# Better Auth
BETTER_AUTH_SECRET= # Generate with: openssl rand -base64 32
BETTER_AUTH_URL= # Your app URL
# Commet
COMMET_API_KEY= # From Commet dashboard
# Database (auto-configured with docker-compose)
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/saasMIT