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

📋 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}"
      }
    }
  }
}

🛠️ 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.

🚀 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

📁 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