MCP Config Generator Server

A web tool for safely adding MCP servers to your Claude Desktop configuration.

GitHub

Documentation

MCP Config Generator

A modern web tool for safely adding MCP servers to your Claude Desktop configuration without breaking the JSON structure.

🌟 Features

  • Safe Configuration Management - Load your existing config and safely add new servers
  • JSON Validation - Prevents breaking your configuration with automatic validation
  • Multiple Server Types - Supports command-based, HTTP, and custom server configurations
  • Visual Server List - See all your current servers with easy removal options
  • Copy & Download - Easy export of your final configuration
  • Real-time Formatting - Automatic JSON formatting and validation
  • Responsive Design - Works on desktop and mobile devices

🎯 Problem This Solves

When you find a new MCP server configuration online and want to add it to your existing Claude Desktop config, manually editing the JSON can be risky - one syntax error breaks the entire configuration. This tool eliminates that risk by:

  • Validating your existing configuration first
  • Safely merging new server configurations
  • Ensuring the final output is valid JSON
  • Providing visual feedback throughout the process

🚀 How to Use

1. Load Your Current Config

  • Open the tool in your browser: mcp-conf-gen.pages.dev
  • Paste your existing claude_desktop_config.json content into the first text area
  • Click "Validate Config" to ensure it's properly formatted
  • Or use "Load Example" to start with a sample configuration

2. Add New Servers

  • Find a server configuration on a website (GitHub, documentation, blog posts, etc.)
  • Copy the JSON block for the server (just the server part, not the whole config)
  • Enter a unique server name in the "Server name" field
  • Paste the JSON configuration in the "Server JSON configuration" field
  • Click "Add Server" - the tool validates and adds it safely

3. Manage Your Servers

  • View all current servers in the "Current Servers" section
  • See command details and configuration for each server
  • Remove unwanted servers with the delete button
  • Server details are truncated for readability but show full info on hover

4. Export Your Config

  • View the complete configuration in the "Final Configuration" section
  • Copy to clipboard with the "Copy" button
  • Download as a file with the "Download" button
  • Use "Format" to clean up the JSON formatting

📋 Example Workflow

Your existing config:

{
  "serverConfig": {
    "command": "/bin/sh",
    "args": ["-c"]
  },
  "mcpServers": {
    "desktop-commander": {
      "command": "npx",
      "args": ["@wonderwhy-er/desktop-commander@latest"]
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    }
  }
}

Found a new server configuration online:

"github": {
  "type": "http",
  "url": "https://api.githubcopilot.com/mcp/",
  "headers": {
    "Authorization": "Bearer ${input:github_mcp_pat}"
  }
}

Result after safely adding:

{
  "serverConfig": {
    "command": "/bin/sh",
    "args": ["-c"]
  },
  "mcpServers": {
    "desktop-commander": {
      "command": "npx",
      "args": ["@wonderwhy-er/desktop-commander@latest"]
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    },
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer ${input:github_mcp_pat}"
      }
    }
  }
}

📁 Claude Desktop Setup

  1. Use the tool to generate your configuration
  2. Copy or download the final configuration
  3. Save as claude_desktop_config.json in your Claude config folder:
    • macOS: ~/Library/Application Support/Claude/
    • Windows: %APPDATA%/Claude/
    • Linux: ~/.config/claude/
  4. Restart Claude Desktop to load the new configuration

🛠️ Supported Server Types

Command-based Servers

{
  "command": "npx",
  "args": ["@modelcontextprotocol/server-github"]
}

HTTP Servers

{
  "type": "http",
  "url": "https://api.example.com/mcp/",
  "headers": {
    "Authorization": "Bearer ${input:api_key}"
  }
}

Custom Configurations

Any valid MCP server configuration is supported. The tool preserves all properties and structures.

🔧 Development

The project uses pure HTML, CSS, and JavaScript with no dependencies or build process.

# Clone the repository
git clone https://github.com/maslybs/mcp-config-generator.git

# Open in browser
open index.html

Project Structure

  • index.html - Complete single-file application
  • README.md - This documentation

🌐 Live Demo

Visit mcp-conf-gen.pages.dev to use the tool online.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

MIT License - see the code for details.