crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/@settings/tabs/providers/local/SetupGuide.tsx

@@ -0,0 +1,671 @@
+import React from 'react';
+import { Button } from '~/components/ui/Button';
+import { Card, CardContent, CardHeader } from '~/components/ui/Card';
+import {
+  Cpu,
+  Server,
+  Settings,
+  ExternalLink,
+  Package,
+  Code,
+  Database,
+  CheckCircle,
+  AlertCircle,
+  Activity,
+  Cable,
+  ArrowLeft,
+  Download,
+  Shield,
+  Globe,
+  Terminal,
+  Monitor,
+  Wifi,
+} from 'lucide-react';
+
+// Setup Guide Component
+function SetupGuide({ onBack }: { onBack: () => void }) {
+  return (
+    <div className="space-y-6">
+      {/* Header with Back Button */}
+      <div className="flex items-center gap-4 mb-6">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onBack}
+          className="bg-transparent hover:bg-transparent text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-all duration-200 p-2"
+          aria-label="Back to Dashboard"
+        >
+          <ArrowLeft className="w-4 h-4" />
+        </Button>
+        <div>
+          <h2 className="text-xl font-semibold text-bolt-elements-textPrimary">Local Provider Setup Guide</h2>
+          <p className="text-sm text-bolt-elements-textSecondary">
+            Complete setup instructions for running AI models locally
+          </p>
+        </div>
+      </div>
+
+      {/* Hardware Requirements Overview */}
+      <Card className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-500/20 shadow-sm">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+              <Shield className="w-5 h-5 text-blue-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">System Requirements</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">Recommended hardware for optimal performance</p>
+            </div>
+          </div>
+          <div className="grid md:grid-cols-3 gap-4 text-sm">
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Cpu className="w-4 h-4 text-green-500" />
+                <span className="font-medium text-bolt-elements-textPrimary">CPU</span>
+              </div>
+              <p className="text-bolt-elements-textSecondary">8+ cores, modern architecture</p>
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Database className="w-4 h-4 text-blue-500" />
+                <span className="font-medium text-bolt-elements-textPrimary">RAM</span>
+              </div>
+              <p className="text-bolt-elements-textSecondary">16GB minimum, 32GB+ recommended</p>
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Monitor className="w-4 h-4 text-purple-500" />
+                <span className="font-medium text-bolt-elements-textPrimary">GPU</span>
+              </div>
+              <p className="text-bolt-elements-textSecondary">NVIDIA RTX 30xx+ or AMD RX 6000+</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Ollama Setup Section */}
+      <Card className="bg-bolt-elements-background-depth-2 shadow-sm">
+        <CardHeader className="pb-6">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/20 flex items-center justify-center ring-1 ring-purple-500/30">
+              <Server className="w-6 h-6 text-purple-500" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-xl font-semibold text-bolt-elements-textPrimary">Ollama Setup</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                Most popular choice for running open-source models locally with desktop app
+              </p>
+            </div>
+            <span className="px-3 py-1 bg-purple-500/10 text-purple-500 text-xs font-medium rounded-full">
+              Recommended
+            </span>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Installation Options */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Download className="w-4 h-4" />
+              1. Choose Installation Method
+            </h4>
+
+            {/* Desktop App - New and Recommended */}
+            <div className="p-4 rounded-lg bg-green-500/5 border border-green-500/20">
+              <div className="flex items-center gap-2 mb-3">
+                <Monitor className="w-5 h-5 text-green-500" />
+                <h5 className="font-medium text-green-500">🆕 Desktop App (Recommended)</h5>
+              </div>
+              <p className="text-sm text-bolt-elements-textSecondary mb-3">
+                New user-friendly desktop application with built-in model management and web interface.
+              </p>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Monitor className="w-4 h-4 text-bolt-elements-textPrimary" />
+                    <strong className="text-bolt-elements-textPrimary">macOS</strong>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full bg-gradient-to-r from-purple-500/10 to-purple-600/10 hover:from-purple-500/20 hover:to-purple-600/20 border-purple-500/30 hover:border-purple-500/50 transition-all duration-300 gap-2 group shadow-sm hover:shadow-lg hover:shadow-purple-500/20 font-medium"
+                    _asChild
+                  >
+                    <a
+                      href="https://ollama.com/download/mac"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center justify-center gap-2"
+                    >
+                      <Download className="w-4 h-4 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300 flex-shrink-0" />
+                      <span className="flex-1 text-center font-medium">Download Desktop App</span>
+                      <ExternalLink className="w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300 flex-shrink-0" />
+                    </a>
+                  </Button>
+                </div>
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Monitor className="w-4 h-4 text-bolt-elements-textPrimary" />
+                    <strong className="text-bolt-elements-textPrimary">Windows</strong>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full bg-gradient-to-r from-purple-500/10 to-purple-600/10 hover:from-purple-500/20 hover:to-purple-600/20 border-purple-500/30 hover:border-purple-500/50 transition-all duration-300 gap-2 group shadow-sm hover:shadow-lg hover:shadow-purple-500/20 font-medium"
+                    _asChild
+                  >
+                    <a
+                      href="https://ollama.com/download/windows"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center justify-center gap-2"
+                    >
+                      <Download className="w-4 h-4 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300 flex-shrink-0" />
+                      <span className="flex-1 text-center font-medium">Download Desktop App</span>
+                      <ExternalLink className="w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300 flex-shrink-0" />
+                    </a>
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-3 p-3 rounded-lg bg-blue-500/5 border border-blue-500/20">
+                <div className="flex items-center gap-2 mb-1">
+                  <Globe className="w-4 h-4 text-blue-500" />
+                  <span className="font-medium text-blue-500 text-sm">Built-in Web Interface</span>
+                </div>
+                <p className="text-xs text-bolt-elements-textSecondary">
+                  Desktop app includes a web interface at{' '}
+                  <code className="bg-bolt-elements-background-depth-4 px-1 rounded">http://localhost:11434</code>
+                </p>
+              </div>
+            </div>
+
+            {/* CLI Installation */}
+            <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+              <div className="flex items-center gap-2 mb-3">
+                <Terminal className="w-5 h-5 text-bolt-elements-textPrimary" />
+                <h5 className="font-medium text-bolt-elements-textPrimary">Command Line (Advanced)</h5>
+              </div>
+              <div className="grid md:grid-cols-3 gap-4">
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Monitor className="w-4 h-4 text-bolt-elements-textPrimary" />
+                    <strong className="text-bolt-elements-textPrimary">Windows</strong>
+                  </div>
+                  <div className="text-xs bg-bolt-elements-background-depth-4 p-2 rounded font-mono text-bolt-elements-textPrimary">
+                    winget install Ollama.Ollama
+                  </div>
+                </div>
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Monitor className="w-4 h-4 text-bolt-elements-textPrimary" />
+                    <strong className="text-bolt-elements-textPrimary">macOS</strong>
+                  </div>
+                  <div className="text-xs bg-bolt-elements-background-depth-4 p-2 rounded font-mono text-bolt-elements-textPrimary">
+                    brew install ollama
+                  </div>
+                </div>
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Terminal className="w-4 h-4 text-bolt-elements-textPrimary" />
+                    <strong className="text-bolt-elements-textPrimary">Linux</strong>
+                  </div>
+                  <div className="text-xs bg-bolt-elements-background-depth-4 p-2 rounded font-mono text-bolt-elements-textPrimary">
+                    curl -fsSL https://ollama.com/install.sh | sh
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Latest Model Recommendations */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Package className="w-4 h-4" />
+              2. Download Latest Models
+            </h4>
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+                <h5 className="font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2">
+                  <Code className="w-4 h-4 text-green-500" />
+                  Code & Development
+                </h5>
+                <div className="space-y-2 text-xs bg-bolt-elements-background-depth-4 p-3 rounded font-mono text-bolt-elements-textPrimary">
+                  <div># Latest Llama 3.2 for coding</div>
+                  <div>ollama pull llama3.2:3b</div>
+                  <div>ollama pull codellama:13b</div>
+                  <div>ollama pull deepseek-coder-v2</div>
+                  <div>ollama pull qwen2.5-coder:7b</div>
+                </div>
+              </div>
+              <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+                <h5 className="font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2">
+                  <Terminal className="w-4 h-4 text-blue-500" />
+                  General Purpose & Chat
+                </h5>
+                <div className="space-y-2 text-xs bg-bolt-elements-background-depth-4 p-3 rounded font-mono text-bolt-elements-textPrimary">
+                  <div># Latest general models</div>
+                  <div>ollama pull llama3.2:3b</div>
+                  <div>ollama pull mistral:7b</div>
+                  <div>ollama pull phi3.5:3.8b</div>
+                  <div>ollama pull qwen2.5:7b</div>
+                </div>
+              </div>
+            </div>
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="p-4 rounded-lg bg-purple-500/5 border border-purple-500/20">
+                <div className="flex items-center gap-2 mb-2">
+                  <Activity className="w-4 h-4 text-purple-500" />
+                  <span className="font-medium text-purple-500">Performance Optimized</span>
+                </div>
+                <ul className="text-xs text-bolt-elements-textSecondary space-y-1">
+                  <li>• Llama 3.2: 3B - Fastest, 8GB RAM</li>
+                  <li>• Phi-3.5: 3.8B - Great balance</li>
+                  <li>• Qwen2.5: 7B - Excellent quality</li>
+                  <li>• Mistral: 7B - Popular choice</li>
+                </ul>
+              </div>
+              <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+                <div className="flex items-center gap-2 mb-2">
+                  <AlertCircle className="w-4 h-4 text-yellow-500" />
+                  <span className="font-medium text-yellow-500">Pro Tips</span>
+                </div>
+                <ul className="text-xs text-bolt-elements-textSecondary space-y-1">
+                  <li>• Start with 3B-7B models for best performance</li>
+                  <li>• Use quantized versions for faster loading</li>
+                  <li>• Desktop app auto-manages model storage</li>
+                  <li>• Web UI available at localhost:11434</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Desktop App Features */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Monitor className="w-4 h-4" />
+              3. Desktop App Features
+            </h4>
+            <div className="p-4 rounded-lg bg-blue-500/5 border border-blue-500/20">
+              <div className="grid md:grid-cols-2 gap-6">
+                <div>
+                  <h5 className="font-medium text-blue-500 mb-3">🖥️ User Interface</h5>
+                  <ul className="text-sm text-bolt-elements-textSecondary space-y-1">
+                    <li>• Model library browser</li>
+                    <li>• One-click model downloads</li>
+                    <li>• Built-in chat interface</li>
+                    <li>• System resource monitoring</li>
+                  </ul>
+                </div>
+                <div>
+                  <h5 className="font-medium text-blue-500 mb-3">🔧 Management Tools</h5>
+                  <ul className="text-sm text-bolt-elements-textSecondary space-y-1">
+                    <li>• Automatic updates</li>
+                    <li>• Model size optimization</li>
+                    <li>• GPU acceleration detection</li>
+                    <li>• Cross-platform compatibility</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Troubleshooting */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              4. Troubleshooting & Commands
+            </h4>
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="p-4 rounded-lg bg-red-500/5 border border-red-500/20">
+                <h5 className="font-medium text-red-500 mb-2">Common Issues</h5>
+                <ul className="text-xs text-bolt-elements-textSecondary space-y-1">
+                  <li>• Desktop app not starting: Restart system</li>
+                  <li>• GPU not detected: Update drivers</li>
+                  <li>• Port 11434 blocked: Change port in settings</li>
+                  <li>• Models not loading: Check available disk space</li>
+                  <li>• Slow performance: Use smaller models or enable GPU</li>
+                </ul>
+              </div>
+              <div className="p-4 rounded-lg bg-green-500/5 border border-green-500/20">
+                <h5 className="font-medium text-green-500 mb-2">Useful Commands</h5>
+                <div className="text-xs bg-bolt-elements-background-depth-4 p-3 rounded font-mono text-bolt-elements-textPrimary space-y-1">
+                  <div># Check installed models</div>
+                  <div>ollama list</div>
+                  <div></div>
+                  <div># Remove unused models</div>
+                  <div>ollama rm model_name</div>
+                  <div></div>
+                  <div># Check GPU usage</div>
+                  <div>ollama ps</div>
+                  <div></div>
+                  <div># View logs</div>
+                  <div>ollama logs</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* LM Studio Setup Section */}
+      <Card className="bg-bolt-elements-background-depth-2 shadow-sm">
+        <CardHeader className="pb-6">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/20 flex items-center justify-center ring-1 ring-blue-500/30">
+              <Monitor className="w-6 h-6 text-blue-500" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-xl font-semibold text-bolt-elements-textPrimary">LM Studio Setup</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                User-friendly GUI for running local models with excellent model management
+              </p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Installation */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Download className="w-4 h-4" />
+              1. Download & Install
+            </h4>
+            <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+              <p className="text-sm text-bolt-elements-textSecondary mb-3">
+                Download LM Studio for Windows, macOS, or Linux from the official website.
+              </p>
+              <Button
+                variant="outline"
+                size="sm"
+                className="bg-gradient-to-r from-blue-500/10 to-blue-600/10 hover:from-blue-500/20 hover:to-blue-600/20 border-blue-500/30 hover:border-blue-500/50 transition-all duration-300 gap-2 group shadow-sm hover:shadow-lg hover:shadow-blue-500/20 font-medium"
+                _asChild
+              >
+                <a
+                  href="https://lmstudio.ai/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center gap-2"
+                >
+                  <Download className="w-4 h-4 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300 flex-shrink-0" />
+                  <span className="flex-1 text-center font-medium">Download LM Studio</span>
+                  <ExternalLink className="w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300 flex-shrink-0" />
+                </a>
+              </Button>
+            </div>
+          </div>
+
+          {/* Configuration */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              2. Configure Local Server
+            </h4>
+            <div className="space-y-3">
+              <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+                <h5 className="font-medium text-bolt-elements-textPrimary mb-2">Start Local Server</h5>
+                <ol className="text-xs text-bolt-elements-textSecondary space-y-1 list-decimal list-inside">
+                  <li>Download a model from the "My Models" tab</li>
+                  <li>Go to "Local Server" tab</li>
+                  <li>Select your downloaded model</li>
+                  <li>Set port to 1234 (default)</li>
+                  <li>Click "Start Server"</li>
+                </ol>
+              </div>
+
+              <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                <div className="flex items-center gap-2 mb-2">
+                  <AlertCircle className="w-4 h-4 text-red-500" />
+                  <span className="font-medium text-red-500">Critical: Enable CORS</span>
+                </div>
+                <div className="space-y-2">
+                  <p className="text-xs text-bolt-elements-textSecondary">
+                    To work with Bolt DIY, you MUST enable CORS in LM Studio:
+                  </p>
+                  <ol className="text-xs text-bolt-elements-textSecondary space-y-1 list-decimal list-inside ml-2">
+                    <li>In Server Settings, check "Enable CORS"</li>
+                    <li>Set Network Interface to "0.0.0.0" for external access</li>
+                    <li>
+                      Alternatively, use CLI:{' '}
+                      <code className="bg-bolt-elements-background-depth-4 px-1 rounded">lms server start --cors</code>
+                    </li>
+                  </ol>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Advantages */}
+          <div className="p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <div className="flex items-center gap-2 mb-2">
+              <CheckCircle className="w-4 h-4 text-blue-500" />
+              <span className="font-medium text-blue-500">LM Studio Advantages</span>
+            </div>
+            <ul className="text-xs text-bolt-elements-textSecondary space-y-1 list-disc list-inside">
+              <li>Built-in model downloader with search</li>
+              <li>Easy model switching and management</li>
+              <li>Built-in chat interface for testing</li>
+              <li>GGUF format support (most compatible)</li>
+              <li>Regular updates with new features</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* LocalAI Setup Section */}
+      <Card className="bg-bolt-elements-background-depth-2 shadow-sm">
+        <CardHeader className="pb-6">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-green-600/20 flex items-center justify-center ring-1 ring-green-500/30">
+              <Globe className="w-6 h-6 text-green-500" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-xl font-semibold text-bolt-elements-textPrimary">LocalAI Setup</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                Self-hosted OpenAI-compatible API server with extensive model support
+              </p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Installation */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Download className="w-4 h-4" />
+              Installation Options
+            </h4>
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+                <h5 className="font-medium text-bolt-elements-textPrimary mb-2">Quick Install</h5>
+                <div className="text-xs bg-bolt-elements-background-depth-4 p-3 rounded font-mono text-bolt-elements-textPrimary space-y-1">
+                  <div># One-line install</div>
+                  <div>curl https://localai.io/install.sh | sh</div>
+                </div>
+              </div>
+              <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+                <h5 className="font-medium text-bolt-elements-textPrimary mb-2">Docker (Recommended)</h5>
+                <div className="text-xs bg-bolt-elements-background-depth-4 p-3 rounded font-mono text-bolt-elements-textPrimary space-y-1">
+                  <div>docker run -p 8080:8080</div>
+                  <div>quay.io/go-skynet/local-ai:latest</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Configuration */}
+          <div className="space-y-4">
+            <h4 className="font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              Configuration
+            </h4>
+            <div className="p-4 rounded-lg bg-bolt-elements-background-depth-3">
+              <p className="text-sm text-bolt-elements-textSecondary mb-3">
+                LocalAI supports many model formats and provides a full OpenAI-compatible API.
+              </p>
+              <div className="text-xs bg-bolt-elements-background-depth-4 p-3 rounded font-mono text-bolt-elements-textPrimary space-y-1">
+                <div># Example configuration</div>
+                <div>models:</div>
+                <div>- name: llama3.1</div>
+                <div>backend: llama</div>
+                <div>parameters:</div>
+                <div>model: llama3.1.gguf</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Advantages */}
+          <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+            <div className="flex items-center gap-2 mb-2">
+              <CheckCircle className="w-4 h-4 text-green-500" />
+              <span className="font-medium text-green-500">LocalAI Advantages</span>
+            </div>
+            <ul className="text-xs text-bolt-elements-textSecondary space-y-1 list-disc list-inside">
+              <li>Full OpenAI API compatibility</li>
+              <li>Supports multiple model formats</li>
+              <li>Docker deployment option</li>
+              <li>Built-in model gallery</li>
+              <li>REST API for model management</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Performance Optimization */}
+      <Card className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 border border-purple-500/20 shadow-sm">
+        <CardHeader className="pb-4">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
+              <Activity className="w-5 h-5 text-purple-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Performance Optimization</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">Tips to improve local AI performance</p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid md:grid-cols-2 gap-4">
+            <div className="space-y-3">
+              <h4 className="font-medium text-bolt-elements-textPrimary">Hardware Optimizations</h4>
+              <ul className="text-sm text-bolt-elements-textSecondary space-y-2">
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                  <span>Use NVIDIA GPU with CUDA for 5-10x speedup</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                  <span>Increase RAM for larger context windows</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                  <span>Use SSD storage for faster model loading</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                  <span>Close other applications to free up RAM</span>
+                </li>
+              </ul>
+            </div>
+            <div className="space-y-3">
+              <h4 className="font-medium text-bolt-elements-textPrimary">Software Optimizations</h4>
+              <ul className="text-sm text-bolt-elements-textSecondary space-y-2">
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
+                  <span>Use smaller models for faster responses</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
+                  <span>Enable quantization (4-bit, 8-bit models)</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
+                  <span>Reduce context length for chat applications</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
+                  <span>Use streaming responses for better UX</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Alternative Options */}
+      <Card className="bg-bolt-elements-background-depth-2 shadow-sm">
+        <CardHeader className="pb-6">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center ring-1 ring-orange-500/30">
+              <Wifi className="w-6 h-6 text-orange-500" />
+            </div>
+            <div>
+              <h3 className="text-xl font-semibold text-bolt-elements-textPrimary">Alternative Options</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                Other local AI solutions and cloud alternatives
+              </p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="space-y-4">
+              <h4 className="font-medium text-bolt-elements-textPrimary">Other Local Solutions</h4>
+              <div className="space-y-3">
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Package className="w-4 h-4 text-blue-500" />
+                    <span className="font-medium text-bolt-elements-textPrimary">Jan.ai</span>
+                  </div>
+                  <p className="text-xs text-bolt-elements-textSecondary">
+                    Modern interface with built-in model marketplace
+                  </p>
+                </div>
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Terminal className="w-4 h-4 text-green-500" />
+                    <span className="font-medium text-bolt-elements-textPrimary">Oobabooga</span>
+                  </div>
+                  <p className="text-xs text-bolt-elements-textSecondary">
+                    Advanced text generation web UI with extensions
+                  </p>
+                </div>
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Cable className="w-4 h-4 text-purple-500" />
+                    <span className="font-medium text-bolt-elements-textPrimary">KoboldAI</span>
+                  </div>
+                  <p className="text-xs text-bolt-elements-textSecondary">Focus on creative writing and storytelling</p>
+                </div>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <h4 className="font-medium text-bolt-elements-textPrimary">Cloud Alternatives</h4>
+              <div className="space-y-3">
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Globe className="w-4 h-4 text-orange-500" />
+                    <span className="font-medium text-bolt-elements-textPrimary">OpenRouter</span>
+                  </div>
+                  <p className="text-xs text-bolt-elements-textSecondary">Access to 100+ models through unified API</p>
+                </div>
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Server className="w-4 h-4 text-red-500" />
+                    <span className="font-medium text-bolt-elements-textPrimary">Together AI</span>
+                  </div>
+                  <p className="text-xs text-bolt-elements-textSecondary">Fast inference with open-source models</p>
+                </div>
+                <div className="p-3 rounded-lg bg-bolt-elements-background-depth-3">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Activity className="w-4 h-4 text-pink-500" />
+                    <span className="font-medium text-bolt-elements-textPrimary">Groq</span>
+                  </div>
+                  <p className="text-xs text-bolt-elements-textSecondary">Ultra-fast LPU inference for Llama models</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default SetupGuide;