Skip to main content
Streaming Demo

Real-time Chat Streaming

Experience AI Kit's streaming capabilities with real-time message rendering, markdown support, and code highlighting.

Start a Conversation

Try one of the example prompts or type your own message to see streaming in action.

AI Kit Features Used

useAIStream

Hook for managing stream state

Hook

StreamingMessage

Real-time message rendering

Component

MarkdownRenderer

Rich text formatting

Component

CodeBlock

Syntax highlighting

Component

Quick Start

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

const { stream, isStreaming } = useAIStream({
  url: '/api/chat',
  onChunk: (chunk) => {
    setContent(prev => prev + chunk);
  },
});

How It Works

AI Kit's streaming chat component uses server-sent events (SSE) to deliver AI-generated responses token by token in real time. When a user sends a message, the useConversation hook establishes a persistent connection to your backend API endpoint. As the language model generates each token, it is pushed to the client immediately, creating a natural typing effect that keeps users engaged while waiting for the full response.

The streaming renderer handles markdown parsing on the fly, including fenced code blocks with syntax highlighting, inline formatting such as bold and italic text, ordered and unordered lists, and even tables. Code blocks are rendered with language-aware syntax highlighting powered by Prism.js, making the component ideal for developer-facing applications. The component also manages scroll behavior automatically, keeping the latest content visible while allowing users to scroll up through conversation history without interruption. Error handling, retry logic, and connection management are all built in so you can focus on your application logic rather than infrastructure plumbing.

Use Cases

  • Customer support chatbots that stream answers from your knowledge base with citations and source links.
  • Code assistants that generate, explain, and refactor code in real time with syntax-highlighted output.
  • Content writing tools that stream drafts paragraph by paragraph, letting users edit while generation continues.
  • Educational tutors that provide step-by-step explanations with LaTeX math rendering and interactive examples.

Integration Guide

Install AI Kit and connect your streaming endpoint in under five minutes:

import { useConversation, StreamingMessage } from '@ainative/ai-kit';

function StreamingChat() {
  const { messages, send, isStreaming } = useConversation({
    url: '/api/chat',
    onError: (err) => console.error('Stream error:', err),
  });

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((msg) => (
          <StreamingMessage
            key={msg.id}
            role={msg.role}
            content={msg.content}
            isStreaming={msg.isStreaming}
          />
        ))}
      </div>
      <ChatInput onSend={send} disabled={isStreaming} />
    </div>
  );
}