github-to-mcp-monorepo 1.0.0

package/apps/web/lib/utils.ts

@@ -0,0 +1,439 @@
+/**
+ * Utility Functions
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge Tailwind CSS classes with conflict resolution
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Parse GitHub URL to extract owner and repo
+ */
+export function parseGitHubUrl(url: string): { owner: string; repo: string } | null {
+  const patterns = [
+    /^https?:\/\/github\.com\/([^\/]+)\/([^\/]+)\/?.*$/,
+    /^git@github\.com:([^\/]+)\/([^\/]+)\.git$/,
+    /^([^\/]+)\/([^\/]+)$/,
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) {
+      return {
+        owner: match[1],
+        repo: match[2].replace(/\.git$/, ''),
+      };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Validate GitHub URL format
+ */
+export function isValidGitHubUrl(url: string): boolean {
+  return parseGitHubUrl(url) !== null;
+}
+
+/**
+ * Format number with K/M suffix
+ */
+export function formatNumber(num: number): string {
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1)}M`;
+  }
+  if (num >= 1_000) {
+    return `${(num / 1_000).toFixed(1)}K`;
+  }
+  return num.toString();
+}
+
+/**
+ * Format date to relative time
+ */
+export function formatRelativeTime(date: string | Date): string {
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now.getTime() - then.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffSecs < 60) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
+  if (diffDays < 365) return `${Math.floor(diffDays / 30)}mo ago`;
+  return `${Math.floor(diffDays / 365)}y ago`;
+}
+
+/**
+ * Format file size
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+/**
+ * Copy text to clipboard with fallback
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+    
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    
+    const success = document.execCommand('copy');
+    document.body.removeChild(textArea);
+    return success;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Download text as file
+ */
+export function downloadAsFile(content: string, filename: string, mimeType = 'text/plain'): void {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Debounce function
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+}
+
+/**
+ * Throttle function
+ */
+export function throttle<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle = false;
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      fn(...args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+/**
+ * Generate unique ID
+ */
+export function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+
+/**
+ * Sleep utility
+ */
+export function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Truncate string with ellipsis
+ */
+export function truncate(str: string, maxLength: number): string {
+  if (str.length <= maxLength) return str;
+  return `${str.slice(0, maxLength - 3)}...`;
+}
+
+/**
+ * Safely parse JSON
+ */
+export function safeJsonParse<T>(json: string, fallback: T): T {
+  try {
+    return JSON.parse(json) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Get contrast color (black or white) for background
+ */
+export function getContrastColor(hexColor: string): 'black' | 'white' {
+  const hex = hexColor.replace('#', '');
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? 'black' : 'white';
+}
+
+/**
+ * Format time duration in seconds to human readable
+ */
+export function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (mins < 60) return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+  const hours = Math.floor(mins / 60);
+  const remainingMins = mins % 60;
+  return `${hours}h ${remainingMins}m`;
+}
+
+/**
+ * Create a delayed promise that resolves after specified time
+ */
+export function delay(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Retry a function with exponential backoff
+ */
+export async function retryWithBackoff<T>(
+  fn: () => Promise<T>,
+  maxRetries: number = 3,
+  baseDelay: number = 1000
+): Promise<T> {
+  let lastError: Error | undefined;
+  
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      lastError = error as Error;
+      if (attempt < maxRetries - 1) {
+        const delayMs = baseDelay * Math.pow(2, attempt);
+        await delay(delayMs);
+      }
+    }
+  }
+  
+  throw lastError;
+}
+
+/**
+ * Sanitize string for use in filenames
+ */
+export function sanitizeFilename(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9-_.]/g, '-')
+    .replace(/--+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+/**
+ * Extract repository name from GitHub URL
+ */
+export function extractRepoName(url: string): string | null {
+  const parsed = parseGitHubUrl(url);
+  return parsed ? parsed.repo : null;
+}
+
+/**
+ * Extract owner and repo as combined string
+ */
+export function extractRepoFullName(url: string): string | null {
+  const parsed = parseGitHubUrl(url);
+  return parsed ? `${parsed.owner}/${parsed.repo}` : null;
+}
+
+/**
+ * Check if running in browser environment
+ */
+export function isBrowser(): boolean {
+  return typeof window !== 'undefined';
+}
+
+/**
+ * Get base URL for API calls
+ */
+export function getApiBaseUrl(): string {
+  if (isBrowser()) {
+    return window.location.origin;
+  }
+  return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+}
+
+/**
+ * Create SSE event source URL with query params
+ */
+export function createStreamUrl(endpoint: string, params: Record<string, string>): string {
+  const base = `${getApiBaseUrl()}${endpoint}`;
+  const searchParams = new URLSearchParams(params);
+  return `${base}?${searchParams.toString()}`;
+}
+
+/**
+ * Parse SSE event data
+ */
+export function parseSSEData<T>(data: string): T | null {
+  try {
+    return JSON.parse(data) as T;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Download multiple files as a zip (requires JSZip)
+ */
+export async function downloadAsZip(
+  files: Array<{ name: string; content: string }>,
+  zipName: string
+): Promise<void> {
+  // Dynamic import to avoid bundling JSZip if not needed
+  const JSZip = (await import('jszip')).default;
+  const zip = new JSZip();
+  
+  files.forEach(file => {
+    zip.file(file.name, file.content);
+  });
+  
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = zipName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Create a chunk array helper for batch processing
+ */
+export function chunk<T>(array: T[], size: number): T[][] {
+  const chunks: T[][] = [];
+  for (let i = 0; i < array.length; i += size) {
+    chunks.push(array.slice(i, i + size));
+  }
+  return chunks;
+}
+
+/**
+ * Run promises in parallel with concurrency limit
+ */
+export async function parallelLimit<T, R>(
+  items: T[],
+  limit: number,
+  fn: (item: T) => Promise<R>
+): Promise<R[]> {
+  const results: R[] = [];
+  const executing: Promise<void>[] = [];
+  
+  for (const item of items) {
+    const promise = fn(item).then(result => {
+      results.push(result);
+    });
+    
+    executing.push(promise);
+    
+    if (executing.length >= limit) {
+      await Promise.race(executing);
+      // Remove completed promises
+      executing.splice(0, executing.findIndex(p => p === promise) + 1);
+    }
+  }
+  
+  await Promise.all(executing);
+  return results;
+}
+
+/**
+ * Get platform-specific config file paths
+ */
+export function getConfigPaths(platform: 'macos' | 'windows' | 'linux'): {
+  claude: string;
+  cursor: string;
+} {
+  switch (platform) {
+    case 'macos':
+      return {
+        claude: '~/Library/Application Support/Claude/claude_desktop_config.json',
+        cursor: '~/.cursor/mcp.json',
+      };
+    case 'windows':
+      return {
+        claude: '%APPDATA%\\Claude\\claude_desktop_config.json',
+        cursor: '%USERPROFILE%\\.cursor\\mcp.json',
+      };
+    case 'linux':
+      return {
+        claude: '~/.config/Claude/claude_desktop_config.json',
+        cursor: '~/.cursor/mcp.json',
+      };
+  }
+}
+
+/**
+ * Escape string for shell command
+ */
+export function escapeShellArg(arg: string): string {
+  return `'${arg.replace(/'/g, "'\\''")}'`;
+}
+
+/**
+ * Create MCP server config JSON
+ */
+export function createMCPConfig(
+  serverName: string,
+  command: string,
+  args: string[] = [],
+  env?: Record<string, string>
+): string {
+  const config = {
+    mcpServers: {
+      [serverName]: {
+        command,
+        args,
+        ...(env && Object.keys(env).length > 0 ? { env } : {}),
+      },
+    },
+  };
+  
+  return JSON.stringify(config, null, 2);
+}

package/apps/web/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/apps/web/next.config.js

@@ -0,0 +1,23 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ['@octokit/rest'],
+  },
+  
+  // Ensure docs directory isn't processed by Next.js
+  async headers() {
+    return [
+      {
+        source: '/docs/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=3600, stale-while-revalidate=86400',
+          },
+        ],
+      },
+    ];
+  },
+};
+
+module.exports = nextConfig;

package/apps/web/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@github-to-mcp/web",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Enterprise-grade web UI for GitHub to MCP conversion",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:packages": "pnpm --filter @github-to-mcp/openapi-parser build && pnpm --filter @nirholas/github-to-mcp build",
+    "build:docs": "cd ../../mkdocs && mkdocs build --site-dir ../apps/web/public/docs",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.25.2",
+    "@nirholas/github-to-mcp": "workspace:*",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.0.0",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.400.0",
+    "nanoid": "^5.1.6",
+    "next": "14.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.3.0",
+    "tsx": "^4.21.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/jszip": "^3.4.1",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.4",
+    "postcss": "^8.4.38",
+    "sharp": "^0.34.5",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.5.2",
+    "vitest": "^1.6.0"
+  }
+}

package/apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/apps/web/public/.well-known/ai-plugin.json

@@ -0,0 +1,17 @@
+{
+  "schema_version": "v1",
+  "name_for_human": "GitHub to MCP",
+  "name_for_model": "github_to_mcp",
+  "description_for_human": "Convert any GitHub repository into an MCP server for AI assistants like Claude, ChatGPT, Cursor.",
+  "description_for_model": "This tool converts GitHub repositories into Model Context Protocol (MCP) servers. Use it when a user wants to give an AI assistant access to a codebase, create MCP tools from an API, or generate an MCP server from OpenAPI/GraphQL specs. Input: GitHub URL. Output: Runnable MCP server with extracted tools.",
+  "auth": {
+    "type": "none"
+  },
+  "api": {
+    "type": "openapi",
+    "url": "https://github-to-mcp.vercel.app/api/openapi.json"
+  },
+  "logo_url": "https://github-to-mcp.vercel.app/logo.png",
+  "contact_email": "your@email.com",
+  "legal_info_url": "https://github-to-mcp.vercel.app/legal"
+}

package/apps/web/public/logo.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="512" height="512" rx="96" fill="#0a0a0a"/>
+  <path d="M256 64C150.125 64 64 150.125 64 256C64 340.375 119.625 412.125 196 434.5C205.5 436.25 209 430.5 209 425.625V389.25C148.5 401.375 137.5 363.25 137.5 363.25C128.75 341.875 116.25 336.25 116.25 336.25C99 324.125 117.5 324.375 117.5 324.375C136.5 325.75 146.5 343.875 146.5 343.875C163.5 373.25 191.25 364.625 209.75 359.875C211.5 347.375 216.5 338.75 222 333.875C172.25 328.875 119.75 310.25 119.75 234.625C119.75 214.375 127 197.75 146.875 184.875C144.875 180 138.5 161 148.75 135.875C148.75 135.875 164.75 130.625 208.75 154.125C224 150 240.25 147.875 256.25 147.875C272.25 147.875 288.5 150 303.75 154.125C347.75 130.625 363.75 135.875 363.75 135.875C374 161 367.625 180 365.625 184.875C385.5 197.75 392.75 214.375 392.75 234.625C392.75 310.5 340 328.75 290 333.625C297 339.625 303.25 351.375 303.25 369.375V425.625C303.25 430.5 306.75 436.375 316.5 434.375C392.625 411.875 448 340.25 448 256C448 150.125 361.875 64 256 64Z" fill="white"/>
+  <circle cx="400" cy="400" r="96" fill="#3b82f6"/>
+  <path d="M400 344L400 456M344 400L456 400" stroke="white" stroke-width="24" stroke-linecap="round"/>
+</svg>

package/apps/web/public/robots.txt

@@ -0,0 +1,22 @@
+User-agent: *
+Allow: /
+
+User-agent: GPTBot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /
+
+User-agent: Claude-Web
+Allow: /
+
+User-agent: anthropic-ai
+Allow: /
+
+User-agent: Google-Extended
+Allow: /
+
+User-agent: Amazonbot
+Allow: /
+
+Sitemap: https://github-to-mcp.vercel.app/sitemap.xml

package/apps/web/public/schema.json

@@ -0,0 +1,27 @@
+{
+  "@context": "https://schema.org",
+  "@type": "SoftwareApplication",
+  "name": "GitHub to MCP",
+  "applicationCategory": "DeveloperApplication",
+  "operatingSystem": "Any",
+  "description": "Convert any GitHub repository into a Model Context Protocol (MCP) server for AI assistants like Claude, ChatGPT, Cursor, and more.",
+  "url": "https://github-to-mcp.vercel.app",
+  "downloadUrl": "https://www.npmjs.com/package/@nirholas/github-to-mcp",
+  "softwareVersion": "1.0.0",
+  "author": {
+    "@type": "Person",
+    "name": "nirholas",
+    "url": "https://github.com/nirholas"
+  },
+  "offers": {
+    "@type": "Offer",
+    "price": "0",
+    "priceCurrency": "USD"
+  },
+  "aggregateRating": {
+    "@type": "AggregateRating",
+    "ratingValue": "5",
+    "ratingCount": "1"
+  },
+  "keywords": "MCP, Model Context Protocol, Claude, ChatGPT, Cursor, AI tools, GitHub, MCP server, AI assistant"
+}

package/apps/web/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+      },
+    },
+  },
+  plugins: [],
+};