121 Pro components and page blocks

Get Pro
uibrik

Updated

MCP Connectors

Pro

Preview

Customize

Install time2400ms
Context budget12000
Color

Installation

Pro

MCP Connectors is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/mcp-connectors

Usage

import { McpConnectors } from "@/components/uibrik/mcp-connectors/mcp-connectors";​const clients = [  { id: "claude-code", name: "Claude Code" },  { id: "claude-desktop", name: "Claude Desktop" },  // …2 more];​const autoConnect = [  { server: "github", client: "claude-code" },  { server: "linear", client: "cursor" },];​<McpConnectors  servers={[…]}  connectMs={2400}  contextBudget={12000}  showSearch  color="#5b7bd6"  clients={clients}  autoConnect={autoConnect}  onToolsChange={(server, disabled) => {}}  // McpConnector={{ id: …, name: …, tools: … }}  // connections={[{ server: …, client: …, transport: "remote" }]}  // defaultConnections={[{ server: …, client: …, transport: "remote" }]}  // onConnectionsChange={[{ server: …, client: …, transport: "remote" }]}/>

Where to use MCP Connectors

  • Agent settings

    One list to connect servers, pick their access and switch off tools the agent shouldn't have.

    Pairs with Permissions Matrix and Settings Page

  • Docs and landing pages

    Shows the exact command for each client, so readers copy one line instead of reading a setup guide.

    Pairs with Integration Orbit and MCP Inspector

  • Context budgeting

    Shows how much of the context window tool schemas eat before a single message is sent.

    Pairs with Context Meter

Props

McpConnectors
connectMs
Type number
2400
How long the install checks take in all.
contextBudget
Type number
12000
Tokens tool schemas may take. 0 hides it.
showSearch
Type boolean
true
Show the search field.
color
Type string
"#5b7bd6"
Colour of selections and the context line.
serversrequired
Type McpConnector[]
–
The servers, in order.
McpConnector
Type { id; name; logo?; logoDark?; description?; publisher?; verified?; version?; installs?; updated?; latency?; calls?; remote?: url; local?: { command; args?; env? }; auth?: "oauth" | "token" | "none"; tokenLabel?; tokenEnv?; scopes?; tools }
–
remote and local decide which Run options exist. A token is passed to a local server as tokenEnv.
clients
Type { id: "claude-code" | "claude-desktop" | "cursor" | "vscode"; name; logo?; logoDark? }[]
–
Where a server can be added, in order. Each id has its own command or config.
connections / defaultConnections / onConnectionsChange
Type { server; client; transport: "remote" | "local" }[]
–
Live connections, controlled or not.
onToolsChange
Type (server, disabled: string[]) => void
–
Called with a server's switched-off tools.
autoConnect
Type { server; client }[]
–
What play mode connects, in order.
snippet(server, client, transport, key?)
Type { label; code }
–
Exported helper that builds the command or config shown in the card.
className
Type string
–
Classes for the card.