Multi-agent Chat
A complete interface for agentic products. Bring agents into individual or group conversations, give each one a distinct identity, and connect the workspace to your own response service. Includes animated avatars, a reusable agent creator, a plugin marketplace, and automatic browser saving.
Installation
Multi-agent Chat is a BoardUI Pro template.
Dark mode ready - this template follows BoardUI semantic tokens automatically. Set up theme switching.
Using a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
What’s included
Ten agents, seven starter conversations, individual and group chats, a searchable conversation sidebar, pinning, renaming, group editing, and compact context menus. The workspace includes the composer, a tabbed marketplace, settings, theme controls, and a responsive agent editor. Source, demo data, and the components they depend on ship with the template.
Conversations that feel connected
Select agents as compact pills and watch their avatars gather. Starting a group carries that cluster from the picker into the chat. With the first message, waiting agents follow staggered arcs into the conversation badge while the answering avatar settles into its thinking state. Reduced-motion preferences skip the travel animations.
An agent creator you can reuse
Customize names, descriptions, avatar shapes, expressions, colors, voices, and playback speed. The same sidebar is available as a standalone Agent Creator block, with controlled state for your own application.
Animated avatars
Avatars share a lightweight Canvas renderer. Eyes wander and blink independently, shapes morph together with their folded layer, and reduced-motion preferences are respected. The emotion selector repeats as you scroll and supports arrow keys.
import { AgentAvatar } from "@/components/application/agent-avatar/agent-avatar";import { FOLD_CONFIG } from "@/components/application/agent-avatar/model";
<AgentAvatar config={{ ...FOLD_CONFIG, foldShape: "slender", foldDepth: 15, lookAt: "wander" }} size={162} />Connect your agents
The preview uses labeled sample replies. Supply onRespond to connect your service; each participant receives the conversation and an abort signal. Implement the example endpoint in your application. Use initialWorkspace for your own starting agents and conversations, and defaultEditorId={null} to start with the editor closed. Set storageKey to a custom key, or null to disable browser persistence.
"use client";import { MultiAgentChat } from "@/components/application/multi-agent-chat/multi-agent-chat";
export function Chat() { return <MultiAgentChat onRespond={async (agent, messages, signal) => { const response = await fetch("/api/agents/respond", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ agent, messages }), signal, }); if (!response.ok) throw new Error("Agent response failed"); const data = await response.json(); return data.text; }} />;}Marketplace and settings
Discover bots and plugins, browse detail pages, and manage what is installed. Marketplace installation is a local demo; connect your own account and permission flows for real integrations. Preferences and conversations save in the browser by default.