"use client"; import { useState } from "react"; import Link from "next/link"; import { Cpu, Database, Layers, Sparkles, Search, Globe, Terminal, Server, ArrowRight, CheckCircle2, FileCode2, ShieldCheck, } from "lucide-react"; interface NodeDetail { id: string; title: string; badge: string; type: "client" | "protocol" | "core" | "storage"; icon: any; desc: string; metrics: { label: string; value: string }[]; features: string[]; docLink?: string; } const NODES: NodeDetail[] = [ { id: "ai-agents", title: "AI Coding Agents", badge: "MCP Consumer", type: "client", icon: Sparkles, desc: "Claude Desktop, Cursor, Antigravity, and Zed connect via Model Context Protocol to read and write technical knowledge directly.", metrics: [ { label: "Transport", value: "Stdio / HTTP SSE" }, { label: "Tools Exposed", value: "13 Native Tools" }, { label: "Authentication", value: "x-webhook-secret" }, ], features: [ "Semantic similarity search over chunks", "Direct document CRUD into Postgres", "Context retrieval for debugging & CTF writeups", ], docLink: "/docs", }, { id: "web-ui", title: "Human Web Interface", badge: "Next.js 16 + React 19", type: "client", icon: Globe, desc: "Fast, accessible, and responsive developer web interface with dark/light themes, keyboard shortcuts, and instant search.", metrics: [ { label: "Framework", value: "Next.js 16.3" }, { label: "Styling", value: "Tailwind CSS v4" }, { label: "Command Menu", value: "⌘K Omnisearch" }, ], features: [ "Hierarchical folder directory tree", "Publication-grade PDF export generator", "Live markdown editor with revision rollback", ], docLink: "/docs", }, { id: "mcp-server", title: "MCP Server Gateway", badge: "Streamable HTTP :4021", type: "protocol", icon: Server, desc: "High-throughput streamable Model Context Protocol server exposing tool endpoints and resource URIs.", metrics: [ { label: "Port", value: ":4021" }, { label: "Protocol", value: "MCP 2024-11-05" }, { label: "Runtime", value: "Bun Engine" }, ], features: [ "get_document / create_document tools", "search_hybrid / search_semantic tools", "list_sections & list_revisions resources", ], docLink: "/api", }, { id: "core-engine", title: "@mcpedia/core", badge: "Single Source of Truth", type: "core", icon: Layers, desc: "Unified business logic layer shared across Web, MCP Server, REST API, and Background Workers.", metrics: [ { label: "Architecture", value: "Monorepo Package" }, { label: "Validation", value: "Strict Type Safety" }, { label: "Ranking", value: "RRF Hybrid Fusion" }, ], features: [ "Path classification & folder hierarchy", "Markdown document chunking & tokenization", "Drizzle ORM transactional schema mapping", ], docLink: "/research", }, { id: "search-engine", title: "Multi-Modal Search Engine", badge: "RRF Algorithm", type: "core", icon: Search, desc: "Reciprocal Rank Fusion uniting Postgres Full-Text Search tsvectors with OpenAI/OpenRouter vector embeddings.", metrics: [ { label: "FTS Algorithm", value: "tsvector + GIN" }, { label: "Vector Search", value: "Cosine Similarity" }, { label: "Fusion Constant", value: "k = 60" }, ], features: [ "Sub-millisecond keyword retrieval", "Conceptual similarity matching", "Instant snippet generation with highlight markers", ], docLink: "/search", }, { id: "postgres-db", title: "PostgreSQL 16 + pgvector", badge: "Primary Storage", type: "storage", icon: Database, desc: "ACID-compliant relational database storing document bodies, revision trees, vector embeddings, and full-text indexes.", metrics: [ { label: "Extension", value: "vector (1536 dim)" }, { label: "Backups", value: "Auto .md to disk" }, { label: "Isolation", value: "Transactional" }, ], features: [ "HNSW vector index for embeddings", "Complete revision history preservation", "Instant document schema migrations", ], docLink: "/docs", }, ]; export default function InteractiveTopology() { const [activeNodeId, setActiveNodeId] = useState("core-engine"); const activeNode = NODES.find((n) => n.id === activeNodeId) || NODES[0]; const ActiveIcon = activeNode.icon; return (
{/* Header Bar */}
Interactive System Topology

How MCPedia Unifies Humans & AI Agents

Click any node below to inspect
{/* Grid Layout: Visual Interactive Map & Inspector */}
{/* Visual Map Column (Left) */}
{/* Layer 1: Clients */}
1. Ingestion & Access Layer
{NODES.filter((n) => n.type === "client").map((node) => { const Icon = node.icon; const isSelected = activeNodeId === node.id; return ( ); })}
{/* Flow Connector Arrow */}
↓ Secure Protocol & Gateway
{/* Layer 2: Protocol & Core Services */}
2. Gateway & Intelligence Core
{NODES.filter((n) => n.type === "protocol" || n.type === "core").map((node) => { const Icon = node.icon; const isSelected = activeNodeId === node.id; return ( ); })}
{/* Flow Connector Arrow */}
↓ Persistent Layer (ACID + Vectors)
{/* Layer 3: Database & Vector Storage */}
3. Source of Truth Storage {NODES.filter((n) => n.type === "storage").map((node) => { const Icon = node.icon; const isSelected = activeNodeId === node.id; return ( ); })}
{/* Node Inspector Details Column (Right) */}
{/* Inspector Header */}

{activeNode.title}

{activeNode.badge}

{activeNode.desc}

{/* Telemetry Metrics */}
Telemetry & Architecture
{activeNode.metrics.map((m) => (
{m.label} {m.value}
))}
{/* Key Capabilities */}
Key Capabilities
    {activeNode.features.map((feat, idx) => (
  • {feat}
    • ))}
{/* Link to Documentation */} {activeNode.docLink && (
Read technical writeup in {activeNode.title}
)}
); }