AI setup wizard
ProA three-step setup card for turning on an AI feature. You connect Notion, Google Drive, Confluence or Zendesk and watch each one sync. Then you pick the model, tone and guardrails, and ask a test question whose answer streams with numbered citations before you go live.
- Turning on an AI answers feature for a support, sales or internal knowledge team, like Intercom Fin, Zendesk AI or Notion Q&A.
- Onboarding admins to a copilot that needs data sources, a model choice and guardrails before it is enabled.
- A landing page or product tour section that shows the full setup in one short, looping clip.
- Configuring an agent's instructions, tools and files in depth: use agent-builder.
- Only choosing a model: use model-picker.
- A full conversation after setup: use ai-chat. The test step answers one question at a time.
- Monitoring a running agent: use agent-status.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Drop `<AiSetupWizard featureName="Ask Acme" />` into the first-run screen of your AI assistant or copilot. Connect your real sync job with `onConnect(source, report, signal)` and call `report(0..1)` as items arrive. Wire `onAsk(question, config, signal)` to your assistant so the test uses the unsaved config; it returns `{ text, citations }` with `[1]` markers in the text. `onGoLive(config, signal)` turns the feature on. `sources`, `models`, `tones`, `guardrails` and `suggestions` replace the sample content, and `onStepChange` and `onConfigChange` report progress. With no handlers it plays the simulated Ask Northwind flow in a loop, which stops on the first interaction. Set `autoPlay={false}` to turn the loop off.
import { AiSetupWizard } from "@/components/arc/blocks/ai-setup-wizard/ai-setup-wizard"; export function TurnOnAnswers() { return ( <AiSetupWizard featureName="Ask Acme" onConnect={async (source, report, signal) => { const job = await startSync(source.id, { signal }); for await (const progress of job.progress()) report(progress); }} onAsk={(question, config, signal) => askAssistant(question, config, { signal })} onGoLive={config => saveAssistant({ ...config, enabled: true })} /> );}AiSetupWizard
A three step card for turning on an AI feature. Step 1 connects data sources (Notion, Google Drive, Confluence, Zendesk) with a live sync count and a progress line per row. Step 2 picks the model from three cards, a tone and three guardrail switches. Step 3 asks a test question; the answer streams in fast chunks with numbered citations that match the connected sources. Go live shows a drawn check and a summary of the setup, and the header flips from Draft to Live. With no props it plays the Ask Northwind support assistant sample end to end and loops until someone interacts.
featureNamestring"Ask Northwind"The AI feature being turned on. Used in the title ("Set up Ask Northwind") and the confirmation.audiencestring"Answers for 48 agents in Northwind support"One muted line under the title, such as who gets the feature.sourcesWizardSource[]defaultSourcesSources for step 1: { id, name, description, count, unit, mark? }. Four fit the card. Defaults to Notion, Google Drive, Confluence and Zendesk with their marks.modelsWizardModel[]defaultModelsThree model cards: { id, name, shortName?, note?, mark? }. Defaults to Claude Sonnet 5.5, GPT-6.1 Sol and Gemini 4 Argon.tonesWizardOption[]defaultTonesTone options for the segmented control: { value, label }. Defaults to Concise, Friendly and Formal.guardrailsWizardGuardrail[]defaultGuardrailsUp to three switches: { id, label, defaultOn? }. Defaults to citing sources, handing off when unsure and redacting personal data.suggestionsstring[]defaultSuggestionsUp to three sample questions offered in step 3 before the first test.defaultModelIdstring–The model selected at the start. Defaults to the first model.defaultTonestring–The tone selected at the start. Defaults to the first tone.onConnect(source: WizardSource, report: (progress: number) => void, signal: AbortSignal) => Promise<void>–Connects and syncs one source. The row shows Connecting until the first report call, then the synced count and a progress line. Resolve when the sync is done; reject with an Error to show its message on the row with a Retry button. Simulated when left out.onAsk(question: string, config: WizardConfig, signal: AbortSignal) => Promise<WizardAnswer>–Answers a test question with the current config. Return { text, citations: { sourceId, title }[] } and write [1], [2] into text in citation order. The signal aborts when the person presses Stop. Simulated when left out.onGoLive(config: WizardConfig, signal: AbortSignal) => Promise<void>–Turns the feature on. Resolve to show the confirmation; reject to show the error in the footer with Try again. Simulated when left out.onStepChange(step: number) => void–Called with 0, 1 or 2 for the steps and 3 for the live confirmation.onConfigChange(config: WizardConfig) => void–Called with { sources, modelId, tone, guardrails } whenever a source finishes syncing or a setting changes.autoPlayboolean–Plays the whole flow on its own and loops, pausing off screen. The first pointer or key press inside the card stops it. Defaults to true when none of onConnect, onAsk or onGoLive is passed; always off with reduced motion.classNamestring–Extra class on the card.- Tab
- Moves through the stepper, row actions, settings, the composer and the footer buttons.
- Arrow keys
- Move between model cards and select the focused one (radio group).
- Space
- Toggles the focused guardrail switch.
- Enter
- Asks the typed question, or stops an answer that is streaming.
- The stepper is an ordered list of buttons; the current step has aria-current="step" and completed steps say so. Steps not reached yet are disabled.
- Model cards are a radiogroup with roving focus; each radio is labelled with the full model name and note.
- A polite status region announces step changes, finished syncs, answers and going live, and says when the sample is simulated.
- Status is never color alone: synced rows show a check and "Synced", errors an alert icon and text, the header a Draft or Live label with its icon.
- Focus stays on the footer button across steps because the same button changes its label; Back keeps its space when hidden so nothing shifts.
- Steps slide 32px horizontally with a bounce free spring (visualDuration .24) and an opacity crossfade, inside a fixed height viewport, so the card never changes size.
- Stepper bars fill with scaleX and glyphs crossfade from number to check. Row meta, footer meta and status labels swap with one crossfade (100ms out, 160ms in, 2px rise).
- Answers stream three to six words every 34ms and each chunk only fades in; citations fade in after the stream with a 40ms stagger.
- The confirmation draws its circle and check with pathLength. Reduced motion drops travel, drawing and streaming (answers appear whole) and turns off the self playing demo.
- Fills its container up to 600px. Below 480px the padding drops to 16px, stepper labels shorten to one word and model names may wrap to two lines.
- Below 400px the footer meta hides and only Back and the primary button remain; citation source names hide and titles truncate.
- Holds up at 360px with no horizontal scroll; the step viewport keeps one height at every width.
- Plain DOM and CSS; motion animates opacity, small transforms and scaleX only.
- The self playing loop only counts time while the card is on screen (IntersectionObserver) and stops for good on the first interaction.
- Streaming appends one chunk span every 34ms with a CSS fade, so earlier text never re-renders its animation.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it as the first run setup for an AI assistant, copilot or answer engine inside a SaaS product, where admins choose data, behavior and test before turning it on.
- Wire onConnect to your sync job and call report as it progresses; onAsk should call the real assistant with the config so the test reflects unsaved settings.
- Citation sourceIds must match WizardSource ids so the marks line up. Keep the answer under about 320 characters so it fits without scrolling.
- Marks are 20px square SVGs in rows and 14px in citations; mono marks should use currentColor so they follow the theme.
- Pass autoPlay={false} when embedding with real handlers if you also leave one of them out.
The full library index for assistants is at /llms.txt.