import fs from "node:fs"; import path from "node:path"; import { parse } from "yaml"; type Demo = { id: string; name: string; description?: string; route?: string; command?: string; tags?: string[]; }; type Manifest = { name: string; slug: string; description?: string; features?: string[]; demos: Demo[]; }; const TAG_ORDER = [ "chat-ui", "interactivity", "generative-ui", "agent-capabilities", "agent-state", "multi-agent", "headless", "platform", "other", ]; const TAG_LABELS: Record = { "chat-ui": "Chat UI", interactivity: "Interactivity", "generative-ui": "Generative UI", "agent-capabilities": "Agent Capabilities", "agent-state": "Agent State", "multi-agent": "Multi-Agent", headless: "Headless", platform: "Platform", other: "Other", }; function loadManifest(): Manifest { const manifestPath = path.join(process.cwd(), "manifest.yaml"); return parse(fs.readFileSync(manifestPath, "utf8")) as Manifest; } function groupByTag( demos: Demo[], features: string[], ): { tag: string; demos: Demo[] }[] { // Demos within each tag follow `manifest.features` ordering — that's // the team's curated "first-impression" arc (polished flagship → // simplest start → variants). Demos missing from the features list // fall to the end of their tag. const featureIndex = new Map(features.map((id, i) => [id, i])); const orderOf = (id: string) => featureIndex.get(id) ?? Number.MAX_SAFE_INTEGER; const map = new Map(); for (const demo of demos) { const tag = demo.tags?.[0] ?? "other"; if (!map.has(tag)) map.set(tag, []); map.get(tag)!.push(demo); } for (const list of map.values()) { list.sort((a, b) => orderOf(a.id) - orderOf(b.id)); } const tags = Array.from(map.keys()).sort((a, b) => { const ai = TAG_ORDER.indexOf(a); const bi = TAG_ORDER.indexOf(b); return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi); }); return tags.map((tag) => ({ tag, demos: map.get(tag)! })); } export default function Home() { const manifest = loadManifest(); const runnable = (manifest.demos ?? []).filter((d) => d.route); const groups = groupByTag(runnable, manifest.features ?? []); return (
CopilotKit Showcase

{manifest.name}

{manifest.description ?? "Browse runnable demos for this integration."}

{runnable.length} {" "} demos · {groups.length} categories · integration{" "} {manifest.slug}
{groups.map(({ tag, demos }) => (

{TAG_LABELS[tag] ?? tag.replace(/-/g, " ")} {demos.length}

))}
); }