'use client'
import { ArrowLeft, Download, Github, Settings, CheckCircle, AlertTriangle } from 'lucide-react'
import { Link } from 'react-router-dom'
export default function SetupPrerequisitesPage() {
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
{/* Header */}
<div className="mb-8">
<Link to="/docs" className="inline-flex items-center text-blue-600 hover:text-blue-800 mb-4">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Documentation
</Link>
<div className="flex items-center space-x-3 mb-4">
<Settings className="h-8 w-8 text-red-600" />
<div>
<h1 className="text-3xl font-bold text-red-800">Setup Prerequisites</h1>
<p className="text-red-600 font-medium">
Complete installation guide for Robotics MCP system
</p>
</div>
</div>
{/* Critical Warning */}
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
<div className="flex items-center space-x-2 mb-2">
<AlertTriangle className="h-5 w-5 text-red-600" />
<h3 className="font-semibold text-red-800">CRITICAL REQUIREMENT</h3>
</div>
<p className="text-red-700 text-sm">
<strong>Without these prerequisites installed, the Robotics MCP system will NOT function.</strong>
All components are required for the system to operate.
</p>
</div>
</div>
{/* Physical Robots Section */}
<section className="mb-8">
<div className="bg-white border border-gray-200 rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-800 flex items-center">
<span className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">1</span>
🔴 PHYSICAL ROBOTS (RECOMMENDED)
</h2>
<p className="text-gray-600 mt-1">You SHOULD own one of these supported robots for the complete experience</p>
</div>
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-gray-800 mb-2">Moorebot Scout</h3>
<p className="text-sm text-gray-600 mb-2">Mecanum wheeled robot with LiDAR</p>
<ul className="text-xs text-gray-500 space-y-1 mb-3">
<li>• 4-wheel omnidirectional movement</li>
<li>• Integrated LiDAR sensor</li>
<li>• Camera system</li>
<li>• ROS integration ready</li>
</ul>
<div className="text-sm font-medium text-blue-600">$2,500 - $5,000</div>
<a href="https://moorebot.com" className="text-blue-600 hover:underline text-sm">View Product</a>
</div>
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-gray-800 mb-2">Unitree Go2</h3>
<p className="text-sm text-gray-600 mb-2">Advanced quadrupedal robot</p>
<ul className="text-xs text-gray-500 space-y-1 mb-3">
<li>• Quadrupedal locomotion</li>
<li>• Advanced AI control</li>
<li>• ROS 2 support</li>
<li>• Multiple payload options</li>
</ul>
<div className="text-sm font-medium text-blue-600">$2,700+</div>
<a href="https://www.unitree.com/" className="text-blue-600 hover:underline text-sm">View Product</a>
</div>
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-gray-800 mb-2">Unitree G1/H1</h3>
<p className="text-sm text-gray-600 mb-2">Humanoid robots with arms</p>
<ul className="text-xs text-gray-500 space-y-1 mb-3">
<li>• Bipedal walking</li>
<li>• Dual arm manipulation</li>
<li>• Advanced AI control</li>
<li>• Humanoid form factor</li>
</ul>
<div className="text-sm font-medium text-blue-600">$16,000+</div>
<a href="https://www.unitree.com/" className="text-blue-600 hover:underline text-sm">View Product</a>
</div>
</div>
<div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
<p className="text-blue-800 text-sm">
<strong>Note:</strong> Physical robots provide the authentic robotics experience.
Virtual robots are excellent for testing and simulation when hardware is not available.
</p>
</div>
</div>
</div>
</section>
{/* Software Installation Section */}
<section className="mb-8">
<div className="bg-white border border-gray-200 rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-800 flex items-center">
<span className="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">2</span>
🟡 REQUIRED SOFTWARE
</h2>
<p className="text-gray-600 mt-1">You MUST install these applications</p>
</div>
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Unity 3D */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-xs">U</span>
</div>
<div>
<h3 className="font-semibold text-gray-800">Unity 3D</h3>
<p className="text-sm text-gray-600">Version 6000.2.14f1+ required</p>
</div>
</div>
<div className="space-y-3">
<div>
<h4 className="font-medium text-gray-800 text-sm">Installation Steps:</h4>
<ol className="text-sm text-gray-600 space-y-1 ml-4 mt-1">
<li>1. Download Unity Hub from <a href="https://unity.com/download" className="text-blue-600 hover:underline">unity.com/download</a></li>
<li>2. Install Unity Hub</li>
<li>3. Open Unity Hub → Installs tab</li>
<li>4. Click "Add" → "Official releases"</li>
<li>5. Select version "6000.2.14f1"</li>
<li>6. Install with Android Build Support</li>
</ol>
</div>
<div className="bg-gray-50 p-3 rounded text-sm">
<p className="font-medium text-gray-800 mb-1">Verification:</p>
<code className="text-gray-700 bg-white px-2 py-1 rounded border">
& "C:\Program Files\Unity\Hub\Editor\6000.2.14f1\Editor\Unity.exe" --version
</code>
<p className="text-gray-600 mt-1">Should output: <code className="bg-white px-1 rounded">6000.2.14f1</code></p>
</div>
<div className="text-xs text-gray-500">
<strong>Size:</strong> ~8GB • <strong>Time:</strong> 15-30 minutes
</div>
</div>
</div>
{/* VRChat */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<div className="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-xs">V</span>
</div>
<div>
<h3 className="font-semibold text-gray-800">VRChat</h3>
<p className="text-sm text-gray-600">OSC enabled on port 9000</p>
</div>
</div>
<div className="space-y-3">
<div>
<h4 className="font-medium text-gray-800 text-sm">Installation:</h4>
<ul className="text-sm text-gray-600 space-y-1 ml-4 mt-1">
<li>• Download from <a href="https://store.steampowered.com/app/438100/VRChat/" className="text-blue-600 hover:underline">Steam</a></li>
<li>• Alternative: <a href="https://hello.vrchat.com/" className="text-blue-600 hover:underline">VRChat Website</a></li>
<li>• Install and create account</li>
</ul>
</div>
<div>
<h4 className="font-medium text-gray-800 text-sm">OSC Setup (Critical):</h4>
<ol className="text-sm text-gray-600 space-y-1 ml-4 mt-1">
<li>1. Launch VRChat</li>
<li>2. Go to Settings → OSC</li>
<li>3. Enable OSC (checkmark)</li>
<li>4. Set OSC Port: <code className="bg-gray-100 px-1 rounded">9000</code></li>
<li>5. Restart VRChat</li>
</ol>
</div>
<div className="bg-gray-50 p-3 rounded text-sm">
<p className="font-medium text-gray-800 mb-1">Test OSC:</p>
<p className="text-gray-600">Use any OSC testing tool or robotics-mcp server to verify OSC messages work.</p>
</div>
<div className="text-xs text-gray-500">
<strong>Size:</strong> ~2GB • <strong>Time:</strong> 5-10 minutes
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* MCP Servers Section */}
<section className="mb-8">
<div className="bg-white border border-gray-200 rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-800 flex items-center">
<span className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">3</span>
🟢 REQUIRED MCP SERVERS
</h2>
<p className="text-gray-600 mt-1">You MUST install all 5 MCP servers</p>
</div>
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
{/* Unity3D-MCP */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<div className="w-8 h-8 bg-black rounded flex items-center justify-center">
<span className="text-white font-bold text-xs">U</span>
</div>
<div>
<h3 className="font-semibold text-gray-800 text-sm">unity3d-mcp</h3>
<p className="text-xs text-gray-600">Virtual robot control</p>
</div>
</div>
<div className="space-y-2">
<a href="https://github.com/sandraschi/unity3d-mcp" className="inline-flex items-center text-blue-600 hover:underline text-sm">
<Github className="mr-1 h-3 w-3" />
GitHub
</a>
<div className="text-xs text-gray-500">
<div>git clone https://github.com/sandraschi/unity3d-mcp.git</div>
<div>cd unity3d-mcp && pip install -e .</div>
</div>
</div>
</div>
{/* OSC-MCP */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<div className="w-8 h-8 bg-blue-500 rounded flex items-center justify-center">
<span className="text-white font-bold text-xs">O</span>
</div>
<div>
<h3 className="font-semibold text-gray-800 text-sm">osc-mcp</h3>
<p className="text-xs text-gray-600">Real-time communication</p>
</div>
</div>
<div className="space-y-2">
<a href="https://github.com/sandraschi/osc-mcp" className="inline-flex items-center text-blue-600 hover:underline text-sm">
<Github className="mr-1 h-3 w-3" />
GitHub
</a>
<div className="text-xs text-gray-500">
<div>git clone https://github.com/sandraschi/osc-mcp.git</div>
<div>cd osc-mcp && pip install -e .</div>
</div>
</div>
</div>
{/* VRChat-MCP */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<div className="w-8 h-8 bg-purple-500 rounded flex items-center justify-center">
<span className="text-white font-bold text-xs">V</span>
</div>
<div>
<h3 className="font-semibold text-gray-800 text-sm">vrchat-mcp</h3>
<p className="text-xs text-gray-600">Social VR integration</p>
</div>
</div>
<div className="space-y-2">
<a href="https://github.com/sandraschi/vrchat-mcp" className="inline-flex items-center text-blue-600 hover:underline text-sm">
<Github className="mr-1 h-3 w-3" />
GitHub
</a>
<div className="text-xs text-gray-500">
<div>git clone https://github.com/sandraschi/vrchat-mcp.git</div>
<div>cd vrchat-mcp && pip install -e .</div>
</div>
</div>
</div>
{/* Blender-MCP */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<div className="w-8 h-8 bg-orange-500 rounded flex items-center justify-center">
<span className="text-white font-bold text-xs">B</span>
</div>
<div>
<h3 className="font-semibold text-gray-800 text-sm">blender-mcp</h3>
<p className="text-xs text-gray-600">3D model creation</p>
</div>
</div>
<div className="space-y-2">
<div className="text-xs text-gray-600 mb-1">Requires Blender 4.0+</div>
<a href="https://github.com/sandraschi/blender-mcp" className="inline-flex items-center text-blue-600 hover:underline text-sm">
<Github className="mr-1 h-3 w-3" />
GitHub
</a>
<div className="text-xs text-gray-500">
<div>git clone https://github.com/sandraschi/blender-mcp.git</div>
<div>cd blender-mcp && pip install -e .</div>
</div>
</div>
</div>
{/* Avatar-MCP */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<div className="w-8 h-8 bg-pink-500 rounded flex items-center justify-center">
<span className="text-white font-bold text-xs">A</span>
</div>
<div>
<h3 className="font-semibold text-gray-800 text-sm">avatar-mcp</h3>
<p className="text-xs text-gray-600">Avatar management</p>
</div>
</div>
<div className="space-y-2">
<a href="https://github.com/sandraschi/avatar-mcp" className="inline-flex items-center text-blue-600 hover:underline text-sm">
<Github className="mr-1 h-3 w-3" />
GitHub
</a>
<div className="text-xs text-gray-500">
<div>git clone https://github.com/sandraschi/avatar-mcp.git</div>
<div>cd avatar-mcp && pip install -e .</div>
</div>
</div>
</div>
{/* Robotics-MCP */}
<div className="border border-blue-200 rounded-lg p-4 bg-blue-50">
<div className="flex items-center space-x-3 mb-3">
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center">
<span className="text-white font-bold text-xs">R</span>
</div>
<div>
<h3 className="font-semibold text-blue-800 text-sm">robotics-mcp</h3>
<p className="text-xs text-blue-700">Main robotics server</p>
</div>
</div>
<div className="space-y-2">
<a href="https://github.com/sandraschi/robotics-mcp" className="inline-flex items-center text-blue-600 hover:underline text-sm">
<Github className="mr-1 h-3 w-3" />
GitHub
</a>
<div className="text-xs text-blue-700">
<div>git clone https://github.com/sandraschi/robotics-mcp.git</div>
<div>cd robotics-mcp && pip install -e .[dev]</div>
</div>
</div>
</div>
</div>
{/* Installation Commands */}
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
<h4 className="font-semibold text-gray-800 mb-2">Universal Installation Commands:</h4>
<div className="bg-white p-3 rounded border text-sm font-mono text-gray-700">
<div>git clone [repository-url]</div>
<div>cd [repository-name]</div>
<div>pip install -e .</div>
</div>
<p className="text-xs text-gray-600 mt-2">
Run these commands for each of the 5 MCP servers listed above.
</p>
</div>
</div>
</div>
</section>
{/* Verification Section */}
<section className="mb-8">
<div className="bg-white border border-gray-200 rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-800 flex items-center">
<CheckCircle className="mr-3 h-6 w-6 text-green-600" />
✅ VERIFICATION CHECKLIST
</h2>
<p className="text-gray-600 mt-1">Ensure everything is properly installed</p>
</div>
<div className="p-6">
<div className="space-y-4">
<div className="flex items-start space-x-3">
<CheckCircle className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-gray-800">Unity 3D</p>
<p className="text-sm text-gray-600">Version 6000.2.14f1+ installed and working</p>
<code className="text-xs bg-gray-100 px-2 py-1 rounded mt-1 block">
& "C:\Program Files\Unity\Hub\Editor\6000.2.14f1\Editor\Unity.exe" --version
</code>
</div>
</div>
<div className="flex items-start space-x-3">
<CheckCircle className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-gray-800">VRChat</p>
<p className="text-sm text-gray-600">Installed with OSC enabled on port 9000</p>
<p className="text-xs text-gray-500 mt-1">Check Settings → OSC in VRChat</p>
</div>
</div>
<div className="flex items-start space-x-3">
<CheckCircle className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-gray-800">MCP Servers</p>
<p className="text-sm text-gray-600">All 5 MCP servers cloned and installed</p>
<code className="text-xs bg-gray-100 px-2 py-1 rounded mt-1 block">
python -m unity3d_mcp --help
</code>
</div>
</div>
<div className="flex items-start space-x-3">
<CheckCircle className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-gray-800">Cursor IDE</p>
<p className="text-sm text-gray-600">All MCP servers configured in Cursor</p>
<p className="text-xs text-gray-500 mt-1">Check MCP server status in Cursor settings</p>
</div>
</div>
<div className="flex items-start space-x-3">
<CheckCircle className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-gray-800">Robotics-MCP</p>
<p className="text-sm text-gray-600">Main server starts successfully</p>
<code className="text-xs bg-gray-100 px-2 py-1 rounded mt-1 block">
python -m robotics_mcp.server --help
</code>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Next Steps */}
<section className="mb-8">
<div className="bg-white border border-gray-200 rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-800">🎯 NEXT STEPS</h2>
<p className="text-gray-600 mt-1">What to do after installation</p>
</div>
<div className="p-6">
<div className="space-y-4">
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xs flex-shrink-0">1</div>
<div>
<p className="font-medium text-gray-800">Start Robotics-MCP Server</p>
<p className="text-sm text-gray-600">Launch the main robotics server in Cursor IDE</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xs flex-shrink-0">2</div>
<div>
<p className="font-medium text-gray-800">Spawn Virtual Robot</p>
<p className="text-sm text-gray-600">Test virtual robot creation in Unity</p>
<code className="text-xs bg-gray-100 px-2 py-1 rounded mt-1 block">
await vbot_crud(operation="create", robot_type="scout", platform="unity")
</code>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xs flex-shrink-0">3</div>
<div>
<p className="font-medium text-gray-800">Connect Physical Robot</p>
<p className="text-sm text-gray-600">If you have hardware, connect and test</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xs flex-shrink-0">4</div>
<div>
<p className="font-medium text-gray-800">Explore Documentation</p>
<p className="text-sm text-gray-600">Read the complete documentation suite</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<div className="mt-12 pt-8 border-t border-gray-200 text-center text-sm text-gray-600">
<p>
Robotics MCP Setup Prerequisites • Built with ❤️ by sandraschi • December 2025
</p>
<div className="flex items-center justify-center space-x-4 mt-4">
<a href="https://github.com/sandraschi/robotics-mcp" className="text-blue-600 hover:underline flex items-center">
<Github className="mr-1 h-3 w-3" />
Main Repository
</a>
<Link to="/docs" className="text-blue-600 hover:underline">Documentation Home</Link>
</div>
</div>
</div>
</div>
)
}
