mcp-badge-creator: Instructions file for GitHub Copilot

MCP Badge Creator - AI Coding Agent Instructions

Project Overview

A Vite + React + TypeScript single-page application that generates one-click install badges for Model Context Protocol (MCP) servers. Users fill a form, and the app generates markdown badges with encoded JSON configurations for VS Code, VS Code Insiders, and Visual Studio.

Architecture & Key Files

Multi-Page React App (CSS Modules)

• Routing: App.tsx provides shell + navigation; pages live in src/pages/ (Home, MCP, Extensions, Packages, Settings).
• Styling: Migrated from monolithic App.css to CSS Modules + design tokens.
• Server Config Logic: Still centralized inside MCP.tsx for badge + README generation.
• Badge Utilities: Extension + package badge helpers in src/utils/.

Build & Deploy Pipeline

• Vite bundler: Fast dev server and optimized production builds
• GitHub Actions: .github/workflows/deploy.yml auto-deploys to GitHub Pages on push to main
• Base path: vite.config.ts sets base: '/mcp-badge-creator/' for GitHub Pages hosting
• TypeScript: Strict mode with separate configs (tsconfig.app.json, tsconfig.node.json)

MCP Badge URL Patterns (Critical Domain Knowledge)

The core business logic encodes MCP server configurations into URL parameters:

VS Code URLs

// VS Code stable
https://vscode.dev/redirect/mcp/install?name={NAME}&config={ENCODED_JSON}

// VS Code Insiders
https://insiders.vscode.dev/redirect/mcp/install?name={NAME}&config={ENCODED_JSON}&quality=insiders

Visual Studio URL

https://vs-open.link/mcp-install?{ENCODED_JSON}

Configuration JSON Structures

See generateConfig() in App.tsx for exact patterns:

• HTTP: { name, type: "http", url }
• NPX: { name, command: "npx", args: ["-y", package], env: {} }
• UVX: { name, command: "uvx", args: ["--from", from, package] || [package], env: {} }
• Docker: { name, command: "docker", args: ["run", "-i", "--rm", image], env: {} }
• Local: { name, command, args: [...], env: {} }