feat: add registry API routes and static build for MCP tool

Add Next.js API routes at /api/registry/ for dynamic component queries
(server mode). Add build-registry-api.mts script that generates static
JSON files at /api/registry/ for CF Pages / static hosting.

Endpoints:
- /api/registry — component list
- /api/registry/components/{name} — component with source
- /api/registry/search?q= — search
- /api/registry/index — full manifest (single payload)

Static files built during `pnpm build` step.

Author: hanzo-dev

app/app/api/registry/components/[name]/route.ts

@@ -0,0 +1,30 @@
+/**
+ * GET /api/registry/components/:name — Get component with full source.
+ *
+ * Returns the component JSON including embedded source code.
+ */
+
+import { NextRequest, NextResponse } from "next/server"
+import { getComponent } from "../../lib"
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ name: string }> }
+) {
+  const { name } = await params
+  const component = getComponent(name)
+
+  if (!component) {
+    return NextResponse.json(
+      { error: "Component not found", name },
+      { status: 404 }
+    )
+  }
+
+  return NextResponse.json(component, {
+    headers: {
+      "Cache-Control": "public, s-maxage=900, stale-while-revalidate=1800",
+      "Access-Control-Allow-Origin": "*",
+    },
+  })
+}

app/app/api/registry/index/route.ts

@@ -0,0 +1,20 @@
+/**
+ * GET /api/registry/index — Full registry manifest.
+ *
+ * Returns ALL components with source in a single payload.
+ * MCP clients can hydrate their cache with one HTTP call.
+ */
+
+import { NextResponse } from "next/server"
+import { getFullManifest } from "../lib"
+
+export async function GET() {
+  const manifest = getFullManifest()
+
+  return NextResponse.json(manifest, {
+    headers: {
+      "Cache-Control": "public, s-maxage=900, stale-while-revalidate=1800",
+      "Access-Control-Allow-Origin": "*",
+    },
+  })
+}

app/app/api/registry/lib.ts

@@ -0,0 +1,117 @@
+/**
+ * Shared registry data loader for API routes.
+ *
+ * Reads from the built registry JSON files in public/registry/.
+ * These are generated at build time by scripts/build-registry.mts.
+ */
+
+import { readFileSync, readdirSync, existsSync } from "fs"
+import path from "path"
+
+const REGISTRY_DIR = path.join(process.cwd(), "public/registry")
+const STYLES_DIR = path.join(REGISTRY_DIR, "styles/default")
+
+export interface RegistryItem {
+  name: string
+  type: string
+  dependencies?: string[]
+  devDependencies?: string[]
+  registryDependencies?: string[]
+  files: Array<{ name: string; content: string } | string>
+  description?: string
+  category?: string
+}
+
+// In-memory cache (populated on first access, lives for the server lifetime)
+let _index: RegistryItem[] | null = null
+let _components: Map<string, RegistryItem> | null = null
+
+function loadIndex(): RegistryItem[] {
+  if (_index) return _index
+  const indexPath = path.join(REGISTRY_DIR, "index.json")
+  if (!existsSync(indexPath)) return []
+  _index = JSON.parse(readFileSync(indexPath, "utf-8")) as RegistryItem[]
+  return _index
+}
+
+function loadComponents(): Map<string, RegistryItem> {
+  if (_components) return _components
+  _components = new Map()
+
+  if (!existsSync(STYLES_DIR)) return _components
+
+  const files = readdirSync(STYLES_DIR).filter((f) => f.endsWith(".json"))
+  for (const file of files) {
+    try {
+      const data = JSON.parse(
+        readFileSync(path.join(STYLES_DIR, file), "utf-8")
+      ) as RegistryItem
+      _components.set(data.name, data)
+    } catch {
+      // skip malformed files
+    }
+  }
+  return _components
+}
+
+/** Get the full component index (names, types, deps — no source). */
+export function getIndex(): RegistryItem[] {
+  return loadIndex()
+}
+
+/** Get all components with full source code. */
+export function getComponentMap(): Map<string, RegistryItem> {
+  return loadComponents()
+}
+
+/** Get a single component by name (with source). */
+export function getComponent(name: string): RegistryItem | undefined {
+  const map = loadComponents()
+  // Try exact match first
+  let item = map.get(name)
+  if (item) return item
+
+  // Try with -demo suffix stripped
+  item = map.get(`${name}-demo`)
+  return item
+}
+
+/** Search components by name/type. */
+export function searchComponents(query: string): RegistryItem[] {
+  const q = query.toLowerCase()
+  const index = loadIndex()
+  return index.filter(
+    (item) =>
+      item.name.toLowerCase().includes(q) ||
+      item.type?.toLowerCase().includes(q) ||
+      item.description?.toLowerCase().includes(q) ||
+      item.category?.toLowerCase().includes(q)
+  )
+}
+
+/** List components filtered by type. */
+export function listByType(type?: string): RegistryItem[] {
+  const index = loadIndex()
+  if (!type) return index
+  return index.filter((item) => item.type === type || item.type?.includes(type))
+}
+
+/** Get full registry manifest (all components with source — single payload). */
+export function getFullManifest() {
+  const map = loadComponents()
+  const components: Record<string, any> = {}
+  for (const [name, item] of map) {
+    components[name] = item
+  }
+  return {
+    generated_at: Date.now(),
+    total: map.size,
+    components,
+  }
+}
+
+/** Invalidate the in-memory cache (call after registry:build). */
+export function invalidateCache() {
+  _index = null
+  _components = null
+}

app/app/api/registry/route.ts

@@ -0,0 +1,32 @@
+/**
+ * GET /api/registry — List all components (index).
+ *
+ * Query params:
+ *   ?type=components:ui  — filter by type
+ */
+
+import { NextRequest, NextResponse } from "next/server"
+import { listByType } from "./lib"
+
+export async function GET(req: NextRequest) {
+  const type = req.nextUrl.searchParams.get("type") ?? undefined
+  const items = listByType(type)
+
+  return NextResponse.json(
+    {
+      total: items.length,
+      components: items.map((item) => ({
+        name: item.name,
+        type: item.type,
+        dependencies: item.dependencies,
+        registryDependencies: item.registryDependencies,
+      })),
+    },
+    {
+      headers: {
+        "Cache-Control": "public, s-maxage=900, stale-while-revalidate=1800",
+        "Access-Control-Allow-Origin": "*",
+      },
+    }
+  )
+}

app/app/api/registry/search/route.ts

@@ -0,0 +1,37 @@
+/**
+ * GET /api/registry/search?q=button — Search components.
+ */
+
+import { NextRequest, NextResponse } from "next/server"
+import { searchComponents } from "../lib"
+
+export async function GET(req: NextRequest) {
+  const query = req.nextUrl.searchParams.get("q")
+
+  if (!query) {
+    return NextResponse.json(
+      { error: "Query parameter 'q' is required" },
+      { status: 400 }
+    )
+  }
+
+  const results = searchComponents(query)
+
+  return NextResponse.json(
+    {
+      query,
+      total: results.length,
+      results: results.map((item) => ({
+        name: item.name,
+        type: item.type,
+        dependencies: item.dependencies,
+      })),
+    },
+    {
+      headers: {
+        "Cache-Control": "public, s-maxage=300, stale-while-revalidate=600",
+        "Access-Control-Allow-Origin": "*",
+      },
+    }
+  )
+}

app/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "next dev --port 3333",
-    "build": "pnpm registry:build && (pnpm registry:capture || echo 'Skipping screenshots in CI') && next build",
+    "build": "pnpm registry:build && pnpm registry:api && (pnpm registry:capture || echo 'Skipping screenshots in CI') && next build",
     "start": "next start --port 3001",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
@@ -17,6 +17,7 @@
     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
     "registry:build": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts",
+    "registry:api": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry-api.mts",
     "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-registry.mts",
     "validate:registries": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/validate-registries.mts",
     "postinstall": "docs-mdx source.config.ts .source"

app/scripts/build-registry-api.mts

@@ -0,0 +1,119 @@
+/**
+ * Build static API responses from the registry data.
+ *
+ * Generates /public/api/registry/ files that work on CF Pages,
+ * GitHub Pages, or any static hosting. Run after build-registry.mts.
+ *
+ * Output:
+ *   public/api/registry/index.json         — full manifest (all components + source)
+ *   public/api/registry/components.json     — component list (no source)
+ *   public/api/registry/components/{name}.json — individual component with source
+ *   public/api/registry/search-index.json   — lightweight search index
+ */
+
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "fs"
+import path from "path"
+
+const REGISTRY_DIR = path.join(process.cwd(), "public/registry")
+const STYLES_DIR = path.join(REGISTRY_DIR, "styles/default")
+const API_DIR = path.join(process.cwd(), "public/api/registry")
+const COMPONENTS_DIR = path.join(API_DIR, "components")
+
+interface RegistryItem {
+  name: string
+  type: string
+  dependencies?: string[]
+  devDependencies?: string[]
+  registryDependencies?: string[]
+  files: Array<{ name: string; content: string } | string>
+  description?: string
+  category?: string
+}
+
+function main() {
+  console.log("Building static registry API files...")
+
+  // Read the index
+  const indexPath = path.join(REGISTRY_DIR, "index.json")
+  if (!existsSync(indexPath)) {
+    console.error("Registry index.json not found. Run registry:build first.")
+    process.exit(1)
+  }
+
+  const index: RegistryItem[] = JSON.parse(readFileSync(indexPath, "utf-8"))
+
+  // Read all component files
+  const components = new Map<string, RegistryItem>()
+  if (existsSync(STYLES_DIR)) {
+    const files = readdirSync(STYLES_DIR).filter((f) => f.endsWith(".json"))
+    for (const file of files) {
+      try {
+        const data: RegistryItem = JSON.parse(
+          readFileSync(path.join(STYLES_DIR, file), "utf-8")
+        )
+        components.set(data.name, data)
+      } catch {
+        // skip
+      }
+    }
+  }
+
+  // Create output directories
+  mkdirSync(COMPONENTS_DIR, { recursive: true })
+
+  // 1. Component list (no source — lightweight)
+  const componentList = index.map((item) => ({
+    name: item.name,
+    type: item.type,
+    dependencies: item.dependencies,
+    registryDependencies: item.registryDependencies,
+  }))
+
+  writeFileSync(
+    path.join(API_DIR, "components.json"),
+    JSON.stringify({ total: componentList.length, components: componentList })
+  )
+  console.log(`  components.json: ${componentList.length} components`)
+
+  // 2. Individual component files (with source)
+  let written = 0
+  for (const [name, data] of components) {
+    writeFileSync(
+      path.join(COMPONENTS_DIR, `${name}.json`),
+      JSON.stringify(data)
+    )
+    written++
+  }
+  console.log(`  components/*.json: ${written} files`)
+
+  // 3. Full manifest (single payload with all source)
+  const manifest: Record<string, any> = {}
+  for (const [name, data] of components) {
+    manifest[name] = data
+  }
+  writeFileSync(
+    path.join(API_DIR, "index.json"),
+    JSON.stringify({
+      generated_at: Date.now(),
+      total: components.size,
+      components: manifest,
+    })
+  )
+  console.log(`  index.json: full manifest`)
+
+  // 4. Search index (lightweight — names + types for client-side search)
+  const searchIndex = index.map((item) => ({
+    n: item.name,
+    t: item.type,
+    d: (item.dependencies || []).join(","),
+  }))
+  writeFileSync(
+    path.join(API_DIR, "search-index.json"),
+    JSON.stringify(searchIndex)
+  )
+  console.log(`  search-index.json: ${searchIndex.length} entries`)
+
+  console.log("Done! Static API files written to public/api/registry/")
+}
+
+main()