github-to-mcp-monorepo 1.0.0

package/apps/web/app/page.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import Header from '@/components/Header'
+import Hero from '@/components/Hero'
+import ProductCards from '@/components/ProductCards'
+import HowItWorks from '@/components/HowItWorks'
+import Features from '@/components/Features'
+import Footer from '@/components/Footer'
+import ParticleBackground from '@/components/ParticleBackground'
+import InstallBanner from '@/components/InstallBanner'
+import { motion } from 'framer-motion'
+import { Github } from 'lucide-react'
+
+export default function Home() {
+  return (
+    <main id="main-content" className="relative min-h-screen">
+      <ParticleBackground />
+      <Header />
+      
+      <div className="container mx-auto px-4 pt-24 pb-16">
+        {/* Hero with main conversion tool - front and center */}
+        <Hero />
+        
+        {/* Quick links and secondary actions */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.35 }}
+          className="flex flex-wrap justify-center gap-4 mt-12 mb-8"
+        >
+          <a
+            href="/#how-it-works"
+            className="px-6 py-3 bg-transparent border border-neutral-700 rounded-xl font-semibold text-white hover:border-neutral-500 hover:bg-white/5 transition-all"
+          >
+            How It Works
+          </a>
+          <a
+            href="/playground"
+            className="px-6 py-3 bg-transparent border border-neutral-700 rounded-xl font-semibold text-white hover:border-neutral-500 hover:bg-white/5 transition-all"
+          >
+            Try Playground
+          </a>
+          <a
+            href="https://github.com/nirholas/github-to-mcp"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-6 py-3 bg-transparent border border-neutral-700 rounded-xl font-semibold text-white hover:border-neutral-500 hover:bg-white/5 transition-all flex items-center gap-2"
+          >
+            <Github className="w-4 h-4" />
+            View on GitHub
+          </a>
+        </motion.div>
+
+        {/* CLI Install Banner */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="max-w-2xl mx-auto mb-16"
+        >
+          <InstallBanner variant="hero" />
+        </motion.div>
+        
+        {/* All tools and features - accessible from homepage */}
+        <ProductCards />
+        
+        {/* How it works - educational content below */}
+        <HowItWorks />
+        
+        {/* Technical features */}
+        <Features />
+      </div>
+      
+      <Footer />
+    </main>
+  )
+}

package/apps/web/app/playground/page.tsx

@@ -0,0 +1,306 @@
+/**
+ * Playground Page - Interactive MCP tool testing
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { Suspense, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { Terminal, ArrowLeft, AlertCircle, RefreshCw, Share2, Check, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import ParticleBackground from '@/components/ParticleBackground';
+import Playground from '@/components/Playground';
+import { Button } from '@/components/ui/button';
+import { usePlaygroundState, usePlaygroundErrors, usePlaygroundSharing } from '@/hooks/use-playground-store';
+
+// V2 Banner Component
+function V2Banner() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="mb-6"
+    >
+      <Link
+        href="/playground/v2"
+        className="block p-4 rounded-xl border border-green-500/30 bg-green-500/10 hover:bg-green-500/20 transition-colors group"
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <span className="px-2 py-1 text-xs font-bold bg-green-500/20 text-green-400 rounded-full">
+              NEW
+            </span>
+            <p className="text-white font-medium">
+              Try the new Playground v2 with enhanced MCP support
+            </p>
+          </div>
+          <span className="text-green-400 group-hover:translate-x-1 transition-transform">
+            →
+          </span>
+        </div>
+        <p className="mt-2 text-sm text-neutral-400 ml-14">
+          Connect to any MCP server using STDIO, SSE, or Streamable HTTP transport.
+        </p>
+      </Link>
+    </motion.div>
+  );
+}
+
+function PlaygroundContent() {
+  const searchParams = useSearchParams();
+  const {
+    generatedCode,
+    tools,
+    repoName,
+    isLoading,
+    conversionResult,
+    loadFromUrl,
+  } = usePlaygroundState();
+  
+  const {
+    error,
+    hasError,
+    isRecoverable,
+    retryCount,
+    clearError,
+    incrementRetry,
+  } = usePlaygroundErrors();
+
+  const {
+    canShare,
+    copyShareLink,
+  } = usePlaygroundSharing();
+
+  const [shareCopied, setShareCopied] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  // Load from URL params on mount
+  useEffect(() => {
+    const hasUrlParams = searchParams.has('code') || searchParams.has('gist');
+    if (hasUrlParams) {
+      loadFromUrl(searchParams);
+    }
+  }, [searchParams, loadFromUrl]);
+
+  // Handle share button click
+  const handleShare = async () => {
+    const success = await copyShareLink();
+    if (success) {
+      setShareCopied(true);
+      setTimeout(() => setShareCopied(false), 2000);
+    }
+  };
+
+  // Handle retry
+  const handleRetry = async () => {
+    setIsRetrying(true);
+    incrementRetry();
+    
+    // Try to reload from URL params
+    const hasUrlParams = searchParams.has('code') || searchParams.has('gist');
+    if (hasUrlParams) {
+      await loadFromUrl(searchParams);
+    }
+    
+    clearError();
+    setIsRetrying(false);
+  };
+
+  // Determine if we have content to show
+  const hasContent = !!generatedCode || tools.length > 0;
+
+  return (
+    <main id="main-content" className="relative min-h-screen flex flex-col">
+      <ParticleBackground />
+      <Header />
+
+      <div className="container mx-auto px-4 pt-24 pb-8 flex-1 flex flex-col">
+        {/* Back link */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="mb-6 flex items-center justify-between"
+        >
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Home
+          </Link>
+
+          {/* Share button */}
+          {canShare && (
+            <Button
+              onClick={handleShare}
+              variant="outline"
+              size="sm"
+              className="gap-2"
+            >
+              {shareCopied ? (
+                <>
+                  <Check className="w-4 h-4 text-green-400" />
+                  Link Copied!
+                </>
+              ) : (
+                <>
+                  <Share2 className="w-4 h-4" />
+                  Share
+                </>
+              )}
+            </Button>
+          )}
+        </motion.div>
+
+        {/* Page header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-8"
+        >
+          {/* V2 Banner */}
+          <V2Banner />
+
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-neutral-800 mb-6">
+            <Terminal className="w-4 h-4 text-white" />
+            <span className="text-sm font-medium text-neutral-400">
+              Interactive <span className="text-white font-semibold">Playground</span>
+            </span>
+            {repoName && (
+              <span className="ml-2 px-2 py-0.5 text-xs bg-white/10 text-white rounded-full">
+                {repoName}
+              </span>
+            )}
+          </div>
+
+          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
+            Test Your MCP Tools
+          </h1>
+          <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
+            {hasContent
+              ? `Execute ${tools.length} tool${tools.length !== 1 ? 's' : ''} with an interactive testing interface.`
+              : 'Try out generated tools with an interactive testing interface. Execute tools, view responses, and explore schemas.'
+            }
+          </p>
+        </motion.div>
+
+        {/* Loading state */}
+        {isLoading && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="flex-1 flex items-center justify-center"
+          >
+            <div className="text-center">
+              <Loader2 className="w-12 h-12 text-white animate-spin mx-auto mb-4" />
+              <p className="text-neutral-400">Loading playground...</p>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Error state */}
+        {hasError && error && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="max-w-2xl mx-auto mb-8"
+          >
+            <div className={`rounded-xl border p-6 ${
+              error.type === 'syntax' 
+                ? 'border-yellow-500/30 bg-yellow-500/10'
+                : 'border-red-500/30 bg-red-500/10'
+            }`}>
+              <div className="flex items-start gap-4">
+                <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                  error.type === 'syntax'
+                    ? 'bg-yellow-500/20'
+                    : 'bg-red-500/20'
+                }`}>
+                  <AlertCircle className={`w-5 h-5 ${
+                    error.type === 'syntax' ? 'text-yellow-400' : 'text-red-400'
+                  }`} />
+                </div>
+                <div className="flex-1">
+                  <h3 className={`text-lg font-semibold mb-2 ${
+                    error.type === 'syntax' ? 'text-yellow-400' : 'text-red-400'
+                  }`}>
+                    {error.type === 'syntax' && 'Syntax Error'}
+                    {error.type === 'server' && 'Server Error'}
+                    {error.type === 'execution' && 'Execution Error'}
+                    {error.type === 'network' && 'Network Error'}
+                    {error.type === 'unknown' && 'Error'}
+                  </h3>
+                  <p className="text-neutral-300 mb-2">{error.message}</p>
+                  {error.details && (
+                    <pre className="text-sm text-neutral-500 bg-black/30 rounded-lg p-3 overflow-x-auto mb-4 font-mono">
+                      {error.details}
+                    </pre>
+                  )}
+                  
+                  <div className="flex items-center gap-3">
+                    {isRecoverable && (
+                      <Button
+                        onClick={handleRetry}
+                        disabled={isRetrying}
+                        variant="outline"
+                        size="sm"
+                      >
+                        {isRetrying ? (
+                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        ) : (
+                          <RefreshCw className="w-4 h-4 mr-2" />
+                        )}
+                        {retryCount > 0 ? `Retry (${retryCount})` : 'Retry'}
+                      </Button>
+                    )}
+                    <Button
+                      onClick={clearError}
+                      variant="ghost"
+                      size="sm"
+                    >
+                      Dismiss
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Playground component */}
+        {!isLoading && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="flex-1 min-h-[600px]"
+          >
+            <Playground initialResult={conversionResult} />
+          </motion.div>
+        )}
+      </div>
+
+      <Footer />
+    </main>
+  );
+}
+
+export default function PlaygroundPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-black flex items-center justify-center">
+          <div className="animate-spin w-8 h-8 border-2 border-white border-t-transparent rounded-full" />
+        </div>
+      }
+    >
+      <PlaygroundContent />
+    </Suspense>
+  );
+}

package/apps/web/app/playground/v2/error.tsx

@@ -0,0 +1,163 @@
+/**
+ * Playground V2 Error Boundary - Error display with retry option
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { AlertTriangle, RefreshCw, Home, Bug } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+interface PlaygroundV2ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function PlaygroundV2Error({ error, reset }: PlaygroundV2ErrorProps) {
+  useEffect(() => {
+    // Log error to console
+    console.error('[Playground V2 Error]', {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest,
+    });
+
+    // Optional: Send to error reporting service
+    // Example: Sentry, LogRocket, etc.
+    // reportError(error);
+  }, [error]);
+
+  const handleReset = () => {
+    // Clear any cached state that might cause issues
+    if (typeof window !== 'undefined') {
+      try {
+        // Clear potentially corrupted localStorage data
+        const keysToPreserve = ['mcp-playground-v2-visited'];
+        const keysToRemove: string[] = [];
+        
+        for (let i = 0; i < localStorage.length; i++) {
+          const key = localStorage.key(i);
+          if (key && key.startsWith('mcp-playground') && !keysToPreserve.includes(key)) {
+            keysToRemove.push(key);
+          }
+        }
+        
+        keysToRemove.forEach((key) => localStorage.removeItem(key));
+      } catch (e) {
+        console.warn('Failed to clear localStorage:', e);
+      }
+    }
+    
+    reset();
+  };
+
+  const isNetworkError = error.message.toLowerCase().includes('network') ||
+    error.message.toLowerCase().includes('fetch');
+  
+  const isConnectionError = error.message.toLowerCase().includes('connection') ||
+    error.message.toLowerCase().includes('connect');
+
+  return (
+    <main className="relative min-h-screen flex flex-col bg-black">
+      {/* Header placeholder */}
+      <div className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-black/80 border-b border-neutral-800">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center justify-between h-16">
+            <Link href="/" className="text-white font-bold">
+              github-to-mcp
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="container mx-auto px-4 pt-24 pb-8 flex-1 flex items-center justify-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="max-w-md w-full text-center"
+        >
+          {/* Error Icon */}
+          <div className="flex justify-center mb-6">
+            <div className="w-16 h-16 rounded-full bg-red-500/10 border border-red-500/30 flex items-center justify-center">
+              <AlertTriangle className="w-8 h-8 text-red-400" />
+            </div>
+          </div>
+
+          {/* Error Message */}
+          <h1 className="text-2xl font-bold text-white mb-2">
+            Something went wrong
+          </h1>
+          <p className="text-neutral-400 mb-6">
+            {isNetworkError
+              ? 'Unable to connect to the server. Please check your network connection.'
+              : isConnectionError
+              ? 'Failed to connect to the MCP server. Please verify your configuration.'
+              : 'An unexpected error occurred in the playground.'}
+          </p>
+
+          {/* Error Details (collapsible) */}
+          {process.env.NODE_ENV === 'development' && (
+            <details className="mb-6 text-left">
+              <summary className="cursor-pointer text-sm text-neutral-500 hover:text-neutral-400 transition-colors">
+                Show error details
+              </summary>
+              <div className="mt-3 p-4 rounded-lg bg-neutral-900 border border-neutral-800 overflow-x-auto">
+                <p className="text-xs text-red-400 font-mono break-all">
+                  {error.message}
+                </p>
+                {error.digest && (
+                  <p className="text-xs text-neutral-500 mt-2">
+                    Digest: {error.digest}
+                  </p>
+                )}
+                {error.stack && (
+                  <pre className="text-xs text-neutral-500 mt-2 whitespace-pre-wrap">
+                    {error.stack.split('\n').slice(0, 5).join('\n')}
+                  </pre>
+                )}
+              </div>
+            </details>
+          )}
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Button
+              onClick={handleReset}
+              className="gap-2"
+            >
+              <RefreshCw className="w-4 h-4" />
+              Try Again
+            </Button>
+            <Button
+              variant="outline"
+              asChild
+            >
+              <Link href="/" className="gap-2">
+                <Home className="w-4 h-4" />
+                Go Home
+              </Link>
+            </Button>
+          </div>
+
+          {/* Help Text */}
+          <p className="mt-8 text-xs text-neutral-600">
+            If this problem persists, please{' '}
+            <a
+              href="https://github.com/nirholas/github-to-mcp/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-neutral-500 hover:text-neutral-400 underline inline-flex items-center gap-1"
+            >
+              report an issue
+              <Bug className="w-3 h-3" />
+            </a>
+          </p>
+        </motion.div>
+      </div>
+    </main>
+  );
+}

package/apps/web/app/playground/v2/layout.tsx

@@ -0,0 +1,58 @@
+/**
+ * Playground V2 Layout - Metadata and layout wrapper
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import type { Metadata, Viewport } from 'next';
+import { ReactNode } from 'react';
+import { PlaygroundV2Providers } from './providers';
+
+export const metadata: Metadata = {
+  title: 'MCP Playground | github-to-mcp',
+  description: 'Interactive MCP server testing playground. Connect to any MCP server using STDIO, SSE, or Streamable HTTP transport and test tools, resources, and prompts in real-time.',
+  keywords: [
+    'MCP',
+    'Model Context Protocol',
+    'playground',
+    'testing',
+    'tools',
+    'resources',
+    'prompts',
+    'AI',
+    'LLM',
+  ],
+  openGraph: {
+    title: 'MCP Playground | github-to-mcp',
+    description: 'Interactive MCP server testing playground. Test tools, resources, and prompts in real-time.',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'MCP Playground | github-to-mcp',
+    description: 'Interactive MCP server testing playground. Test tools, resources, and prompts in real-time.',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  themeColor: '#000000',
+};
+
+interface PlaygroundV2LayoutProps {
+  children: ReactNode;
+}
+
+export default function PlaygroundV2Layout({ children }: PlaygroundV2LayoutProps) {
+  return (
+    <PlaygroundV2Providers>
+      {children}
+    </PlaygroundV2Providers>
+  );
+}