AiWelcome

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { PromptComposer } from '@nizivo/react/unstable/prompt-composer';
import { SuggestionChip, SuggestionGroup } from '@nizivo/react/unstable/suggestion-chip';
import { AiWelcome } from '@nizivo/react/unstable/ai-welcome';

export function AiWelcomeExample(): JSX.Element {
  return (
    <AiWelcome
      style={{ maxInlineSize: 560 }}
      greeting="Good morning, Maya"
      description="Ask about your orders, write captions, or tag products — I can see your store and Instagram."
    >
      <SuggestionGroup>
        <SuggestionChip>Write a product description</SuggestionChip>
        <SuggestionChip>Summarise this week’s orders</SuggestionChip>
        <SuggestionChip>Find slow-moving stock</SuggestionChip>
        <SuggestionChip>Draft a launch post</SuggestionChip>
      </SuggestionGroup>
      <PromptComposer labels={{ placeholder: 'Ask Nizivo AI anything…' }} />
    </AiWelcome>
  );
}

ImportCopy Anchor Link

import { AiWelcome } from '@nizivo/react/unstable/ai-welcome';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/ai-welcome.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript of its own; its children (a PromptComposer) may have some. How to choose.

ContentCopy Anchor Link

greeting is the heading (headingLevel, 2 by default); description says what the assistant can see and do. Be honest about its scope and its access to data. The children follow at full width: a SuggestionGroup of starters and the composer.

The orbCopy Anchor Link

The orb is decoration. The design's is a shader: pass GlowOrb as orb (orb={<GlowOrb />}) and it breathes in the 72 px circle, the welcome's own halo dropped behind it. Without it the orb is drawn with CSS, as VoiceOrb's is; orb takes any picture in its place, hidden from assistive technology.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

AiWelcomeProps type

import type { AiWelcomeProps } from '@nizivo/react/unstable/ai-welcome'

The props of AiWelcome, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-ai-welcome, .nz-ai-welcome-description, .nz-ai-welcome-greeting, .nz-ai-welcome-orb, .nz-ai-welcome-sphere, .nz-glow-orb.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.