Xzero UI
Pro library
BlocksAI setup wizard

AI setup wizardPro

A 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.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/ai-setup-wizard
Live · keyboard ready

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.

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/ai-setup-wizard

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { AiSetupWizard } from "@/components/xzero/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 })}
    />
  );
}

API reference

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.

PropTypeDefaultDescription
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.
logoReactNode<NorthwindMark />The company or product mark left of the title, drawn at 24px. Defaults to the Northwind sample mark; pass null to hide it.
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.

Keyboard interactions

KeysAction
TabMoves through the stepper, row actions, settings, the composer and the footer buttons.
Arrow keysMove between model cards and select the focused one (radio group).
SpaceToggles the focused guardrail switch.
EnterAsks the typed question, or stops an answer that is streaming.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components