Playground

Tap a component. See it run.

Every example below is a real @mcp-elements/react component running in this page — no screenshots, no mockups.

Server Status

Show live MCP server connection state

live
github-mcp · Connectedlinear-mcp · ConnectingDisconnectedjira-mcp · Error
mcp-server-status.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>
  )
}

Ready to build?

Install the package and start dropping components in.

npm install @mcp-elements/react @mcp-elements/core