MCP UI Kit · 7 components
Every part of an MCP client, already built.
From the moment a server connects to the moment a tool finishes running — the screens, buttons, and dialogs your users see are all here, ready to drop in.
The flow
Every step in the MCP lifecycle has a component.
Connect — Show users which servers are online.
McpServerStatus reflects live WebSocket state. McpResourceBrowser lists available tools and resources.
Authenticate — Present OAuth scopes for approval.
McpConsentDialog renders the consent flow. McpScopeInspector explains each permission in plain English.
Execute — Run tool calls with live state.
McpToolForm derives inputs from JSON Schema. McpToolCall animates idle → running → done/error with built-in retry.
Render — Embed MCP Apps safely.
McpAppFrame renders MCP Apps (SEP-1865): sandboxed iframe, spec CSP, the ui/initialize handshake, and tool-call proxying over JSON-RPC.
The set
All 7 MCP components
McpToolCallTool execution card: idle → running → done/error with retry.
McpToolFormJSON Schema → dynamic form with validation.
McpConsentDialogOAuth consent UI: scope list, approve/deny.
McpScopeInspectorExpandable scope tree with human-readable descriptions.
McpResourceBrowserBrowse MCP resources with type icons and preview.
McpServerStatusConnection badge: connected/disconnected/error/reconnecting.
McpAppFrameMCP Apps (SEP-1865) host renderer: sandboxed iframe + JSON-RPC bridge.
Quick start
Three components, one full MCP flow.
import {
McpServerStatus,
McpToolCall,
McpConsentDialog,
} from '@mcp-elements/react'
import { createToolState } from '@mcp-elements/core'
// 1. Show connection state
<McpServerStatus status="connected" serverName="github-mcp" />
// 2. Show OAuth consent
<McpConsentDialog
open={showConsent}
serverName="GitHub MCP"
scopes={['repo:read', 'user.email:read']}
onApprove={handleApprove}
onDeny={handleDeny}
/>
// 3. Execute a tool
const toolState = createToolState()
toolState.start({ tool: 'search_repos', args: { query: 'mcp-elements' } })
<McpToolCall state={toolState} onRetry={() => toolState.reset()} />