github-to-mcp-monorepo 1.0.0

package/apps/web/components/docker/DockerExport.tsx

@@ -0,0 +1,690 @@
+/**
+ * Docker Export Component - Generate Dockerfile and docker-compose for MCP servers
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Container,
+  Download,
+  Copy,
+  Check,
+  Settings,
+  Code,
+  FileText,
+  Terminal,
+  ChevronDown,
+  ChevronUp,
+  Play,
+  Package,
+  Shield,
+  Cpu,
+  HardDrive,
+  Network,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
+import type { DockerConfig, DockerExportOptions, ConversionResult } from '@/types';
+
+interface DockerExportProps {
+  result: ConversionResult;
+  serverName?: string;
+  onExport?: (config: DockerConfig) => void;
+}
+
+const BASE_IMAGES = [
+  { value: 'node:20-alpine', label: 'Node.js 20 Alpine', size: '~180MB' },
+  { value: 'node:20-slim', label: 'Node.js 20 Slim', size: '~240MB' },
+  { value: 'node:20', label: 'Node.js 20', size: '~1GB' },
+  { value: 'python:3.11-alpine', label: 'Python 3.11 Alpine', size: '~50MB' },
+  { value: 'python:3.11-slim', label: 'Python 3.11 Slim', size: '~150MB' },
+  { value: 'python:3.11', label: 'Python 3.11', size: '~900MB' },
+];
+
+const DEFAULT_OPTIONS: DockerExportOptions = {
+  baseImage: 'node:20-alpine',
+  port: 3000,
+  exposePorts: [3000],
+  envVars: {},
+  volumes: [],
+  healthCheck: true,
+  multiStage: true,
+  runAsNonRoot: true,
+  labels: true,
+};
+
+export default function DockerExport({
+  result,
+  serverName = 'mcp-server',
+  onExport,
+}: DockerExportProps) {
+  const [options, setOptions] = useState<DockerExportOptions>(DEFAULT_OPTIONS);
+  const [activeTab, setActiveTab] = useState<'dockerfile' | 'compose' | 'env' | 'commands'>('dockerfile');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(true);
+
+  const sanitizedServerName = useMemo(() => 
+    serverName.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-'),
+    [serverName]
+  );
+
+  // Generate Dockerfile content
+  const dockerfile = useMemo(() => {
+    const isNode = options.baseImage.includes('node');
+    const isPython = options.baseImage.includes('python');
+    const isAlpine = options.baseImage.includes('alpine');
+    
+    let content = `# ${sanitizedServerName} MCP Server
+# Generated by github-to-mcp
+# https://github-to-mcp.dev
+
+`;
+
+    if (options.multiStage && isNode) {
+      content += `# Build stage
+FROM ${options.baseImage} AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy source files
+COPY . .
+
+# Build if needed
+RUN npm run build --if-present
+
+# Production stage
+FROM ${options.baseImage} AS production
+
+`;
+    } else {
+      content += `FROM ${options.baseImage}
+
+`;
+    }
+
+    if (options.labels) {
+      content += `# Labels
+LABEL org.opencontainers.image.title="${sanitizedServerName}"
+LABEL org.opencontainers.image.description="MCP Server with ${result.tools.length} tools"
+LABEL org.opencontainers.image.source="${result.repository.url}"
+LABEL org.opencontainers.image.vendor="github-to-mcp"
+
+`;
+    }
+
+    content += `WORKDIR /app
+
+`;
+
+    // Install dependencies for Alpine
+    if (isAlpine && !options.multiStage) {
+      if (isNode) {
+        content += `# Install dependencies
+RUN apk add --no-cache dumb-init
+
+`;
+      } else if (isPython) {
+        content += `# Install dependencies
+RUN apk add --no-cache gcc musl-dev libffi-dev
+
+`;
+      }
+    }
+
+    // Non-root user
+    if (options.runAsNonRoot) {
+      if (isAlpine) {
+        content += `# Create non-root user
+RUN addgroup -g 1001 -S mcpuser && \\
+    adduser -S -D -H -u 1001 -s /sbin/nologin -G mcpuser mcpuser
+
+`;
+      } else {
+        content += `# Create non-root user
+RUN groupadd -g 1001 mcpuser && \\
+    useradd -r -u 1001 -g mcpuser mcpuser
+
+`;
+      }
+    }
+
+    // Copy files
+    if (options.multiStage && isNode) {
+      content += `# Copy from builder
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/package.json ./
+
+`;
+    } else if (isNode) {
+      content += `# Copy package files and install
+COPY package*.json ./
+RUN npm ci --only=production
+
+# Copy application
+COPY . .
+
+`;
+    } else if (isPython) {
+      content += `# Copy requirements and install
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application
+COPY . .
+
+`;
+    }
+
+    // Environment variables
+    if (Object.keys(options.envVars).length > 0) {
+      content += `# Environment variables\n`;
+      Object.entries(options.envVars).forEach(([key, value]) => {
+        content += `ENV ${key}=${value}\n`;
+      });
+      content += '\n';
+    }
+
+    content += `# Set environment
+ENV NODE_ENV=production
+ENV PORT=${options.port}
+
+`;
+
+    // Expose ports
+    if (options.exposePorts.length > 0) {
+      content += `# Expose ports\n`;
+      options.exposePorts.forEach(port => {
+        content += `EXPOSE ${port}\n`;
+      });
+      content += '\n';
+    }
+
+    // Health check
+    if (options.healthCheck) {
+      content += `# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \\
+    CMD ${isNode ? 'node -e "require(\'http\').get(\'http://localhost:' + options.port + '/health\', (r) => process.exit(r.statusCode === 200 ? 0 : 1))"' : 'curl -f http://localhost:' + options.port + '/health || exit 1'}
+
+`;
+    }
+
+    // Set user
+    if (options.runAsNonRoot) {
+      content += `# Run as non-root user
+USER mcpuser
+
+`;
+    }
+
+    // Entrypoint
+    if (isNode) {
+      if (isAlpine) {
+        content += `# Start server
+ENTRYPOINT ["dumb-init", "--"]
+CMD ["node", "dist/index.js"]
+`;
+      } else {
+        content += `# Start server
+CMD ["node", "dist/index.js"]
+`;
+      }
+    } else if (isPython) {
+      content += `# Start server
+CMD ["python", "-m", "server"]
+`;
+    }
+
+    return content;
+  }, [options, sanitizedServerName, result]);
+
+  // Generate docker-compose content
+  const dockerCompose = useMemo(() => {
+    let content = `# ${sanitizedServerName} Docker Compose
+# Generated by github-to-mcp
+
+version: '3.8'
+
+services:
+  ${sanitizedServerName}:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: ${sanitizedServerName}
+    restart: unless-stopped
+    ports:
+`;
+
+    options.exposePorts.forEach(port => {
+      content += `      - "${port}:${port}"\n`;
+    });
+
+    content += `    environment:
+      - NODE_ENV=production
+`;
+
+    Object.entries(options.envVars).forEach(([key, value]) => {
+      content += `      - ${key}=${value}\n`;
+    });
+
+    if (options.volumes.length > 0) {
+      content += `    volumes:\n`;
+      options.volumes.forEach(vol => {
+        content += `      - ${vol}\n`;
+      });
+    }
+
+    if (options.healthCheck) {
+      content += `    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:${options.port}/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+`;
+    }
+
+    content += `    networks:
+      - mcp-network
+
+networks:
+  mcp-network:
+    driver: bridge
+`;
+
+    return content;
+  }, [options, sanitizedServerName]);
+
+  // Generate .env.example content
+  const envExample = useMemo(() => {
+    let content = `# ${sanitizedServerName} Environment Variables
+# Copy this file to .env and fill in the values
+
+# Server Configuration
+PORT=${options.port}
+NODE_ENV=production
+
+# API Keys (if needed)
+# OPENAI_API_KEY=sk-...
+# ANTHROPIC_API_KEY=sk-ant-...
+
+# Custom Environment Variables
+`;
+
+    Object.entries(options.envVars).forEach(([key, value]) => {
+      content += `${key}=${value}\n`;
+    });
+
+    return content;
+  }, [options, sanitizedServerName]);
+
+  // Generate build/run commands
+  const commands = useMemo(() => ({
+    build: `docker build -t ${sanitizedServerName}:latest .`,
+    run: `docker run -d --name ${sanitizedServerName} -p ${options.port}:${options.port} ${sanitizedServerName}:latest`,
+    stop: `docker stop ${sanitizedServerName}`,
+    logs: `docker logs -f ${sanitizedServerName}`,
+    compose_up: `docker-compose up -d`,
+    compose_down: `docker-compose down`,
+    compose_logs: `docker-compose logs -f`,
+  }), [sanitizedServerName, options.port]);
+
+  const copyToClipboard = useCallback(async (text: string, field: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopiedField(field);
+    setTimeout(() => setCopiedField(null), 2000);
+  }, []);
+
+  const downloadFile = useCallback((content: string, filename: string) => {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  const downloadAll = useCallback(() => {
+    downloadFile(dockerfile, 'Dockerfile');
+    downloadFile(dockerCompose, 'docker-compose.yml');
+    downloadFile(envExample, '.env.example');
+    
+    if (onExport) {
+      onExport({
+        dockerfile,
+        dockerCompose,
+        envExample,
+        buildCommand: commands.build,
+        runCommand: commands.run,
+        serverName: sanitizedServerName,
+      });
+    }
+  }, [dockerfile, dockerCompose, envExample, commands, downloadFile, onExport, sanitizedServerName]);
+
+  const TabButton = ({ id, label, icon: Icon }: { id: typeof activeTab; label: string; icon: typeof FileText }) => (
+    <button
+      onClick={() => setActiveTab(id)}
+      className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+        activeTab === id
+          ? 'bg-white text-black'
+          : 'text-neutral-400 hover:text-white hover:bg-white/5'
+      }`}
+    >
+      <Icon className="w-4 h-4" />
+      {label}
+    </button>
+  );
+
+  const CopyButton = ({ text, field }: { text: string; field: string }) => (
+    <button
+      onClick={() => copyToClipboard(text, field)}
+      className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+      title="Copy to clipboard"
+    >
+      {copiedField === field ? (
+        <Check className="w-4 h-4 text-green-400" />
+      ) : (
+        <Copy className="w-4 h-4" />
+      )}
+    </button>
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex items-center justify-between"
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
+            <Container className="w-6 h-6 text-blue-400" />
+          </div>
+          <div>
+            <h2 className="text-xl font-semibold text-white">Docker Export</h2>
+            <p className="text-sm text-neutral-400">
+              Generate production-ready Docker configuration
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={downloadAll}
+          className="flex items-center gap-2 px-4 py-2 bg-white text-black rounded-lg font-medium hover:bg-neutral-200 transition-colors"
+        >
+          <Download className="w-4 h-4" />
+          Download All
+        </button>
+      </motion.div>
+
+      {/* Configuration Options */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="rounded-xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl overflow-hidden"
+      >
+        <button
+          onClick={() => setShowAdvanced(!showAdvanced)}
+          className="w-full p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <Settings className="w-5 h-5 text-neutral-400" />
+            <span className="font-medium text-white">Configuration Options</span>
+          </div>
+          {showAdvanced ? (
+            <ChevronUp className="w-5 h-5 text-neutral-400" />
+          ) : (
+            <ChevronDown className="w-5 h-5 text-neutral-400" />
+          )}
+        </button>
+
+        <AnimatePresence>
+          {showAdvanced && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              className="border-t border-neutral-800"
+            >
+              <div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+                {/* Base Image */}
+                <div>
+                  <label className="block text-sm font-medium text-neutral-300 mb-2">
+                    <Package className="w-4 h-4 inline mr-1" />
+                    Base Image
+                  </label>
+                  <select
+                    value={options.baseImage}
+                    onChange={(e) => setOptions(prev => ({ ...prev, baseImage: e.target.value }))}
+                    className="w-full p-2 rounded-lg bg-black border border-neutral-700 text-white text-sm focus:outline-none focus:border-white/50"
+                  >
+                    {BASE_IMAGES.map(img => (
+                      <option key={img.value} value={img.value}>
+                        {img.label} ({img.size})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Port */}
+                <div>
+                  <label className="block text-sm font-medium text-neutral-300 mb-2">
+                    <Network className="w-4 h-4 inline mr-1" />
+                    Port
+                  </label>
+                  <input
+                    type="number"
+                    value={options.port}
+                    onChange={(e) => setOptions(prev => ({ 
+                      ...prev, 
+                      port: parseInt(e.target.value) || 3000,
+                      exposePorts: [parseInt(e.target.value) || 3000]
+                    }))}
+                    className="w-full p-2 rounded-lg bg-black border border-neutral-700 text-white text-sm focus:outline-none focus:border-white/50"
+                    min={1}
+                    max={65535}
+                  />
+                </div>
+
+                {/* Toggle Options */}
+                <div className="md:col-span-2 grid grid-cols-2 md:grid-cols-4 gap-3">
+                  {[
+                    { key: 'multiStage', label: 'Multi-stage Build', icon: Cpu },
+                    { key: 'healthCheck', label: 'Health Check', icon: Shield },
+                    { key: 'runAsNonRoot', label: 'Non-root User', icon: Shield },
+                    { key: 'labels', label: 'OCI Labels', icon: FileText },
+                  ].map(({ key, label, icon: Icon }) => (
+                    <button
+                      key={key}
+                      onClick={() => setOptions(prev => ({ ...prev, [key]: !prev[key as keyof DockerExportOptions] }))}
+                      className={`flex items-center gap-2 p-3 rounded-lg border transition-colors ${
+                        options[key as keyof DockerExportOptions]
+                          ? 'bg-white/10 border-white/30 text-white'
+                          : 'bg-black/30 border-neutral-700 text-neutral-400'
+                      }`}
+                    >
+                      <Icon className="w-4 h-4" />
+                      <span className="text-sm">{label}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+
+      {/* File Tabs */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+        className="rounded-xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl overflow-hidden"
+      >
+        <div className="p-3 border-b border-neutral-800 flex items-center justify-between">
+          <div className="flex gap-2">
+            <TabButton id="dockerfile" label="Dockerfile" icon={FileText} />
+            <TabButton id="compose" label="Compose" icon={HardDrive} />
+            <TabButton id="env" label=".env" icon={Settings} />
+            <TabButton id="commands" label="Commands" icon={Terminal} />
+          </div>
+          <button
+            onClick={() => setShowPreview(!showPreview)}
+            className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+            title={showPreview ? 'Hide preview' : 'Show preview'}
+          >
+            {showPreview ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+          </button>
+        </div>
+
+        <AnimatePresence mode="wait">
+          {showPreview && (
+            <motion.div
+              key={activeTab}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              className="p-4"
+            >
+              {activeTab === 'dockerfile' && (
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-sm text-neutral-400 font-mono">Dockerfile</span>
+                    <div className="flex gap-2">
+                      <CopyButton text={dockerfile} field="dockerfile" />
+                      <button
+                        onClick={() => downloadFile(dockerfile, 'Dockerfile')}
+                        className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                        title="Download"
+                      >
+                        <Download className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                  <pre className="p-4 rounded-lg bg-black border border-neutral-800 overflow-x-auto text-sm font-mono text-neutral-300 max-h-96">
+                    <code>{dockerfile}</code>
+                  </pre>
+                </div>
+              )}
+
+              {activeTab === 'compose' && (
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-sm text-neutral-400 font-mono">docker-compose.yml</span>
+                    <div className="flex gap-2">
+                      <CopyButton text={dockerCompose} field="compose" />
+                      <button
+                        onClick={() => downloadFile(dockerCompose, 'docker-compose.yml')}
+                        className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                        title="Download"
+                      >
+                        <Download className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                  <pre className="p-4 rounded-lg bg-black border border-neutral-800 overflow-x-auto text-sm font-mono text-neutral-300 max-h-96">
+                    <code>{dockerCompose}</code>
+                  </pre>
+                </div>
+              )}
+
+              {activeTab === 'env' && (
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-sm text-neutral-400 font-mono">.env.example</span>
+                    <div className="flex gap-2">
+                      <CopyButton text={envExample} field="env" />
+                      <button
+                        onClick={() => downloadFile(envExample, '.env.example')}
+                        className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                        title="Download"
+                      >
+                        <Download className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                  <pre className="p-4 rounded-lg bg-black border border-neutral-800 overflow-x-auto text-sm font-mono text-neutral-300 max-h-96">
+                    <code>{envExample}</code>
+                  </pre>
+                </div>
+              )}
+
+              {activeTab === 'commands' && (
+                <div className="space-y-3">
+                  {Object.entries(commands).map(([key, command]) => (
+                    <div key={key} className="flex items-center gap-3">
+                      <span className="text-xs text-neutral-500 w-24 flex-shrink-0">
+                        {key.replace('_', ' ')}
+                      </span>
+                      <code className="flex-1 p-2 rounded bg-black border border-neutral-800 text-sm font-mono text-green-400">
+                        {command}
+                      </code>
+                      <CopyButton text={command} field={key} />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+
+      {/* Quick Start Guide */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+        className="rounded-xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-4"
+      >
+        <h3 className="text-sm font-medium text-white mb-3 flex items-center gap-2">
+          <Play className="w-4 h-4 text-green-400" />
+          Quick Start
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+          <div className="flex items-start gap-3">
+            <div className="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center text-xs text-white flex-shrink-0">
+              1
+            </div>
+            <div>
+              <div className="text-neutral-300 font-medium">Download files</div>
+              <div className="text-neutral-500 text-xs">Click "Download All" button</div>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <div className="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center text-xs text-white flex-shrink-0">
+              2
+            </div>
+            <div>
+              <div className="text-neutral-300 font-medium">Build image</div>
+              <div className="text-neutral-500 text-xs font-mono">{commands.build}</div>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <div className="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center text-xs text-white flex-shrink-0">
+              3
+            </div>
+            <div>
+              <div className="text-neutral-300 font-medium">Run container</div>
+              <div className="text-neutral-500 text-xs font-mono">{commands.compose_up}</div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/apps/web/components/docker/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Docker components barrel export
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+export { default as DockerExport } from './DockerExport';