SaaS Starter Kit

Keel - AI SaaS Starter Kit

Quick Start

Requirements: Node.js 18+ and npm. No environment variables, database, or API keys are needed to run - the AI features ship with a keyless mock engine, so the whole app boots offline.

Download and unzip

After purchase, download the zip from your order confirmation email and unzip it.

Install dependencies

npm install

Start the dev server

npm run dev

Open http://localhost:3000. Key routes:

/ - marketing landing with the interactive AI hero demo
/login, /signup, /onboarding - auth and setup
/app - dashboard; /app/assistant - full-page AI chat
/settings, /settings/billing, /settings/team

Press Cmd+K anywhere for the command bar, or use the Ask AI button for the global assistant slide-over.

Build and test

npm run build
npm start

# optional
npm test   # Vitest tests for session + billing reducers

Folder Structure

Next.js App Router. Every screen renders from a typed mock-data layer, AI runs through a single keyless engine, and session and billing logic are pure, unit-tested reducers.

src/
├── app/
│   ├── layout.tsx              # Geist + Geist Mono + Bricolage Grotesque; flash-free theme; providers
│   ├── globals.css             # "Gilt" design tokens (@theme) - reskin from --color-accent / --color-ai
│   ├── page.tsx                # Editorial landing (hero AI demo, bento, pricing, testimonials, FAQ)
│   ├── pricing/page.tsx        # Pricing with monthly/annual toggle
│   ├── login | signup | forgot-password | reset-password
│   ├── onboarding/page.tsx     # 3-step setup wizard
│   ├── app/page.tsx            # Dashboard - charts, stat cards, usage, AI insights
│   ├── app/assistant/page.tsx  # Full-page streaming AI assistant
│   └── settings/               # Profile, billing, team, notifications
├── components/
│   ├── ai/                     # AssistantPanel, AssistantProvider, CommandMenu, HeroAIDemo, AIInsightsCard
│   ├── app/                    # AppShell, Sidebar, Topbar, StatCard, UsageMeter, SettingsLayout
│   ├── marketing/              # MarketingNav, PricingGrid, ProductShowcase, AuthLayout, SocialAuth, ...
│   ├── providers/              # ThemeProvider, SessionProvider, ToastProvider
│   └── ui/                     # Avatar, Badge, Button, Field, Modal, Sheet, Switch, Logo
└── lib/
    ├── ai.ts                   # generateReply() mock engine + SUGGESTED_PROMPTS  (swap point)
    ├── data.ts                 # Typed mock data for every screen
    ├── session.ts + .test.ts   # Pure session reducer + unit tests
    ├── billing.ts + .test.ts   # Pure billing/pricing reducer + unit tests
    └── types.ts | site.ts      # Shared types and site config

Customization

Reskin in two variables

The whole product re-colors from two tokens in the @theme block of src/app/globals.css: --color-accent (primary) and --color-ai (the AI gradient). Light mode has matching overrides in the .light block. Fonts (Geist, Geist Mono, Bricolage Grotesque) load in src/app/layout.tsx; the brand name "Keel" is in src/lib/site.ts and src/components/ui/Logo.tsx.

Make the AI real

The assistant, Ask AI slide-over, command bar, and hero demo all call one function - generateReply() in src/lib/ai.ts, which streams a mock response token-by-token. Swap it for a real model (Claude via the Vercel AI SDK) and the streaming UI is unchanged:

npm install ai @ai-sdk/anthropic

# .env.local
ANTHROPIC_API_KEY=sk-ant-...

# then replace the body of generateReply() in src/lib/ai.ts
# with a streamText() call - the UI already consumes a token stream.

Swap the mock data for your API

Every screen reads from src/lib/data.ts (user, workspace, plans, members, invoices, usage, activity, stats) as typed exports. Replace those with your API or DB calls and the components keep working against the same shapes in src/lib/types.ts.

Auth, billing, and session seams

Auth is mocked in SessionProvider (any credentials sign you in) - wire your provider (Auth.js, Clerk, Supabase) into its handlers. Billing UI is driven by the pure reducer in src/lib/billing.ts; connect Stripe or Dodo where the checkout handlers are marked. Both session.ts and billing.ts have Vitest coverage you can extend.

Deployment

Fully static and dependency-free out of the box. Deploy to Vercel, Netlify, or any Next.js host with zero configuration.

Deploy the demo

Import the repo on Vercel and ship - no env vars or database needed while the AI runs on the mock engine.

Add keys only when you go live

Once you wire generateReply() to a real model, add ANTHROPIC_API_KEY(and any auth/billing provider keys) to your host's environment variables.

Build command:  npm run build
Start command:  npm start
Node version:   18+

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.