Xzero UI
Pro library
BlocksAgent gallery

Agent galleryPro

A marketplace card of AI agent templates where you filter by team, search by agent or app, preview a sample run and install an agent inline: choose a workspace, grant access app by app, and the card confirms with a check.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/agent-gallery
Live · keyboard ready

Drop <AgentGallery /> onto an agents or integrations page. With no props it shows 20 sample agents and simulates installs. To wire it up, pass agents (name, job, category, apps with mark and scope, model, rating, installs, optional three-step preview), workspaces, and an async onInstall(agent, workspace, signal). If it rejects, the card shows "Could not connect" with Try again. The signal aborts on Cancel, Escape or unmount. Category, query and installed each work controlled or uncontrolled (category/onCategoryChange, query/onQueryChange, installed/onInstalledChange). onOpen opens an installed agent and onPreview is there for analytics.

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/agent-gallery

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { AgentGallery } from "@/components/xzero/blocks/agent-gallery/agent-gallery";

// Sample catalog with simulated installs
<AgentGallery />

// Real installs
<AgentGallery
  agents={templates}
  workspaces={[{ id: "acme", name: "Acme", detail: "Business · 48 seats" }]}
  installed={installedIds}
  onInstalledChange={setInstalledIds}
  onInstall={async (agent, workspace, signal) => {
    const res = await fetch("/api/agents/install", {
      method: "POST",
      body: JSON.stringify({ agent: agent.id, workspace: workspace.id }),
      signal,
    });
    if (!res.ok) throw new Error("The workspace admin must approve this app.");
  }}
  onOpen={agent => router.push(`/agents/${agent.id}`)}
/>

API reference

AgentGallery

A card that lists AI agent templates by team, with search, a sample run preview and an inline install flow (choose workspace, grant access per app, installed). With no props it shows 20 sample agents and simulates installs.

PropTypeDefaultDescription
agentsAgentTemplate[]defaultAgentsThe catalog. Each agent has an id, name, one line job, category, apps (name, mark, scope), model (name, mark), rating, installs and an optional three step preview.
categoriesstring[]["Sales", "Support", "Engineering", "Marketing", "Ops"]Filter chips, in order. Agents show under the chip that matches their category.
categorystring–The selected category. Pair with onCategoryChange.
defaultCategorystringcategories[0]The first selected category when uncontrolled.
onCategoryChange(category: string) => void–Called when a chip is chosen, including from the empty state's "Show in" button.
querystring–The search text. Pair with onQueryChange. Matches name, job, app names and model within the selected category.
defaultQuerystring""The first search text when uncontrolled.
onQueryChange(query: string) => void–Called on every search edit and when search is cleared.
workspacesAgentWorkspace[]defaultWorkspacesWorkspaces offered on the first install step ({ id, name, detail? }). With a single workspace that step is skipped.
installedstring[]–Ids of installed agents. Installed cards show a check and offer Open instead of Install. Pair with onInstalledChange.
defaultInstalledstring[][]Installed ids when uncontrolled.
onInstalledChange(installed: string[]) => void–Called with the new list after an install completes.
onInstall(agent, workspace, signal: AbortSignal) => Promise<void>–Runs the real install after the person grants access. Reject to show the error state with Try again. The signal aborts on Cancel, Escape or when the card leaves the list. Leave it out to simulate a 1.2s install.
onPreview(agent: AgentTemplate) => void–Called when a card opens its sample run, for analytics.
onOpen(agent: AgentTemplate) => void–Opens an installed agent, for example its settings page.
titlestring"Agent templates"Heading of the card.
descriptionstring–One line under the heading. Pass an empty string to hide it.
classNamestring–Extra class on the root section.

Keyboard interactions

KeysAction
TabMoves through search, the selected chip and each card's actions. Focus inside a card reveals Preview and Install.
Arrow keysMove between team chips, and between workspaces on the first install step.
Home / EndJump to the first or last team chip.
EscapeIn search, clears the text. Inside an install or preview, returns the card to its summary; while connecting, cancels the install.
Enter / SpaceActivates the focused chip, workspace or button.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components