{title}

{server.name}

\n \n {server.version}\n \n

\n\n

{server.description}

\n\n

{server._meta}

\n\n

\n {server.status && (\n \n {server.status}\n \n )}\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 }> = (\n { title = \"MCP Registry\", children },\n) => (\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 type?: string;\n}\n\nconst PaginationControls: FC<{ pagination: PaginationInfo }> = (\n { pagination },\n) => {\n const {\n currentPage,\n hasPrev,\n hasNext,\n nextCursor,\n prevCursor,\n limit,\n totalCount,\n search,\n version,\n type,\n } = pagination;\n\n // Build query string preserving search, version, and type 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 if (type && type !== \"all\") params.append(\"type\", type);\n return `/?${params.toString()}`;\n };\n\n return (\n

\n Page {currentPage} • {hasNext ? `${totalCount}+` : totalCount} servers\n {search && • Searching: \"{search}\"}\n {version && • Version: {version}}\n

\n\n

\n {hasPrev && (\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 const type = pagination.type || \"all\";\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 {\n /*

{servers.length}

Servers Shown

{totalCount}

Total Available

*/\n }\n\n \n\n

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

\n\n \n\n

\n Created on Val.Town.{\" \"}\n \n Remix this codebase\n \n

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

\n \n

Failed to Load MCP Servers

{error}

I should cache the API call shouldn't I? 😅

\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 // If cursor not found, assume it's the next page we haven't visited yet\n return maxPageReached + 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 const type = c.req.query(\"type\");\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 // Filter servers by type if specified\n let filteredServers = response.servers;\n if (type === \"remote\") {\n filteredServers = response.servers.filter((server) =>\n server.remotes && server.remotes.length > 0\n );\n } else if (type === \"package\") {\n filteredServers = response.servers.filter((server) =>\n server.packages && server.packages.length > 0\n );\n }\n\n // Store cursor for back navigation\n const currentPage = cursor ? getPageFromCursor(cursor) : 1;\n\n // If this is a new page we've reached, store its cursor\n if (cursor && !cursorHistory.has(currentPage)) {\n cursorHistory.set(currentPage, cursor);\n maxPageReached = Math.max(maxPageReached, currentPage);\n }\n\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.get(currentPage - 1) || null : null,\n limit: queryParams.limit,\n totalCount: response.metadata.count,\n search,\n version,\n type,\n };\n\n return c.html(\n ,\n );\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\n// Proxy routes to official MCP Registry\nconst OFFICIAL_REGISTRY = \"https://registry.modelcontextprotocol.io\";\n\n// Proxy GET /v0/servers\napp.get(\"/v0/servers\", async (c) => {\n try {\n const url = new URL(c.req.url);\n const officialUrl = new URL(\"/v0/servers\", OFFICIAL_REGISTRY);\n\n // Copy all query parameters\n for (const [key, value] of url.searchParams) {\n officialUrl.searchParams.set(key, value);\n }\n\n const response = await fetch(officialUrl.toString(), {\n headers: {\n \"Accept\": \"application/json, application/problem+json\",\n },\n });\n\n if (!response.ok) {\n return c.json(\n { error: `Registry error: ${response.status}` },\n response.status as any,\n );\n }\n\n const data = await response.json();\n return c.json(data);\n } catch (error) {\n return c.json({ error: error.message }, 500);\n }\n});\n\n// Proxy GET /v0/servers/:id\napp.get(\"/v0/servers/:id\", async (c) => {\n try {\n const id = c.req.param(\"id\");\n const url = new URL(c.req.url);\n const officialUrl = new URL(`/v0/servers/${id}`, OFFICIAL_REGISTRY);\n\n // Copy all query parameters\n for (const [key, value] of url.searchParams) {\n officialUrl.searchParams.set(key, value);\n }\n\n const response = await fetch(officialUrl.toString(), {\n headers: {\n \"Accept\": \"application/json, application/problem+json\",\n },\n });\n\n if (!response.ok) {\n return c.json(\n { error: `Registry error: ${response.status}` },\n response.status as any,\n );\n }\n\n const data = await response.json();\n return c.json(data);\n } catch (error) {\n return c.json({ error: error.message }, 500);\n }\n});\n\n// Proxy GET /v0/health\napp.get(\"/v0/health\", async (c) => {\n try {\n const response = await fetch(`${OFFICIAL_REGISTRY}/v0/health`, {\n headers: {\n \"Accept\": \"application/json, application/problem+json\",\n },\n });\n\n if (!response.ok) {\n return c.json(\n { error: `Registry error: ${response.status}` },\n response.status as any,\n );\n }\n\n const data = await response.json();\n return c.json(data);\n } catch (error) {\n return c.json({ error: error.message }, 500);\n }\n});\n\n// Proxy GET /v0/ping\napp.get(\"/v0/ping\", async (c) => {\n try {\n const response = await fetch(`${OFFICIAL_REGISTRY}/v0/ping`, {\n headers: {\n \"Accept\": \"application/json, application/problem+json\",\n },\n });\n\n if (!response.ok) {\n return c.json(\n { error: `Registry error: ${response.status}` },\n response.status as any,\n );\n }\n\n const data = await response.json();\n return c.json(data);\n } catch (error) {\n return c.json({ error: error.message }, 500);\n }\n});\n\n// Proxy POST /v0/publish\napp.post(\"/v0/publish\", async (c) => {\n try {\n const body = await c.req.json();\n\n const response = await fetch(`${OFFICIAL_REGISTRY}/v0/publish`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Accept\": \"application/json, application/problem+json\",\n // Forward authorization header if present\n ...(c.req.header(\"Authorization\") &&\n { \"Authorization\": c.req.header(\"Authorization\") }),\n },\n body: JSON.stringify(body),\n });\n\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({\n error: `Registry error: ${response.status}`,\n }));\n return c.json(errorData, response.status as any);\n }\n\n const data = await response.json();\n return c.json(data);\n } catch (error) {\n return c.json({ error: error.message }, 500);\n }\n});\n\n// Proxy GET /docs (redirect to official docs)\napp.get(\"/docs\", (c) => {\n return c.redirect(\"https://registry.modelcontextprotocol.io/docs\");\n});\n\n// Proxy GET /swagger/index.html\napp.get(\"/swagger/index.html\", (c) => {\n return c.redirect(`${OFFICIAL_REGISTRY}/swagger/index.html`);\n});\n\nexport default app.fetch;",[],[195],{"_104":204,"_95":205,"_156":206,"_158":-5,"_159":141,"_160":207,"_161":162,"_106":208,"_100":209,"_164":210,"_166":211,"_168":22,"_169":-5,"_170":212,"_98":213},"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}",[],[205],{"_104":215,"_95":99,"_156":216,"_158":-5,"_159":141,"_160":217,"_161":162,"_106":218,"_100":219,"_164":210,"_166":220,"_168":22,"_169":-5,"_170":221,"_98":222},"71917f54-8dbd-11f0-8aa2-0224a6c84d84","572dcd26-8d76-11f0-9527-0224a6c84d84",133,["D",1757450524208],1,"// 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(\n options: ListServersOptions = {},\n ): 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) {\n params.append(\"updated_since\", options.updated_since);\n }\n if (options.version) params.append(\"version\", options.version);\n\n const url = `${this.baseUrl}/v0/servers${\n params.toString() ? `?${params.toString()}` : \"\"\n }`;\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(\n `Failed to list servers: ${response.status} ${response.statusText}`,\n );\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(\n `Failed to get server ${id}: ${response.status} ${response.statusText}`,\n );\n }\n\n return await response.json();\n }\n}",[],[99],"files",[153,173,183,193,203,214],"counts",{"_227":32,"_228":219,"_229":32,"_230":32},"pulls","branches","forks","envVars","contents",[],{"_104":215,"_95":99,"_156":216,"_158":-5,"_159":141,"_160":217,"_161":162,"_106":234,"_100":219,"_164":210,"_166":220,"_168":22,"_169":-5,"_98":235},["D",1757450524208],[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":244,"_151":249,"_223":268,"_165":269,"_231":271,"_272":-5,"_273":22,"_274":-5,"_275":-5,"_276":-5,"_277":278},{"_104":105,"_95":96,"_106":245,"_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":246,"_135":247,"_138":248,"_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},[250,253,256,259,262,265],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":141,"_160":121,"_161":162,"_106":163,"_100":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_170":251,"_98":252},[],[155],{"_104":174,"_95":175,"_156":176,"_158":-5,"_159":141,"_160":177,"_161":22,"_106":178,"_100":179,"_164":165,"_166":180,"_168":22,"_169":-5,"_170":254,"_98":255},[],[175],{"_104":184,"_95":185,"_156":186,"_158":-5,"_159":141,"_160":187,"_161":162,"_106":188,"_100":189,"_164":165,"_166":190,"_168":22,"_169":-5,"_170":257,"_98":258},[],[185],{"_104":194,"_95":195,"_156":196,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":197,"_100":198,"_164":199,"_166":200,"_168":22,"_169":96,"_170":260,"_98":261},[],[195],{"_104":204,"_95":205,"_156":206,"_158":-5,"_159":141,"_160":207,"_161":162,"_106":208,"_100":209,"_164":210,"_166":211,"_168":22,"_169":-5,"_170":263,"_98":264},[],[205],{"_104":215,"_95":99,"_156":216,"_158":-5,"_159":141,"_160":217,"_161":162,"_106":218,"_100":219,"_164":210,"_166":220,"_168":22,"_169":-5,"_170":266,"_98":267},[],[99],[250,253,256,259,262,265],{"_104":215,"_95":99,"_156":216,"_158":-5,"_159":141,"_160":217,"_161":162,"_106":234,"_100":219,"_164":210,"_166":220,"_168":22,"_169":-5,"_98":270},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]