Developer guide

React AI UI components for prompt and result workflows

AI UI components support prompt entry, context selection, command discovery, response loading, result browsing, feedback, and follow-up actions. This guide maps Spectrum UI inputs, selectors, command navigation, reactions, loading states, avatars, and infinite content patterns to React AI application workflows.

The components do not call a model or implement streaming, persistence, safety, or usage accounting. Connect them to the AI SDK or backend selected by your project and represent pending, partial, completed, empty, and failed states explicitly.

Browse 10 componentsView code example

What AI UI Components means

An AI interface is a stateful application surface, not just a textarea beside a send button. Users need to understand what context is selected, whether a request is running, which output belongs to which prompt, and what can be retried, copied, rated, or continued.

Spectrum UI provides general interface primitives that can be composed for those states. Keep model-specific data and streaming logic outside the visual component unless the component API explicitly owns that behavior.

When to use these patterns

01

Users write prompts or instructions

Combine an autosizing input with explicit submit, keyboard, disabled, and pending behavior suited to the product.

02

Users select tools or context

Command palettes and multiple selectors can expose models, sources, tools, or actions when their labels remain understandable.

03

Generated results need follow-up

Use loading, reactions, feedback, infinite content, and copy or retry actions to make result state and next steps explicit.

AI UI Components to explore

Open a component page to inspect its live example, editable source, installation command, dependencies, API details, accessibility notes, and related components.

FormAutosize TextareaA textarea that automatically grows and shrinks to fit its content.FormMultiple SelectorA multi-select input with async search, grouping, and creatable options.ProfileAvatar StackAn overlapping avatar row that fans apart on hover with springy name tooltips.FeedbackFeedback CardA feedback card that collects ratings and comments with emoji reactions.ActionLoading ButtonA shadcn/ui button with a built-in loading spinner state.DataInfinite ScrollAn infinite scroll container that loads more content using the IntersectionObserver API.FormInput ModelA modal dialog with an input form for quick data entry.FeedbackReaction BarA Slack-style emoji reaction bar with animated chips and rolling counts.InputKbd KeyA 3D keycap that physically depresses when the matching key is pressed.FeedbackSpinnerA loading spinner with multiple sizes and variants for async states.

Build a controlled prompt composer

The autosizing input owns its height behavior while the application owns submission, streaming, persistence, and request state.

pnpm dlx shadcn@latest add @spectrumui/autosize-textarea-demo
pnpm dlx shadcn@latest add button
PromptComposer.tsx
'use client';

import { useState } from 'react';
import { AutosizeTextarea } from '@/components/spectrumui/autosize-textarea';
import { Button } from '@/components/ui/button';

export function PromptComposer() {
  const [prompt, setPrompt] = useState('');

  return (
    <form className="flex items-end gap-3">
      <AutosizeTextarea
        value={prompt}
        onChange={(event) => setPrompt(event.target.value)}
        minHeight={52}
        maxHeight={180}
        aria-label="Prompt"
      />
      <Button type="submit" disabled={!prompt.trim()}>
        Send
      </Button>
    </form>
  );
}

Linked guides

Guide

AI-powered UI development

Use AI tools while keeping architecture, review, and product decisions explicit.

Guide

Performance UI engineering

Measure streaming updates, long result lists, and client rendering under load.

Guide

Set up the Spectrum UI MCP server

Let compatible editors search and install documented components.

Dashboard ComponentsNext.js UI LibraryReact Component Library

AI UI Components questions

No. They are interface source. Choose and configure the model SDK, server route, authentication, persistence, safety controls, and usage tracking separately.