VS Code MCP Install Button Generator

Handy utility app to help generate VS Code install buttons and links for Model Context Protocol (MCP) servers. Create professional one-click install experiences for your MCP projects with customizable badges and comprehensive configuration support.

📺 Watch full demo on YouTube

Try it out live at VSCodeMCP.com!

Sample buttons:

This tool handles the conversion automatically when generating install buttons.

✨ Features

• 🌐 Comprehensive MCP Support:

  • stdio: Configure command execution, arguments, and environment variables
  • http/sse: Configure server URLs, custom headers, and authentication

• 🎨 Advanced Badge Customization:

  • Custom badge text with automatic encoding
  • Full color picker for badge and logo colors
  • Multiple professional styles (flat, flat-square, plastic, for-the-badge, social)
  • Powered by Shields.io for high-quality badge generation

• 📋 Multiple Output Formats:

  • Markdown format: Perfect for README files and documentation
  • HTML format: Ready for web pages and blogs

• ⚡ Real-time Experience:

  • Live preview of generated badges
  • Instant copy-to-clipboard functionality
  • Responsive design for all devices

• 🔗 VS Code Integration:

  • Generates proper vscode:mcp/install URLs
  • Automatic JSON encoding for URL parameters
  • One-click installation experience for end users

🚨 Important Configuration Note

The JSON configuration format used for the VS Code install button is different from VS Code’s MCP configuration file format.

• For the install button (this tool): The MCP server name is a key-value pair in the URL parameters
• For VS Code’s mcp.json file: The MCP server name is a parent object containing the configuration

Example of VS Code MCP configuration format (used in your mcp.json file):

{
  "microsoft.docs.mcp": {
    "type": "http",
    "url": "https://learn.microsoft.com/api/mcp"
  }
}

🚀 Getting Started

Quick Start

1. Open src/index.html in your web browser, or
2. Visit the live version at vscodemcp.com

📖 Usage

Step-by-Step Guide

1. Enter MCP Server Details: