Xzero UI
Pro library
BlocksMCP servers

MCP serversPro

Manage the MCP servers that give an agent its tools: see what the enabled tools cost in context, connect or pause a server, and switch single tools on or off.

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

Pass servers with onToggle and onConnect to wire your MCP client; with no props it shows sample servers with real marks.

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/mcp-servers

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 { McpServers } from "@/components/xzero/blocks/mcp-servers/mcp-servers";

export function AgentTools({ servers, directory }) {
  return (
    <McpServers
      servers={servers}
      directory={directory}
      budget={8000}
      clientName="Northwind agent"
      account={{ name: "Emma Collins", email: "emma@northwind.dev", avatar: "/media/people/emma-collins.jpg" }}
      onToggleTool={(serverId, toolId, enabled) => saveTool(serverId, toolId, enabled)}
      onPermissionChange={(serverId, permission) => savePermission(serverId, permission)}
      onConnect={async ({ kind, serverId, endpoint }) => {
        if (kind !== "url" && kind !== "retry") await openOAuthWindow(serverId);
        const response = await fetch(`/api/mcp/${serverId}/tools`, { method: "POST", body: JSON.stringify({ endpoint }) });
        if (!response.ok) throw new Error("The server closed the connection during tools/list.");
        return response.json(); // [{ id, name, access, tokens }]
      }}
      onRemove={serverId => fetch(`/api/mcp/${serverId}`, { method: "DELETE" })}
    />
  );
}

// One server
const github = {
  id: "github",
  name: "GitHub",
  brand: "github",
  transport: "remote",
  endpoint: "https://api.githubcopilot.com/mcp/",
  status: "connected",
  permission: "allow-reads",
  tools: [
    { id: "search_code", name: "search_code", access: "read", tokens: 420, enabled: true },
    { id: "create_pull_request", name: "create_pull_request", access: "write", tokens: 640, enabled: true },
    { id: "merge_pull_request", name: "merge_pull_request", access: "write", tokens: 360, enabled: false },
  ],
};

API reference

McpServers

Manages the MCP (Model Context Protocol) servers that give an agent its tools. The header shows what the enabled tool definitions cost in context ("18 tools · 6.4k tokens of context") over a bar with one segment per server and a budget that turns the overflow amber. Each server row has its real mark, a status with icon and label (Connected, Needs sign in, Error), the transport (Remote or Local), how many tools are on and their token cost. Expanding a row lists its tools with a switch, a read or write label and a per tool token cost, the default for tool calls (Ask every time or Always allow reads), the endpoint and Remove. Toggling a tool rolls the numbers and resizes its segment. Add server opens a sheet inside the card with a searchable directory and a custom URL field. Choosing a server runs the connect flow in the same sheet: a labelled, simulated authorize screen, then discovering tools as they arrive, then the new server slides into the top of the list. Servers that need sign in reconnect through the same sheet, servers in error retry in place, and Remove comes with Undo.

PropTypeDefaultDescription
serversMcpServer[]sample serversThe agent's servers: { id, name, brand?, transport: "remote" | "local", endpoint?, status: "connected" | "needs-auth" | "error", error?, permission?: "ask" | "allow-reads", scopes?, tools: McpTool[] }. Only enabled tools of connected servers count toward context. Leave unset for the simulated demo; passing a new array replaces the list.
directoryMcpDirectoryEntry[]sample directoryWhat Add server offers: { id, name, brand?, description (one line), transport, endpoint?, auth: "oauth" | "none", scopes?, tools }. OAuth entries show the authorize step first. Entries whose id is already in the list read Added.
budgetnumber8000Tokens of context you are willing to spend on tool definitions. The bar spans the budget; past it the bar rescales, the overflow turns amber and the label says how far over it is.
titlestring"MCP servers"Heading of the card.
clientNamestring"Northwind agent"Your agent's name on the authorize screen.
account{ name: string; email: string; avatar?: string }Emma CollinsThe signed in person shown on the authorize screen.
onToggleTool(serverId: string, toolId: string, enabled: boolean) => void–Called when a tool is switched on or off in a server's list.
onConnect(request: McpConnectRequest) => void | McpTool[] | Promise<void | McpTool[]>–Called when a server connects, with { kind: "directory" | "url" | "reconnect" | "retry", serverId, name, transport, endpoint? }. For OAuth servers it runs when Authorize is pressed, so open your consent window here. Resolve with the tools the server reported (enabled is optional; reads default on, writes off); resolve with nothing to use the directory's tools. A rejection shows the error with Try again, using the error's message. Without it, the whole flow is simulated.
onRemove(serverId: string) => void–Called once a removal's undo window closes (about 6 seconds, paused while the pointer or focus rests on the bar), or when another remove starts.
onPermissionChange(serverId: string, permission: "ask" | "allow-reads") => void–Called when a server's default for tool calls changes.
classNamestring–Class on the root element.

McpTool

One tool a server reports.

PropTypeDefaultDescription
idstring–Stable id, usually the tool name.
namestring–The name the model sees, for example create_issue. Shown in the mono face.
access"read" | "write"–Read tools only fetch; write tools change something. Shown as an icon and a word, and used by Always allow reads.
tokensnumber–Tokens the tool's name, description and input schema take in context. Count them with your provider's token counting endpoint.
enabledboolean–Whether the tool is loaded into the agent's context.

Keyboard interactions

KeysAction
Enter, SpaceOn a server row, opens or closes its tools. On a tool switch, turns the tool on or off.
Arrow down / Arrow upMoves between server rows. Home and End jump to the first and last row.
Arrow left / Arrow rightChanges the default for tool calls in an open row.
Command or Control + ZUndoes the last remove while the Undo bar shows.
Arrow down / Arrow up in the sheetMoves from the search field into the directory and between entries, and back up to the field.
EscapeCloses the sheet and returns focus to what opened it. Tab stays inside the sheet while it is open.

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