AI Stream Debugger

AI chats 8

About

A compound component that visualizes AI streaming (SSE) responses chunk-by-chunk in real time, with auto-scroll, pause/resume, chunk type badges, and millisecond timestamps for debugging streamed model output.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Stream Debugger to your project and fits it to your theme.

Code

How AI Stream Debugger is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  AiStreamDebugger,
  AiStreamDebuggerHeader,
  AiStreamDebuggerContent,
} from "@/components/ui/stream-debugger";

const chunks = [
  {
    id: "1",
    type: "text" as const,
    content: "Hello",
    timestamp: new Date(),
  },
  {
    id: "2",
    type: "text" as const,
    content: " world, this is a streamed response.",
    timestamp: new Date(Date.now() + 50),
  },
  {
    id: "3",
    type: "tool_call" as const,
    content: "searchDatabase({ query: 'weather' })",
    timestamp: new Date(Date.now() + 100),
  },
  {
    id: "4",
    type: "tool_result" as const,
    content: "{ temperature: 72, condition: 'sunny' }",
    timestamp: new Date(Date.now() + 150),
  },
  {
    id: "5",
    type: "finish" as const,
    content: "stop",
    timestamp: new Date(Date.now() + 200),
  },
];

export default function StreamDebuggerDemo() {
  return (
    <div className="w-full max-w-xl">
      <AiStreamDebugger chunks={chunks} isStreaming>
        <AiStreamDebuggerHeader />
        <AiStreamDebuggerContent />
      </AiStreamDebugger>
    </div>
  );
}