github-to-mcp-monorepo 1.0.0

package/apps/web/components/Hero.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { motion } from 'framer-motion'
+import { Github, ArrowRight } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import GithubUrlInput from '@/components/GithubUrlInput'
+
+const QUICK_TRY = [
+  { name: 'MCP Servers', url: 'https://github.com/modelcontextprotocol/servers' },
+  { name: 'Anthropic Cookbook', url: 'https://github.com/anthropics/anthropic-cookbook' },
+  { name: 'Vercel AI', url: 'https://github.com/vercel/ai' },
+]
+
+export default function Hero() {
+  const router = useRouter()
+  const [isConverting, setIsConverting] = useState(false)
+
+  const handleSubmit = useCallback((url: string) => {
+    setIsConverting(true)
+    const finalUrl = url.startsWith('http') ? url : `https://${url}`
+    router.push(`/convert?url=${encodeURIComponent(finalUrl)}`)
+  }, [router])
+
+  const handleQuickTry = useCallback((repoUrl: string) => {
+    router.push(`/convert?url=${encodeURIComponent(repoUrl)}`)
+  }, [router])
+
+  return (
+    <div className="text-center py-8">
+      {/* Badge */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6"
+      >
+        <Github className="w-4 h-4 text-white/60" />
+        <span className="text-sm font-medium text-neutral-400">
+          Free & <span className="text-white font-semibold">Open Source</span>
+        </span>
+      </motion.div>
+
+      {/* Main heading */}
+      <motion.h1
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="text-5xl md:text-7xl font-bold mb-4 leading-[1.1] tracking-tight"
+      >
+        <span className="block text-white">Convert GitHub Repos</span>
+        <span className="block text-neutral-500">to MCP Servers</span>
+      </motion.h1>
+
+      {/* Short subheadline */}
+      <motion.p
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.15 }}
+        className="text-xl text-neutral-400 mb-10"
+      >
+        Transform any GitHub repository into a Model Context Protocol server for AI agents
+      </motion.p>
+
+      {/* Main URL Input - THE CORE TOOL */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+        className="max-w-2xl mx-auto mb-4"
+      >
+        <GithubUrlInput 
+          onSubmit={handleSubmit}
+          disabled={isConverting}
+        />
+      </motion.div>
+
+      {/* Quick try buttons */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.25 }}
+        className="flex flex-wrap justify-center items-center gap-2 mb-8"
+        role="group"
+        aria-label="Example repositories"
+      >
+        <span className="text-sm text-neutral-500">Try:</span>
+        {QUICK_TRY.map((repo) => (
+          <button
+            key={repo.name}
+            type="button"
+            onClick={() => handleQuickTry(repo.url)}
+            className="px-3 py-1.5 text-sm bg-white/5 border border-neutral-800 rounded-lg hover:border-neutral-600 hover:bg-white/10 transition-all text-neutral-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/20"
+            aria-label={`Convert ${repo.name} repository`}
+          >
+            {repo.name}
+          </button>
+        ))}
+      </motion.div>
+
+      {/* Feature pills */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.3 }}
+        className="flex flex-wrap justify-center items-center gap-2 text-xs text-neutral-500"
+      >
+        <span>Smart extraction</span>
+        <span className="text-neutral-700">•</span>
+        <span>TypeScript & Python</span>
+        <span className="text-neutral-700">•</span>
+        <span>Ready-to-use configs</span>
+        <span className="text-neutral-700">•</span>
+        <span>Interactive playground</span>
+      </motion.div>
+    </div>
+  )
+}

package/apps/web/components/HowItWorks.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Github, Code2, Server } from 'lucide-react'
+
+const steps = [
+  {
+    number: 1,
+    title: 'Paste GitHub URL',
+    description: 'Enter any public GitHub repository URL. We support repos with README files, OpenAPI specs, GraphQL schemas, and source code.',
+    icon: Github,
+  },
+  {
+    number: 2,
+    title: 'Analyze & Extract',
+    description: 'We analyze the repository structure, detect the type (SDK, CLI, library), and extract all available tools and endpoints.',
+    icon: Code2,
+  },
+  {
+    number: 3,
+    title: 'Get MCP Server',
+    description: 'Download production-ready MCP server code in TypeScript or Python, with configs for Claude Desktop, Cursor, and more.',
+    icon: Server,
+  },
+]
+
+export default function HowItWorks() {
+  return (
+    <section id="how-it-works" className="py-24 scroll-mt-24 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 bg-dots opacity-30" aria-hidden="true" />
+
+      <div className="relative z-10">
+        {/* Section header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
+            How it <span className="text-neutral-500">works</span>
+          </h2>
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto">
+            Three simple steps to convert any GitHub repo into an MCP server.
+          </p>
+        </motion.div>
+
+        {/* Steps timeline */}
+        <div className="max-w-4xl mx-auto">
+          <div className="relative">
+            {/* Connecting line */}
+            <div className="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-neutral-600 via-neutral-700 to-neutral-800 hidden md:block" />
+
+            {/* Steps */}
+            <div className="space-y-12 md:space-y-24">
+              {steps.map((step, index) => {
+                const Icon = step.icon
+                const isEven = index % 2 === 0
+
+                return (
+                  <motion.div
+                    key={step.number}
+                    initial={{ opacity: 0, x: isEven ? -50 : 50 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5, delay: index * 0.2 }}
+                    className={`flex flex-col md:flex-row items-center gap-8 ${
+                      isEven ? 'md:flex-row' : 'md:flex-row-reverse'
+                    }`}
+                  >
+                    {/* Content */}
+                    <div className={`flex-1 text-center ${isEven ? 'md:text-right' : 'md:text-left'}`}>
+                      <motion.div
+                        whileHover={{ scale: 1.02 }}
+                        className="inline-block"
+                      >
+                        <div className="rounded-2xl p-6 md:p-8 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800">
+                          <div className="text-sm font-bold text-neutral-500 mb-2">
+                            Step {step.number}
+                          </div>
+                          <h3 className="text-xl md:text-2xl font-bold text-white mb-3">
+                            {step.title}
+                          </h3>
+                          <p className="text-neutral-400">
+                            {step.description}
+                          </p>
+                        </div>
+                      </motion.div>
+                    </div>
+
+                    {/* Center icon */}
+                    <div className="relative z-10">
+                      <motion.div
+                        whileHover={{ scale: 1.1 }}
+                        className="w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-white/5 border border-neutral-700 flex items-center justify-center shadow-lg"
+                      >
+                        <Icon className="w-8 h-8 md:w-10 md:h-10 text-white" />
+                      </motion.div>
+                      
+                      {/* Number badge */}
+                      <div className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-white text-black flex items-center justify-center text-xs font-bold">
+                        {step.number}
+                      </div>
+                    </div>
+
+                    {/* Empty space for alternating layout */}
+                    <div className="flex-1 hidden md:block" aria-hidden="true" />
+                  </motion.div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/apps/web/components/InstallBanner.tsx

@@ -0,0 +1,158 @@
+/**
+ * Install Banner - Prominent CLI install command
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { Copy, Check, Terminal, Zap, ArrowRight } from 'lucide-react';
+
+interface InstallBannerProps {
+  variant?: 'hero' | 'inline' | 'minimal';
+  repoUrl?: string;
+}
+
+export default function InstallBanner({ variant = 'hero', repoUrl }: InstallBannerProps) {
+  const [copied, setCopied] = useState(false);
+
+  const command = repoUrl 
+    ? `npx @nirholas/github-to-mcp install ${repoUrl} --claude`
+    : `npx @nirholas/github-to-mcp install <github-url> --claude`;
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [command]);
+
+  if (variant === 'minimal') {
+    return (
+      <div className="flex items-center gap-2">
+        <code className="text-sm text-green-400 font-mono bg-black/40 px-3 py-1.5 rounded-lg">
+          npx @nirholas/github-to-mcp
+        </code>
+        <button
+          onClick={handleCopy}
+          className="p-1.5 hover:bg-white/10 rounded transition-colors"
+        >
+          {copied ? (
+            <Check className="w-4 h-4 text-green-400" />
+          ) : (
+            <Copy className="w-4 h-4 text-neutral-400" />
+          )}
+        </button>
+      </div>
+    );
+  }
+
+  if (variant === 'inline') {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex items-center gap-3 p-3 bg-black/40 border border-neutral-800 rounded-xl"
+      >
+        <Terminal className="w-5 h-5 text-neutral-500 flex-shrink-0" />
+        <code className="flex-1 text-sm text-green-400 font-mono overflow-x-auto whitespace-nowrap">
+          {command}
+        </code>
+        <button
+          onClick={handleCopy}
+          className="flex-shrink-0 p-2 hover:bg-white/10 rounded-lg transition-colors"
+        >
+          {copied ? (
+            <Check className="w-4 h-4 text-green-400" />
+          ) : (
+            <Copy className="w-4 h-4 text-neutral-400" />
+          )}
+        </button>
+      </motion.div>
+    );
+  }
+
+  // Hero variant (default)
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="rounded-2xl border border-neutral-800 bg-gradient-to-br from-neutral-900/80 to-black/80 backdrop-blur-xl overflow-hidden"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-neutral-800 bg-white/[0.02]">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-green-500/20 to-emerald-500/10 flex items-center justify-center">
+            <Zap className="w-5 h-5 text-green-400" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-white">One-Click Install</h3>
+            <p className="text-xs text-neutral-400">Add to Claude Desktop instantly</p>
+          </div>
+        </div>
+        <span className="px-2.5 py-1 text-xs font-medium bg-green-500/20 text-green-400 rounded-full">
+          NEW
+        </span>
+      </div>
+
+      {/* Command */}
+      <div className="p-4">
+        <div className="flex items-center gap-3 p-4 bg-black/60 border border-neutral-800 rounded-xl group">
+          <span className="text-neutral-500 font-mono">$</span>
+          <code className="flex-1 text-green-400 font-mono text-sm overflow-x-auto whitespace-nowrap scrollbar-thin">
+            {command}
+          </code>
+          <button
+            onClick={handleCopy}
+            className="flex-shrink-0 flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-neutral-700 rounded-lg transition-all text-sm"
+          >
+            {copied ? (
+              <>
+                <Check className="w-4 h-4 text-green-400" />
+                <span className="text-green-400">Copied!</span>
+              </>
+            ) : (
+              <>
+                <Copy className="w-4 h-4 text-neutral-400" />
+                <span className="text-neutral-300">Copy</span>
+              </>
+            )}
+          </button>
+        </div>
+
+        {/* Features */}
+        <div className="mt-4 flex flex-wrap gap-4 text-xs text-neutral-400">
+          <div className="flex items-center gap-1.5">
+            <Check className="w-3.5 h-3.5 text-green-400" />
+            <span>Auto-configures Claude Desktop</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Check className="w-3.5 h-3.5 text-green-400" />
+            <span>Installs dependencies</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Check className="w-3.5 h-3.5 text-green-400" />
+            <span>Works with Cursor too</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-4 py-3 bg-white/[0.02] border-t border-neutral-800">
+        <p className="text-xs text-neutral-500">
+          Supports <span className="text-neutral-400">--claude</span>, <span className="text-neutral-400">--cursor</span>, and <span className="text-neutral-400">--vscode</span> flags
+        </p>
+        <a
+          href="https://github.com/nirholas/github-to-mcp#cli"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1 text-xs text-neutral-400 hover:text-white transition-colors"
+        >
+          View docs
+          <ArrowRight className="w-3 h-3" />
+        </a>
+      </div>
+    </motion.div>
+  );
+}

package/apps/web/components/Logo.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+interface LogoProps {
+  size?: 'sm' | 'md' | 'lg'
+  showText?: boolean
+  className?: string
+}
+
+// Custom space/conversion themed logo - represents transformation/portal
+function LogoIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      {/* Outer ring - represents the conversion portal */}
+      <circle
+        cx="16"
+        cy="16"
+        r="12"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeDasharray="4 2"
+        className="opacity-40"
+      />
+      
+      {/* Inner orbital rings - crossing paths representing transformation */}
+      <ellipse
+        cx="16"
+        cy="16"
+        rx="8"
+        ry="3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="opacity-60"
+        transform="rotate(-30 16 16)"
+      />
+      <ellipse
+        cx="16"
+        cy="16"
+        rx="8"
+        ry="3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="opacity-60"
+        transform="rotate(30 16 16)"
+      />
+      
+      {/* Center core - the conversion point */}
+      <circle
+        cx="16"
+        cy="16"
+        r="4"
+        fill="currentColor"
+        className="opacity-90"
+      />
+      
+      {/* Small orbiting dots - representing data/particles */}
+      <circle cx="16" cy="6" r="1.5" fill="currentColor" className="opacity-70" />
+      <circle cx="16" cy="26" r="1.5" fill="currentColor" className="opacity-70" />
+      <circle cx="6" cy="16" r="1.5" fill="currentColor" className="opacity-70" />
+      <circle cx="26" cy="16" r="1.5" fill="currentColor" className="opacity-70" />
+    </svg>
+  )
+}
+
+export function Logo({ size = 'md', showText = true, className = '' }: LogoProps) {
+  const sizeClasses = {
+    sm: { container: 'w-8 h-8', icon: 'w-5 h-5', text: 'text-base' },
+    md: { container: 'w-8 h-8 md:w-9 md:h-9', icon: 'w-5 h-5 md:w-6 md:h-6', text: 'text-base md:text-lg' },
+    lg: { container: 'w-10 h-10', icon: 'w-6 h-6', text: 'text-xl' },
+  }
+
+  const sizes = sizeClasses[size]
+
+  return (
+    <div className={`flex items-center gap-2 md:gap-3 ${className}`}>
+      {/* Logo Icon Container */}
+      <div className="relative">
+        <motion.div 
+          className={`${sizes.container} rounded-lg bg-white flex items-center justify-center`}
+          whileHover={{ scale: 1.05 }}
+          transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+        >
+          <LogoIcon className={`${sizes.icon} text-black`} />
+        </motion.div>
+      </div>
+
+      {/* Text with shimmer effect */}
+      {showText && (
+        <span className={`${sizes.text} font-bold text-white relative overflow-hidden`}>
+          <span className="relative z-10">github-to-mcp</span>
+          {/* Shimmer overlay */}
+          <motion.span
+            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12"
+            initial={{ x: '-100%' }}
+            animate={{ x: '200%' }}
+            transition={{
+              duration: 3,
+              repeat: Infinity,
+              repeatDelay: 4,
+              ease: 'easeInOut',
+            }}
+          />
+        </span>
+      )}
+    </div>
+  )
+}
+
+export { LogoIcon }
+export default Logo

package/apps/web/components/ParticleBackground.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import Particles, { initParticlesEngine } from '@tsparticles/react'
+import { loadSlim } from '@tsparticles/slim'
+
+export default function ParticleBackground() {
+  const [init, setInit] = useState(false)
+
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine)
+    }).then(() => {
+      setInit(true)
+    })
+  }, [])
+
+  const options = useMemo(
+    () => ({
+      background: {
+        color: {
+          value: 'transparent',
+        },
+      },
+      fpsLimit: 60,
+      interactivity: {
+        events: {
+          onClick: {
+            enable: true,
+            mode: 'push',
+          },
+          onHover: {
+            enable: true,
+            mode: 'repulse',
+          },
+        },
+        modes: {
+          push: {
+            quantity: 2,
+          },
+          repulse: {
+            distance: 120,
+            duration: 0.4,
+          },
+        },
+      },
+      particles: {
+        color: {
+          value: ['#ffffff', '#a3a3a3', '#737373'],
+        },
+        links: {
+          color: '#ffffff',
+          distance: 150,
+          enable: true,
+          opacity: 0.05,
+          width: 1,
+        },
+        move: {
+          direction: 'none' as const,
+          enable: true,
+          outModes: {
+            default: 'bounce' as const,
+          },
+          random: true,
+          speed: 0.5,
+          straight: false,
+        },
+        number: {
+          density: {
+            enable: true,
+            area: 1200,
+          },
+          value: 40,
+        },
+        opacity: {
+          value: { min: 0.05, max: 0.2 },
+          animation: {
+            enable: true,
+            speed: 0.5,
+            minimumValue: 0.05,
+          },
+        },
+        shape: {
+          type: 'circle',
+        },
+        size: {
+          value: { min: 1, max: 2 },
+        },
+      },
+      detectRetina: true,
+    }),
+    []
+  )
+
+  if (!init) return null
+
+  return (
+    <Particles
+      id="tsparticles"
+      className="fixed inset-0 pointer-events-none"
+      style={{ zIndex: 0 }}
+      options={options}
+    />
+  )
+}