github-to-mcp-monorepo 1.0.0

package/apps/web/components/convert/OneClickInstall.tsx

@@ -0,0 +1,224 @@
+/**
+ * One-Click Install Component - Quick installation commands for MCP servers
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Copy, Check, Terminal, Zap, ExternalLink, ChevronDown } from 'lucide-react';
+import type { ConversionResult } from '@/types';
+
+interface OneClickInstallProps {
+  result: ConversionResult;
+  onCopy?: (text: string, id: string) => void;
+  copied?: string | null;
+}
+
+const PLATFORMS = {
+  claude: {
+    name: 'Claude Desktop',
+    icon: Terminal,
+    color: 'from-orange-500 to-red-600',
+    configPath: {
+      mac: '~/Library/Application Support/Claude/claude_desktop_config.json',
+      win: '%APPDATA%\\Claude\\claude_desktop_config.json',
+      linux: '~/.config/Claude/claude_desktop_config.json',
+    },
+    docsUrl: 'https://docs.anthropic.com/claude/docs/claude-desktop',
+  },
+  cursor: {
+    name: 'Cursor',
+    icon: Terminal,
+    color: 'from-blue-500 to-cyan-600',
+    configPath: {
+      mac: '~/Library/Application Support/Cursor/config.json',
+      win: '%APPDATA%\\Cursor\\config.json',
+      linux: '~/.config/Cursor/config.json',
+    },
+    docsUrl: 'https://cursor.sh/docs/mcp',
+  },
+  vscode: {
+    name: 'VS Code',
+    icon: Terminal,
+    color: 'from-blue-600 to-purple-600',
+    configPath: {
+      mac: '~/Library/Application Support/Code/User/settings.json',
+      win: '%APPDATA%\\Code\\User\\settings.json',
+      linux: '~/.config/Code/User/settings.json',
+    },
+    docsUrl: 'https://code.visualstudio.com/docs',
+  },
+};
+
+export default function OneClickInstall({ result, onCopy, copied }: OneClickInstallProps) {
+  const [selectedPlatform, setSelectedPlatform] = useState<keyof typeof PLATFORMS>('claude');
+  const [internalCopied, setInternalCopied] = useState<string | null>(null);
+  const [showManual, setShowManual] = useState(false);
+
+  const displayCopied = copied !== undefined ? copied : internalCopied;
+
+  const handleCopy = useCallback(async (text: string, id: string) => {
+    if (onCopy) {
+      onCopy(text, id);
+    } else {
+      await navigator.clipboard.writeText(text);
+      setInternalCopied(id);
+      setTimeout(() => setInternalCopied(null), 2000);
+    }
+  }, [onCopy]);
+
+  const getInstallCommand = (platform: keyof typeof PLATFORMS) => {
+    const serverName = result.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    return `npx @nirholas/github-to-mcp install ${result.repository.url} --${platform}`;
+  };
+
+  const getManualConfig = (platform: keyof typeof PLATFORMS) => {
+    const serverName = result.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    return `{
+  "mcpServers": {
+    "${serverName}": {
+      "command": "node",
+      "args": ["path/to/${serverName}-server.js"]
+    }
+  }
+}`;
+  };
+
+  const platformInfo = PLATFORMS[selectedPlatform];
+
+  return (
+    <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl overflow-hidden">
+      {/* Header */}
+      <div className="p-6 border-b border-neutral-800">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-white/10 to-white/5 flex items-center justify-center">
+            <Zap className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white">One-Click Install</h3>
+            <p className="text-sm text-neutral-400">Add to your MCP client instantly</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Platform selector */}
+      <div className="p-4 border-b border-neutral-800 bg-black/20">
+        <div className="flex gap-2">
+          {(Object.keys(PLATFORMS) as Array<keyof typeof PLATFORMS>).map((platform) => {
+            const info = PLATFORMS[platform];
+            const Icon = info.icon;
+            return (
+              <button
+                key={platform}
+                onClick={() => setSelectedPlatform(platform)}
+                className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
+                  selectedPlatform === platform
+                    ? `bg-gradient-to-r ${info.color} text-white shadow-lg`
+                    : 'bg-white/5 text-neutral-400 hover:text-white hover:bg-white/10'
+                }`}
+              >
+                <Icon className="w-4 h-4" />
+                {info.name}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Install command */}
+      <div className="p-6 space-y-4">
+        {/* One-click install */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label className="text-sm font-medium text-white flex items-center gap-2">
+              <Terminal className="w-4 h-4" />
+              CLI Install Command
+            </label>
+            <span className="text-xs text-neutral-500">Recommended</span>
+          </div>
+
+          <div className="relative group">
+            <div className="flex items-center gap-2 p-4 bg-black/40 border border-neutral-800 rounded-xl font-mono text-sm">
+              <span className="text-neutral-500">$</span>
+              <code className="flex-1 text-green-400 overflow-x-auto whitespace-nowrap scrollbar-thin">
+                {getInstallCommand(selectedPlatform)}
+              </code>
+              <button
+                onClick={() => handleCopy(getInstallCommand(selectedPlatform), 'install-cmd')}
+                className="flex-shrink-0 p-2 hover:bg-white/10 rounded-lg transition-colors"
+                title="Copy command"
+              >
+                {displayCopied === 'install-cmd' ? (
+                  <Check className="w-4 h-4 text-green-400" />
+                ) : (
+                  <Copy className="w-4 h-4 text-neutral-400" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <p className="mt-2 text-xs text-neutral-500">
+            This command will download and configure the MCP server automatically
+          </p>
+        </div>
+
+        {/* Manual config option */}
+        <div className="p-4 rounded-xl bg-gradient-to-br from-white/5 to-transparent border border-neutral-800 relative z-10">
+          <button
+            onClick={() => setShowManual(!showManual)}
+            className="flex items-center justify-between w-full text-sm text-neutral-300 hover:text-white transition-colors"
+          >
+            <span className="font-medium">Manual Configuration</span>
+            <ChevronDown className={`w-4 h-4 transition-transform ${showManual ? 'rotate-180' : ''}`} />
+          </button>
+
+          {showManual && (
+            <div className="mt-4 space-y-3">
+              <div>
+                <div className="text-xs text-neutral-500 mb-2">Config file location:</div>
+                <code className="block p-2 bg-black/40 rounded text-xs text-neutral-300 overflow-x-auto">
+                  {platformInfo.configPath.mac}
+                </code>
+              </div>
+
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <div className="text-xs text-neutral-500">Configuration:</div>
+                  <button
+                    onClick={() => handleCopy(getManualConfig(selectedPlatform), 'manual-config')}
+                    className="text-xs text-white/60 hover:text-white transition-colors flex items-center gap-1"
+                  >
+                    {displayCopied === 'manual-config' ? (
+                      <>
+                        <Check className="w-3 h-3" /> Copied
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="w-3 h-3" /> Copy
+                      </>
+                    )}
+                  </button>
+                </div>
+                <pre className="p-3 bg-black/40 rounded text-xs text-neutral-300 overflow-x-auto">
+                  {getManualConfig(selectedPlatform)}
+                </pre>
+              </div>
+
+              <a
+                href={platformInfo.docsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 transition-colors"
+              >
+                <ExternalLink className="w-3 h-3" />
+                View {platformInfo.name} documentation
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/web/components/convert/ToolCard.tsx

@@ -0,0 +1,189 @@
+/**
+ * Tool Card Component - Displays individual tool information
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Check,
+  Code2,
+  FileText,
+} from 'lucide-react';
+import type { Tool } from '@/types';
+import { SOURCE_TYPE_LABELS } from '@/lib/constants';
+
+interface ToolCardProps {
+  tool: Tool;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onCopy: (text: string, id: string) => void;
+  copied: string | null;
+}
+
+export default function ToolCard({ tool, isExpanded, onToggle, onCopy, copied }: ToolCardProps) {
+  const sourceInfo = SOURCE_TYPE_LABELS[tool.source?.type || 'unknown'] || { label: 'Unknown', color: 'gray' };
+  
+  const hasParams = tool.inputSchema?.properties && Object.keys(tool.inputSchema.properties).length > 0;
+  const requiredParams = tool.inputSchema?.required || [];
+
+  return (
+    <motion.div
+      layout
+      className="rounded-xl border border-neutral-800 bg-black/30 overflow-hidden"
+    >
+      {/* Header */}
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between p-4 text-left hover:bg-white/5 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-white/5 border border-neutral-700 flex items-center justify-center">
+            <Code2 className="w-4 h-4 text-white" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="font-mono font-medium text-white">{tool.name}</span>
+              {hasParams && (
+                <span className="text-xs text-neutral-500">
+                  ({Object.keys(tool.inputSchema.properties || {}).length} params)
+                </span>
+              )}
+            </div>
+            <p className="text-sm text-neutral-400 line-clamp-1 mt-0.5">
+              {tool.description}
+            </p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <span className={`px-2 py-1 text-xs rounded bg-white/5 text-neutral-400`}>
+            {sourceInfo.label}
+          </span>
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4 text-neutral-500" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-neutral-500" />
+          )}
+        </div>
+      </button>
+
+      {/* Expanded content */}
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="p-4 pt-0 space-y-4">
+              {/* Description */}
+              <div className="p-3 bg-neutral-900/50 rounded-lg border border-neutral-800">
+                <div className="flex items-center gap-2 mb-2">
+                  <FileText className="w-4 h-4 text-neutral-500" />
+                  <span className="text-xs font-medium text-neutral-400">Description</span>
+                </div>
+                <p className="text-sm text-neutral-300">{tool.description}</p>
+              </div>
+
+              {/* Parameters */}
+              {hasParams && (
+                <div className="p-3 bg-neutral-900/50 rounded-lg border border-neutral-800">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2">
+                      <Code2 className="w-4 h-4 text-neutral-500" />
+                      <span className="text-xs font-medium text-neutral-400">Parameters</span>
+                    </div>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onCopy(JSON.stringify(tool.inputSchema, null, 2), `schema-${tool.name}`);
+                      }}
+                      className="flex items-center gap-1 px-2 py-1 text-xs text-neutral-400 hover:text-white hover:bg-white/10 rounded transition-colors"
+                    >
+                      {copied === `schema-${tool.name}` ? (
+                        <>
+                          <Check className="w-3 h-3 text-green-400" />
+                          <span className="text-green-400">Copied</span>
+                        </>
+                      ) : (
+                        <>
+                          <Copy className="w-3 h-3" />
+                          <span>Copy Schema</span>
+                        </>
+                      )}
+                    </button>
+                  </div>
+                  
+                  <div className="space-y-2">
+                    {Object.entries(tool.inputSchema.properties || {}).map(([key, value]) => {
+                      const isRequired = requiredParams.includes(key);
+                      const paramValue = value as { type: string; description?: string; enum?: string[]; default?: unknown };
+                      
+                      return (
+                        <div
+                          key={key}
+                          className="flex items-start gap-3 p-2 rounded bg-black/30"
+                        >
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <code className="text-sm font-mono text-white">{key}</code>
+                              <span className="text-xs text-neutral-500">{paramValue.type}</span>
+                              {isRequired && (
+                                <span className="px-1.5 py-0.5 text-[10px] bg-red-500/20 text-red-400 rounded">
+                                  required
+                                </span>
+                              )}
+                            </div>
+                            {paramValue.description && (
+                              <p className="text-xs text-neutral-400 mt-1">{paramValue.description}</p>
+                            )}
+                            {paramValue.enum && (
+                              <div className="flex flex-wrap gap-1 mt-2">
+                                {paramValue.enum.map((val) => (
+                                  <span
+                                    key={val}
+                                    className="px-1.5 py-0.5 text-[10px] bg-white/5 text-neutral-400 rounded font-mono"
+                                  >
+                                    {val}
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                            {paramValue.default !== undefined && (
+                              <p className="text-xs text-neutral-500 mt-1">
+                                Default: <code className="text-neutral-400">{JSON.stringify(paramValue.default)}</code>
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {/* Source info */}
+              {tool.source?.file && (
+                <div className="flex items-center gap-2 text-xs text-neutral-500">
+                  <span>Source:</span>
+                  <code className="px-1.5 py-0.5 bg-white/5 rounded">
+                    {tool.source.file}
+                    {tool.source.line && `:${tool.source.line}`}
+                  </code>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}

package/apps/web/components/convert/TryInPlayground.tsx

@@ -0,0 +1,242 @@
+/**
+ * Try In Playground Component - CTA to test generated tools
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Play,
+  Terminal,
+  Sparkles,
+  ChevronRight,
+  Share2,
+  Copy,
+  Check,
+  ExternalLink,
+  Loader2,
+  Package,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { ConversionResult, Tool } from '@/types';
+import { usePlaygroundNavigation, usePlaygroundSharing } from '@/hooks/use-playground-store';
+
+interface TryInPlaygroundProps {
+  /** Conversion result containing generated code and tools */
+  result: ConversionResult;
+  /** Optional CSS class name */
+  className?: string;
+  /** Whether to show a compact version */
+  compact?: boolean;
+}
+
+export default function TryInPlayground({ 
+  result, 
+  className = '',
+  compact = false,
+}: TryInPlaygroundProps) {
+  const router = useRouter();
+  const { navigateToPlayground } = usePlaygroundNavigation();
+  const { copyShareLink } = usePlaygroundSharing();
+  
+  const [copied, setCopied] = useState(false);
+  const [isNavigating, setIsNavigating] = useState(false);
+
+  // Get preview of tools (first 3)
+  const previewTools = useMemo(() => {
+    return result.tools.slice(0, 3);
+  }, [result.tools]);
+
+  const remainingCount = result.tools.length - previewTools.length;
+
+  const handleOpenPlayground = useCallback(() => {
+    setIsNavigating(true);
+    navigateToPlayground(result);
+  }, [navigateToPlayground, result]);
+
+  const handleCopyShareLink = useCallback(async () => {
+    // First store the result, then copy
+    navigateToPlayground(result);
+    const success = await copyShareLink();
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+    // Navigate back - the state is preserved
+    router.back();
+  }, [navigateToPlayground, result, copyShareLink, router]);
+
+  if (compact) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className={`flex items-center gap-3 ${className}`}
+      >
+        <Button
+          onClick={handleOpenPlayground}
+          disabled={isNavigating}
+          className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-medium"
+        >
+          {isNavigating ? (
+            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+          ) : (
+            <Play className="w-4 h-4 mr-2" />
+          )}
+          Try in Playground
+        </Button>
+        
+        <span className="text-sm text-neutral-400">
+          {result.tools.length} tool{result.tools.length !== 1 ? 's' : ''} available
+        </span>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+      className={`rounded-2xl border border-green-500/30 bg-gradient-to-br from-green-500/10 via-emerald-500/5 to-transparent p-6 ${className}`}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4 mb-6">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
+            <Terminal className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center gap-2">
+              Test Your Tools
+              <span className="px-2 py-0.5 text-xs rounded-full bg-green-500/20 text-green-400">
+                Interactive
+              </span>
+            </h3>
+            <p className="text-sm text-neutral-400">
+              Try out generated tools in the playground
+            </p>
+          </div>
+        </div>
+
+        <Sparkles className="w-5 h-5 text-green-400 animate-pulse" />
+      </div>
+
+      {/* Tool Preview */}
+      {previewTools.length > 0 && (
+        <div className="mb-6">
+          <div className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-3">
+            Available Tools
+          </div>
+          <div className="space-y-2">
+            {previewTools.map((tool) => (
+              <ToolPreviewItem key={tool.name} tool={tool} />
+            ))}
+            
+            {remainingCount > 0 && (
+              <div className="flex items-center gap-2 py-2 px-3 text-sm text-neutral-400">
+                <Package className="w-4 h-4" />
+                <span>+ {remainingCount} more tool{remainingCount !== 1 ? 's' : ''}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex flex-col sm:flex-row gap-3">
+        <Button
+          onClick={handleOpenPlayground}
+          disabled={isNavigating}
+          className="flex-1 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-medium py-3"
+          size="lg"
+        >
+          {isNavigating ? (
+            <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+          ) : (
+            <Play className="w-5 h-5 mr-2" />
+          )}
+          Open in Playground
+          <ChevronRight className="w-4 h-4 ml-1" />
+        </Button>
+
+        <Button
+          onClick={handleCopyShareLink}
+          variant="outline"
+          className="sm:flex-initial"
+          size="lg"
+        >
+          {copied ? (
+            <>
+              <Check className="w-4 h-4 mr-2 text-green-400" />
+              Copied!
+            </>
+          ) : (
+            <>
+              <Share2 className="w-4 h-4 mr-2" />
+              Share
+            </>
+          )}
+        </Button>
+      </div>
+
+      {/* Features list */}
+      <div className="mt-6 pt-6 border-t border-neutral-800">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+          <FeatureItem
+            icon={<Terminal className="w-4 h-4" />}
+            text="Execute tools live"
+          />
+          <FeatureItem
+            icon={<ExternalLink className="w-4 h-4" />}
+            text="View JSON responses"
+          />
+          <FeatureItem
+            icon={<Share2 className="w-4 h-4" />}
+            text="Share with others"
+          />
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ===== Sub-components =====
+
+function ToolPreviewItem({ tool }: { tool: Tool }) {
+  const paramCount = Object.keys(tool.inputSchema?.properties || {}).length;
+  
+  return (
+    <div className="flex items-center gap-3 py-2 px-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors">
+      <div className="w-8 h-8 rounded-lg bg-neutral-800 flex items-center justify-center flex-shrink-0">
+        <Terminal className="w-4 h-4 text-neutral-400" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="font-medium text-white text-sm truncate">
+          {tool.name}
+        </div>
+        <div className="text-xs text-neutral-500 truncate">
+          {tool.description || 'No description'}
+        </div>
+      </div>
+      <div className="flex items-center gap-2 text-xs text-neutral-500">
+        <span className="px-1.5 py-0.5 rounded bg-neutral-800">
+          {paramCount} param{paramCount !== 1 ? 's' : ''}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function FeatureItem({ icon, text }: { icon: React.ReactNode; text: string }) {
+  return (
+    <div className="flex items-center gap-2 text-neutral-400">
+      <span className="text-green-400">{icon}</span>
+      {text}
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Convert Components Index
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+export { default as ConversionResult } from './ConversionResult';
+export { default as ToolCard } from './ToolCard';
+export { default as ConfigTabs } from './ConfigTabs';
+export { default as LoadingSteps } from './LoadingSteps';
+export { default as OneClickInstall } from './OneClickInstall';
+export { default as TryInPlayground } from './TryInPlayground';