Multi-agent Chat

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {BoardTemplate} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <BoardTemplate id="multi-agent-chat" embedded initialGroup initialEditorOpen={false}/>;}

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.

'use client';
import '@helios-ui/react/styles.css';
import {SourceAgentArtwork} from '@helios-ui/react';

export function Example(){return <SourceAgentArtwork shape="slender" expression="neutral" color="#f8b193" size={162}/>;}

Connect your agents

The preview uses labeled sample replies. Supply onRespond to connect your application; each participant receives the conversation and an abort signal. The example below accepts your response callback. 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 type {ComponentProps} from 'react';
import '@helios-ui/react/styles.css';
import {MultiAgentChat} from '@helios-ui/react';

type Respond = NonNullable<ComponentProps<typeof MultiAgentChat>['onRespond']>;
export function Chat({respond}:{respond:Respond}){
  return <MultiAgentChat onRespond={respond} defaultEditorId={null} storageKey={null}/>;
}

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.