github-to-mcp-monorepo 1.0.0

package/apps/web/components/Features.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Search, FileJson, Terminal, Cpu, Server } from 'lucide-react'
+
+const FEATURES = [
+  {
+    icon: Search,
+    title: 'Smart Extraction',
+    description: 'Extracts tools from README, source code, OpenAPI specs, and GraphQL schemas automatically.',
+  },
+  {
+    icon: FileJson,
+    title: 'Ready-to-Use Config',
+    description: 'Generate configs for Claude Desktop, Cursor, and other MCP clients instantly.',
+  },
+  {
+    icon: Terminal,
+    title: 'TypeScript & Python',
+    description: 'Get production-ready MCP server code in both languages with full type safety.',
+  },
+  {
+    icon: Cpu,
+    title: 'Auto Classification',
+    description: 'Detects repo type automatically: API SDK, CLI tool, library, or existing MCP server.',
+  },
+]
+
+export default function Features() {
+  return (
+    <section id="features" className="py-24 scroll-mt-24">
+      <div className="text-center mb-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-neutral-800 mb-6"
+        >
+          <Server className="w-4 h-4 text-white" />
+          <span className="text-sm font-medium text-neutral-400">FEATURES</span>
+        </motion.div>
+        
+        <motion.h2
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ delay: 0.1 }}
+          className="text-4xl md:text-5xl font-bold text-white mb-4"
+        >
+          Powerful & Flexible
+        </motion.h2>
+        
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ delay: 0.2 }}
+          className="text-xl text-neutral-400 max-w-2xl mx-auto"
+        >
+          Everything you need to turn any repository into an MCP server
+        </motion.p>
+      </div>
+
+      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {FEATURES.map((feature, index) => (
+          <motion.div
+            key={feature.title}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: index * 0.1 }}
+            className="group rounded-xl border border-neutral-800 p-6 bg-neutral-900/50 backdrop-blur-sm hover:border-neutral-700 transition-all hover:-translate-y-1"
+          >
+            <div className="w-12 h-12 rounded-xl bg-white/5 border border-neutral-800 flex items-center justify-center mb-4 group-hover:border-neutral-600 transition-colors">
+              <feature.icon className="w-6 h-6 text-white" />
+            </div>
+            <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+            <p className="text-sm text-neutral-400 leading-relaxed">{feature.description}</p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  )
+}

package/apps/web/components/Footer.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { BookOpen, Zap, Sparkles, Terminal, Layers, Link2, Bug, Users, Scale } from 'lucide-react'
+import Link from 'next/link'
+import { Logo, LogoIcon } from './Logo'
+
+// GitHub icon as inline SVG to avoid importing Github from lucide
+function GithubIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+    </svg>
+  )
+}
+
+const FOOTER_LINKS = {
+  resources: [
+    { href: '/#how-it-works', label: 'How it works', icon: Zap },
+    { href: '/#features', label: 'Features', icon: Sparkles },
+    { href: '/playground', label: 'Playground', icon: Terminal },
+    { href: '/batch', label: 'Batch Convert', icon: Layers },
+    { href: 'https://github.com/nirholas/github-to-mcp#readme', label: 'Documentation', icon: BookOpen, external: true },
+    { href: 'https://modelcontextprotocol.io', label: 'MCP Protocol', icon: Link2, external: true },
+  ],
+  project: [
+    { href: 'https://github.com/nirholas/github-to-mcp', label: 'GitHub Repository', icon: GithubIcon, external: true },
+    { href: 'https://github.com/nirholas/github-to-mcp/issues', label: 'Report Issues', icon: Bug, external: true },
+    { href: 'https://github.com/nirholas/github-to-mcp/blob/main/CONTRIBUTING.md', label: 'Contributing', icon: Users, external: true },
+    { href: 'https://github.com/nirholas/github-to-mcp/blob/main/LICENSE', label: 'License', icon: Scale, external: true },
+  ],
+}
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-neutral-800 bg-black/80 backdrop-blur-xl">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8">
+          {/* Brand */}
+          <div className="md:col-span-2">
+            <Link href="/" className="inline-block mb-4">
+              <Logo size="lg" />
+            </Link>
+            <p className="text-neutral-500 text-sm max-w-md mb-6">
+              Convert GitHub repositories into MCP (Model Context Protocol) servers, making your code instantly accessible to AI agents like Claude, ChatGPT, and other assistants.
+            </p>
+            <div className="flex items-center gap-3">
+              <a 
+                href="https://github.com/nirholas/github-to-mcp" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="w-10 h-10 rounded-lg bg-white/5 border border-neutral-800 flex items-center justify-center hover:border-neutral-600 hover:bg-white/10 transition-colors"
+                aria-label="GitHub"
+              >
+                <GithubIcon className="w-5 h-5 text-neutral-400 hover:text-white" />
+              </a>
+            </div>
+          </div>
+
+          {/* Resources */}
+          <div>
+            <h3 className="text-white font-semibold mb-4">Resources</h3>
+            <ul className="space-y-3">
+              {FOOTER_LINKS.resources.map((link) => (
+                <li key={link.href}>
+                  {link.external ? (
+                    <a 
+                      href={link.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors"
+                    >
+                      {link.icon && <link.icon className="w-4 h-4" />}
+                      {link.label}
+                    </a>
+                  ) : (
+                    <Link 
+                      href={link.href}
+                      className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors"
+                    >
+                      {link.icon && <link.icon className="w-4 h-4" />}
+                      {link.label}
+                    </Link>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Project */}
+          <div>
+            <h3 className="text-white font-semibold mb-4">Project</h3>
+            <ul className="space-y-3">
+              {FOOTER_LINKS.project.map((link) => (
+                <li key={link.href}>
+                  <a 
+                    href={link.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors"
+                  >
+                    {link.icon && <link.icon className="w-4 h-4" />}
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom */}
+        <div className="mt-12 pt-8 border-t border-neutral-800 flex flex-col md:flex-row items-center justify-center gap-4">
+          <div className="text-sm text-neutral-500">
+            © {new Date().getFullYear()} github-to-mcp — Open Source
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/apps/web/components/GenerationProgress.tsx

@@ -0,0 +1,248 @@
+/**
+ * GenerationProgress Component - Multi-step progress bar with real-time updates
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Github,
+  Layers,
+  FileSearch,
+  Code2,
+  Package,
+  Check,
+  Loader2,
+  AlertCircle,
+} from 'lucide-react';
+
+export type GenerationStepId = 
+  | 'fetching'
+  | 'classifying'
+  | 'extracting'
+  | 'generating';
+
+export type GenerationStepStatus = 'pending' | 'in-progress' | 'complete' | 'error';
+
+export interface GenerationStep {
+  id: GenerationStepId;
+  label: string;
+  description: string;
+  status: GenerationStepStatus;
+  toolsFound?: number;
+  detail?: string;
+}
+
+const STEP_ICONS: Record<GenerationStepId, typeof Github> = {
+  fetching: Github,
+  classifying: Layers,
+  extracting: FileSearch,
+  generating: Code2,
+};
+
+const STEP_COLORS: Record<GenerationStepStatus, string> = {
+  pending: 'text-neutral-500 bg-neutral-800/50 border-neutral-700',
+  'in-progress': 'text-white bg-white/10 border-white/30',
+  complete: 'text-green-400 bg-green-500/10 border-green-500/30',
+  error: 'text-red-400 bg-red-500/10 border-red-500/30',
+};
+
+interface GenerationProgressProps {
+  steps: GenerationStep[];
+  currentStep: GenerationStepId | null;
+  totalToolsFound: number;
+  statusMessage?: string;
+  className?: string;
+}
+
+export default function GenerationProgress({
+  steps,
+  currentStep,
+  totalToolsFound,
+  statusMessage,
+  className = '',
+}: GenerationProgressProps) {
+  const progress = useMemo(() => {
+    const completedSteps = steps.filter(s => s.status === 'complete').length;
+    const inProgressSteps = steps.filter(s => s.status === 'in-progress').length;
+    return Math.round(((completedSteps + inProgressSteps * 0.5) / steps.length) * 100);
+  }, [steps]);
+
+  const currentStepData = useMemo(() => {
+    return steps.find(s => s.id === currentStep);
+  }, [steps, currentStep]);
+
+  return (
+    <div className={`rounded-2xl border border-neutral-800 p-6 md:p-8 bg-neutral-900/50 backdrop-blur-xl ${className}`}>
+      {/* Header with progress ring */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <div className="relative w-16 h-16">
+            {/* Background ring */}
+            <svg className="w-16 h-16 -rotate-90">
+              <circle
+                cx="32"
+                cy="32"
+                r="28"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+                className="text-neutral-800"
+              />
+              <motion.circle
+                cx="32"
+                cy="32"
+                r="28"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+                strokeLinecap="round"
+                className="text-white"
+                initial={{ pathLength: 0 }}
+                animate={{ pathLength: progress / 100 }}
+                transition={{ duration: 0.5, ease: 'easeOut' }}
+              />
+            </svg>
+            {/* Center content */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="text-lg font-bold text-white">{progress}%</span>
+            </div>
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white">Generating MCP Server</h3>
+            <AnimatePresence mode="wait">
+              <motion.p
+                key={statusMessage || currentStepData?.description}
+                initial={{ opacity: 0, y: 5 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -5 }}
+                className="text-sm text-neutral-400"
+              >
+                {statusMessage || currentStepData?.description || 'Initializing...'}
+              </motion.p>
+            </AnimatePresence>
+          </div>
+        </div>
+
+        {/* Tools found counter */}
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 border border-neutral-800"
+        >
+          <Package className="w-4 h-4 text-neutral-400" />
+          <span className="text-sm text-neutral-400">Tools found:</span>
+          <motion.span
+            key={totalToolsFound}
+            initial={{ scale: 1.2 }}
+            animate={{ scale: 1 }}
+            className="text-lg font-bold text-white"
+          >
+            {totalToolsFound}
+          </motion.span>
+        </motion.div>
+      </div>
+
+      {/* Progress bar */}
+      <div className="relative h-2 bg-neutral-800 rounded-full overflow-hidden mb-8">
+        <motion.div
+          className="absolute inset-y-0 left-0 bg-gradient-to-r from-white to-neutral-400 rounded-full"
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+        />
+        {/* Animated shimmer */}
+        {progress < 100 && (
+          <motion.div
+            className="absolute inset-y-0 w-20 bg-gradient-to-r from-transparent via-white/30 to-transparent"
+            animate={{ x: ['-100%', '500%'] }}
+            transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
+          />
+        )}
+      </div>
+
+      {/* Steps grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {steps.map((step, index) => {
+          const Icon = STEP_ICONS[step.id];
+          const isActive = step.status === 'in-progress';
+          const isComplete = step.status === 'complete';
+          const isError = step.status === 'error';
+
+          return (
+            <motion.div
+              key={step.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className={`relative p-4 rounded-xl border transition-all ${STEP_COLORS[step.status]}`}
+            >
+              {/* Step number connector line */}
+              {index < steps.length - 1 && (
+                <div className="hidden lg:block absolute top-1/2 -right-2 w-4 h-0.5 bg-neutral-800" />
+              )}
+
+              <div className="flex items-start gap-3">
+                <div className={`flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center ${
+                  isComplete ? 'bg-green-500/20' :
+                  isError ? 'bg-red-500/20' :
+                  isActive ? 'bg-white/10' : 'bg-neutral-800/50'
+                }`}>
+                  {isComplete ? (
+                    <Check className="w-5 h-5 text-green-400" />
+                  ) : isError ? (
+                    <AlertCircle className="w-5 h-5 text-red-400" />
+                  ) : isActive ? (
+                    <Loader2 className="w-5 h-5 text-white animate-spin" />
+                  ) : (
+                    <Icon className="w-5 h-5 text-neutral-500" />
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className={`text-xs font-medium ${
+                      isActive ? 'text-white' : 
+                      isComplete ? 'text-green-400' : 
+                      isError ? 'text-red-400' : 'text-neutral-500'
+                    }`}>
+                      Step {index + 1}
+                    </span>
+                    {step.toolsFound !== undefined && step.toolsFound > 0 && (
+                      <span className="px-1.5 py-0.5 text-xs bg-white/10 rounded text-white">
+                        +{step.toolsFound}
+                      </span>
+                    )}
+                  </div>
+                  <h4 className={`font-medium truncate ${
+                    isActive ? 'text-white' : 
+                    isComplete ? 'text-green-300' : 
+                    isError ? 'text-red-300' : 'text-neutral-400'
+                  }`}>
+                    {step.label}
+                  </h4>
+                  {step.detail && (
+                    <p className="text-xs text-neutral-500 truncate mt-0.5">
+                      {step.detail}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Active step glow effect */}
+              {isActive && (
+                <motion.div
+                  className="absolute inset-0 rounded-xl border-2 border-white/20"
+                  animate={{ opacity: [0.3, 0.6, 0.3] }}
+                  transition={{ duration: 2, repeat: Infinity }}
+                />
+              )}
+            </motion.div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}