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
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