Multi-agent Chat

A workspace for chatting with a team of agents, with a live avatar editor, a marketplace and group chats.

A client-side agent workspace with sample data and scripted replies. It is built from multi-agent-chat-01 inside the shared app-shell-01 frame. Edit an agent's shape, colour, expression and name and watch the list and chat header follow. Start a group chat and the agents answer one after another. Conversations and edits are kept in localStorage.

Multi-agent ChatOpen full screen

"use client";

import { AppShell } from "@/components/blocks/app-shell-01/components/app-shell";
import { appShellNav } from "@/components/blocks/app-shell-01/components/app-shell-nav";
import { useAppShellTheme } from "@/components/blocks/app-shell-01/components/app-shell-theme";
import { MultiAgentChat } from "@/components/blocks/multi-agent-chat-01/components/multi-agent-chat";

/** The multi-agent chat page inside the shared app shell. */
export function MultiAgentChatApp({
  basePath = "",
  links,
  popupClassName,
}: {
  basePath?: string;
  /** Hrefs for the other pages in the sidebar, by nav key. */
  links?: Partial<Record<string, string>>;
  popupClassName?: string;
}) {
  const { theme, changeTheme } = useAppShellTheme();
  return (
    <AppShell
      selected="agents"
      basePath={basePath}
      links={links}
      popupClassName={popupClassName}
      nav="none"
      fill
      flush
    >
      <MultiAgentChat
        popupClassName={popupClassName}
        theme={theme}
        onThemeChange={changeTheme}
        pages={appShellNav({ ...links, agents: basePath || "/" })}
        className="h-auto flex-1"
      />
    </AppShell>
  );
}