MCPNEW

McpServerStatus

Connection badge: connected/disconnected/error/reconnecting.

Available inreact

Preview

Live previewreal component

github-mcp · Connectedlinear-mcp · ConnectingDisconnectedjira-mcp · Error

Install

TerminalBash

$ npx @mcp-elements/cli add mcp-server-status

Usage

mcp-server-status-example.tsxTSX

import { McpServerStatus } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex gap-3 flex-wrap">
      <McpServerStatus status="connected" serverName="github-mcp" />
      <McpServerStatus status="connecting" />
      <McpServerStatus status="disconnected" />
      <McpServerStatus status="error" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`status *`	`'connected' \| 'connecting' \| 'disconnected' \| 'error'`	—	Connection state to display
`serverName`	`string`	—	Optional server name shown before the status label