AI chatPro

• Word-by-word streaming
• Stop generating
• Model picker and suggestions

• Assistants and support bots inside a product.

• Comparing models: use the AI playground.

Import it from @/components/blocks/ai-chat after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { AiChat } from "@/components/blocks/ai-chat";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiChat />
    </main>
  );
}

• The message list is aria-live="polite" so answers are announced.
• Copy and stop buttons are labelled.

• Words stream in; new messages slide up.

• Full height of its container; the composer stays pinned.

• Streaming appends to one message; earlier messages don't re-render.

• Replace the fake stream with your model's token stream and keep the message shape.