Multi-Agent Chat with Personas

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/chat/chat16.tsx instead.

Usage

The file also exports chat16Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Chat16, chat16Demo } from "@/components/blocks/chat/chat16";

export default function Page() {
  return <Chat16 {...chat16Demo} />;
}

Props

Types

export interface Chat16Agent {
  name: string;
  role: string;
  avatar?: { src: string; alt: string };
  colorClass: string;
}

export interface Chat16Message {
  id: string;
  agent: Chat16Agent;
  text: string;
  timestamp: string;
}

Behavior notes

• Fully static, server-rendered: no useState, no interactivity of any kind.
• Each persona carries its own colorClass (a fixed pair of semantic Tailwind tokens, e.g. bg-primary/text-primary-foreground) supplied as data on the agent object, so avatars and initials fallbacks are color-coded per persona without hardcoding colors in the component itself.
• Timestamps are fixed literal strings passed in as data, never computed with new Date().