# MCP Connectors

Connect MCP servers to the app you work in, in three steps: review what a server brings and what it costs in context, configure where and how it runs, then install with the exact command and a live check list. Connected servers show their health, and single tools can be switched off.

- Page and source: https://uibrik.com/components/mcp-connectors
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/mcp-connectors`
- Packages: none beyond React
- Import: `import { McpConnectors } from "@/components/uibrik/mcp-connectors/mcp-connectors"`

Where to use the MCP Connectors React component:

- **Agent settings**: One list to connect servers, pick their access and switch off tools the agent shouldn't have. Pairs with [Permissions Matrix](https://uibrik.com/components/permissions-matrix) and [Settings Page](https://uibrik.com/components/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](https://uibrik.com/components/integration-orbit) and [MCP Inspector](https://uibrik.com/components/mcp-inspector).
- **Context budgeting**: Shows how much of the context window tool schemas eat before a single message is sent. Pairs with [Context Meter](https://uibrik.com/components/context-meter).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| connectMs | `number` | `2400` | How long the install checks take in all. |
| contextBudget | `number` | `12000` | Tokens tool schemas may take. 0 hides it. |
| showSearch | `boolean` | `true` | Show the search field. |
| color | `string` | `"#5b7bd6"` | Colour of selections and the context line. |
| servers | `McpConnector[]` |  | The servers, in order. |
| McpConnector | `{ 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 | `{ 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 | `{ server; client; transport: "remote" \| "local" }[]` |  | Live connections, controlled or not. |
| onToolsChange | `(server, disabled: string[]) => void` |  | Called with a server's switched-off tools. |
| autoConnect | `{ server; client }[]` |  | What play mode connects, in order. |
| snippet(server, client, transport, key?) | `{ label; code }` |  | Exported helper that builds the command or config shown in the card. |
| className | `string` |  | Classes for the card. |