{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 \n The MCP Registry API is down\n
\n I am really sorry about the downtime and will improve caching when the\n official MCP Registry's API resumes. Check back in later.\n \n

\n I imagine the registry API was either spammed or couldn't scale fast\n enough. Not sure and I cannot speak on behalf of MCP. Please pray for\n those working to bring it back up.\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// \"Disclaimer: The official registry provides no uptime or data durability guarantees. You should design your applications to handle service downtime via caching.\" - MCP team\napp.get(\n \"*\",\n cache({\n cacheName: \"mcp-registry-cache\",\n cacheControl: \"public, max-age=900\", // cache for 15 minutes\n // This is required for the Deno environment (src: https://hono.dev/docs/middleware/builtin/cache#wait-boolean)\n wait: true,\n cacheableStatusCodes: [200],\n }),\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;","deleted","label",[98],"permalink","https://www.val.town/x/cameronpak/mcp-registry/code/main.tsx","extension","actionData","errors"]