npm · cascivo.com · Docs · Storybook · GitHub

AI-native components for cascivo — the presentation layer for AI features: streaming text, generation status, animated terminals, and a full chat surface. Signal-driven like the rest of the design system (no useState, no useEffect), typed, and localized via @cascivo/i18n built-in catalogs.

Newly published — first release on npm as of 0.1.0.

Peer dependencies: react >=18 and @preact/signals-react >=2 (the components are signal-driven). Styles ship as CSS modules bundled with the components — no stylesheet import needed. Pair with @cascivo/themes for tokens.

pnpm add @cascivo/ai @preact/signals-react

The wider AI catalogue lives in the registry. AiStatus, ShimmerText, TypingIndicator, Reasoning, ChainOfThought, ToolCall, AiBadge, Sources, InlineCitation, AiDisclaimer, MessageActions, PromptSuggestions and ContextMeter ship in @cascivo/react and through cascivo add. StreamingText and Terminal below are those same registry components, re-exported here, so there is one implementation of each.

StreamingText

Types text out character-by-character with a blinking cursor, driven by requestAnimationFrame. Feed it a growing string (e.g. an accumulating LLM response) or a static one:

import { StreamingText } from '@cascivo/ai'
;<StreamingText
  text={response} // target text; typing catches up as it grows
  speed={2} // characters per frame (default 2)
  onComplete={() => setDone(true)}
/>

The cursor renders only while the displayed text lags the target, and the animation resets when text is replaced with a shorter string.

AiLabel (deprecated)

Deprecated since 1.7.0; removed in 2.0.0. Use AiStatus from @cascivo/react (cascivo add ai-status). It covers the same states, adds thinking and stopped and an optional Stop button. Map variant="done" to status="complete".

A role="status" badge for AI-generated content with three variants — generating (default), done, error. Labels come from the @cascivo/i18n built-in catalog, so they localize automatically:

import { AiLabel } from '@cascivo/ai'

<AiLabel variant="generating" />
<AiLabel variant="done" />
<AiLabel variant="error" />

It extends HTMLAttributes<HTMLSpanElement>, so className, title, etc. pass through.

Terminal

An animated terminal window that types out a script of lines. The animation is visual only. The full script is in the page as text from the first render, so screen readers read it once rather than being fed characters. Each line has a type (command | output | error | comment) for per-line styling and an optional prefix (e.g. $):

import { Terminal } from '@cascivo/ai'
;<Terminal
  lines={[
    { text: 'npx cascivo add button', prefix: '$', type: 'command' },
    { text: 'Added button to src/components.', type: 'output' },
    { text: '# done in 1.2s', type: 'comment' },
  ]}
  speed={3} // characters per frame (default 3)
  loop // restart from the top after the last line
  onComplete={() => {}}
/>

AiChat

A complete chat surface: message list (role="log", deliberately not a live region), streaming assistant bubble (a TypingIndicator until the first token arrives), and a textarea composer with Enter-to-send (Shift+Enter for a newline). It is fully controlled — you own the message array and the send handler:

import { AiChat, type ChatMessage } from '@cascivo/ai'

const messages: ChatMessage[] = [
  { id: '1', role: 'user', content: 'What is cascivo?' },
  { id: '2', role: 'assistant', content: 'A CSS-native design system.' },
]

<AiChat
  messages={messages} // system messages are accepted but not rendered
  onSend={(text) => append({ role: 'user', content: text })}
  isStreaming={streaming} // disables the send button
  streamingText={partial} // rendered as a live assistant bubble via StreamingText
  onStop={() => abort()} // optional: shows an AiStatus with a Stop button while streaming
/>

When streaming ends, the finished reply is announced once to screen readers (through announce() from @cascivo/core), instead of being read out token by token.

Role labels ("You" / "Assistant"), the input placeholder, and the send button label all default from the @cascivo/i18n built-in catalog.

Install

pnpm add @cascivo/ai

cascivo.com · Docs · Storybook · GitHub · AI agents: read llms.txt (install steps + component index, plain text) or use @cascivo/mcp and registry.json · MIT