Quickstart

This guide takes you from zero to a fully functional local instance of GlassKit with real Stripe checkout (test mode) and an AI provider responding to prompts.

Prerequisites

• Bun 1.1+ (bun --version) — install with curl -fsSL https://bun.sh/install | bash
• A GitHub account
• A free Clerk account — auth provider
• A free Convex account — database / backend
• A free Stripe account — for payments
• An Anthropic API key or OpenAI API key — pick one to start

Stuck on npm? GlassKit works with npm too — bun install becomes npm install, bun run dev becomes npm run dev, etc. You just lose the 10× install speed. We recommend Bun.

1. Clone and install

git clone https://github.com/glasskitapp/glasskit-boilerplate my-app
cd my-app
bun install

This installs roughly 850 packages in about a second. If you see warnings about peer dependencies on React 19, those are expected — most of the ecosystem is still catching up, and the pinned versions are tested.

2. Create your env file

cp .env.example .env.local

Open .env.local. You'll see sections for Clerk, Convex, Stripe, AI providers, and App. Fill them in step-by-step below.

3. Wire up Clerk (auth)

1. Sign in to clerk.com and create an application
2. Copy the Publishable key and Secret key from the dashboard
3. Drop them into .env.local:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

4. Wire up Convex (database)

npx convex dev

This walks you through linking the project to a new Convex deployment. Convex auto-populates the dev URL into .env.local:

NEXT_PUBLIC_CONVEX_URL=https://...convex.cloud

Keep npx convex dev running in a terminal while you develop — it hot-reloads your backend functions.

5. Wire up Stripe (payments)

GlassKit ships with a complete Stripe integration: checkout, webhooks, customer portal. Use your test keys to verify it works end-to-end.

1. Open the Stripe dashboard (you'll be in test mode by default)
2. Copy the Secret key (starts with sk_test_) and Publishable key (starts with pk_test_)
3. Install the Stripe CLI and run stripe listen --forward-to localhost:3000/api/stripe/webhook. Copy the webhook signing secret.

Drop these into .env.local:

STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

Full walkthrough at Stripe setup.

6. Add an AI provider

Pick one to start. You can wire up both later.

ANTHROPIC_API_KEY=sk-ant-...
# or
OPENAI_API_KEY=sk-...

7. Run the dev server

bun run dev

Open localhost:3000. You should see the landing page. Verify:

• The landing page renders
• Sign-up and sign-in flow through Clerk
• Clicking a pricing tier sends you to a Stripe checkout
• Using card 4242 4242 4242 4242 (any future date, any CVC) completes checkout
• The success page renders
• The Stripe webhook fires (check the stripe listen terminal)
• localhost:3000/docs loads these docs

8. What's next

You now have a working local instance. Pick the next step based on what you're building:

• Customizing the landing page → edit app/(web)/page.tsx and the components in components/landing/
• Adding example apps → see app/(apps)/ for the three example Meta Ray-Ban Display apps
• Wiring AI features → AI providers
• Shipping to production → Deploy

Troubleshooting

Stripe checkout shows "No such price". The priceId in lib/config.ts doesn't exist in your Stripe account. Create matching products in the Stripe dashboard or update the IDs in config.

Webhook signature verification fails. Your STRIPE_WEBHOOK_SECRET doesn't match the whsec_... printed by stripe listen. Restart stripe listen to print a fresh secret, then update .env.local.

Clerk middleware returns 404 on protected routes. Check that middleware.ts includes the route in its matcher and that you've set both Clerk keys in .env.local.

Convex queries return undefined. npx convex dev isn't running. Start it in a separate terminal.

Module not found: 'next/dist/docs'. You're on an old Next.js version. GlassKit requires Next.js 16+ — run bun add next@latest.