MCP

MCPServerCard

Card for a single configured MCP server — transport, status, capabilities, inline actions.

Preview

GitHub

stdiov0.4.1

Read/write repositories, issues, pull requests, and CI checks.

connected· 38ms

Endpoint

npx -y @modelcontextprotocol/server-github

Remote API

sse

error

connect ECONNREFUSED 203.0.113.5:443

Installation

pnpm add nyxis-ui

Usage

import { MCPServerCard } from 'nyxis-ui';
// or:
// import { MCPServerCard } from 'nyxis-ui/mcp-server-card';

<MCPServerCard
  server={server}
  onConnect={(id) => client.connect(id)}
  onDisconnect={(id) => client.disconnect(id)}
  onRemove={(id) => removeServer(id)}
/>;

Anatomy

Title row with transport pill (stdio / sse / websocket / http), version, and connection status.
Capability badges advertised after the handshake.
Expandable details with the raw endpoint string.
Inline actions: connect, disconnect, remove. Disabled while connecting.
Error variant: destructive border + inline failure message.

Props

Prop	Type	Default
`server`	`MCPServer`	—	Configured server to render.
`defaultOpen`	`boolean`	`false`	Show details (endpoint) by default.
`hideActions`	`boolean`	`false`	Hide connect/disconnect/remove row.
`onConnect` / `onDisconnect` / `onRemove`	`(id) => void`	—	Lifecycle callbacks.