| <!DOCTYPE html> |
| <html lang="en" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>API Nexus Bridge Explorer</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#6366f1', |
| 600: '#4f46e5', |
| }, |
| secondary: { |
| 500: '#10b981', |
| 600: '#059669', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <style> |
| .method-badge { |
| @apply px-2 py-1 rounded-md text-xs font-bold uppercase tracking-wider; |
| } |
| .get-badge { |
| @apply bg-blue-100 text-blue-800; |
| } |
| .post-badge { |
| @apply bg-green-100 text-green-800; |
| } |
| .dark .get-badge { |
| @apply bg-blue-900 text-blue-100; |
| } |
| .dark .post-badge { |
| @apply bg-green-900 text-green-100; |
| } |
| .response-viewer { |
| min-height: 200px; |
| max-height: 400px; |
| } |
| .sidebar-transition { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 h-full flex flex-col"> |
| <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div> |
| |
| |
| <header class="bg-white dark:bg-gray-800 shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center"> |
| <i data-feather="cpu" class="text-primary-500 w-8 h-8"></i> |
| <span class="ml-2 text-xl font-bold">API Nexus</span> |
| </div> |
| <span class="px-2 py-1 bg-secondary-500 text-white text-xs rounded-full">v1.0.0</span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
| <i data-feather="moon" class="hidden dark:block"></i> |
| <i data-feather="sun" class="dark:hidden"></i> |
| </button> |
| <div class="relative"> |
| <input type="text" placeholder="Search endpoints..." class="pl-10 pr-4 py-2 border rounded-lg bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="flex flex-1 overflow-hidden"> |
| |
| <aside id="sidebar" class="w-64 bg-white dark:bg-gray-800 shadow-md sidebar-transition"> |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
| <h2 class="font-semibold text-lg">API Endpoints</h2> |
| </div> |
| <nav class="p-2"> |
| <div class="mb-4"> |
| <button class="flex items-center justify-between w-full p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"> |
| <span class="font-medium">Core Services</span> |
| <i data-feather="chevron-down" class="w-4 h-4"></i> |
| </button> |
| <div class="mt-1 pl-4"> |
| <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm">Health Check</a> |
| <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm">System Status</a> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <button class="flex items-center justify-between w-full p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"> |
| <span class="font-medium">Memory Operations</span> |
| <i data-feather="chevron-down" class="w-4 h-4"></i> |
| </button> |
| <div class="mt-1 pl-4"> |
| <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm">Memory Storage</a> |
| <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm">Memory Retrieval</a> |
| <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm">Session Debugger</a> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <button class="flex items-center justify-between w-full p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"> |
| <span class="font-medium">LLM Services</span> |
| <i data-feather="chevron-down" class="w-4 h-4"></i> |
| </button> |
| <div class="mt-1 pl-4"> |
| <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm">LLM Chat</a> |
| <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm">LLM Summarize</a> |
| </div> |
| </div> |
| </nav> |
| </aside> |
|
|
| |
| <main class="flex-1 overflow-auto p-6"> |
| <div class="max-w-5xl mx-auto"> |
| <h1 class="text-3xl font-bold mb-6">API Endpoint Explorer</h1> |
| |
| |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-6 overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <span class="method-badge get-badge">GET</span> |
| <h2 class="font-semibold text-lg">/health</h2> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="copy" class="w-4 h-4"></i> |
| </button> |
| <button class="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="chevron-down" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-600 dark:text-gray-400 mb-4">Check the health status of all connected services including Qdrant, Neo4j, PostgreSQL, and Redis.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Request</h3> |
| <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono overflow-x-auto"> |
| curl -X GET "http://api.example.com/health" |
| </div> |
| </div> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Response</h3> |
| <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono overflow-x-auto response-viewer"> |
| { |
| "status": "healthy", |
| "services": { |
| "qdrant": { "status": "up", "version": "1.2.3" }, |
| "neo4j": { "status": "up", "version": "4.4.5" }, |
| "postgres": { "status": "up", "version": "14.5" }, |
| "redis": { "status": "up", "version": "6.2.6" } |
| } |
| } |
| </div> |
| </div> |
| </div> |
| |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md flex items-center"> |
| <i data-feather="play" class="w-4 h-4 mr-2"></i> |
| Test Endpoint |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-6 overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <span class="method-badge post-badge">POST</span> |
| <h2 class="font-semibold text-lg">/memory/store</h2> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="copy" class="w-4 h-4"></i> |
| </button> |
| <button class="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="chevron-down" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-600 dark:text-gray-400 mb-4">Store memory data across multiple storage systems with automatic indexing.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Request</h3> |
| <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono overflow-x-auto"> |
| curl -X POST "http://api.example.com/memory/store" \<br> |
| -H "Content-Type: application/json" \<br> |
| -d '{ |
| "content": "Sample memory content", |
| "metadata": { |
| "source": "web", |
| "tags": ["important", "reference"] |
| } |
| }' |
| </div> |
| </div> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2">Response</h3> |
| <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono overflow-x-auto response-viewer"> |
| { |
| "status": "success", |
| "memory_id": "mem_abc123xyz456", |
| "storage_details": { |
| "qdrant": { "collection": "memories", "vector_id": "vec_789" }, |
| "neo4j": { "node_id": "n123", "relationships": 2 }, |
| "postgres": { "table": "memories", "row_id": 456 } |
| } |
| } |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <h3 class="font-medium mb-2">Parameters</h3> |
| <div class="space-y-3"> |
| <div> |
| <label class="block text-sm font-medium mb-1">Content</label> |
| <textarea class="w-full p-2 border rounded bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" rows="3" placeholder="Enter memory content"></textarea> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-1">Metadata (JSON)</label> |
| <textarea class="w-full p-2 border rounded bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" rows="3" placeholder='{"source": "web", "tags": []}'></textarea> |
| </div> |
| </div> |
| </div> |
| |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md flex items-center"> |
| <i data-feather="play" class="w-4 h-4 mr-2"></i> |
| Test Endpoint |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6"> |
| <h2 class="text-xl font-bold mb-4">System Status Dashboard</h2> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg text-center"> |
| <div class="w-12 h-12 mx-auto mb-2 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center"> |
| <i data-feather="database" class="text-green-600 dark:text-green-300"></i> |
| </div> |
| <h3 class="font-medium">Qdrant</h3> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Vector Storage</p> |
| <div class="mt-2 text-green-600 dark:text-green-400 flex items-center justify-center"> |
| <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> |
| <span>Healthy</span> |
| </div> |
| </div> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg text-center"> |
| <div class="w-12 h-12 mx-auto mb-2 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center"> |
| <i data-feather="share-2" class="text-blue-600 dark:text-blue-300"></i> |
| </div> |
| <h3 class="font-medium">Neo4j</h3> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Graph Database</p> |
| <div class="mt-2 text-green-600 dark:text-green-400 flex items-center justify-center"> |
| <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> |
| <span>Healthy</span> |
| </div> |
| </div> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg text-center"> |
| <div class="w-12 h-12 mx-auto mb-2 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center"> |
| <i data-feather="box" class="text-purple-600 dark:text-purple-300"></i> |
| </div> |
| <h3 class="font-medium">PostgreSQL</h3> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Relational DB</p> |
| <div class="mt-2 text-green-600 dark:text-green-400 flex items-center justify-center"> |
| <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> |
| <span>Healthy</span> |
| </div> |
| </div> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg text-center"> |
| <div class="w-12 h-12 mx-auto mb-2 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center"> |
| <i data-feather="zap" class="text-red-600 dark:text-red-300"></i> |
| </div> |
| <h3 class="font-medium">Redis</h3> |
| <p class="text-sm text-gray-600 dark:text-gray-400">Cache</p> |
| <div class="mt-2 text-green-600 dark:text-green-400 flex items-center justify-center"> |
| <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> |
| <span>Healthy</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <aside class="w-80 bg-white dark:bg-gray-800 shadow-md border-l border-gray-200 dark:border-gray-700 overflow-y-auto sidebar-transition"> |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
| <h2 class="font-semibold text-lg">Response Debugger</h2> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <h3 class="font-medium mb-2">Last Response</h3> |
| <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded text-sm font-mono overflow-x-auto response-viewer"> |
| Select an |
| </body> |
| </html> |
