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/example.yamlis an example onboarding spec that shows the spec shape; replace or delete it when you author real onboarding.- 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 onboarding
Now the fun part. Open your editor and ask your AI agent to run the onboarding skill:
/sunboard.onboarding
Help me set up onboarding for trial users to create their first workflow.The agent studies your app, runs a short conversation — your aha moment, the
cohorts worth targeting, whether new users need a survey to route them — and
agrees a plan with you. Then it drives the whole build: writing the experience
specs, wiring the selectors and track() calls into your app, creating the
segments, validating, and deploying to the sandbox so you can test the real loop
on your pk_test_ key. When you're happy, it promotes the tested versions to
production.
Onboarding
The one skill you start with — plans and builds the whole flow.
Survey
Route new users by what your product doesn't already know.
Segment
Decide who sees which experience.
Analyze
Improve the flow once real users arrive.
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.