)
}
diff --git a/src/app/(setup)/setup/SuccessScreen.tsx b/src/app/(setup)/setup/SuccessScreen.tsx
index 8977b1a..7354f17 100644
--- a/src/app/(setup)/setup/SuccessScreen.tsx
+++ b/src/app/(setup)/setup/SuccessScreen.tsx
@@ -123,121 +123,78 @@ export function SuccessScreen({
Your site is ready — one last step
{isLocal
- ? 'Add these environment variables to your .env file and restart the dev server — that is the last step.'
- : 'Add these environment variables to your host and redeploy once — that is the last step.'}
+ ? 'To finish up: copy these environment variables into your .env file, and then restart your development server.'
+ : 'To finish up: copy these environment variables into your host (like Vercel), and then redeploy your site.'}
-
1. Copy your environment variables
-
- {useEnvDatabase
- ? `DATABASE_URL is already set ${isLocal ? 'in your environment' : 'on this deployment'}, so it is not repeated here. `
- : ''}
- This is the only time the password-like values are shown.
-
+
Finish your deployment on Vercel
+
+
+ Open your Vercel project dashboard and go to Settings →{' '}
+ Environment Variables.
+
+
Paste the environment variables block below and save.
+
+ Go to Deployments → ⋯ on the latest one →{' '}
+ Redeploy.
+
+ {isLocal && (
+
+ To run locally, you can also paste these into your .env file and
+ restart your dev server.
+
- {isLocal
- ? '2. Paste them into .env and restart'
- : '2. Paste them in and redeploy — once'}
-
- {isLocal ? (
-
-
- Open .env in the root of your project — create it if it is not there
- yet. It is already in .gitignore, so these values stay off GitHub.
-
-
- Paste the whole block in and save. Replace any of these keys that are already in the
- file rather than adding a second copy — the last one set wins, and a stale{' '}
- CHAIBUILDER_APP_KEY points at a site that is not the one just created.
-
-
- Restart the dev server: stop it with Ctrl+C and run{' '}
- pnpm dev again.
-
-
- ) : host === 'netlify' ? (
-
-
- {hostEnvUrl ? (
- <>
- The button above opens{' '}
- this site’s environment variables{' '}
- in a new tab.
-
- ) : (
- <>
- In the Netlify dashboard, open this site →{' '}
- Site configuration →{' '}
- Environment variables.
-
- )}
-
-
- Choose Import from a .env file and paste the whole block.
-
-
- Deploys → Trigger deploy. Usually a minute or
- two.
-
-
- ) : (
-
-
- {hostEnvUrl ? (
- <>
- The button above opens{' '}
-
- this project’s environment variables
- {' '}
- in a new tab.
-
- ) : (
- <>
- Open{' '}
- vercel.com/dashboard
- , click this project, then Settings →{' '}
- Environment Variables.
-
- )}
-
-
Paste the whole block and save. Vercel splits it into separate variables.
-
- Deployments → ⋯ on the latest one →{' '}
- Redeploy. Usually a minute or two.
-
-
- )}
-
+
{isLocal ? 'Once it is back up' : 'When it finishes'}, sign in at /admin{' '}
with the email and password you just chose.
diff --git a/src/app/(setup)/setup/page.tsx b/src/app/(setup)/setup/page.tsx
index ece0533..6cf3ba5 100644
--- a/src/app/(setup)/setup/page.tsx
+++ b/src/app/(setup)/setup/page.tsx
@@ -57,8 +57,8 @@ function hasEnvMedia(): boolean {
function hasEnvAi(): boolean {
return Boolean(
process.env.AI_GATEWAY_API_KEY ||
- process.env.OPENROUTER_API_KEY ||
- process.env.OPENAI_COMPATIBLE_API_KEY,
+ process.env.OPENROUTER_API_KEY ||
+ process.env.OPENAI_COMPATIBLE_API_KEY,
)
}
diff --git a/src/app/(setup)/setup/wizard.tsx b/src/app/(setup)/setup/wizard.tsx
index c4930c8..3545529 100644
--- a/src/app/(setup)/setup/wizard.tsx
+++ b/src/app/(setup)/setup/wizard.tsx
@@ -3,21 +3,29 @@
import { useEffect, useRef, useState } from 'react'
import { runSetup, testConnection } from './actions'
import { BrandHeader } from './BrandHeader'
-import {
- EMPTY_EXTRAS,
- ExtrasFields,
- mediaPartlyFilled,
- type Extras,
-} from './ExtrasFields'
+import { EMPTY_EXTRAS, ExtrasFields, mediaPartlyFilled, type Extras } from './ExtrasFields'
import { NewTabLink } from './NewTabLink'
import { SuccessScreen, type Host } from './SuccessScreen'
-type Progress = 'idle' | 'migrating' | 'creating-admin' | 'creating-app' | 'done'
+type Progress =
+ | 'idle'
+ | 'checking'
+ | 'preparing'
+ | 'setting-up'
+ | 'creating-admin'
+ | 'creating-site'
+ | 'adding-homepage'
+ | 'finalizing'
+ | 'done'
const PROGRESS_LABELS: { key: Exclude; label: string }[] = [
- { key: 'migrating', label: 'Preparing your database' },
- { key: 'creating-admin', label: 'Creating your admin account' },
- { key: 'creating-app', label: 'Creating your site' },
+ { key: 'checking', label: 'Checking database' },
+ { key: 'preparing', label: 'Preparing database' },
+ { key: 'setting-up', label: 'Setting up database' },
+ { key: 'creating-admin', label: 'Creating admin user' },
+ { key: 'creating-site', label: 'Creating your site' },
+ { key: 'adding-homepage', label: 'Adding homepage' },
+ { key: 'finalizing', label: 'Finalizing' },
]
type StepId = 'site' | 'database' | 'review'
@@ -28,10 +36,10 @@ type StepId = 'site' | 'database' | 'review'
* last step, so whatever the user does fill in ships in the same block of
* variables — one paste, one redeploy, whichever they choose.
*/
-const ALL_STEPS: { id: StepId; title: string }[] = [
- { id: 'site', title: 'Your site' },
- { id: 'database', title: 'Database' },
- { id: 'review', title: 'Create' },
+const ALL_STEPS: { id: StepId; title: string; description: string }[] = [
+ { id: 'site', title: 'Your site', description: 'Name and admin login' },
+ { id: 'database', title: 'Database', description: 'Database connection' },
+ { id: 'review', title: 'Create', description: 'Review and launch' },
]
const CLI_COMMAND = 'npx chaibuilder-app create'
@@ -163,7 +171,12 @@ export function SetupWizard({
setStepError(error)
return
}
- goToIndex(Math.min(stepIndex + 1, steps.length - 1))
+
+ setStepError(null)
+ const next = stepIndex + 1
+ if (next >= steps.length) return
+ setStep(next)
+ setFurthestStep((f) => Math.max(f, next))
}
async function handleCreate() {
@@ -181,7 +194,7 @@ export function SetupWizard({
// bar is an estimate: it eases towards 92% and only completes when the work
// actually does. Creating the tables can take the better part of a minute and
// a frozen button reads as a hang.
- setProgress('migrating')
+ setProgress('checking')
setPercent(0)
const started = Date.now()
const ticker = setInterval(() => {
@@ -189,8 +202,12 @@ export function SetupWizard({
setPercent(Math.min(92, 92 * (1 - Math.exp(-elapsed / 18))))
}, 200)
const advance = [
- setTimeout(() => setProgress((p) => (p === 'migrating' ? 'creating-admin' : p)), 6000),
- setTimeout(() => setProgress((p) => (p === 'creating-admin' ? 'creating-app' : p)), 9000),
+ setTimeout(() => setProgress((p) => (p === 'checking' ? 'preparing' : p)), 400),
+ setTimeout(() => setProgress((p) => (p === 'preparing' ? 'setting-up' : p)), 600),
+ setTimeout(() => setProgress((p) => (p === 'setting-up' ? 'creating-admin' : p)), 800),
+ setTimeout(() => setProgress((p) => (p === 'creating-admin' ? 'creating-site' : p)), 1000),
+ setTimeout(() => setProgress((p) => (p === 'creating-site' ? 'adding-homepage' : p)), 1400),
+ setTimeout(() => setProgress((p) => (p === 'adding-homepage' ? 'finalizing' : p)), 1800),
]
const result = await runSetup({
@@ -233,238 +250,326 @@ export function SetupWizard({
)
}
+ const progressPercent = ((stepIndex + 1) / steps.length) * 100
+
return (
-
-
-
Set up your ChaiBuilder site
-
- {isLocal
- ? 'Three steps, then one restart — and your site is running.'
- : 'Three steps, then one redeploy — and your site is live.'}
-
- ChaiBuilder
+ chaibuilder