Skip to content
Sign in
AgentsMCP server managerMenu

MCP server managerPro

Connected MCP servers with transport, sign in and connection state in words, tool lists, latency and the one action each state needs.

ProConnected, signing in, failing and turned off servers with the one action each needs.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/mcp-server-manager

Usage

tsx
import { McpServerManager } from "@/components/ui/chatcn/pro/mcp-server-manager"

<McpServerManager servers={servers} onAuthenticate={signIn} onReconnect={retry} />

A server that needs sign in shows Sign in; one that failed shows Retry and the error in words that say how to fix it. Turning off and removing live in the row menu. On narrow screens the status moves under the name.

Examples

States

ProNo servers and connecting.

Props

PropTypeNotes
serversMcpServer[]{ id, name, transport, endpoint, status, tools, latencyMs?, error? }
onAdd, onAuthenticate, onReconnect(id) => voidEach adds its action
onEnabledChange, onRemove(id, ...) => voidFill the row menu

Accessibility

  • Status changes are announced politely.
  • The row menu is named for the server: "More for Calendar".