'use client'
// Using basic HTML elements with Tailwind classes instead of shadcn/ui components
import {
BookOpen,
Cpu,
Shield,
Zap,
Brain,
Network,
Eye,
Gamepad2,
Settings,
FileText,
ChevronRight,
Download,
ExternalLink,
Bot
} from 'lucide-react'
import { Link } from 'react-router-dom'
const documentationSections = [
{
id: 'prerequisites',
title: 'Setup Prerequisites',
description: 'REQUIRED: Unity3D, VRChat, and MCP servers installation',
icon: Settings,
pages: [
{
title: 'Complete Setup Guide',
path: '/docs/setup-prerequisites',
description: 'Step-by-step installation for all required software and MCP servers',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'Hardware Requirements',
path: '/docs/hardware-requirements',
description: 'Supported robots and hardware specifications',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'Software Installation',
path: '/docs/software-installation',
description: 'Unity3D, VRChat, and MCP server setup',
status: 'available',
lastUpdated: 'Dec 29, 2025'
}
]
},
{
id: 'architecture',
title: 'Technical Architecture',
description: 'Complete system architecture and design patterns',
icon: Network,
pages: [
{
title: 'System Overview',
path: '/docs/architecture',
description: 'High-level architecture overview',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Frontend Architecture',
path: '/docs/architecture/frontend',
description: 'Next.js 16, React 19, TypeScript 5.6',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Backend Architecture',
path: '/docs/architecture/backend',
description: 'FastAPI, WebRTC, ROS 2 integration',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Real-time Systems',
path: '/docs/architecture/realtime',
description: 'WebRTC 1.0, WebSocket, OSC protocols',
status: 'available',
lastUpdated: 'Dec 17, 2025'
}
]
},
{
id: 'robots',
title: 'Robotics Platforms',
description: 'Our complete robot fleet and capabilities',
icon: Bot,
pages: [
{
title: 'Platform Overview',
path: '/docs/robots',
description: 'Complete overview of all robotics platforms',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'Pilot Labs Scout',
path: '/docs/robots/pilot-labs-scout',
description: 'Autonomous mobile robot platform',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'Unitree Go2',
path: '/docs/robots/unitree-go2',
description: 'Advanced quadrupedal robot',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'Unitree Humanoids',
path: '/docs/robots/unitree-humanoids',
description: 'H1 and G1 humanoid robots',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'Scenne Humanoid',
path: '/docs/robots/scenne-humanoid',
description: 'AI-driven humanoid (US & China)',
status: 'available',
lastUpdated: 'Dec 29, 2025'
}
]
},
{
id: 'robotics',
title: 'Robotics Systems',
description: 'Robot control, sensors, and integration',
icon: Cpu,
pages: [
{
title: 'ROS Fundamentals',
path: '/docs/ros-fundamentals',
description: 'Robot Operating System core concepts and architecture',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'ROS 2 Integration',
path: '/docs/ros-integration',
description: 'ROS 2 Rolling Jazzy Jalisco setup and integration',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'MCP Server Architecture',
path: '/docs/mcp-server',
description: 'Robotics MCP server and composite MCP ecosystem',
status: 'available',
lastUpdated: 'Dec 29, 2025'
},
{
title: 'Planning & Strategy',
path: '/docs/planning-strategy',
description: 'Strategic planning, market analysis, and roadmap',
status: 'available',
lastUpdated: 'Dec 29, 2025'
}
]
},
{
id: 'ai-ml',
title: 'AI/ML Integration',
description: 'Machine learning and computer vision',
icon: Brain,
pages: [
{
title: 'Perception Pipeline',
path: '/docs/ai/perception',
description: 'YOLOv9, KPConv++, sensor fusion',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Control Systems',
path: '/docs/ai/control',
description: 'DreamerV3, reinforcement learning',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Model Optimization',
path: '/docs/ai/optimization',
description: 'TensorRT, quantization, deployment',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Training Pipelines',
path: '/docs/ai/training',
description: 'Distributed training, MLOps',
status: 'coming-soon',
lastUpdated: 'Dec 17, 2025'
}
]
},
{
id: 'environments',
title: 'Virtual Environments',
description: '3D worlds, simulation, and rendering',
icon: Eye,
pages: [
{
title: 'World Labs Integration',
path: '/docs/world-labs',
description: 'Marble, Chisel, Gaussian Splatting',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'VR Platforms',
path: '/docs/vr-platforms',
description: 'VRChat, Resonite, Unity integration',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Unity Simulation',
path: '/docs/environments/unity',
description: 'Unity 2024 DOTS robotics simulation',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: '3D Asset Pipeline',
path: '/docs/environments/assets',
description: 'Model optimization, LOD generation',
status: 'coming-soon',
lastUpdated: 'Dec 17, 2025'
}
]
},
{
id: 'security',
title: 'Security Standards',
description: 'Quantum-resistant security and compliance',
icon: Shield,
pages: [
{
title: 'Post-Quantum Crypto',
path: '/docs/security/crypto',
description: 'Dilithium, Kyber, NIST PQC standards',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Zero-Trust Architecture',
path: '/docs/security/zero-trust',
description: 'Identity-aware microsegmentation',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Threat Detection',
path: '/docs/security/threats',
description: 'AI-powered intrusion detection',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Compliance Framework',
path: '/docs/security/compliance',
description: 'ISO 27001:2025, IEC 62443',
status: 'coming-soon',
lastUpdated: 'Dec 17, 2025'
}
]
},
{
id: 'development',
title: 'Development Workflow',
description: 'Tools, processes, and best practices',
icon: Settings,
pages: [
{
title: 'AI-Assisted Development',
path: '/docs/development',
description: 'Continuous intelligence, code review',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'CI/CD Pipeline',
path: '/docs/development/ci-cd',
description: 'GitHub Actions, automated testing',
status: 'available',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Performance Optimization',
path: '/docs/development/performance',
description: 'Benchmarking, profiling, optimization',
status: 'coming-soon',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Testing Strategies',
path: '/docs/development/testing',
description: 'Unit tests, integration, E2E',
status: 'coming-soon',
lastUpdated: 'Dec 17, 2025'
},
{
title: 'Watchfiles Integration',
path: '/docs/development/watchfiles',
description: 'File watching, auto-reload, development workflow',
status: 'available',
lastUpdated: 'Dec 17, 2025'
}
]
}
]
const quickStartGuides = [
{
title: 'Getting Started',
description: 'Quick setup guide for new developers',
path: '/docs/getting-started',
icon: Zap,
estimatedTime: '15 min'
},
{
title: 'First Robot Control',
description: 'Control your first virtual robot',
path: '/docs/first-robot',
icon: Gamepad2,
estimatedTime: '10 min'
},
{
title: 'Environment Creation',
description: 'Create your first 3D environment',
path: '/docs/first-environment',
icon: Eye,
estimatedTime: '20 min'
}
]
export default function DocumentationPage() {
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
{/* Header */}
<div className="mb-8">
<div className="flex items-center space-x-3 mb-4">
<BookOpen className="h-8 w-8 text-blue-600" />
<div>
<h1 className="text-3xl font-bold">Documentation</h1>
<p className="text-gray-600">
Comprehensive documentation for Robotics MCP WebApp - December 2025 Standards
</p>
</div>
{/* Alpha Status Notice */}
<div className="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
<div className="flex items-center space-x-2 mb-2">
<Settings className="h-5 w-5 text-orange-600" />
<h3 className="font-semibold text-orange-800">Alpha Release Documentation</h3>
</div>
<p className="text-sm text-orange-700">
This documentation covers the <strong>v0.1.0-alpha</strong> release. Some features may be incomplete,
experimental, or subject to change. APIs and interfaces are not yet stable.
<a href="/docs/development" className="underline ml-1">Learn about our development roadmap</a>.
</p>
</div>
</div>
<div className="flex items-center space-x-4 text-sm text-gray-600">
<span>Last updated: December 17, 2025</span>
<span>•</span>
<span>Version: 1.0.0</span>
<span>•</span>
<span>Standards: 2025 Technology Stack</span>
</div>
</div>
{/* CRITICAL REQUIREMENTS NOTICE */}
<div className="bg-red-50 border border-red-200 rounded-lg p-6 mb-8">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<div className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
<span className="text-white font-bold text-sm">!</span>
</div>
</div>
<div className="flex-1">
<h2 className="text-xl font-bold text-red-800 mb-3">⚠️ CRITICAL REQUIREMENTS</h2>
<p className="text-red-700 mb-4 font-medium">
<strong>Without these prerequisites installed, the Robotics MCP system will NOT function.</strong>
</p>
{/* Physical Robots */}
<div className="mb-4">
<h3 className="font-semibold text-red-800 mb-2">🔴 PHYSICAL ROBOTS (RECOMMENDED)</h3>
<p className="text-red-700 text-sm mb-2">You SHOULD own one of these supported robots:</p>
<ul className="text-sm text-red-700 space-y-1 ml-4">
<li>• <strong>Moorebot Scout</strong> - Mecanum wheeled robot ($2,500-$5,000)</li>
<li>• <strong>Unitree Go2</strong> - Quadrupedal robot ($2,700+)</li>
<li>• <strong>Unitree G1/H1</strong> - Humanoid robots ($16,000+)</li>
</ul>
<p className="text-red-600 text-xs mt-1 italic">Physical robots provide the complete robotics experience</p>
</div>
{/* Required Software */}
<div className="mb-4">
<h3 className="font-semibold text-red-800 mb-2">🟡 REQUIRED SOFTWARE</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p className="font-medium text-red-800">Unity 3D</p>
<p className="text-sm text-red-700">Version 6000.2.14f1+ required</p>
<a href="https://unity.com/download" className="text-blue-600 hover:underline text-sm">Download Unity Hub</a>
</div>
<div>
<p className="font-medium text-red-800">VRChat</p>
<p className="text-sm text-red-700">OSC enabled on port 9000</p>
<a href="https://store.steampowered.com/app/438100/VRChat/" className="text-blue-600 hover:underline text-sm">Download from Steam</a>
</div>
</div>
</div>
{/* Required MCP Servers */}
<div className="mb-4">
<h3 className="font-semibold text-red-800 mb-2">🟢 REQUIRED MCP SERVERS</h3>
<p className="text-red-700 text-sm mb-3">You MUST install all 5 MCP servers:</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<div className="bg-white border border-red-300 rounded p-3">
<p className="font-medium text-red-800 text-sm">unity3d-mcp</p>
<p className="text-xs text-red-700">Virtual robot control</p>
<a href="https://github.com/sandraschi/unity3d-mcp" className="text-blue-600 hover:underline text-xs">GitHub</a>
</div>
<div className="bg-white border border-red-300 rounded p-3">
<p className="font-medium text-red-800 text-sm">osc-mcp</p>
<p className="text-xs text-red-700">Real-time communication</p>
<a href="https://github.com/sandraschi/osc-mcp" className="text-blue-600 hover:underline text-xs">GitHub</a>
</div>
<div className="bg-white border border-red-300 rounded p-3">
<p className="font-medium text-red-800 text-sm">vrchat-mcp</p>
<p className="text-xs text-red-700">Social VR integration</p>
<a href="https://github.com/sandraschi/vrchat-mcp" className="text-blue-600 hover:underline text-xs">GitHub</a>
</div>
<div className="bg-white border border-red-300 rounded p-3">
<p className="font-medium text-red-800 text-sm">blender-mcp</p>
<p className="text-xs text-red-700">3D model creation</p>
<a href="https://github.com/sandraschi/blender-mcp" className="text-blue-600 hover:underline text-xs">GitHub</a>
</div>
<div className="bg-white border border-red-300 rounded p-3">
<p className="font-medium text-red-800 text-sm">avatar-mcp</p>
<p className="text-xs text-red-700">Avatar management</p>
<a href="https://github.com/sandraschi/avatar-mcp" className="text-blue-600 hover:underline text-xs">GitHub</a>
</div>
</div>
<p className="text-red-600 text-xs mt-2 italic">
Installation commands: <code className="bg-red-100 px-1 rounded">git clone [repo] && cd [repo] && pip install -e .</code>
</p>
</div>
<div className="bg-red-100 border border-red-300 rounded p-3 mt-4">
<p className="text-red-800 font-medium text-sm mb-1">📋 VERIFICATION CHECKLIST</p>
<ul className="text-xs text-red-700 space-y-1 ml-4">
<li>• Unity 3D version 6000.2.14f1+ installed</li>
<li>• VRChat installed with OSC enabled</li>
<li>• All 5 MCP servers cloned and installed</li>
<li>• Cursor IDE configured with all MCP servers</li>
<li>• Robotics-MCP server starts successfully</li>
</ul>
</div>
<div className="mt-4 pt-3 border-t border-red-300">
<p className="text-red-700 font-medium text-sm">
📖 <a href="/docs/setup-prerequisites" className="text-blue-600 hover:underline">Complete Setup Guide</a> |
🚨 <a href="https://github.com/sandraschi/robotics-mcp" className="text-blue-600 hover:underline">Main Repository</a>
</p>
</div>
</div>
</div>
</div>
{/* Quick Start Guides */}
<div className="bg-white border border-gray-200 rounded-lg shadow mb-8">
<div className="p-6 border-b border-gray-200">
<h2 className="flex items-center space-x-2 text-xl font-semibold">
<Zap className="h-5 w-5" />
<span>Quick Start Guides</span>
</h2>
<p className="text-gray-600 mt-1">
Get up and running quickly with these focused guides
</p>
</div>
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{quickStartGuides.map((guide) => (
<Link key={guide.path} to={guide.path}>
<div className="bg-gray-50 border border-gray-200 rounded hover:shadow-md transition-shadow cursor-pointer">
<div className="p-4">
<div className="flex items-center space-x-3 mb-2">
<guide.icon className="h-6 w-6 text-blue-600" />
<div>
<h3 className="font-medium">{guide.title}</h3>
<p className="text-sm text-gray-600">{guide.estimatedTime}</p>
</div>
</div>
<p className="text-sm">{guide.description}</p>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
{/* Documentation Sections */}
<div className="space-y-8">
{documentationSections.map((section) => (
<div key={section.id} className="bg-white border border-gray-200 rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h3 className="flex items-center space-x-3 text-xl font-semibold">
<section.icon className="h-6 w-6 text-blue-600" />
<span>{section.title}</span>
</h3>
<p className="text-gray-600 mt-1">{section.description}</p>
</div>
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{section.pages.map((page) => (
<Link key={page.path} to={page.path}>
<div className="bg-gray-50 border border-gray-200 rounded hover:shadow-md transition-shadow cursor-pointer h-full">
<div className="p-4">
<div className="flex items-start justify-between mb-2">
<h3 className="font-medium text-sm leading-tight">{page.title}</h3>
<span className={`text-xs px-2 py-1 rounded ml-2 ${page.status === 'available' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'}`}>
{page.status === 'available' ? 'Available' : 'Coming Soon'}
</span>
</div>
<p className="text-xs text-gray-600 mb-2">{page.description}</p>
<div className="flex items-center justify-between text-xs text-gray-500">
<span>Updated {page.lastUpdated}</span>
<ChevronRight className="h-3 w-3" />
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
))}
</div>
{/* Download Options */}
<div className="bg-white border border-gray-200 rounded-lg shadow mt-8">
<div className="p-6 border-b border-gray-200">
<h2 className="flex items-center space-x-2 text-xl font-semibold">
<Download className="h-5 w-5" />
<span>Documentation Downloads</span>
</h2>
<p className="text-gray-600 mt-1">
Download complete documentation packages for offline reading
</p>
</div>
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<button className="flex items-center px-4 py-2 border border-gray-300 rounded bg-white hover:bg-gray-50">
<FileText className="mr-2 h-4 w-4" />
Technical Architecture (PDF)
</button>
<button className="flex items-center px-4 py-2 border border-gray-300 rounded bg-white hover:bg-gray-50">
<FileText className="mr-2 h-4 w-4" />
AI/ML Integration Guide (PDF)
</button>
<button className="flex items-center px-4 py-2 border border-gray-300 rounded bg-white hover:bg-gray-50">
<FileText className="mr-2 h-4 w-4" />
Complete Documentation (ZIP)
</button>
</div>
</div>
</div>
{/* Footer */}
<div className="mt-12 pt-8 border-t border-gray-200 text-center text-sm text-gray-600">
<p>
Robotics MCP WebApp Documentation • Built with ❤️ by sandraschi • December 2025
</p>
<div className="flex items-center justify-center space-x-4 mt-4">
<button className="text-blue-600 hover:underline flex items-center">
<ExternalLink className="mr-1 h-3 w-3" />
GitHub Repository
</button>
<button className="text-blue-600 hover:underline flex items-center">
<ExternalLink className="mr-1 h-3 w-3" />
Issue Tracker
</button>
<button className="text-blue-600 hover:underline flex items-center">
<ExternalLink className="mr-1 h-3 w-3" />
Community Forum
</button>
</div>
</div>
</div>
</div>
)
}
