AI Kit React

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

npm install @ainative/ai-kit

Requires: React 18+

Components

StreamingMessage

Display AI messages with real-time streaming animations:

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:

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:

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

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

Full Chat Example

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