MCP servers
Managing MCP connections: a settings list with status and tools, a form for adding a server and testing it, and a small health popover from the composer.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/mcp-servers-settings.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/mcp-servers-settings.json
Usage & API
Example
import { McpServerList } from "@/components/ai/mcp-servers-settings"
<McpServerList
servers={[]}
onReconnect={() => {}}
onToolToggle={() => {}}
onEdit={() => {}}
onDisabledChange={() => {}}
onRemove={() => {}}
/>Props McpServerList
| Prop | Type & description | Required |
|---|---|---|
servers | McpServer[] | Required |
onReconnect | (id: string) => void | Required |
onToolToggle | (serverId: string, toolId: string) => void | Required |
onEdit | (id: string, target: string) => void | Required |
onDisabledChange | (id: string, disabled: boolean) => void | Required |
onRemove | (id: string) => void | Required |
defaultExpanded | string[] | Optional |
defaultLogOpen | string[] | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Settings list is a divided list of servers. Each row shows the name, an stdio or HTTP badge, a status dot and the status text. Connected rows also show the target on wider screens and a tool count, or n of n when some tools are off. Expanding lists every tool with a switch. The error log is a stack of time and message lines from the error log string. Edit opens a Command field or a URL field, with Cancel and Save, and Escape leaves edit mode. Disable fades the row and hides the tool list. The confirm state for removal replaces the row with Cancel and a red Remove button. The page around the list is titled MCP servers and says changes apply to new chats, with an Add server button that is not part of the list component itself.
Example
import { AddServerForm } from "@/components/ai/mcp-servers-add"
<AddServerForm
draft={draft}
onDraftChange={() => {}}
steps={[]}
testing={true}
tested={true}
onTest={() => {}}
onSave={() => {}}
onCancel={() => {}}
/>Props AddServerForm
| Prop | Type & description | Required |
|---|---|---|
draft | ServerDraft | Required |
onDraftChange | (draft: ServerDraft) => void | Required |
takenNames | string[]Names already in use, to catch duplicates. | Optional |
steps | TestStep[] | Required |
testing | boolean | Required |
tested | booleanTrue once a test has passed for the current draft. | Required |
onTest | () => void | Required |
onSave | () => void | Required |
onCancel | () => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Add server is a form with Name, a transport tablist, and a footer. Name is shown in chats and logs. It must be letters, numbers, hyphens or underscores, and it errors if the lowercased name is already in takenNames. Local command asks for Command and Arguments, and it rejects a command that still contains spaces, telling you to put arguments in the next field. Environment variables are key and secret value rows, with show and hide, an Add variable button, and the aside Stored encrypted. Keys must be identifier-shaped and unique. Remote URL asks for Server URL and an optional auth header. The URL must be a full http or https address, and plain http is rejected except for localhost. The footer is Cancel, Test connection, and Save. While testing, the test button reads Testing. After a pass or a failure it reads Test again. Steps render as a live list with a spinner, a check or an alert icon.
Example
import { McpStatusPopover } from "@/components/ai/mcp-servers-status"
<McpStatusPopover
servers={[]}
onEnabledChange={() => {}}
onReconnect={() => {}}
open={true}
onOpenChange={() => {}}
/>Props McpStatusPopover
| Prop | Type & description | Required |
|---|---|---|
servers | LiveServer[] | Required |
onEnabledChange | (id: string, enabled: boolean) => void | Required |
onReconnect | (id: string) => void | Required |
onManage | () => void | Optional |
open | boolean | Required |
onOpenChange | (open: boolean) => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Status popover is a composer button with a plug icon. Its label is the count of servers that are not off, plus an issue count in red when any of those are in error. A dot on the icon is red for issues and indigo while one is connecting. The dialog is titled MCP servers and has a Manage button that calls onManage and closes. Each row has a live dot, the name, and a second line: tool count and latency in milliseconds when connected, Connecting, Off for this chat, or the error text in red. Errors also get a Reconnect button that calls onReconnect. A switch turns the server on or off through onEnabledChange. Turning one on is your cue to move it through connecting and back to connected. The button does not edit tools.
Choosing a layout
Use the settings list as the MCP page, where someone checks what is connected before a chat and turns individual tools down. Pair it with the add form as the sheet opened by Add server. The form is the right place for a command, arguments, environment variables and an auth header, because those fields have their own validation and a test step the list does not. Use the status popover on the composer once servers already exist, so a failed one can be switched off for this chat or reconnected without leaving the thread. Manage on the popover is the link back to the settings list.
Do not use the popover to add a server or to edit a command. It has no fields for that. Do not use the add form as a live health view. It shows one test run for the draft, then Save or Test again. Tool permissions across every server, grouped by risk, belong on the tool picker. This trio is about the servers themselves: whether they start, which tools they exposed, and whether this chat should keep them on.
Why is Save disabled on the add form?
Save requires the tested prop to be true, and the button title says to test the connection first. Test connection itself stays disabled until the draft is valid and a test is not already running. The form does not open a socket. You perform the test, pass steps, and set tested once it passes. A failed step prints its detail and leaves Save disabled.
Can a tool be switched off while its server is in error?
The tool switches render only for a connected server that has tools and is not disabled. On an error, an expired sign-in, or a disabled server, the row offers reconnect, sign-in, or the menu instead of those switches. Disabled rows are faded, and their expand control is hidden.