Quick start
Install the Sunboard CLI, run sunboard init, and hand off to your AI agent to design your first activation experience.
Sunboard turns your AI coding agent into an activation expert. This guide gets the CLI installed, wires the React SDK into your app, and installs the agent skills — so you can ask your agent to design and ship in-app onboarding as code.
Before you start
You'll need Node.js 18 or later and a Next.js (App Router) or
React + Vite app. Don't have a Sunboard account yet? You can still run
everything locally — init writes a placeholder key you can swap later.
Install and initialize
Install the CLI
Install Sunboard globally so the sunboard command is available in any project.
npm install -g sunboardpnpm add -g sunboardyarn global add sunboardbun add -g sunboardConfirm it's on your PATH:
sunboard --versionSign in
A one-time browser auth links this machine to your Sunboard account.
sunboard loginWorking offline?
You can skip this. sunboard init will write a placeholder
pk_test_replace_me key and you can run sunboard login later to bind a real
project.
Run init in your app
From the root of the app you want to onboard:
cd your-nextjs-or-vite-app
sunboard initinit is interactive and asks a few things:
- Which framework — Next.js App Router or React + Vite (auto-detected when it can).
- Which AI coding harnesses you use — Codex, Claude Code, and/or opencode. It installs the matching skill files for each.
- Which Sunboard project to bind — pick an existing project or create a new one. The runtime key is written to your env file.
What sunboard init sets up
In one run, init installs the SDK, wires the runtime into your app, scaffolds a
starter spec, and drops the agent skills into your repo:
@sunboard/reactis added topackage.json— the SDK that renders your checklist and tours.sunboard-provider.tsxis created and mounted in your root layout (or app entry), wrapping your app with the Sunboard runtime.globals.cssgets the--sunboard-*theme variables appended, so you can restyle the built-in widgets.sunboard/specs/activation.yamlis a starter onboarding spec to build on.- The skill files are installed for whichever harnesses you picked. (
.claude/commands/is shown above; Codex lands under.agents/skills/, opencode under.opencode/commands/.) .env.localgets your runtime key. The exact name depends on the framework:
NEXT_PUBLIC_SUNBOARD_KEY=pk_live_xxxThe provider lives at app/sunboard-provider.tsx.
VITE_SUNBOARD_KEY=pk_live_xxxThe provider lives at src/sunboard-provider.tsx.
After init finishes, install dependencies so @sunboard/react is available:
npm installpnpm installyarnbun installDesign your first experience
Now the fun part. Open your editor and ask your AI agent to run the spec skill:
/sunboard.spec
Design a trial activation checklist for users to set up their first workflow.The agent runs a short strategy interview (your ICP, the aha moment,
time-to-value, suggested segments), writes the spec, wires the selectors and
track() calls into your app, validates, and previews. When you're happy, deploy
it as a candidate version and promote it in Sunboard.
Spec
Plan and author the onboarding experience.
Implement
Wire selectors and track() calls into your app.
Preview
See the experience running in your local app.
Deploy
Upload a candidate version to promote in Sunboard.
Prefer to drive it yourself?
Every step the agent takes maps to a sunboard CLI command. Run
sunboard doctor anytime to check your install, or see the
Skills section for what each command does.