---
title: "AI Kit React"
description: "React hooks and UI components for AI-powered interfaces — streaming messages, code blocks, indicators"
canonical: "https://docs.ainative.studio/docs/ai-kit/react"
last-updated: "2026-10-03T21:47:10.764Z"
---

# AI Kit React

Source: https://docs.ainative.studio/docs/ai-kit/react

> React hooks and UI components for AI-powered interfaces — streaming messages, code blocks, indicators

# AI Kit React

React hooks and UI components for building AI-powered interfaces with streaming support.

```bash
npm install @ainative/ai-kit
```

**Requires:** React 18+

## Components

### StreamingMessage

Display AI messages with real-time streaming animations:

```tsx
import { StreamingMessage } from '@ainative/ai-kit';

<StreamingMessage
  role="assistant"
  content={message.content}
  streamingState="streaming"  // 'idle' | 'streaming' | 'done'
  animationType="typewriter"  // 'none' | 'fade' | 'typewriter' | 'smooth'
  enableMarkdown={true}
  codeTheme="vs-dark"         // 'dark' | 'light' | 'vs-dark' | 'github' | 'monokai' | 'nord' | 'dracula'
/>
```

**Props:**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `role` | `'user' \| 'assistant' \| 'system'` | required | Message role |
| `content` | `string` | required | Message content (supports markdown) |
| `streamingState` | `'idle' \| 'streaming' \| 'done'` | `'idle'` | Current streaming state |
| `animationType` | `'none' \| 'fade' \| 'typewriter' \| 'smooth'` | `'typewriter'` | Animation style |
| `enableMarkdown` | `boolean` | `true` | Render GitHub Flavored Markdown |
| `codeTheme` | `string` | `'vs-dark'` | Syntax highlighting theme |

### CodeBlock

Syntax-highlighted code with copy button:

```tsx
import { CodeBlock } from '@ainative/ai-kit';

<CodeBlock
  code="console.log('hello')"
  language="javascript"
  showLineNumbers={true}
  showCopyButton={true}
  theme="vs-dark"
/>
```

### StreamingIndicator

Animated indicator while content is being generated:

```tsx
import { StreamingIndicator } from '@ainative/ai-kit';

<StreamingIndicator
  variant="dots"    // 'dots' | 'pulse' | 'wave'
  size="md"         // 'sm' | 'md' | 'lg'
  color="#6366f1"
/>
```

## Full Chat Example

```tsx
import { useState } from 'react';
import { StreamingMessage, StreamingIndicator, CodeBlock } from '@ainative/ai-kit';
import { useChat } from '@ainative/react-sdk';

function Chat() {
  const { messages, sendMessage, isLoading } = useChat({
    model: 'meta-llama/llama-3.3-70b-instruct',
  });
  const [input, setInput] = useState('');

  return (
    <div>
      {messages.map((msg) => (
        <StreamingMessage
          key={msg.id}
          role={msg.role}
          content={msg.content}
          streamingState={msg.isStreaming ? 'streaming' : 'done'}
          animationType="smooth"
        />
      ))}
      {isLoading && <StreamingIndicator variant="dots" />}
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') { sendMessage(input); setInput(''); }
        }}
      />
    </div>
  );
}
```

## Accessibility

All components meet WCAG 2.1 AA standards:
- Proper ARIA roles and labels
- Keyboard navigation support
- Screen reader compatible
- Respects `prefers-reduced-motion`