MCP

MCPServerList

Multi-server view with search, "Add server" affordance, and connect/disconnect handlers.

Preview

MCP servers

2/4 connected

GitHub

stdiov0.4.1

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

connected· 38ms

Filesystem

stdiov0.6.2

Read-only access to the project workspace.

connected· 12ms

Postgres

websocket

Read-only access to the analytics replica.

disconnected

Remote API

sse

error

connect ECONNREFUSED 203.0.113.5:443

Installation

pnpm add nyxis-ui

Usage

import { MCPServerList } from 'nyxis-ui';

<MCPServerList
  servers={servers}
  onAdd={addServer}
  onConnect={(id) => client.connect(id)}
  onDisconnect={(id) => client.disconnect(id)}
  onRemove={(id) => removeServer(id)}
/>;

Anatomy

Header: title + connected/total counter + optional “Add server” button.
Search input filters by name, description, and transport.
Each server is rendered through <MCPServerCard> — same actions, same callbacks.
Empty state (no servers): dashed-border placeholder with custom message support.

Use this as the primary surface inside a settings page or a side rail dedicated to MCP configuration.