Get the app running locally, connect the services you plan to use, and make the template yours. Every integration is optional — leave a key blank and the related feature stays dormant until you need it.
You need these four free tools installed on your computer before we start. Don't have them yet? Click each one for the download link.
Node.js lets your computer run JavaScript outside of a web browser. It's what powers your app behind the scenes.
npm is a package manager — it downloads code libraries your app needs. It comes bundled with Node.js, so if you installed Node, you already have it.
Git tracks changes to your code — like version history in Google Docs. You also need a free GitHub account to download the template code.
Four commands in your terminal and your app is running. Open VS Code (or your editor), then open the Terminal panel at the bottom (View → Terminal).
“Cloning” means downloading a copy of the code to your computer. Think of it like downloading a project folder from the cloud.
The second line (cd my-app) moves you into the folder that was just created.
Dependencies are code packages your app needs to work — things like the payment system, the design components, and security tools. This command downloads them all automatically.
This can take a minute or two. You'll see a progress bar. When it's done, you'll see a summary of what was installed.
Environment variables are your app's private settings — like API keys and feature switches. This command copies a template file so you have your own version.
You don't need to change anything right now — the defaults work for local development. You'll customize this file later when you're ready to add features like login or payments.
This starts your app on your computer. Once it's running, you can see it live in your browser — any changes you make to the code will show up instantly.
Open http://localhost:3000 in your browser to see your app. That's it — you're running!
The template uses environment variables for configuration. Here are the key variables:
| Variable | Required | Description |
|---|---|---|
| NEXT_PUBLIC_SITE_URL | Production | Your site URL for SEO |
| ENABLE_AUTH | Optional | Enable authentication (default: false) |
| NEXT_PUBLIC_SUPABASE_URL | If auth enabled | Supabase project URL |
| STRIPE_SECRET_KEY | If payments used | Stripe secret key |
| UPSTASH_REDIS_REST_URL | Production | Redis for rate limiting |
| NEXT_PUBLIC_ELEVENLABS_AGENT_ID | If voice agent enabled | ElevenLabs Conversational AI Agent ID |
| DEV_PREVIEW_PUBLIC_HOME | Optional | Preview public homepage while logged in (dev only, or use ?preview=public) |
See .env.example for all available variables.
Fill in only the keys for services you use — the env schema validates each integration independently, so a blank section is simply ignored:
docs/AUTH.md for the full setup.docs/STRIPE.md.lib/providers. Set NEXT_PUBLIC_AI_PROVIDER and the matching key.Every variable is documented inline in .env.example and in docs/ENVIRONMENT.md.
npm run check:customizeThis lists every template default that needs replacing — package name, site name, OG image, and copy. Fill in PRODUCT.md as you build; AI coding agents read it on every session for product context.
npm run validateRuns lint, the design-system check, TypeScript, and unit tests — the same gates that run in CI and the pre-commit hook. The full reference documentation lives in the docs/ folder of the repository.