62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T12441,'use client' import * as React from 'react' import { Activity, Boxes, Braces, Check, CheckCircle2, Code2, Copy, FileCode, Link2, MoreHorizontal, Plus, Radio, RefreshCw, Search, Server, ShieldCheck, Terminal, Trash2, Wrench, X, Zap, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Input } from '@/components/ui/input' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { McpToolInspectorDrawer } from './McpToolInspectorDrawer' export type TransportType = 'stdio' | 'sse' export type ServerStatus = 'healthy' | 'reconnecting' | 'degraded' export interface ToolParam { name: string type: 'string' | 'number' | 'boolean' | 'object' | 'array' required: boolean description: string default?: string enum?: string[] } export interface ToolSchema { name: string displayName: string description: string category: 'documentation' | 'database' | 'version-control' | 'deployment' | 'web-search' | 'observability' parameters: ToolParam[] sampleRpcRequest: { jsonrpc: '2.0' id: string method: 'tools/call' params: { name: string arguments: Record } } sampleRpcResponse: { jsonrpc: '2.0' id: string result: { content: Array<{ type: 'text' | 'resource' | 'image' text?: string resource?: any }> isError: boolean } } } export interface ResourceTemplate { uriTemplate: string name: string description: string mimeType: string } export interface McpServer { id: string name: string scope: string version: string transport: TransportType commandOrUrl: string status: ServerStatus uptime: string latencyMs: number callsToday: number description: string envVars: string[] resourceTemplates: ResourceTemplate[] tools: ToolSchema[] } export interface McpServerRegistryManagerProps { className?: string initialSearch?: string initialTransportFilter?: 'all' | 'stdio' | 'sse' initialStatusFilter?: 'all' | 'healthy' | 'reconnecting' initialSelectedToolName?: string initialDrawerOpen?: boolean initialInstallDialogOpen?: boolean initialHandshakeAlert?: boolean initialServers?: McpServer[] } const defaultServers: McpServer[] = [ { id: 'server-ctx-1', name: 'mcp/context7-docs', scope: '@context7/mcp-server', version: 'v1.4.2', transport: 'stdio', commandOrUrl: 'npx -y @context7/mcp-server', status: 'healthy', uptime: '99.98%', latencyMs: 18, callsToday: 4120, description: 'Context-aware documentation retriever and code snippet indexer for public libraries and frameworks.', envVars: ['CONTEXT7_API_KEY=c7_live_***', 'CACHE_TTL=3600'], resourceTemplates: [ { uriTemplate: 'docs://{library}/{version}', name: 'Library Documentation AST', description: 'Direct access to indexed AST documentation, type exports, and code snippets', mimeType: 'application/json', }, { uriTemplate: 'cheatsheets://{framework}/api-reference', name: 'Framework Cheatsheet', description: 'High-density API method cheat sheets and migration summaries', mimeType: 'text/markdown', }, ], tools: [ { name: 'query_docs', displayName: 'Query Library Docs', description: 'Retrieves up-to-date documentation and code examples from Context7 for any programming library or framework.', category: 'documentation', parameters: [ { name: 'libraryId', type: 'string', required: true, description: 'Exact Context7-compatible library ID (e.g. /tailwindlabs/tailwindcss or /unovue/reka-ui).', }, { name: 'query', type: 'string', required: true, description: 'What to look up in the library documentation, scoped to a single concept.', }, { name: 'limit', type: 'number', required: false, default: '5', description: 'Maximum number of relevant code snippets to return (1-20).', }, { name: 'includeSnippets', type: 'boolean', required: false, default: 'true', description: 'Whether to include verified code snippet examples in markdown format.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-ctx-001', method: 'tools/call', params: { name: 'query_docs', arguments: { libraryId: '/tailwindlabs/tailwindcss', query: 'CSS variables and OKLCH color palettes v4', limit: 3, includeSnippets: true, }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-ctx-001', result: { content: [ { type: 'text', text: 'Tailwind CSS v4 introduces native CSS-first theme configuration using `@theme` and OKLCH color functions without javascript config files.', }, ], isError: false, }, }, }, { name: 'resolve_library_id', displayName: 'Resolve Library ID', description: 'Resolves a package or product name to a Context7-compatible library ID and returns matching ranked libraries.', category: 'documentation', parameters: [ { name: 'libraryName', type: 'string', required: true, description: 'Library name to search for (e.g. Next.js, Reka UI, Lucide).', }, { name: 'ecosystem', type: 'string', required: false, default: 'npm', enum: ['npm', 'pypi', 'crates', 'go', 'gem'], description: 'Package registry ecosystem to prioritize during identifier resolution.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-ctx-002', method: 'tools/call', params: { name: 'resolve_library_id', arguments: { libraryName: 'reka-ui', ecosystem: 'npm', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-ctx-002', result: { content: [ { type: 'text', text: '{"libraryId":"/unovue/reka-ui","name":"Reka UI","description":"Headless UI primitives for Vue 3.5","reputation":"High","benchmarkScore":99}', }, ], isError: false, }, }, }, ], }, { id: 'server-pg-2', name: 'mcp/postgres-inspector', scope: '@modelcontextprotocol/server-postgres', version: 'v0.9.1', transport: 'stdio', commandOrUrl: 'npx -y @modelcontextprotocol/server-postgres postgresql://app_user:***@db.internal:5432/prod_main', status: 'healthy', uptime: '99.95%', latencyMs: 24, callsToday: 3450, description: 'Direct PostgreSQL read-only query execution, EXPLAIN execution plan inspector, and live schema reflection.', envVars: ['PGSSLMODE=require', 'MAX_CONNECTIONS=10'], resourceTemplates: [ { uriTemplate: 'postgres://{schema}/{table}', name: 'Table Schema Definition', description: 'PostgreSQL table column constraints, foreign keys, row count estimations, and B-Tree indexes', mimeType: 'application/json', }, { uriTemplate: 'postgres://metrics/slow-queries', name: 'PgStatStatements Log Buffer', description: 'Aggregated query execution statistics and cache hit ratios', mimeType: 'application/json', }, ], tools: [ { name: 'execute_sql', displayName: 'Execute Read-Only SQL', description: 'Executes read-only SQL queries against Postgres connection with safe execution timeout safeguards.', category: 'database', parameters: [ { name: 'query', type: 'string', required: true, description: 'SQL statement (SELECT only) to execute on the cluster.', }, { name: 'readOnly', type: 'boolean', required: false, default: 'true', description: 'Enforces transaction read-only flag before executing SQL.', }, { name: 'timeoutMs', type: 'number', required: false, default: '5000', description: 'Statement cancellation timeout in milliseconds.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-pg-001', method: 'tools/call', params: { name: 'execute_sql', arguments: { query: 'SELECT id, email, role, created_at FROM public.users WHERE is_active = true LIMIT 5;', readOnly: true, timeoutMs: 5000, }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-pg-001', result: { content: [ { type: 'text', text: '{"rows":[{"id":"usr_8492","email":"alex@example.com","role":"admin","created_at":"2026-02-14T08:30:00Z"}],"rowCount":1,"durationMs":14.2}', }, ], isError: false, }, }, }, { name: 'explain_query', displayName: 'Explain Query Plan', description: 'Runs EXPLAIN ANALYZE on query plans to detect slow sequential scans and missing indexes.', category: 'database', parameters: [ { name: 'query', type: 'string', required: true, description: 'SQL query to analyze execution graph and node timings.', }, { name: 'analyze', type: 'boolean', required: false, default: 'true', description: 'Execute statement to measure actual wall-clock row counts and buffer usage.', }, { name: 'format', type: 'string', required: false, default: 'json', enum: ['json', 'text', 'yaml'], description: 'Postgres execution plan output serialization format.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-pg-002', method: 'tools/call', params: { name: 'explain_query', arguments: { query: 'SELECT * FROM orders WHERE user_id = $1 ORDER BY created_at DESC;', analyze: true, format: 'json', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-pg-002', result: { content: [ { type: 'text', text: '{"Plan":{"Node Type":"Index Scan","Index Name":"idx_orders_user_id","Startup Cost":0.42,"Total Cost":8.44,"Plan Rows":1,"Actual Rows":1,"Actual Total Time":0.114}}', }, ], isError: false, }, }, }, { name: 'inspect_schema', displayName: 'Inspect Schema Meta', description: 'Returns table column definitions, constraints, foreign keys, and indexes for a database schema.', category: 'database', parameters: [ { name: 'schema', type: 'string', required: false, default: 'public', description: 'Target namespace schema name (e.g. public, auth, billing).', }, { name: 'includeForeignKeys', type: 'boolean', required: false, default: 'true', description: 'Include relation cardinality graphs and ON DELETE cascade actions.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-pg-003', method: 'tools/call', params: { name: 'inspect_schema', arguments: { schema: 'public', includeForeignKeys: true, }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-pg-003', result: { content: [ { type: 'text', text: '{"schema":"public","tablesCount":18,"tables":["users","teams","orders","invoices","audit_logs"]}', }, ], isError: false, }, }, }, ], }, { id: 'server-gh-3', name: 'mcp/github-tools', scope: '@modelcontextprotocol/server-github', version: 'v2.1.0', transport: 'stdio', commandOrUrl: 'npx -y @modelcontextprotocol/server-github', status: 'healthy', uptime: '99.91%', latencyMs: 92, callsToday: 2890, description: 'GitHub REST & GraphQL API bindings for pull request management, diff inspection, and GitHub Actions CI triggers.', envVars: ['GITHUB_PERSONAL_ACCESS_TOKEN=ghp_live_***'], resourceTemplates: [ { uriTemplate: 'github://repos/{owner}/{repo}/pulls/{number}', name: 'Pull Request Snapshot', description: 'Structured pull request metadata, commits, CI checks, and review discussions', mimeType: 'application/json', }, { uriTemplate: 'github://repos/{owner}/{repo}/actions/{runId}', name: 'CI Workflow Run Logs', description: 'GitHub Actions build step outputs and failure diagnostics', mimeType: 'text/plain', }, ], tools: [ { name: 'create_pr', displayName: 'Create Pull Request', description: 'Creates a GitHub pull request with title, description, branch target, and reviewer tags.', category: 'version-control', parameters: [ { name: 'owner', type: 'string', required: true, description: 'GitHub account or organization name.' }, { name: 'repo', type: 'string', required: true, description: 'Repository name.' }, { name: 'title', type: 'string', required: true, description: 'Pull request header title.' }, { name: 'head', type: 'string', required: true, description: 'Source branch containing commits.' }, { name: 'base', type: 'string', required: true, description: 'Target branch (e.g. main).' }, { name: 'draft', type: 'boolean', required: false, default: 'false', description: 'Create in draft mode.' }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-gh-001', method: 'tools/call', params: { name: 'create_pr', arguments: { owner: 'uday-a', repo: 'uipkge', title: 'feat(mcp): add mcp-server-registry-manager block', head: 'feat/mcp-manager', base: 'main', draft: false, }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-gh-001', result: { content: [ { type: 'text', text: '{"number":142,"url":"https://github.com/uday-a/uipkge-registry/pull/142","status":"open","mergeable":true}', }, ], isError: false, }, }, }, { name: 'review_diff', displayName: 'Review Diff', description: 'Fetches and analyzes pull request unified diffs against target base branch.', category: 'version-control', parameters: [ { name: 'owner', type: 'string', required: true, description: 'Repository owner.' }, { name: 'repo', type: 'string', required: true, description: 'Repository name.' }, { name: 'pullNumber', type: 'number', required: true, description: 'GitHub pull request number.' }, { name: 'contextLines', type: 'number', required: false, default: '3', description: 'Number of surrounding context lines to include.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-gh-002', method: 'tools/call', params: { name: 'review_diff', arguments: { owner: 'uday-a', repo: 'uipkge', pullNumber: 142, contextLines: 3, }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-gh-002', result: { content: [ { type: 'text', text: 'diff --git a/components/blocks/McpServerRegistryManager.tsx b/components/blocks/McpServerRegistryManager.tsx\n+export function McpServerRegistryManager() { return

}', }, ], isError: false, }, }, }, { name: 'merge_pr', displayName: 'Merge Pull Request', description: 'Performs squash-merge or merge commit with branch auto-deletion.', category: 'version-control', parameters: [ { name: 'owner', type: 'string', required: true, description: 'Repository owner.' }, { name: 'repo', type: 'string', required: true, description: 'Repository name.' }, { name: 'pullNumber', type: 'number', required: true, description: 'Pull request number.' }, { name: 'mergeMethod', type: 'string', required: false, default: 'squash', enum: ['squash', 'merge', 'rebase'], description: 'Git merge strategy to apply.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-gh-003', method: 'tools/call', params: { name: 'merge_pr', arguments: { owner: 'uday-a', repo: 'uipkge', pullNumber: 142, mergeMethod: 'squash', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-gh-003', result: { content: [ { type: 'text', text: '{"sha":"8a7c2b3d...","merged":true,"message":"Pull Request successfully merged and closed"}', }, ], isError: false, }, }, }, { name: 'get_workflow_runs', displayName: 'Get Workflow Runs', description: 'Lists GitHub Actions CI workflow run statuses and failure logs.', category: 'version-control', parameters: [ { name: 'owner', type: 'string', required: true, description: 'Repository owner.' }, { name: 'repo', type: 'string', required: true, description: 'Repository name.' }, { name: 'status', type: 'string', required: false, default: 'completed', enum: ['completed', 'in_progress', 'queued', 'failure'], description: 'Filter CI runs by lifecycle status.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-gh-004', method: 'tools/call', params: { name: 'get_workflow_runs', arguments: { owner: 'uday-a', repo: 'uipkge', status: 'completed', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-gh-004', result: { content: [ { type: 'text', text: '{"total_count":24,"workflow_runs":[{"id":9812401,"name":"CI Registry Build","conclusion":"success"}]}', }, ], isError: false, }, }, }, ], }, { id: 'server-cf-4', name: 'mcp/cloudflare-deployer', scope: '@cloudflare/mcp-pages-worker', version: 'v3.0.4', transport: 'sse', commandOrUrl: 'https://mcp-gateway.cloudflare.com/sse/v1/uipkge-prod', status: 'healthy', uptime: '100.0%', latencyMs: 48, callsToday: 1180, description: 'Edge runtime deployment automation, real-time Cloudflare Worker telemetry log tailing, and CDN cache invalidation.', envVars: ['CLOUDFLARE_API_TOKEN=cft_live_***', 'CLOUDFLARE_ACCOUNT_ID=8bb9e07a...'], resourceTemplates: [ { uriTemplate: 'cloudflare://zones/{zoneId}/pages', name: 'Pages Deployment Manifest', description: 'Active production and preview deployment bundles with rollback pointers', mimeType: 'application/json', }, { uriTemplate: 'cloudflare://workers/{scriptName}/tail', name: 'Live Worker Telemetry Stream', description: 'Real-time structured event logs, CPU execution times, and exceptions', mimeType: 'application/x-ndjson', }, ], tools: [ { name: 'deploy_pages', displayName: 'Deploy Cloudflare Pages', description: 'Triggers atomic Cloudflare Pages deployment bundle upload with verification.', category: 'deployment', parameters: [ { name: 'projectName', type: 'string', required: true, description: 'Cloudflare Pages project name (uipkge).', }, { name: 'branch', type: 'string', required: true, description: 'Git branch trigger (e.g. main).' }, { name: 'commitHash', type: 'string', required: true, description: 'Target 40-char Git commit hash.' }, { name: 'environment', type: 'string', required: false, default: 'production', enum: ['production', 'preview'], description: 'Deployment target stage.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-cf-001', method: 'tools/call', params: { name: 'deploy_pages', arguments: { projectName: 'uipkge', branch: 'main', commitHash: '7c8b91a24d0e932b12f4567890abcdef12345678', environment: 'production', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-cf-001', result: { content: [ { type: 'text', text: '{"deploymentId":"dep_9801a","url":"https://uipkge.dev","status":"active","buildDurationSec":14}', }, ], isError: false, }, }, }, { name: 'purge_cache', displayName: 'Purge CDN Cache', description: 'Purges Cloudflare CDN cache zones by URL pattern or Cache-Tag headers.', category: 'deployment', parameters: [ { name: 'zoneId', type: 'string', required: true, description: 'Cloudflare Zone identifier.' }, { name: 'purgeEverything', type: 'boolean', required: false, default: 'false', description: 'Purge entire CDN edge cache.', }, { name: 'tags', type: 'array', required: false, description: 'Array of Cache-Tag headers to invalidate.' }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-cf-002', method: 'tools/call', params: { name: 'purge_cache', arguments: { zoneId: 'zn_uipkge_core_912', purgeEverything: false, tags: ['registry-json', 'llms-txt'], }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-cf-002', result: { content: [ { type: 'text', text: '{"success":true,"purgedTags":["registry-json","llms-txt"],"timestamp":"2026-08-21T10:45:00Z"}', }, ], isError: false, }, }, }, { name: 'tail_worker_logs', displayName: 'Tail Worker Logs', description: 'Subscribes to real-time Cloudflare Worker telemetry logs and exception traces.', category: 'deployment', parameters: [ { name: 'scriptName', type: 'string', required: true, description: 'Worker script identifier.' }, { name: 'samplingRate', type: 'number', required: false, default: '1.0', description: 'Trace event sampling ratio (0.1 to 1.0).', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-cf-003', method: 'tools/call', params: { name: 'tail_worker_logs', arguments: { scriptName: 'uipkge-registry-proxy', samplingRate: 1.0, }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-cf-003', result: { content: [ { type: 'text', text: '{"sessionId":"tail_sess_904","status":"streaming","eventsProcessed":480}', }, ], isError: false, }, }, }, ], }, { id: 'server-bv-5', name: 'mcp/brave-search', scope: '@modelcontextprotocol/server-brave-search', version: 'v1.1.2', transport: 'sse', commandOrUrl: 'https://mcp-stream.brave.internal/sse?channel=research', status: 'reconnecting', uptime: '98.40%', latencyMs: 165, callsToday: 840, description: 'Privacy-preserving web search, index lookup, and clean markdown extraction from live URLs.', envVars: ['BRAVE_API_KEY=bsa_live_***', 'RATE_LIMIT_RPS=20'], resourceTemplates: [ { uriTemplate: 'search://web/{query}', name: 'Real-Time Web Search Cache', description: 'Cached organic search result nodes with domain trust rankings', mimeType: 'application/json', }, { uriTemplate: 'webpage://cached/{urlHash}', name: 'Normalized Page Mirror', description: 'Clean reader-mode markdown representation of fetched webpage', mimeType: 'text/markdown', }, ], tools: [ { name: 'brave_search', displayName: 'Brave Web Search', description: 'Queries Brave Search API for web results, snippets, publishing dates, and ranking scores.', category: 'web-search', parameters: [ { name: 'query', type: 'string', required: true, description: 'Search term or technical keyword.' }, { name: 'count', type: 'number', required: false, default: '10', description: 'Number of organic results (1-20).', }, { name: 'freshness', type: 'string', required: false, enum: ['pd', 'pw', 'pm', 'py'], description: 'Filter by time horizon: past day, week, month, or year.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-bv-001', method: 'tools/call', params: { name: 'brave_search', arguments: { query: 'Reka UI Vue 3.5 release notes', count: 5, freshness: 'pm', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-bv-001', result: { content: [ { type: 'text', text: '{"results":[{"title":"Reka UI v1.4 Documentation","url":"https://reka-ui.com","snippet":"Radix-vue is now Reka UI with Vue 3.5 TypeScript improvements."}]}', }, ], isError: false, }, }, }, { name: 'fetch_web_content', displayName: 'Fetch Web Content', description: 'Fetches full clean markdown representations from verified web URLs.', category: 'web-search', parameters: [ { name: 'url', type: 'string', required: true, description: 'Fully qualified HTTP/HTTPS URL to crawl.' }, { name: 'format', type: 'string', required: false, default: 'markdown', enum: ['markdown', 'text', 'html'], description: 'Target format of extracted webpage body content.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-bv-002', method: 'tools/call', params: { name: 'fetch_web_content', arguments: { url: 'https://modelcontextprotocol.io/introduction', format: 'markdown', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-bv-002', result: { content: [ { type: 'text', text: '# Model Context Protocol\n\nMCP is an open standard that enables developers to build secure, two-way connections between their data sources and AI-powered tools.', }, ], isError: false, }, }, }, ], }, { id: 'server-sn-6', name: 'mcp/sentry-telemetry', scope: '@sentry/mcp-telemetry', version: 'v1.8.0', transport: 'stdio', commandOrUrl: 'npx -y @sentry/mcp-telemetry --org=uipkge', status: 'healthy', uptime: '99.99%', latencyMs: 35, callsToday: 820, description: 'Production crash monitoring, unhandled exceptions triage, and stacktrace source-mapping for AI agents.', envVars: ['SENTRY_AUTH_TOKEN=sntrys_live_***', 'SENTRY_ORG=uipkge'], resourceTemplates: [ { uriTemplate: 'sentry://projects/{project}/issues/{issueId}', name: 'Sentry Issue Context', description: 'Resolved source maps, breadcrumbs trail, device context, and user impact rate', mimeType: 'application/json', }, { uriTemplate: 'sentry://projects/{project}/stats/24h', name: 'Hourly Error Volume', description: 'Aggregated error frequency histograms across release versions', mimeType: 'application/json', }, ], tools: [ { name: 'query_sentry_issues', displayName: 'Query Sentry Issues', description: 'Lists unhandled exceptions and regression issues by release tag and frequency.', category: 'observability', parameters: [ { name: 'project', type: 'string', required: true, description: 'Sentry project slug.' }, { name: 'query', type: 'string', required: false, description: 'Sentry search query (e.g. is:unresolved).' }, { name: 'statsPeriod', type: 'string', required: false, default: '24h', enum: ['24h', '14d', '30d'], description: 'Time window for issue occurrence statistics.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-sn-001', method: 'tools/call', params: { name: 'query_sentry_issues', arguments: { project: 'uipkge-astro-site', query: 'is:unresolved level:error', statsPeriod: '24h', }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-sn-001', result: { content: [ { type: 'text', text: '{"issues":[{"id":"iss_991","title":"TypeError: Cannot read properties of undefined (reading \'dataset\')","count":3,"lastSeen":"2026-08-21T09:12:00Z"}]}', }, ], isError: false, }, }, }, { name: 'get_issue_stacktrace', displayName: 'Get De-minified Stacktrace', description: 'Retrieves de-minified source code stacktrace and breadcrumb chain for an error ID.', category: 'observability', parameters: [ { name: 'issueId', type: 'string', required: true, description: 'Unique Sentry issue identifier.' }, { name: 'expandContext', type: 'boolean', required: false, default: 'true', description: 'Include 5 lines of source code surrounding the crashing line.', }, ], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-sn-002', method: 'tools/call', params: { name: 'get_issue_stacktrace', arguments: { issueId: 'iss_991', expandContext: true, }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-sn-002', result: { content: [ { type: 'text', text: '{"filename":"src/components/story/Story.tsx","lineno":42,"colno":14,"function":"handleCopy","contextLine":"navigator.clipboard.writeText(props.code)"}', }, ], isError: false, }, }, }, ], }, ] export function McpServerRegistryManager({ className, initialSearch = '', initialTransportFilter = 'all', initialStatusFilter = 'all', initialSelectedToolName, initialDrawerOpen = false, initialInstallDialogOpen = false, initialHandshakeAlert = false, initialServers, }: McpServerRegistryManagerProps) { const [servers, setServers] = React.useState(() => initialServers ? [...initialServers] : [...defaultServers], ) const [searchQuery, setSearchQuery] = React.useState(initialSearch) const [transportFilter, setTransportFilter] = React.useState<'all' | 'stdio' | 'sse'>(initialTransportFilter) const [statusFilter, setStatusFilter] = React.useState<'all' | 'healthy' | 'reconnecting'>(initialStatusFilter) const [isDrawerOpen, setIsDrawerOpen] = React.useState(initialDrawerOpen) const [isInstallDialogOpen, setIsInstallDialogOpen] = React.useState(initialInstallDialogOpen) const [handshakeAlertVisible, setHandshakeAlertVisible] = React.useState(initialHandshakeAlert) const [isHandshaking, setIsHandshaking] = React.useState(false) const [copiedKey, setCopiedKey] = React.useState(null) const [inspectorTab, setInspectorTab] = React.useState<'request' | 'response' | 'schema'>('request') const [activeViewTab, setActiveViewTab] = React.useState<'servers' | 'handshake-logs' | 'config-json'>('servers') // Selected tool & server for the schema drawer const [selectedServer, setSelectedServer] = React.useState(() => { if (initialSelectedToolName) { for (const s of defaultServers) { if (s.tools.some((t) => t.name === initialSelectedToolName)) return s } } return defaultServers[0] }) const [selectedTool, setSelectedTool] = React.useState(() => { if (initialSelectedToolName) { for (const s of defaultServers) { const found = s.tools.find((t) => t.name === initialSelectedToolName) if (found) return found } } return defaultServers[0].tools[0] }) // New server form inputs const [newServerName, setNewServerName] = React.useState('') const [newServerScope, setNewServerScope] = React.useState('') const [newTransport, setNewTransport] = React.useState('stdio') const [newCommandOrUrl, setNewCommandOrUrl] = React.useState('') const [newDescription, setNewDescription] = React.useState('') // Dry run simulation const [isDryRunning, setIsDryRunning] = React.useState(false) const [dryRunOutput, setDryRunOutput] = React.useState(null) // Filtering Logic const filteredServers = React.useMemo(() => { const q = searchQuery.trim().toLowerCase() return servers.filter((s) => { const matchTransport = transportFilter === 'all' || s.transport === transportFilter const matchStatus = statusFilter === 'all' || s.status === statusFilter if (!matchTransport || !matchStatus) return false if (!q) return true const inName = s.name.toLowerCase().includes(q) const inScope = s.scope.toLowerCase().includes(q) const inDesc = s.description.toLowerCase().includes(q) const inCmd = s.commandOrUrl.toLowerCase().includes(q) const inTools = s.tools.some((t) => t.name.toLowerCase().includes(q) || t.displayName.toLowerCase().includes(q)) const inUris = s.resourceTemplates.some((r) => r.uriTemplate.toLowerCase().includes(q)) return inName || inScope || inDesc || inCmd || inTools || inUris }) }, [servers, searchQuery, transportFilter, statusFilter]) // Counts const totalConnectedServers = React.useMemo(() => servers.filter((s) => s.status === 'healthy').length, [servers]) const totalRegisteredTools = React.useMemo(() => servers.reduce((acc, s) => acc + s.tools.length, 0), [servers]) const openToolInspector = React.useCallback((server: McpServer, tool: ToolSchema) => { setSelectedServer(server) setSelectedTool(tool) setDryRunOutput(null) setIsDrawerOpen(true) }, []) const openServerInspector = React.useCallback((server: McpServer) => { if (server.tools.length > 0) { setSelectedServer(server) setSelectedTool(server.tools[0]) setDryRunOutput(null) setIsDrawerOpen(true) } }, []) const copyToClipboard = React.useCallback((text: string, key: string) => { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(text) setCopiedKey(key) setTimeout(() => { setCopiedKey((prev) => (prev === key ? null : prev)) }, 2000) } }, []) const runHandshakeTest = React.useCallback(() => { setIsHandshaking(true) setHandshakeAlertVisible(false) setTimeout(() => { setIsHandshaking(false) setHandshakeAlertVisible(true) }, 650) }, []) const handleAddServer = React.useCallback(() => { if (!newServerName.trim() || !newCommandOrUrl.trim()) return const newServer: McpServer = { id: `server-${Date.now()}`, name: newServerName.trim(), scope: newServerScope.trim() || `@custom/${newServerName.replace(/^mcp\//, '')}`, version: 'v1.0.0', transport: newTransport, commandOrUrl: newCommandOrUrl.trim(), status: 'healthy', uptime: '100.0%', latencyMs: newTransport === 'stdio' ? 22 : 64, callsToday: 0, description: newDescription.trim() || 'Custom registered Model Context Protocol runtime server.', envVars: ['MCP_ENABLED=true'], resourceTemplates: [ { uriTemplate: `custom://${newServerName.replace(/^mcp\//, '')}/{resourceId}`, name: 'Custom Parameterized Resource', description: 'Dynamic schema endpoint for custom tool payloads', mimeType: 'application/json', }, ], tools: [ { name: `${newServerName.replace(/^mcp\//, '').replace(/[^a-zA-Z0-9_]/g, '_')}_action`, displayName: 'Execute Custom Action', description: 'Default action handler registered for this server.', category: 'deployment', parameters: [{ name: 'payload', type: 'string', required: true, description: 'Action parameter payload.' }], sampleRpcRequest: { jsonrpc: '2.0', id: 'req-custom-001', method: 'tools/call', params: { name: `${newServerName.replace(/^mcp\//, '').replace(/[^a-zA-Z0-9_]/g, '_')}_action`, arguments: { payload: 'execute' }, }, }, sampleRpcResponse: { jsonrpc: '2.0', id: 'req-custom-001', result: { content: [{ type: 'text', text: '{"status":"success","executedAt":"2026-08-21T12:00:00Z"}' }], isError: false, }, }, }, ], } setServers((prev) => [newServer, ...prev]) setNewServerName('') setNewServerScope('') setNewCommandOrUrl('') setNewDescription('') setIsInstallDialogOpen(false) }, [newServerName, newServerScope, newTransport, newCommandOrUrl, newDescription]) const removeServer = React.useCallback((serverId: string) => { setServers((prev) => prev.filter((s) => s.id !== serverId)) }, []) const restartServer = React.useCallback((server: McpServer) => { setServers((prev) => prev.map((s) => s.id === server.id ? { ...s, status: 'healthy', latencyMs: Math.floor(Math.random() * 20) + 15 } : s, ), ) }, []) const runDryRunTest = React.useCallback(() => { if (!selectedTool) return setIsDryRunning(true) setTimeout(() => { setIsDryRunning(false) setDryRunOutput(JSON.stringify(selectedTool.sampleRpcResponse.result, null, 2)) }, 450) }, [selectedTool]) const activeMcpConfigJson = React.useMemo(() => { const config: { mcpServers: Record } = { mcpServers: {} } for (const s of servers) { const key = s.name.replace(/^mcp\//, '') if (s.transport === 'stdio') { const parts = s.commandOrUrl.split(' ') config.mcpServers[key] = { command: parts[0], args: parts.slice(1), env: s.envVars.reduce((acc: Record, ev) => { const [k, v] = ev.split('=') if (k && v) acc[k] = v return acc }, {}), } } else { config.mcpServers[key] = { transport: 'sse', url: s.commandOrUrl, } } } return JSON.stringify(config, null, 2) }, [servers]) return (

{/* Top System Header */}

Model Context Protocol (MCP) Server Manager

MCP Spec 2024-11-05 · JSON-RPC 2.0 • {totalConnectedServers} Connected · {totalRegisteredTools} Tools Active • Anthropic Runtime & Agent Registry

{/* Action CTA Buttons */}

{/* Handshake Diagnostic Alert Banner */} {handshakeAlertVisible && (

Handshake Verified · All 6 MCP Servers Responded (Avg 42ms)

34 tool schemas, 18 resource templates, and prompt interfaces validated against MCP Specification 2024-11-05.

)} {/* 4 MCP System KPI Cards */}

{/* KPI 1: Connected MCP Servers */} Connected Servers

{servers.length} Active Servers

{totalConnectedServers} healthy • 1 reconnecting

{/* KPI 2: Registered Tools */} Registered Tools

34 Tool Functions

100% Schema Validated

{/* KPI 3: Resource Templates */} Resource Templates

18 Parameterized URIs

Dynamic URI Subscriptions

{/* KPI 4: Tool Invocation Volume */} Invocation Volume

12,480 calls today

99.8% success · 142ms avg

{/* Main Content Navigation & Filter Bar */}

{/* View Tabs */} setActiveViewTab(val as any)} className="w-full md:w-auto" > Servers & Tools ({servers.length}) Handshake Logs Raw JSON Config {/* Search Bar and Transport Filters */}

setSearchQuery(e.target.value)} placeholder="Search servers, tools, URIs..." className="bg-background h-8.5 pl-8 text-xs" />

{/* Transport Filter Buttons */}

{/* Tab View 1: Servers & Tools List */} {activeViewTab === 'servers' && (

{/* Empty State */} {filteredServers.length === 0 && (

No MCP Servers Found

No servers match your current search query or filter criteria. Clear filters or add a new MCP server connection.

)} {/* Servers Cards */} {filteredServers.map((server) => (

{/* Server Header Line */}

{server.transport === 'stdio' ? ( ) : ( )}

{{ ...server }.name} {server.version} {server.transport === 'stdio' ? ( ) : ( )} {server.transport === 'stdio' ? 'stdio' : 'SSE stream'}

{server.scope} · {server.description}

{/* Status and Dropdown Actions */}

{server.status === 'healthy' ? ( Connected & Healthy ) : ( Reconnecting ({server.latencyMs}ms) )} Server Actions openServerInspector(server)}> Inspect Tool Schema restartServer(server)}> Restart Process copyToClipboard(server.commandOrUrl, `cmd-${server.id}`)}> {copiedKey === `cmd-${server.id}` ? 'Copied Command!' : 'Copy Command'} removeServer(server.id)} > Disconnect Server

{/* Command or Endpoint snippet */}

$ {server.commandOrUrl}

{/* Resource Templates List */} {server.resourceTemplates.length > 0 && (

Resource URI Templates:

{server.resourceTemplates.map((res) => (

{res.uriTemplate} ({res.name})

))}

)} {/* Registered Tool Badges & Inspector Triggers */}

Tools ({server.tools.length}): {server.tools.map((tool) => ( ))}

{/* Inspect Action Button */}

{server.callsToday.toLocaleString()} calls · {server.latencyMs}ms ping

))}

)} {/* Tab View 2: Handshake & Telemetry Logs */} {activeViewTab === 'handshake-logs' && (

MCP Handshake & Protocol Event Stream Real-time JSON-RPC 2.0 handshake pings and capability negotiation logs.

Server / Scope Transport Handshake Status Latency Tools Validated Last Ping {servers.map((s) => ( {s.name} {s.transport} {s.status === 'healthy' ? 'SYN_ACK 200 OK' : 'RETRY_BACKOFF'} {s.latencyMs}ms {s.tools.length} schemas Just now ))}

)} {/* Tab View 3: Raw JSON Configuration */} {activeViewTab === 'config-json' && (

Claude Desktop & Cursor MCP Config Exportable JSON format compatible with{' '} claude_desktop_config.json.

                  {activeMcpConfigJson}

)}

{/* Tool Schema Inspection Drawer (Sheet) */} {/* Install New MCP Server Dialog */}

) } export default McpServerRegistryManager 65:T2781,'use client' import { Check, Code2, Copy, Play, RefreshCw } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Separator } from '@/components/ui/separator' import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from '@/components/ui/sheet' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import type { McpServer, ToolSchema } from './McpServerRegistryManager' function getToolSchemaDraft7(tool: ToolSchema) { const properties: Record = {} const required: string[] = [] for (const p of tool.parameters) { properties[p.name] = { type: p.type, description: p.description, } if (p.default !== undefined) properties[p.name].default = p.default if (p.enum) properties[p.name].enum = p.enum if (p.required) required.push(p.name) } return { $schema: 'http://json-schema.org/draft-07/schema#', type: 'object', properties, required, additionalProperties: false, } } export interface McpToolInspectorDrawerProps { open: boolean onOpenChange: (open: boolean) => void server: McpServer tool: ToolSchema inspectorTab: 'request' | 'response' | 'schema' onInspectorTabChange: (tab: 'request' | 'response' | 'schema') => void copiedKey: string | null onCopy: (text: string, key: string) => void isDryRunning: boolean dryRunOutput: string | null onRunDryRun: () => void } export function McpToolInspectorDrawer({ open, onOpenChange, server, tool, inspectorTab, onInspectorTabChange, copiedKey, onCopy, isDryRunning, dryRunOutput, onRunDryRun, }: McpToolInspectorDrawerProps) { return (

{server?.name} {server?.transport} {tool?.category}

{tool?.name} {tool?.description} {/* Parameters Specification Table */}

Parameter Schema ({tool?.parameters.length})

JSON-RPC 2.0 Method

Parameter Type Required Description {tool?.parameters.map((param) => ( {param.name} {param.type} {param.required ? 'Required' : 'Optional'}

{param.description}

{param.default && (

default: {param.default}

)} {param.enum && (

enum: [{param.enum.join(', ')}]

)} ))}

{/* Tabbed JSON-RPC Schema & Payloads */}

onInspectorTabChange(val as any)} className="w-full">

Sample Request Sample Response Draft-07 Schema

{/* Tab 1: Request */}

                {JSON.stringify(tool?.sampleRpcRequest, null, 2)}

{/* Tab 2: Response */}

                {JSON.stringify(tool?.sampleRpcResponse, null, 2)}

{/* Tab 3: Draft-07 Schema */}

                {JSON.stringify(getToolSchemaDraft7(tool), null, 2)}

{/* Dry Run Simulator */}

Simulate Tool Invocation

{dryRunOutput && (

✓ Invocation 200 OK (32ms):

                {dryRunOutput}

)}

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/dialog.json","https://uipkge.dev/r/react/dropdown-menu.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/separator.json","https://uipkge.dev/r/react/sheet.json","https://uipkge.dev/r/react/table.json","https://uipkge.dev/r/react/tabs.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/mcp-server-registry-manager/McpServerRegistryManager.tsx","content":"$64","type":"registry:page","target":"~/components/blocks/McpServerRegistryManager.tsx"},{"path":"packages/registry-react/blocks/mcp-server-registry-manager/McpToolInspectorDrawer.tsx","content":"$65","type":"registry:page","target":"~/components/blocks/McpToolInspectorDrawer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]