Skip to content

Tools & Approvals

MCP Servers

Connected MCP servers with status, auth prompts and reconnect — expand one to switch individual tools on or off.

2 variantsMIT

Preview

MCP servers

2 of 4 connected
  • All tools
    • create_pull_requestOpen a PR from a branch
    • list_issuesSearch issues and filters
    • merge_pull_requestMerge with a chosen strategy
    • get_file_contentsRead a file at a ref

  • ECONNREFUSED 127.0.0.1:5432 — is the database running?

linear: Needs auth. postgres-analytics: Error

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/mcp-servers.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { McpServers } from "@/components/ui/mcp-servers";

export function Connectors({ servers }: { servers: McpServer[] }) {
  return (
    <McpServers
      data={servers}
      onToggleTool={(serverId, tool, enabled) =>
        mcp.setToolEnabled(serverId, tool, enabled)
      }
      onToggleServer={(serverId, enabled) => mcp.setAllTools(serverId, enabled)}
      onAuthorize={(server) => mcp.startOAuth(server.id)} // opens the provider's consent page
      onReconnect={(server) => mcp.restart(server.id)}
    />
  );
}

Props

PropTypeDefaultDescription
data*McpServer[]—Servers in display order, each with its status and tools.
view"servers" | "tools""servers"Expandable servers with their tools, or one searchable list of every tool grouped by server.
onToggleTool(serverId: string, tool: string, enabled: boolean) => void—Called when a tool's switch flips. Tools are disabled unless the server is connected.
onToggleServer(serverId: string, enabled: boolean) => void—Called by the All tools switch inside an expanded server.
onAuthorize(server: McpServer) => void—Called by the Authorize button on servers that need auth.
onReconnect(server: McpServer) => void—Called by the Reconnect button on servers in the error state.
defaultExpandedstring—Id of the server that starts expanded.
classNamestring—Extra classes for the root element.
type McpServer = {
  id: string;
  name: string;
  transport: "stdio" | "http";
  status: "connected" | "connecting" | "needs-auth" | "error";
  error?: string; // shown on error rows
  tools: { name: string; description?: string; enabled: boolean }[];
};