{title}

{server.name}

\n {server.version}\n

\n\n

{server.description}

\n\n

{server._meta}

\n\n

\n {server.status && {server.status}}\n {packageCount > 0 && (\n \n \n {packageCount} packages\n \n )}\n {remoteCount > 0 && (\n \n \n {remoteCount} remotes\n \n )}\n

\n\n

\n {repoUrl && (\n \n \n Repository\n \n )}\n {serverId && (\n \n \n Details\n \n )}\n

\n \n );\n};\n\nconst Layout: FC<{ title?: string; children: any }> = ({ title = \"MCP Registry\", children }) => (\n \n \n \n \n {title}\n\n {/* Web Awesome CDN */}\n \n \n\n\n \n \n \n {children}\n \n \n \n);\n\ninterface PaginationInfo {\n currentPage: number;\n hasNext: boolean;\n hasPrev: boolean;\n nextCursor?: string;\n prevCursor?: string;\n limit: number;\n totalCount: number;\n search?: string;\n version?: string;\n}\n\nconst PaginationControls: FC<{ pagination: PaginationInfo }> = ({ pagination }) => {\n const { currentPage, hasPrev, hasNext, nextCursor, prevCursor, limit, totalCount, search, version } = pagination;\n\n // Build query string preserving search and version filters\n const buildQueryString = (cursor?: string) => {\n const params = new URLSearchParams();\n if (cursor) params.append(\"cursor\", cursor);\n params.append(\"limit\", limit.toString());\n if (search) params.append(\"search\", search);\n if (version) params.append(\"version\", version);\n return `/?${params.toString()}`;\n };\n\n return (\n

\n Page {currentPage} • {totalCount} total servers\n {search && • Searching: \"{search}\"}\n {version && • Version: {version}}\n

\n\n

\n {hasPrev && prevCursor && (\n \n \n Previous\n \n )}\n\n {hasNext && nextCursor && (\n \n Next\n \n \n )}\n

\n );\n};\n\nconst SearchForm: FC<{ pagination: PaginationInfo }> = ({ pagination }) => {\n const { search, version, limit } = pagination;\n\n return (\n \n );\n};\n\nconst HomePage: FC<{\n servers: Server[];\n totalCount: number;\n pagination: PaginationInfo;\n}> = ({ servers, totalCount, pagination }) => (\n \n

\n \n\n \n\n {/*

{servers.length}

Servers Shown

{totalCount}

Total Available

*/}\n\n \n\n

\n {servers.map((server) => (\n \n ))}\n

\n\n \n

\n \n);\n\nconst ErrorPage: FC<{ error: string }> = ({ error }) => (\n \n

\n \n

Failed to Load MCP Servers

{error}

\n Try Again\n \n

\n \n);\n\n// Store cursor history for pagination (simple in-memory solution for POC)\nconst cursorHistory: Map = new Map();\nlet maxPageReached = 1;\n\nfunction getPageFromCursor(cursor: string | null): number {\n if (!cursor) return 1;\n // Find the page number for this cursor\n for (const [page, storedCursor] of cursorHistory.entries()) {\n if (storedCursor === cursor) {\n return page;\n }\n }\n return 1;\n}\n\n// Main route with full API support\napp.get(\"/\", async (c) => {\n try {\n const cursor = c.req.query(\"cursor\");\n const limit = parseInt(c.req.query(\"limit\") || \"30\"); // API default is 30\n const search = c.req.query(\"search\");\n const updatedSince = c.req.query(\"updated_since\");\n const version = c.req.query(\"version\");\n\n // Build query parameters according to API spec\n const queryParams: any = {\n limit: Math.min(Math.max(limit, 1), 100) // API requires: ≥1 ≤100\n };\n\n if (cursor) queryParams.cursor = cursor;\n if (search) queryParams.search = search;\n if (updatedSince) queryParams.updated_since = updatedSince;\n if (version) queryParams.version = version;\n\n // Fetch servers from the MCP Registry\n const response = await client.listServers(queryParams);\n\n if (!response.servers) {\n throw new Error(\"No servers found in response\");\n }\n\n // Store cursor for back navigation (only if we have a cursor)\n if (cursor && !cursorHistory.includes(cursor)) {\n cursorHistory.push(cursor);\n }\n\n const currentPage = getPageFromCursor(cursor);\n const hasNext = !!response.metadata.next_cursor;\n const hasPrev = currentPage > 1;\n\n const pagination = {\n currentPage,\n hasNext,\n hasPrev,\n nextCursor: response.metadata.next_cursor,\n prevCursor: hasPrev ? cursorHistory[currentPage - 2] : null,\n limit: queryParams.limit,\n totalCount: response.metadata.count,\n search,\n version\n };\n\n return c.html();\n } catch (error) {\n console.error(\"Error fetching servers:\", error);\n return c.html(, 500);\n }\n});\n\n// API route for server details (JSON)\napp.get(\"/api/servers/:id\", async (c) => {\n try {\n const serverId = c.req.param(\"id\");\n const server = await client.getServer(serverId);\n return c.json(server);\n } catch (error) {\n return c.json({ error: error.message }, 500);\n }\n});\n\n// Health check\napp.get(\"/health\", (c) => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;\n",[],[193],{"_104":202,"_95":203,"_155":204,"_157":-5,"_158":141,"_159":205,"_160":161,"_106":206,"_100":207,"_163":208,"_165":209,"_167":22,"_168":-5,"_169":210,"_98":211},"5ebf2d3c-8d80-11f0-8570-0224a6c84d84","mcp-logo.tsx","e5d6432e-8d7f-11f0-9358-0224a6c84d84",78,["D",1757424293328],3,"script","/** @jsxImportSource npm:hono/jsx */\n\nexport function MCPLogo({ ...props }) {\n return (\n \n )\n}",[],[203],{"_104":213,"_95":214,"_155":215,"_157":-5,"_158":141,"_159":216,"_160":22,"_106":217,"_100":32,"_163":208,"_165":218,"_167":22,"_168":-5,"_169":219,"_98":220},"572dcc72-8d76-11f0-9527-0224a6c84d84","mcp-registry-client.ts","572dcd26-8d76-11f0-9527-0224a6c84d84",4,["D",1757419985590],"// MCP Registry SDK - Simple class-based client for the official MCP Registry API\n\n// TypeScript interfaces based on the MCP Registry API documentation\n\nexport interface ServerMeta {\n id: string;\n is_latest: boolean;\n published_at: string;\n updated_at: string;\n}\n\nexport interface PublisherMeta {\n [key: string]: any;\n}\n\nexport interface Meta {\n \"io.modelcontextprotocol.registry/official\": ServerMeta;\n \"io.modelcontextprotocol.registry/publisher-provided\": PublisherMeta;\n}\n\nexport interface Argument {\n choices?: string[];\n default?: string;\n description?: string;\n format?: string;\n is_required?: boolean;\n is_secret?: boolean;\n is_repeated?: boolean;\n name?: string;\n type?: string;\n value?: string;\n value_hint?: string;\n variables?: Record;\n}\n\nexport interface Transport {\n type: string;\n url: string;\n headers?: Argument[];\n}\n\nexport interface Package {\n environment_variables?: Argument[];\n file_sha256?: string;\n identifier?: string;\n package_arguments?: Argument[];\n registry_base_url?: string;\n registry_type?: string;\n runtime_arguments?: Argument[];\n runtime_hint?: string;\n transport?: Transport;\n version?: string;\n}\n\nexport interface Remote {\n type: string;\n url: string;\n headers?: Argument[];\n}\n\nexport interface Repository {\n id: string;\n source: string;\n subfolder?: string;\n url: string;\n}\n\nexport interface Server {\n $schema?: string;\n _meta?: Meta;\n description: string;\n name: string;\n packages?: Package[] | null;\n remotes?: Remote[] | null;\n repository?: Repository;\n status?: string;\n version: string;\n}\n\nexport interface ServerListMetadata {\n count: number;\n next_cursor?: string;\n}\n\nexport interface ServerListResponse {\n metadata: ServerListMetadata;\n servers: Server[] | null;\n}\n\nexport interface ListServersOptions {\n cursor?: string;\n limit?: number;\n search?: string;\n updated_since?: string;\n version?: string;\n}\n\n/**\n * Simple client for the official MCP Registry API\n */\nexport class MCPRegistryClient {\n private baseUrl: string;\n\n constructor(baseUrl: string = \"https://registry.modelcontextprotocol.io\") {\n this.baseUrl = baseUrl;\n }\n\n /**\n * List MCP servers with optional filtering and pagination\n */\n async listServers(options: ListServersOptions = {}): Promise {\n const params = new URLSearchParams();\n\n if (options.cursor) params.append(\"cursor\", options.cursor);\n if (options.limit) params.append(\"limit\", options.limit.toString());\n if (options.search) params.append(\"search\", options.search);\n if (options.updated_since) params.append(\"updated_since\", options.updated_since);\n if (options.version) params.append(\"version\", options.version);\n\n const url = `${this.baseUrl}/v0/servers${params.toString() ? `?${params.toString()}` : \"\"}`;\n\n const response = await fetch(url, {\n headers: {\n \"Accept\": \"application/json, application/problem+json\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to list servers: ${response.status} ${response.statusText}`);\n }\n\n return await response.json();\n }\n\n /**\n * Get detailed information about a specific MCP server\n */\n async getServer(id: string): Promise {\n const url = `${this.baseUrl}/v0/servers/${id}`;\n\n const response = await fetch(url, {\n headers: {\n \"Accept\": \"application/json, application/problem+json\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to get server ${id}: ${response.status} ${response.statusText}`);\n }\n\n return await response.json();\n }\n}",[],[214],"files",[153,172,181,191,201,212],"counts",{"_225":32,"_226":227,"_228":32,"_229":32},"pulls","branches",1,"forks","envVars","contents",[],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":121,"_160":161,"_106":233,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":234},["D",1757419985585],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":243,"_151":248,"_221":267,"_164":268,"_230":270,"_271":-5,"_272":22,"_273":-5,"_274":-5,"_275":-5,"_276":277},{"_104":105,"_95":96,"_106":244,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":115,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":245,"_135":246,"_138":247,"_150":22},["D",1757419727595],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":140,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[249,252,255,258,261,264],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":121,"_160":161,"_106":162,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_169":250,"_98":251},[],[99],{"_104":173,"_95":174,"_155":175,"_157":-5,"_158":141,"_159":176,"_160":22,"_106":177,"_100":121,"_163":164,"_165":178,"_167":22,"_168":-5,"_169":253,"_98":254},[],[174],{"_104":182,"_95":183,"_155":184,"_157":-5,"_158":141,"_159":185,"_160":161,"_106":186,"_100":187,"_163":164,"_165":188,"_167":22,"_168":-5,"_169":256,"_98":257},[],[183],{"_104":192,"_95":193,"_155":194,"_157":-5,"_158":141,"_159":101,"_160":22,"_106":195,"_100":196,"_163":197,"_165":198,"_167":22,"_168":96,"_169":259,"_98":260},[],[193],{"_104":202,"_95":203,"_155":204,"_157":-5,"_158":141,"_159":205,"_160":161,"_106":206,"_100":207,"_163":208,"_165":209,"_167":22,"_168":-5,"_169":262,"_98":263},[],[203],{"_104":213,"_95":214,"_155":215,"_157":-5,"_158":141,"_159":216,"_160":22,"_106":217,"_100":32,"_163":208,"_165":218,"_167":22,"_168":-5,"_169":265,"_98":266},[],[214],[249,252,255,258,261,264],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":121,"_160":161,"_106":233,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":269},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]