AI Kit — Live Interactive Demos

Build Stunning AI
Interfaces

Production-ready React components for streaming chat, agent orchestration, safety features, and usage analytics. Ship AI features in minutes, not weeks.

15+

Components

Hooks

Frameworks

Live Demos

Interactive Demos

Explore each AI Kit feature with live, interactive demos. See how easy it is to build beautiful AI experiences.

Streaming Chat

Real-time message streaming with markdown rendering, code highlighting, and typing animations

Agent Orchestration

Multi-agent systems with tool execution, swarm coordination, and real-time progress tracking

Safety & Moderation

PII detection, prompt injection protection, and content moderation with live analysis

Usage Dashboard

Real-time analytics with token tracking, cost monitoring, and model performance charts

Video Recording

Screen capture, camera recording, PiP compositing, and AI transcription with Whisper

A2UI Protocol

JSON-driven UI generation — AI agents describe interfaces, the renderer builds them live

Multi-Framework Support

Use AI Kit with your favorite framework

React

@ainative/ai-kit

Vue

@ainative/ai-kit-vue

Svelte

@ainative/ai-kit-svelte

Get Started in Seconds

# Install AI Kit
npm install @ainative/ai-kit

# Use in your React app
import { useConversation, StreamingMessage } from '@ainative/ai-kit';

function Chat() {
  const { messages, send, isStreaming } = useConversation({
    url: '/api/chat',
  });

  return (
    <div>
      {messages.map(msg => (
        <StreamingMessage key={msg.id} content={msg.content} />
      ))}
    </div>
  );
}

Ready to Build?

Join thousands of developers building beautiful AI interfaces with AI Kit.

Get AI Kit updates

New packages, API changes, and developer tips. Join 5,600+ developers.