github-to-mcp-monorepo 1.0.0

package/apps/web/app/playground/v2/use-url-state.ts

@@ -0,0 +1,296 @@
+/**
+ * useUrlState Hook - Sync playground state with URL parameters
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useEffect, useCallback, useRef } from 'react';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import type { TransportConfig, McpTool, PlaygroundTab } from '@/hooks/types';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface UseUrlStateOptions {
+  /** Current transport configuration */
+  transportConfig: TransportConfig | null;
+  /** Function to update transport config */
+  setTransportConfig: (config: TransportConfig) => void;
+  /** Current active tab */
+  activeTab: PlaygroundTab;
+  /** Function to update active tab */
+  setActiveTab: (tab: PlaygroundTab) => void;
+  /** Currently selected tool name */
+  selectedToolName?: string;
+  /** List of available tools (for lookup) */
+  tools: McpTool[];
+  /** Function to set selected tool */
+  setSelectedTool: (tool: McpTool | null) => void;
+}
+
+// ============================================================================
+// URL Parameter Keys
+// ============================================================================
+
+const URL_PARAMS = {
+  TRANSPORT_TYPE: 'transport',
+  TRANSPORT_URL: 'url',
+  TRANSPORT_COMMAND: 'command',
+  TRANSPORT_ARGS: 'args',
+  ACTIVE_TAB: 'tab',
+  SELECTED_TOOL: 'tool',
+  HEADERS: 'headers',
+} as const;
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+export function useUrlState(options: UseUrlStateOptions): void {
+  const {
+    transportConfig,
+    setTransportConfig,
+    activeTab,
+    setActiveTab,
+    selectedToolName,
+    tools,
+    setSelectedTool,
+  } = options;
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  
+  // Ref to track if we're initializing from URL
+  const initializingRef = useRef(true);
+  // Ref to track previous values to avoid unnecessary updates
+  const prevValuesRef = useRef({
+    transportConfig: null as TransportConfig | null,
+    activeTab: '' as PlaygroundTab,
+    selectedToolName: '' as string | undefined,
+  });
+
+  // ============================================================================
+  // Initialize from URL on mount
+  // ============================================================================
+
+  useEffect(() => {
+    if (!initializingRef.current) return;
+    initializingRef.current = false;
+
+    // Parse transport config from URL
+    const transportType = searchParams.get(URL_PARAMS.TRANSPORT_TYPE);
+    const transportUrl = searchParams.get(URL_PARAMS.TRANSPORT_URL);
+    const transportCommand = searchParams.get(URL_PARAMS.TRANSPORT_COMMAND);
+    const transportArgs = searchParams.get(URL_PARAMS.TRANSPORT_ARGS);
+    const headersParam = searchParams.get(URL_PARAMS.HEADERS);
+
+    if (transportType) {
+      let config: TransportConfig | null = null;
+
+      if (transportType === 'stdio' && transportCommand) {
+        config = {
+          type: 'stdio',
+          command: transportCommand,
+          args: transportArgs ? transportArgs.split(',') : undefined,
+        };
+      } else if ((transportType === 'sse' || transportType === 'http') && transportUrl) {
+        let headers: Record<string, string> | undefined;
+        if (headersParam) {
+          try {
+            headers = JSON.parse(decodeURIComponent(headersParam));
+          } catch {
+            // Ignore invalid headers
+          }
+        }
+        config = {
+          type: transportType as 'sse' | 'http',
+          url: transportUrl,
+          headers,
+        };
+      } else if (transportType === 'websocket' && transportUrl) {
+        config = {
+          type: 'websocket',
+          url: transportUrl,
+        };
+      }
+
+      if (config) {
+        setTransportConfig(config);
+      }
+    }
+
+    // Parse active tab from URL
+    const tabParam = searchParams.get(URL_PARAMS.ACTIVE_TAB);
+    if (tabParam && ['tools', 'resources', 'prompts'].includes(tabParam)) {
+      setActiveTab(tabParam as PlaygroundTab);
+    }
+
+    // Store initial values
+    prevValuesRef.current = {
+      transportConfig,
+      activeTab,
+      selectedToolName,
+    };
+  }, [searchParams, setTransportConfig, setActiveTab, transportConfig, activeTab, selectedToolName]);
+
+  // ============================================================================
+  // Handle selected tool from URL when tools load
+  // ============================================================================
+
+  useEffect(() => {
+    const toolParam = searchParams.get(URL_PARAMS.SELECTED_TOOL);
+    if (toolParam && tools.length > 0) {
+      const tool = tools.find((t) => t.name === toolParam);
+      if (tool) {
+        setSelectedTool(tool);
+      }
+    }
+  }, [searchParams, tools, setSelectedTool]);
+
+  // ============================================================================
+  // Update URL when state changes
+  // ============================================================================
+
+  const updateUrl = useCallback(() => {
+    // Skip if values haven't changed
+    if (
+      prevValuesRef.current.transportConfig === transportConfig &&
+      prevValuesRef.current.activeTab === activeTab &&
+      prevValuesRef.current.selectedToolName === selectedToolName
+    ) {
+      return;
+    }
+
+    prevValuesRef.current = {
+      transportConfig,
+      activeTab,
+      selectedToolName,
+    };
+
+    const params = new URLSearchParams();
+
+    // Add transport config
+    if (transportConfig) {
+      params.set(URL_PARAMS.TRANSPORT_TYPE, transportConfig.type);
+      
+      if (transportConfig.type === 'stdio') {
+        params.set(URL_PARAMS.TRANSPORT_COMMAND, transportConfig.command);
+        if (transportConfig.args?.length) {
+          params.set(URL_PARAMS.TRANSPORT_ARGS, transportConfig.args.join(','));
+        }
+      } else if ('url' in transportConfig) {
+        params.set(URL_PARAMS.TRANSPORT_URL, transportConfig.url);
+        if ('headers' in transportConfig && transportConfig.headers) {
+          params.set(URL_PARAMS.HEADERS, encodeURIComponent(JSON.stringify(transportConfig.headers)));
+        }
+      }
+    }
+
+    // Add active tab
+    if (activeTab !== 'tools') {
+      params.set(URL_PARAMS.ACTIVE_TAB, activeTab);
+    }
+
+    // Add selected tool
+    if (selectedToolName) {
+      params.set(URL_PARAMS.SELECTED_TOOL, selectedToolName);
+    }
+
+    // Update URL without navigation
+    const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname;
+    router.replace(newUrl, { scroll: false });
+  }, [transportConfig, activeTab, selectedToolName, pathname, router]);
+
+  // Debounced URL update
+  useEffect(() => {
+    const timeoutId = setTimeout(updateUrl, 500);
+    return () => clearTimeout(timeoutId);
+  }, [updateUrl]);
+}
+
+// ============================================================================
+// URL Generation Utilities
+// ============================================================================
+
+/**
+ * Generate a shareable URL for the current playground state
+ */
+export function generateShareableUrl(options: {
+  transportConfig: TransportConfig | null;
+  activeTab?: PlaygroundTab;
+  selectedToolName?: string;
+  baseUrl?: string;
+}): string {
+  const { transportConfig, activeTab, selectedToolName, baseUrl = '' } = options;
+  const params = new URLSearchParams();
+
+  if (transportConfig) {
+    params.set(URL_PARAMS.TRANSPORT_TYPE, transportConfig.type);
+    
+    if (transportConfig.type === 'stdio') {
+      params.set(URL_PARAMS.TRANSPORT_COMMAND, transportConfig.command);
+      if (transportConfig.args?.length) {
+        params.set(URL_PARAMS.TRANSPORT_ARGS, transportConfig.args.join(','));
+      }
+    } else if ('url' in transportConfig) {
+      params.set(URL_PARAMS.TRANSPORT_URL, transportConfig.url);
+    }
+  }
+
+  if (activeTab && activeTab !== 'tools') {
+    params.set(URL_PARAMS.ACTIVE_TAB, activeTab);
+  }
+
+  if (selectedToolName) {
+    params.set(URL_PARAMS.SELECTED_TOOL, selectedToolName);
+  }
+
+  const queryString = params.toString();
+  return queryString ? `${baseUrl}/playground/v2?${queryString}` : `${baseUrl}/playground/v2`;
+}
+
+/**
+ * Parse a shareable URL into playground state
+ */
+export function parseShareableUrl(url: string): {
+  transportConfig: TransportConfig | null;
+  activeTab: PlaygroundTab;
+  selectedToolName: string | null;
+} {
+  try {
+    const urlObj = new URL(url);
+    const params = urlObj.searchParams;
+
+    let transportConfig: TransportConfig | null = null;
+    const transportType = params.get(URL_PARAMS.TRANSPORT_TYPE);
+    const transportUrl = params.get(URL_PARAMS.TRANSPORT_URL);
+    const transportCommand = params.get(URL_PARAMS.TRANSPORT_COMMAND);
+    const transportArgs = params.get(URL_PARAMS.TRANSPORT_ARGS);
+
+    if (transportType === 'stdio' && transportCommand) {
+      transportConfig = {
+        type: 'stdio',
+        command: transportCommand,
+        args: transportArgs ? transportArgs.split(',') : undefined,
+      };
+    } else if ((transportType === 'sse' || transportType === 'http') && transportUrl) {
+      transportConfig = {
+        type: transportType as 'sse' | 'http',
+        url: transportUrl,
+      };
+    }
+
+    const activeTab = (params.get(URL_PARAMS.ACTIVE_TAB) as PlaygroundTab) || 'tools';
+    const selectedToolName = params.get(URL_PARAMS.SELECTED_TOOL);
+
+    return { transportConfig, activeTab, selectedToolName };
+  } catch {
+    return { transportConfig: null, activeTab: 'tools', selectedToolName: null };
+  }
+}
+
+export default useUrlState;

package/apps/web/app/providers.tsx

@@ -0,0 +1,22 @@
+/**
+ * App Providers - Client-side context providers
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { ReactNode } from 'react';
+import { PlaygroundProvider } from '@/lib/playground-store';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <PlaygroundProvider>
+      {children}
+    </PlaygroundProvider>
+  );
+}

package/apps/web/app/sitemap.ts

@@ -0,0 +1,32 @@
+import { MetadataRoute } from 'next';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = 'https://github-to-mcp.vercel.app';
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/convert`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/playground`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/batch`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.6,
+    },
+  ];
+}

package/apps/web/app/twitter-image.tsx

@@ -0,0 +1,112 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'GitHub to MCP - Convert any repo to MCP server';
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#0a0a0a',
+          backgroundImage: 'radial-gradient(circle at 25% 25%, #1a1a2e 0%, transparent 50%), radial-gradient(circle at 75% 75%, #16213e 0%, transparent 50%)',
+        }}
+      >
+        {/* GitHub icon */}
+        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 40 }}>
+          <svg width="80" height="80" viewBox="0 0 24 24" fill="white">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          <span style={{ fontSize: 60, fontWeight: 'bold', color: 'white', marginLeft: 20, marginRight: 20 }}>→</span>
+          <div style={{ 
+            width: 80, 
+            height: 80, 
+            borderRadius: 16, 
+            background: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 36,
+            fontWeight: 'bold',
+            color: 'white'
+          }}>
+            MCP
+          </div>
+        </div>
+
+        {/* Title */}
+        <div
+          style={{
+            fontSize: 72,
+            fontWeight: 800,
+            background: 'linear-gradient(90deg, #ffffff 0%, #a5b4fc 100%)',
+            backgroundClip: 'text',
+            color: 'transparent',
+            marginBottom: 20,
+          }}
+        >
+          GitHub to MCP
+        </div>
+
+        {/* Subtitle */}
+        <div
+          style={{
+            fontSize: 32,
+            color: '#a1a1aa',
+            textAlign: 'center',
+            maxWidth: 800,
+          }}
+        >
+          Convert any repo to MCP server in seconds
+        </div>
+
+        {/* Features */}
+        <div style={{ display: 'flex', marginTop: 40, gap: 40 }}>
+          {['Claude', 'ChatGPT', 'Cursor', 'Windsurf'].map((name) => (
+            <div
+              key={name}
+              style={{
+                padding: '12px 24px',
+                borderRadius: 9999,
+                background: 'rgba(59, 130, 246, 0.2)',
+                border: '1px solid rgba(59, 130, 246, 0.4)',
+                color: '#60a5fa',
+                fontSize: 20,
+              }}
+            >
+              {name}
+            </div>
+          ))}
+        </div>
+
+        {/* URL */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 40,
+            fontSize: 24,
+            color: '#71717a',
+          }}
+        >
+          github-to-mcp.vercel.app
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}