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.
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>
);
}