BrainList

Code

import { BrainList, type BrainSummary } from "@fadymondy/nasaq/web";const brains: BrainSummary[] = [  { id: "1", name: "Company handbook", description: "Policies and guides.", avatar: "📘", status: "ready", visibility: "team", memories: 1842, sources: 6, chats: 412 },];export function Brains() {  return <BrainList brains={brains} onRowClick={(b) => open(b.id)} />;}

AI Agents · beta

Live examples and controls: BrainList in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/brain-list.json

A shared-memory workspace list. Each brain shows its mark, name and description, whether it is ready, indexing, paused or in error, who can reach it (private, team, public), how many memories, sources and chats it holds, its members and when it was last used. It is EntityList with the columns, cards and filters set up, plus a standalone BrainCard.

When to useCopy Anchor Link

• A page that lists the brains (knowledge bases, agents) of a workspace.
• BrainCard alone in a dashboard, a picker or a search result.

When not to useCopy Anchor Link

• Chatting with a brain: use CopilotChat.
• Other records: build on EntityList.

ImportCopy Anchor Link

import { BrainCard, BrainList } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { BrainList, type BrainSummary } from "@fadymondy/nasaq/web";

const brains: BrainSummary[] = [
  { id: "1", name: "Company handbook", description: "Policies and guides.", avatar: "📘", status: "ready", visibility: "team", memories: 1842, sources: 6, chats: 412 },
];

export function Brains() {
  return <BrainList brains={brains} onRowClick={(b) => open(b.id)} />;
}

AnatomyCopy Anchor Link

BrainList renders EntityList. Columns: name (mark, name, description), status, access, memories, sources, chats (hidden by default), members, model (hidden by default), tags (hidden by default), last active. Facets: status, access, tag. The card view renders BrainCard.

APICopy Anchor Link

BrainListProps extends the EntityList props (view, defaultView, pageSize, selectable, toolbar, bulkActions, rowActions, onRowClick, loading, error, onRetry, empty, defaultSort, className).

BrainCard takes brain, footer (extra content such as buttons), labels and className.

avatar is an emoji or an image URL (https://, / or data:); without one a brain icon is shown.

ExamplesCopy Anchor Link

Cards only, with an Open button

<BrainList brains={brains} defaultView="cards" views={["cards"]} />

A card in a dashboard

<BrainCard brain={brain} footer={<Button size="sm">Open</Button>} />

AccessibilityCopy Anchor Link

Inherited from EntityList. Status and access are text plus an icon, never colour alone. The brain mark is decorative; the name is the accessible label of the row and the card.

RTL & i18nCopy Anchor Link

• English and Arabic strings ship, including status and access names. Counts and dates follow the locale.
• The model name is set left-to-right. Card counts and members flow from the inline start.

Styling & tokensCopy Anchor Link

• Status tones come from Status; the access chip is an outline Badge. Surfaces use bg-secondary and border-border.

Do / Don'tCopy Anchor Link

• Do keep memories and sources as plain counts; the component formats them (compact on cards).
• Don't rely on avatar for meaning; the name always carries it.

RelatedCopy Anchor Link

• EntityList
• ProjectList
• CopilotChat

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-ai-agents-brain-list--docs