github-to-mcp-monorepo 1.0.0

package/apps/web/components/PlaygroundToolTester.tsx

@@ -0,0 +1,410 @@
+/**
+ * PlaygroundToolTester Component - Test individual tools with dynamic input forms
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Play, Loader2, AlertCircle, Check, Copy, ChevronDown, Clock } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import type { Tool } from '@/types';
+import { copyToClipboard } from '@/lib/utils';
+import type { ExecuteToolResult } from '@/hooks/use-mcp-execution';
+
+interface PlaygroundToolTesterProps {
+  tool: Tool;
+  /** Handler for executing the tool. If not provided, mock execution is used in demo mode */
+  onExecute?: (tool: Tool, params: Record<string, unknown>) => Promise<ExecuteToolResult | unknown>;
+  /** Whether we're in demo mode (not connected to real server) */
+  isDemoMode?: boolean;
+  /** Whether an execution is currently in progress */
+  isExecuting?: boolean;
+  className?: string;
+}
+
+type InputFieldType = 'string' | 'number' | 'boolean' | 'array' | 'object';
+
+interface SchemaProperty {
+  type: string;
+  description?: string;
+  enum?: string[];
+  default?: unknown;
+  items?: { type: string };
+}
+
+export default function PlaygroundToolTester({
+  tool,
+  onExecute,
+  isDemoMode = false,
+  isExecuting: externalIsExecuting,
+  className = '',
+}: PlaygroundToolTesterProps) {
+  const [params, setParams] = useState<Record<string, unknown>>({});
+  const [internalIsExecuting, setInternalIsExecuting] = useState(false);
+  const [result, setResult] = useState<unknown>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [executionTime, setExecutionTime] = useState<number | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [showSchema, setShowSchema] = useState(false);
+
+  // Use external executing state if provided, otherwise use internal
+  const isExecuting = externalIsExecuting ?? internalIsExecuting;
+
+  // Get properties from input schema
+  const properties = useMemo(() => {
+    return tool.inputSchema?.properties || {};
+  }, [tool]);
+
+  const requiredFields = useMemo(() => {
+    return new Set(tool.inputSchema?.required || []);
+  }, [tool]);
+
+  // Initialize default values
+  const initializeParams = useCallback(() => {
+    const initial: Record<string, unknown> = {};
+    Object.entries(properties).forEach(([key, prop]) => {
+      const property = prop as SchemaProperty;
+      if (property.default !== undefined) {
+        initial[key] = property.default;
+      } else if (property.enum && property.enum.length > 0) {
+        initial[key] = property.enum[0];
+      }
+    });
+    setParams(initial);
+  }, [properties]);
+
+  const handleParamChange = useCallback((key: string, value: unknown) => {
+    setParams(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  const handleExecute = useCallback(async () => {
+    setInternalIsExecuting(true);
+    setError(null);
+    setResult(null);
+    setExecutionTime(null);
+
+    const startTime = Date.now();
+
+    try {
+      if (!onExecute || isDemoMode) {
+        // Mock execution for demo mode
+        await new Promise(resolve => setTimeout(resolve, 800 + Math.random() * 400));
+        
+        const mockResult = {
+          success: true,
+          tool: tool.name,
+          params: params,
+          response: {
+            message: `[Demo] Successfully executed ${tool.name}`,
+            timestamp: new Date().toISOString(),
+            data: Object.keys(params).length > 0 ? params : { example: 'result' },
+          },
+        };
+        setResult(mockResult);
+        setExecutionTime(Date.now() - startTime);
+      } else {
+        // Real execution via the provided handler
+        const response = await onExecute(tool, params);
+        
+        // Handle ExecuteToolResult type
+        if (response && typeof response === 'object' && 'success' in response) {
+          const execResult = response as ExecuteToolResult;
+          if (!execResult.success && execResult.error) {
+            setError(execResult.error);
+          } else {
+            setResult(execResult.result ?? execResult);
+          }
+          setExecutionTime(execResult.executionTime || (Date.now() - startTime));
+        } else {
+          setResult(response);
+          setExecutionTime(Date.now() - startTime);
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Execution failed');
+      setExecutionTime(Date.now() - startTime);
+    } finally {
+      setInternalIsExecuting(false);
+    }
+  }, [tool, params, onExecute, isDemoMode]);
+
+  const handleCopyResult = useCallback(async () => {
+    if (result) {
+      const success = await copyToClipboard(JSON.stringify(result, null, 2));
+      if (success) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }
+    }
+  }, [result]);
+
+  const handleReset = useCallback(() => {
+    setParams({});
+    setResult(null);
+    setError(null);
+    setExecutionTime(null);
+    initializeParams();
+  }, [initializeParams]);
+
+  // Validate required fields
+  const isValid = useMemo(() => {
+    for (const field of requiredFields) {
+      const value = params[field];
+      if (value === undefined || value === '' || value === null) {
+        return false;
+      }
+    }
+    return true;
+  }, [params, requiredFields]);
+
+  const renderField = useCallback((key: string, prop: SchemaProperty) => {
+    const isRequired = requiredFields.has(key);
+    const value = params[key];
+
+    // Enum field - render as select
+    if (prop.enum && prop.enum.length > 0) {
+      return (
+        <div key={key} className="space-y-1.5">
+          <label className="text-sm font-medium text-neutral-300 flex items-center gap-1">
+            {key}
+            {isRequired && <span className="text-red-400">*</span>}
+          </label>
+          {prop.description && (
+            <p className="text-xs text-neutral-500">{prop.description}</p>
+          )}
+          <select
+            value={value as string || ''}
+            onChange={(e) => handleParamChange(key, e.target.value)}
+            className="w-full h-10 px-3 rounded-lg border border-neutral-700 bg-black text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/10"
+          >
+            <option value="">Select...</option>
+            {prop.enum.map((opt) => (
+              <option key={opt} value={opt}>{opt}</option>
+            ))}
+          </select>
+        </div>
+      );
+    }
+
+    // Boolean field - render as checkbox
+    if (prop.type === 'boolean') {
+      return (
+        <div key={key} className="space-y-1.5">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={value as boolean || false}
+              onChange={(e) => handleParamChange(key, e.target.checked)}
+              className="w-4 h-4 rounded border-neutral-700 bg-black text-white focus:ring-white/20"
+            />
+            <span className="text-sm font-medium text-neutral-300">
+              {key}
+              {isRequired && <span className="text-red-400 ml-1">*</span>}
+            </span>
+          </label>
+          {prop.description && (
+            <p className="text-xs text-neutral-500 ml-6">{prop.description}</p>
+          )}
+        </div>
+      );
+    }
+
+    // Number field
+    if (prop.type === 'number' || prop.type === 'integer') {
+      return (
+        <div key={key} className="space-y-1.5">
+          <label className="text-sm font-medium text-neutral-300 flex items-center gap-1">
+            {key}
+            {isRequired && <span className="text-red-400">*</span>}
+          </label>
+          {prop.description && (
+            <p className="text-xs text-neutral-500">{prop.description}</p>
+          )}
+          <Input
+            type="number"
+            value={value as number || ''}
+            onChange={(e) => handleParamChange(key, e.target.value ? Number(e.target.value) : undefined)}
+            placeholder={`Enter ${key}...`}
+          />
+        </div>
+      );
+    }
+
+    // Array or object field - render as textarea
+    if (prop.type === 'array' || prop.type === 'object') {
+      return (
+        <div key={key} className="space-y-1.5">
+          <label className="text-sm font-medium text-neutral-300 flex items-center gap-1">
+            {key}
+            {isRequired && <span className="text-red-400">*</span>}
+            <span className="text-xs text-neutral-500 font-normal">({prop.type})</span>
+          </label>
+          {prop.description && (
+            <p className="text-xs text-neutral-500">{prop.description}</p>
+          )}
+          <textarea
+            value={typeof value === 'object' ? JSON.stringify(value, null, 2) : (value as string || '')}
+            onChange={(e) => {
+              try {
+                const parsed = JSON.parse(e.target.value);
+                handleParamChange(key, parsed);
+              } catch {
+                handleParamChange(key, e.target.value);
+              }
+            }}
+            placeholder={`Enter ${prop.type === 'array' ? '["item1", "item2"]' : '{"key": "value"}'}`}
+            rows={3}
+            className="w-full px-3 py-2 rounded-lg border border-neutral-700 bg-black text-white text-sm font-mono focus:outline-none focus:ring-2 focus:ring-white/10 resize-y"
+          />
+        </div>
+      );
+    }
+
+    // Default string field
+    return (
+      <div key={key} className="space-y-1.5">
+        <label className="text-sm font-medium text-neutral-300 flex items-center gap-1">
+          {key}
+          {isRequired && <span className="text-red-400">*</span>}
+        </label>
+        {prop.description && (
+          <p className="text-xs text-neutral-500">{prop.description}</p>
+        )}
+        <Input
+          type="text"
+          value={value as string || ''}
+          onChange={(e) => handleParamChange(key, e.target.value)}
+          placeholder={`Enter ${key}...`}
+        />
+      </div>
+    );
+  }, [params, requiredFields, handleParamChange]);
+
+  return (
+    <div className={`rounded-xl border border-neutral-800 bg-neutral-900/50 overflow-hidden ${className}`}>
+      {/* Tool header */}
+      <div className="p-4 border-b border-neutral-800">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h3 className="font-semibold text-white">{tool.name}</h3>
+            <p className="text-sm text-neutral-400 mt-1">{tool.description}</p>
+          </div>
+          <button
+            onClick={() => setShowSchema(!showSchema)}
+            className="flex items-center gap-1 text-xs text-neutral-500 hover:text-white transition-colors"
+          >
+            Schema
+            <ChevronDown className={`w-3 h-3 transition-transform ${showSchema ? 'rotate-180' : ''}`} />
+          </button>
+        </div>
+
+        <AnimatePresence>
+          {showSchema && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              className="overflow-hidden"
+            >
+              <pre className="mt-3 p-3 bg-black/50 rounded-lg text-xs text-neutral-400 overflow-x-auto">
+                {JSON.stringify(tool.inputSchema, null, 2)}
+              </pre>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {/* Input form */}
+      <div className="p-4 space-y-4">
+        {Object.keys(properties).length === 0 ? (
+          <p className="text-sm text-neutral-500 italic">This tool has no input parameters</p>
+        ) : (
+          Object.entries(properties).map(([key, prop]) =>
+            renderField(key, prop as SchemaProperty)
+          )
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="p-4 border-t border-neutral-800 flex items-center gap-3">
+        <Button
+          onClick={handleExecute}
+          disabled={!isValid || isExecuting}
+          loading={isExecuting}
+          leftIcon={<Play className="w-4 h-4" />}
+        >
+          {isExecuting ? 'Executing...' : 'Execute'}
+        </Button>
+        <Button
+          variant="outline"
+          onClick={handleReset}
+          disabled={isExecuting}
+        >
+          Reset
+        </Button>
+      </div>
+
+      {/* Result/Error */}
+      <AnimatePresence>
+        {(result || error) && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            className="overflow-hidden"
+          >
+            <div className={`p-4 border-t ${error ? 'border-red-500/30 bg-red-500/10' : 'border-green-500/30 bg-green-500/10'}`}>
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {error ? (
+                    <>
+                      <AlertCircle className="w-4 h-4 text-red-400" />
+                      <span className="text-sm font-medium text-red-400">Error</span>
+                    </>
+                  ) : (
+                    <>
+                      <Check className="w-4 h-4 text-green-400" />
+                      <span className="text-sm font-medium text-green-400">Success</span>
+                    </>
+                  )}
+                  {executionTime !== null && (
+                    <span className="flex items-center gap-1 text-xs text-neutral-500">
+                      <Clock className="w-3 h-3" />
+                      {executionTime}ms
+                    </span>
+                  )}
+                  {isDemoMode && (
+                    <span className="px-1.5 py-0.5 text-xs rounded bg-yellow-500/20 text-yellow-400">
+                      Demo
+                    </span>
+                  )}
+                </div>
+                {result !== null && result !== undefined && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleCopyResult}
+                    leftIcon={copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                  >
+                    {copied ? 'Copied!' : 'Copy'}
+                  </Button>
+                )}
+              </div>
+              <pre className="p-3 bg-black/30 rounded-lg text-xs overflow-x-auto">
+                {error ? (
+                  <span className="text-red-300">{error}</span>
+                ) : (
+                  <span className="text-neutral-300">{JSON.stringify(result, null, 2)}</span>
+                )}
+              </pre>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/apps/web/components/ProductCards.tsx

@@ -0,0 +1,179 @@
+/**
+ * Product Cards Component - Landing page feature cards
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowRight, Github, Terminal, FileJson, BookOpen, Layers, Play, Sparkles, Cloud } from 'lucide-react';
+import Link from 'next/link';
+
+const PRODUCTS = [
+  {
+    id: 'convert',
+    icon: Github,
+    title: 'Convert Repository',
+    description: 'Transform any GitHub repo into a fully functional MCP server. Extracts tools from README, code, and API specs.',
+    href: '/convert',
+    badge: 'Popular',
+    badgeColor: 'bg-green-500/20 text-green-300',
+    features: ['Auto-detection', 'TypeScript & Python', 'Ready configs'],
+  },
+  {
+    id: 'playground',
+    icon: Play,
+    title: 'Interactive Playground',
+    description: 'Test your generated MCP tools in real-time. Execute tools, view results, and debug before deployment.',
+    href: '/playground',
+    badge: 'Try It',
+    badgeColor: 'bg-orange-500/20 text-orange-300',
+    features: ['Live testing', 'Real-time results', 'Debug mode'],
+  },
+  {
+    id: 'dashboard',
+    icon: Cloud,
+    title: 'Cloud Deploy',
+    description: 'One-click deploy your MCP server to the cloud. Get instant endpoints, usage analytics, and API management.',
+    href: '/dashboard',
+    badge: 'New',
+    badgeColor: 'bg-pink-500/20 text-pink-300',
+    features: ['Instant deploy', 'Usage dashboard', 'API keys'],
+  },
+  {
+    id: 'batch',
+    icon: Layers,
+    title: 'Batch Convert',
+    description: 'Convert multiple repositories at once. Perfect for teams or creating comprehensive tool collections.',
+    href: '/batch',
+    badge: 'New',
+    badgeColor: 'bg-purple-500/20 text-purple-300',
+    features: ['Multiple repos', 'Parallel processing', 'Bulk export'],
+  },
+  {
+    id: 'vscode',
+    icon: Sparkles,
+    title: 'VS Code Extension',
+    description: 'Convert repos directly from VS Code. Right-click any GitHub URL or use the command palette.',
+    href: 'https://marketplace.visualstudio.com/items?itemName=nirholas.github-to-mcp',
+    badge: 'Extension',
+    badgeColor: 'bg-blue-500/20 text-blue-300',
+    features: ['One-click convert', 'Inline results', 'Auto-config'],
+    external: true,
+  },
+  {
+    id: 'cli',
+    icon: Terminal,
+    title: 'CLI Tool',
+    description: 'Use the command-line tool for local development and CI/CD integration. Full control over the conversion process.',
+    href: 'https://github.com/nirholas/github-to-mcp#cli',
+    badge: 'Dev',
+    badgeColor: 'bg-cyan-500/20 text-cyan-300',
+    features: ['npm install', 'CI/CD ready', 'Batch processing'],
+    external: true,
+  },
+  {
+    id: 'api',
+    icon: FileJson,
+    title: 'REST API',
+    description: 'Programmatic access to the conversion engine. Build custom integrations and automated workflows.',
+    href: 'https://github.com/nirholas/github-to-mcp#api',
+    badge: null,
+    badgeColor: '',
+    features: ['JSON responses', 'Rate limited', 'OpenAPI spec'],
+    external: true,
+  },
+  {
+    id: 'docs',
+    icon: BookOpen,
+    title: 'Documentation',
+    description: 'Learn how to use github-to-mcp effectively. Guides, examples, and best practices.',
+    href: 'https://github.com/nirholas/github-to-mcp#readme',
+    badge: null,
+    badgeColor: '',
+    features: ['Getting started', 'Examples', 'FAQ'],
+    external: true,
+  },
+];
+
+export default function ProductCards() {
+  return (
+    <section className="py-16">
+      <div className="text-center mb-12">
+        <motion.h2
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-3xl md:text-4xl font-bold text-white mb-4"
+        >
+          All Tools & Features
+        </motion.h2>
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ delay: 0.1 }}
+          className="text-lg text-neutral-400 max-w-2xl mx-auto"
+        >
+          Convert GitHub repos to MCP servers, test interactively, and deploy
+        </motion.p>
+      </div>
+
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+        {PRODUCTS.map((product, index) => {
+          const CardWrapper = product.external ? 'a' : Link;
+          const cardProps = product.external 
+            ? { href: product.href, target: '_blank', rel: 'noopener noreferrer' }
+            : { href: product.href };
+
+          return (
+            <motion.div
+              key={product.id}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.1 }}
+            >
+              <CardWrapper
+                {...cardProps}
+                className="group block h-full rounded-xl border border-neutral-800 p-6 bg-neutral-900/50 backdrop-blur-sm hover:border-neutral-600 hover:bg-neutral-900/80 transition-all"
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div className="w-12 h-12 rounded-xl bg-white/5 border border-neutral-800 flex items-center justify-center group-hover:border-neutral-600 group-hover:bg-white/10 transition-all">
+                    <product.icon className="w-6 h-6 text-white" />
+                  </div>
+                  {product.badge && (
+                    <span className={`px-2.5 py-1 text-xs font-medium rounded-full ${product.badgeColor}`}>
+                      {product.badge}
+                    </span>
+                  )}
+                </div>
+                
+                <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-white transition-colors flex items-center gap-2">
+                  {product.title}
+                  <ArrowRight className="w-4 h-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
+                </h3>
+                
+                <p className="text-neutral-400 text-sm mb-4 leading-relaxed">
+                  {product.description}
+                </p>
+                
+                <div className="flex flex-wrap gap-2">
+                  {product.features.map((feature) => (
+                    <span
+                      key={feature}
+                      className="px-2 py-1 text-xs bg-white/5 border border-neutral-800 rounded text-neutral-400"
+                    >
+                      {feature}
+                    </span>
+                  ))}
+                </div>
+              </CardWrapper>
+            </motion.div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}