# Agent & API Setup block

> Eight-step workspace onboarding wizard with progress stepper, AI agent picker, copyable API setup

Eight-step workspace onboarding wizard ending in AI agent selection and API key setup with copyable terminal commands. Profile, role, goals, and invite steps. ReUI Stepper, Frame plus shadcn Combobox, RadioGroup, Select. Account setup flow.

- Type: Pro block
- Category: [Onboarding](https://web.dev.reui.io/blocks/application/onboarding.md)
- Page: https://web.dev.reui.io/blocks/application/onboarding/onboarding-6
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/stepper.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/stepper.md
- MCP: `get_block("onboarding-6")`
- Built with: Avatar, Button, Checkbox, Collapsible, Combobox, Field, Frame, Icon Stack, Input, Item, Radio Group, Select, Spinner, Stepper, Switch, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A pill progress bar with a step count in the header, a Previous, Skip and Next footer bar, and agent pick plus API setup steps

## Agent notes

- `ApiAccessStep` takes no props and always shows OpenAI Codex, even when `selectedAgent` holds another agent; branch it per agent
- `API_SETUP_STEPS` and `API_ACCESS_BENEFITS` are Supermemory sample commands and copy; replace them with your own plugin setup
- The Docs, GitHub and Open API Keys buttons in `ApiAccessStep` are plain buttons with no `onClick` or link target

## When not to use

- A six-step signup with no coding agent pick or CLI commands: use [Centered Setup Flow](https://web.dev.reui.io/blocks/application/onboarding/onboarding-4.md) (`get_block("onboarding-4")`)
- A multi-step business task such as billing setup with a review summary: use [Billing Setup](https://web.dev.reui.io/blocks/application/wizard/wizard-1.md) (`get_block("wizard-1")`)

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)

## Install

```bash
npx shadcn@latest add @reui/onboarding-6
```

## About Onboarding blocks

### When to use

- A first-run setup after signup that collects profile, role, team size, goals and teammate invites
- Workspace creation shown as a full page, beside a product preview or in a modal over the app
- Developer tool signups that end by picking a coding agent and copying its CLI install commands

### When not to use

- A multi-step business task such as billing, vendor intake, a product listing or a transfer: use the [Wizard blocks](https://web.dev.reui.io/blocks/application/wizard.md)
- Only a progress indicator to place above step content you already built: use [Stepper](https://web.dev.reui.io/components/stepper.md) (`get_component("stepper")`)
- A purchase flow with shipping, payment and an order summary beside the steps: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- `completeOnboarding` only waits on a `window.setTimeout` before the ready screen; post the collected answers to your API there
- Replace `ONBOARDING_STEPS`, `ROLE_OPTIONS`, `GOAL_OPTIONS` and `DEFAULT_INVITES` in data.tsx; the step order and titles come from `ONBOARDING_STEPS`
- The timezone `Combobox` over `TIMEZONE_GROUPS` takes no `value` or `onValueChange`, so the picked zone never reaches component state

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.