'use client'
import { ArrowLeft, Download, Github, Settings, CheckCircle } from 'lucide-react'
import Link from 'next/link'
export default function SoftwareInstallationPage() {
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
{/* Header */}
<div className="mb-8">
<Link href="/docs/setup-prerequisites" className="inline-flex items-center text-blue-600 hover:text-blue-800 mb-4">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Setup Prerequisites
</Link>
<div className="flex items-center space-x-3 mb-4">
<Download className="h-8 w-8 text-green-600" />
<div>
<h1 className="text-3xl font-bold">Software Installation</h1>
<p className="text-gray-600">
Step-by-step installation guide for Unity3D, VRChat, and MCP servers
</p>
</div>
</div>
</div>
{/* Unity Installation */}
<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-black rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">1</span>
Unity 3D Installation
</h2>
<p className="text-gray-600 mt-1">Required for virtual robotics</p>
</div>
<div className="p-6">
<div className="space-y-6">
{/* Step 1: Download Hub */}
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">1</div>
<div className="flex-1">
<h3 className="font-semibold text-gray-800 mb-2">Download Unity Hub</h3>
<p className="text-gray-600 mb-3">
Unity Hub is the central application for managing Unity installations and projects.
</p>
<a
href="https://unity.com/download"
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
>
<Download className="mr-2 h-4 w-4" />
Download Unity Hub
</a>
<p className="text-xs text-gray-500 mt-2">Size: ~50MB • Time: 2-5 minutes</p>
</div>
</div>
{/* Step 2: Install Unity */}
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">2</div>
<div className="flex-1">
<h3 className="font-semibold text-gray-800 mb-2">Install Unity Editor 6000.2.14f1</h3>
<div className="bg-gray-50 p-4 rounded-lg mb-3">
<ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
<li>Open Unity Hub after installation</li>
<li>Go to the "Installs" tab</li>
<li>Click "Add" button</li>
<li>Select "Official releases"</li>
<li>Find and select version "6000.2.14f1"</li>
<li>Check these components:
<ul className="ml-6 mt-1 space-y-1">
<li>• ✅ Unity Editor</li>
<li>• ✅ Android Build Support</li>
<li>• ✅ Windows Build Support</li>
<li>• ✅ Documentation</li>
</ul>
</li>
<li>Click "Continue" and wait for download/installation</li>
</ol>
</div>
<p className="text-xs text-gray-500">Size: ~8GB • Time: 15-30 minutes</p>
</div>
</div>
{/* Step 3: Verify */}
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">3</div>
<div className="flex-1">
<h3 className="font-semibold text-gray-800 mb-2">Verify Installation</h3>
<p className="text-gray-600 mb-3">
Test that Unity is properly installed and accessible.
</p>
<div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm">
<div>& "C:\Program Files\Unity\Hub\Editor\6000.2.14f1\Editor\Unity.exe" --version</div>
</div>
<p className="text-sm text-gray-600 mt-2">
Expected output: <code className="bg-gray-100 px-2 py-1 rounded">6000.2.14f1</code>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* VRChat Installation */}
<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-purple-600 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">2</span>
VRChat Installation
</h2>
<p className="text-gray-600 mt-1">Required for social VR robotics</p>
</div>
<div className="p-6">
<div className="space-y-6">
{/* Step 1: Download */}
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">1</div>
<div className="flex-1">
<h3 className="font-semibold text-gray-800 mb-2">Download VRChat</h3>
<p className="text-gray-600 mb-3">
VRChat is the social VR platform for testing robot interactions.
</p>
<div className="flex space-x-4">
<a
href="https://store.steampowered.com/app/438100/VRChat/"
className="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors"
>
<Download className="mr-2 h-4 w-4" />
Download from Steam
</a>
<a
href="https://hello.vrchat.com/"
className="inline-flex items-center px-4 py-2 border border-purple-600 text-purple-600 rounded hover:bg-purple-50 transition-colors"
>
Official Website
</a>
</div>
<p className="text-xs text-gray-500 mt-2">Size: ~2GB • Time: 5-10 minutes</p>
</div>
</div>
{/* Step 2: Install & Setup */}
<div className="flex items-start space-x-4">
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">2</div>
<div className="flex-1">
<h3 className="font-semibold text-gray-800 mb-2">Install & Configure OSC</h3>
<div className="bg-gray-50 p-4 rounded-lg mb-3">
<ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
<li>Install VRChat via Steam</li>
<li>Launch VRChat and create/login to account</li>
<li>Go to Settings (gear icon)</li>
<li>Find "OSC" section</li>
<li>Enable OSC (checkmark)</li>
<li>Set OSC Port to: <code className="bg-white px-1 rounded">9000</code></li>
<li>Restart VRChat</li>
</ol>
</div>
<div className="bg-yellow-50 border border-yellow-200 rounded p-3">
<p className="text-yellow-800 text-sm">
<strong>⚠️ Important:</strong> OSC must be enabled on port 9000 for Robotics MCP to control VRChat robots.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* MCP Servers Installation */}
<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-600 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">3</span>
MCP Servers Installation
</h2>
<p className="text-gray-600 mt-1">Install all 5 required MCP servers</p>
</div>
<div className="p-6">
{/* Installation Script */}
<div className="bg-gray-50 p-4 rounded-lg mb-6">
<h3 className="font-semibold text-gray-800 mb-3">Universal Installation Commands</h3>
<div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm">
<div># For each MCP server:</div>
<div>git clone [repository-url]</div>
<div>cd [repository-name]</div>
<div>pip install -e .</div>
<div></div>
<div># Verify installation:</div>
<div>python -m [module-name] --help</div>
</div>
</div>
{/* Server List */}
<div className="space-y-4">
{[
{
name: 'unity3d-mcp',
repo: 'https://github.com/sandraschi/unity3d-mcp',
description: 'Virtual robot control in Unity',
module: 'unity3d_mcp'
},
{
name: 'osc-mcp',
repo: 'https://github.com/sandraschi/osc-mcp',
description: 'Real-time communication protocol',
module: 'oscmcp'
},
{
name: 'vrchat-mcp',
repo: 'https://github.com/sandraschi/vrchat-mcp',
description: 'Social VR integration',
module: 'vrchat_mcp'
},
{
name: 'blender-mcp',
repo: 'https://github.com/sandraschi/blender-mcp',
description: '3D model creation',
module: 'blender_mcp'
},
{
name: 'avatar-mcp',
repo: 'https://github.com/sandraschi/avatar-mcp',
description: 'Avatar management',
module: 'avatar_mcp'
},
{
name: 'robotics-mcp',
repo: 'https://github.com/sandraschi/robotics-mcp',
description: 'Main robotics server',
module: 'robotics_mcp.server'
}
].map((server, index) => (
<div key={server.name} className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
{index + 1}
</div>
<div>
<h3 className="font-semibold text-gray-800">{server.name}</h3>
<p className="text-sm text-gray-600">{server.description}</p>
</div>
</div>
<a
href={server.repo}
className="inline-flex items-center text-blue-600 hover:underline text-sm"
>
<Github className="mr-1 h-3 w-3" />
Repo
</a>
</div>
<div className="bg-gray-900 text-green-400 p-3 rounded font-mono text-xs">
<div>git clone {server.repo}</div>
<div>cd {server.name}</div>
<div>pip install -e .</div>
<div>python -m {server.module} --help</div>
</div>
</div>
))}
</div>
</div>
</div>
</section>
{/* Cursor Configuration */}
<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">
<Settings className="mr-3 h-6 w-6 text-blue-600" />
Cursor IDE Configuration
</h2>
<p className="text-gray-600 mt-1">Configure all MCP servers in Cursor</p>
</div>
<div className="p-6">
<div className="space-y-4">
<div>
<h3 className="font-semibold text-gray-800 mb-2">Add to Cursor MCP Configuration</h3>
<p className="text-gray-600 mb-3">
Open Cursor settings and add this to your MCP configuration:
</p>
<div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm overflow-x-auto">
{`{
"mcpServers": {
"unity3d-mcp": {
"command": "python",
"args": ["-m", "unity3d_mcp"],
"env": {}
},
"osc-mcp": {
"command": "python",
"args": ["-m", "oscmcp"],
"env": {}
},
"vrchat-mcp": {
"command": "python",
"args": ["-m", "vrchat_mcp"],
"env": {}
},
"blender-mcp": {
"command": "python",
"args": ["-m", "blender_mcp"],
"env": {}
},
"avatar-mcp": {
"command": "python",
"args": ["-m", "avatar_mcp"],
"env": {}
},
"robotics-mcp": {
"command": "python",
"args": ["-m", "robotics_mcp.server"],
"env": {}
}
}
}`}
</div>
</div>
<div>
<h3 className="font-semibold text-gray-800 mb-2">Verify Configuration</h3>
<p className="text-gray-600 mb-3">
After adding the configuration, restart Cursor and check that all servers show "Connected" status.
</p>
<div className="flex items-center space-x-2 text-sm text-green-600">
<CheckCircle className="h-4 w-4" />
<span>All 6 MCP servers should be connected</span>
</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 Software Installation • Built with ❤️ by sandraschi • December 2025
</p>
<div className="flex items-center justify-center space-x-4 mt-4">
<Link href="/docs/setup-prerequisites" className="text-blue-600 hover:underline">Setup Prerequisites</Link>
<Link href="/docs" className="text-blue-600 hover:underline">Documentation Home</Link>
</div>
</div>
</div>
</div>
)
}
