AI Components

Production-ready React components built specifically for AI products. Chat interfaces, streaming text renderers, and code blocks designed to work seamlessly with LLM APIs like OpenAI, Anthropic, and open-source models.

Streaming-first

Every component handles token-by-token streaming without layout shifts.

Model-agnostic

No assumptions about your LLM provider. Wire up any streaming API.

Dark mode ready

Chat and code block look great in dark mode — no extra config.

Chat

Conversational

A full-featured chat interface with user and assistant message bubbles, typing indicators, streaming support, and dark-mode-friendly design. Drop it into any AI product.

View docs

Code Block

Display

Syntax-highlighted code display with language detection, line numbers, and a copy-to-clipboard button. Designed for rendering LLM-generated code in AI interfaces.

View docs

Streaming Text

Animation

Renders text token by token with configurable speed, smooth cursor animation, and an onComplete callback. Ideal for streaming LLM responses in real time.

View docs

Wiring up a streaming response

The AI components are designed to work with the Web Streams API. Here's how to connect them to a standard Next.js Route Handler that streams an LLM response:

app/api/chat/route.ts

import { StreamingText } from "@animui/ui";

// In your component
const [text, setText] = useState("");

const handleStream = async () => {
  const res = await fetch("/api/chat", { method: "POST" });
  const reader = res.body!.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    setText((prev) => prev + decoder.decode(value));
  }
};

// Render the streaming response
<StreamingText text={text} speed={30} cursor />