What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based MCP configuration wizard. The finished tool will let you:
- Walk through a multi-step wizard to configure MCP servers for Claude Desktop, Claude Code, or Cursor
- Select from popular MCP servers like filesystem, GitHub, Postgres, Brave Search, and Puppeteer
- Fill in server-specific configuration fields with built-in validation
- Generate properly formatted JSON configuration and copy it with one click
- Get OS-specific instructions for where to save the config file on macOS, Windows, or Linux
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
Some coding familiarity helps
This is an intermediate project. You don't need to be a developer, but understanding basic JSON structure and having completed a beginner project will make the configuration concepts easier to follow.
Describe the Wizard UI with Multiple Steps
Open your AI tool and start a new conversation. A wizard is a multi-step form that guides users through a process one step at a time. The key is to describe the step flow clearly so the AI builds proper navigation between steps:
Build me a single HTML file for an MCP (Model Context Protocol) configuration wizard. It should have:
- A progress bar at the top showing 4 steps: "Choose Client", "Select Servers", "Configure", "Generate"
- The current step should be highlighted and previous steps should show a checkmark
- Step 1 — Choose Client: Show 3 cards the user can select from: "Claude Desktop", "Claude Code (CLI)", and "Cursor". Each card should have the app name, a brief description, and a visual icon. Only one can be selected at a time.
- Step 2 — Select Servers: Show a grid of MCP server options (just show placeholder cards for now, we'll fill them in next step). Each card has a checkbox to select it.
- Step 3 — Configure: A placeholder area for server-specific configuration forms
- Step 4 — Generate: A placeholder area for the final JSON output
- "Previous" and "Next" buttons at the bottom to navigate between steps. The "Next" button should be disabled until the user makes a selection on the current step.
- Use a dark theme with clean, modern styling and smooth transitions between steps
Put all HTML, CSS, and JavaScript in one file. Use Tailwind CSS via CDN.
Save the output as mcp-config-wizard.html and open it in your browser. Test that clicking through the steps works, that the progress bar updates, and that the Next button is properly disabled until you select an option. The wizard navigation is the foundation — everything else builds on top of it.
Add Server Selection Options
Now let's fill in the server selection step with real MCP servers. Each server needs specific information that the user will configure in the next step:
Replace the placeholder server cards in Step 2 with real MCP server options. Add these 6 servers as selectable cards in a responsive grid:
1. "Filesystem" — Read and write files on your local machine. Icon: folder. npm package: @modelcontextprotocol/server-filesystem
2. "GitHub" — Access repositories, issues, and pull requests. Icon: code branch. npm package: @modelcontextprotocol/server-github
3. "Postgres" — Query and manage PostgreSQL databases. Icon: database. npm package: @modelcontextprotocol/server-postgres
4. "Brave Search" — Search the web using Brave's search API. Icon: search/magnifying glass. npm package: @modelcontextprotocol/server-brave-search
5. "Puppeteer" — Control a headless browser for web scraping and screenshots. Icon: globe/browser. npm package: @anthropic/mcp-server-puppeteer
6. "Memory" — Give the AI persistent memory across conversations. Icon: brain/lightbulb. npm package: @modelcontextprotocol/server-memory
Each card should show: the server name, a short description (one line), the npm package name in a small monospace tag, and a checkbox. Users should be able to select multiple servers. Show a count at the bottom: "X servers selected".
Keep everything in one file with the same dark theme and wizard structure.
These are real MCP servers from the official Model Context Protocol ecosystem. The npm package names are accurate and will be used in the generated configuration. Having the correct package names is critical because the config file references them directly.
Add Config Validation
Step 3 is where users fill in the configuration details for each server they selected. Different servers need different settings, so the form must be dynamic:
Build the configuration forms for Step 3 of the MCP wizard. For each server the user selected in Step 2, show a collapsible section with server-specific fields:
- Filesystem: A text input for "Allowed directories" (comma-separated paths) with a placeholder like "/Users/you/projects, /Users/you/documents". Validate that paths start with "/" or a drive letter.
- GitHub: A text input for "GitHub Personal Access Token" (masked like a password field) with a link to "How to create a token". Validate that the token is not empty.
- Postgres: Text inputs for host (default "localhost"), port (default "5432"), database name, username, and password. Validate that port is a number between 1-65535.
- Brave Search: A text input for "Brave API Key" (masked). Link to "Get your free API key".
- Puppeteer: A checkbox for "headless mode" (default checked) and a number input for "viewport width" (default 1280) and "viewport height" (default 720).
- Memory: A text input for "memory file path" with a default value based on the OS.
Add real-time validation:
- Show a green checkmark next to fields that are valid
- Show a red X with an error message for invalid fields
- The "Next" button should only be enabled when all required fields for all selected servers are valid
- Show a validation summary at the bottom: "3 of 3 servers configured" or "1 of 3 servers need attention"
Keep everything in one file.
Validation is important here because a malformed config file will silently fail when Claude Desktop or Cursor tries to load it. Catching errors in the wizard — like an invalid port number or a missing API key — saves users from debugging cryptic startup errors later.
Here are common issues and how to ask the AI to fix them:
Config forms don't appear for selected servers
Tell the AI: "When I move to Step 3, no configuration forms appear. Make sure the code checks which servers were selected in Step 2 and dynamically generates the correct form fields for each selected server."
Validation messages show for untouched fields
Tell the AI: "Error messages appear immediately when I reach Step 3, before I've typed anything. Only show validation errors after the user has interacted with a field (on blur or after they start typing), not on page load."
Going back to Step 2 and changing selections breaks Step 3
Tell the AI: "If I go back to Step 2 and deselect a server, its configuration data should be removed. If I select a new server, its form should appear in Step 3 with default values. Preserve the data for servers that stayed selected."
Add JSON Output with Copy
Step 4 is the payoff — generating the actual configuration file that users will save on their system. The JSON format differs slightly between Claude Desktop, Claude Code, and Cursor, so the output must match the client selected in Step 1:
Build the JSON output view for Step 4 of the MCP wizard:
- Generate the correct JSON configuration based on the client selected in Step 1. The format for Claude Desktop is:
{"mcpServers": {"server-name": {"command": "npx", "args": ["-y", "package-name"], "env": {"KEY": "value"}}}}
- For Claude Code, the format uses a settings.json structure. For Cursor, it uses a similar but slightly different format with "mcpServers" under a cursor-specific key.
- Display the generated JSON in a styled code block with syntax highlighting: blue for keys, green for string values, gray for brackets and colons
- Add a large "Copy to Clipboard" button that copies the full JSON and shows "Copied!" confirmation with a checkmark animation
- Add a "Download as JSON" button that saves the file with the correct filename (claude_desktop_config.json for Claude Desktop, settings.json for Claude Code, etc.)
- Show a summary above the JSON: which client, how many servers configured, and a list of the server names
- Add a "Start Over" button that resets the entire wizard back to Step 1
Keep everything in one file with the dark theme.
The JSON structure here follows the official MCP specification. For Claude Desktop, the config goes in a claude_desktop_config.json file. The command: "npx" with args: ["-y", "package-name"] pattern is the standard way to run MCP servers without installing them globally.
Add OS-Specific Instructions
The final piece is telling users exactly where to put the config file on their operating system. This is where most people get stuck when setting up MCP manually, so clear instructions are essential:
Add OS-specific setup instructions below the JSON output in Step 4 of the MCP wizard:
- Auto-detect the user's OS using navigator.platform or navigator.userAgent and highlight the relevant instructions, but show all three as expandable sections
- macOS instructions:
• Config file path: ~/Library/Application Support/Claude/claude_desktop_config.json
• Show the terminal command to create the directory and open the file: mkdir -p ~/Library/Application\ Support/Claude && open -e ~/Library/Application\ Support/Claude/claude_desktop_config.json
• Remind users to restart Claude Desktop after saving
- Windows instructions:
• Config file path: %APPDATA%\Claude\claude_desktop_config.json
• Show the PowerShell command to open the config location: notepad "$env:APPDATA\Claude\claude_desktop_config.json"
• Note that Node.js must be installed for npx to work
- Linux instructions:
• Config file path: ~/.config/Claude/claude_desktop_config.json
• Show the terminal command: mkdir -p ~/.config/Claude && nano ~/.config/Claude/claude_desktop_config.json
- Add a "Troubleshooting" collapsible section with common issues:
• "npx not found" — install Node.js from nodejs.org
• "Server failed to start" — check that the package name is correct and you have internet access
• "Config file not loading" — make sure the JSON is valid (no trailing commas) and the file is saved in the correct location
- Each terminal command should have its own "Copy" button
Keep everything in one file with the dark theme.
OS detection makes this wizard genuinely useful — instead of presenting a wall of instructions for three operating systems, it highlights the relevant one immediately. The copy buttons on terminal commands reduce errors that come from manually typing long file paths.
What You Learned
This project teaches more than just configuration. By completing it, you practiced:
MCP Server Configuration
You understand how MCP servers connect to AI clients, what the JSON config format looks like, and how to set up servers like filesystem, GitHub, and Postgres.
Multi-Step Wizard UIs
You built a step-by-step form with progress tracking, conditional navigation, and state that persists across steps — a common pattern in onboarding and setup flows.
JSON Generation & Validation
You learned to dynamically build valid JSON from form inputs, validate fields in real time, and handle configuration file formats that real applications depend on.
Configuration Management
You built a tool that handles OS-specific file paths, environment variables, and application settings — skills that apply to DevOps, system administration, and developer tooling.
Tips for Working with AI on This Project
Nail the wizard navigation first. Step 1 is the foundation. Make sure Next/Previous, the progress bar, and the step transitions all work before adding server content.
Test the generated JSON in a real config. If you have Claude Desktop installed, try using the generated config. This is the ultimate test of whether the wizard produces valid output.
Start with fewer servers. If 6 servers feels like too much, start with just Filesystem and GitHub. You can always add more once the pattern is working.
Keep the JSON format exact. MCP configs are strict about formatting — no trailing commas, correct nesting, exact key names. If the AI generates slightly wrong JSON, paste the expected format into the chat and ask it to match.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.