Streaming Response

AI chats 60

About

A response surface for AI chat that shows streaming or completed text with copy, retry, and feedback actions plus an expandable list of sources.

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

Code

How Streaming Response is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { StreamingResponse } from "@/components/ui/streaming-response";

const SOURCES = [
  {
    id: "motion-react",
    title: "Motion for React",
    domain: "motion.dev",
    url: "https://motion.dev/docs/react",
  },
  {
    id: "aria-busy",
    title: "ARIA live regions",
    domain: "developer.mozilla.org",
    url: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-busy",
  },
];

export default function StreamingResponseDemo() {
  return (
    <div className="mx-auto w-full max-w-xl p-6">
      <StreamingResponse
        status="complete"
        copyText="Paris is the capital of France. It has been the country's political and cultural center for centuries."
        onRetry={() => {}}
        sources={SOURCES}
      >
        <p>
          Paris is the capital of France. It has been the country's political
          and cultural center for centuries.
        </p>
      </StreamingResponse>
    </div>
  );
}