Update MCP Configuration Generator: Remove AI Agents, Add Authorization for Windsurf, Verify Cline format, Add Claude Code

[aarora79]

Summary

Update the MCP Configuration Generator (PR #142) to improve IDE support and configuration accuracy:

1. Remove "AI Agents" option from the IDE selector
2. Add Authorization header to Windsurf configuration
3. Verify Cline configuration format (currently uses curl command)
4. Add Claude Code as a new IDE option

Current Implementation Issues

1. AI Agents Option

Issue: The "AI Agents" option is present in the IDE selector and generates a generic config.

Location: frontend/src/components/ServerCard.tsx:627-635

<button
  onClick={() => setSelectedIDE('agents')}
  className={...}
>
  AI Agents
</button>

Action Required: Remove this button entirely from the IDE selector.

2. Windsurf Configuration Missing Authorization

Issue: Windsurf configuration only includes serverUrl without authorization headers.

Current Implementation (ServerCard.tsx:247-254):

case 'windsurf':
  return {
    "mcpServers": {
      [serverName]: {
        "serverUrl": url
      }
    }
  };

Action Required: Add authorization header similar to other IDE options.

Expected Implementation:

case 'windsurf':
  return {
    "mcpServers": {
      [serverName]: {
        "serverUrl": url,
        "headers": {
          "Authorization": "Bearer [YOUR_AUTH_TOKEN]"
        }
      }
    }
  };

Reference: Need to verify correct format with @dheerajoruganty

3. Cline Configuration Format Verification Needed

Issue: Cline configuration currently uses curl command approach which may not be correct.

Current Implementation (ServerCard.tsx:231-244):

case 'cline':
  return {
    "mcpServers": {
      [serverName]: {
        "command": "curl",
        "args": ["-X", "POST", url, "-H", "Authorization: Bearer [YOUR_AUTH_TOKEN]"],
        "env": {
          "AUTH_TOKEN": "[YOUR_AUTH_TOKEN]"
        },
        "alwaysAllow": [],
        "disabled": false
      }
    }
  };

Questions:

• Is the curl command-based approach correct for Cline?
• Should it use direct HTTP transport like other IDEs?
• What is the official Cline MCP configuration format?

Action Required: Verify with @dheerajoruganty the correct Cline configuration format.

Possible Alternative (if direct HTTP is preferred):

case 'cline':
  return {
    "mcpServers": {
      [serverName]: {
        "url": url,
        "headers": {
          "Authorization": "Bearer [YOUR_AUTH_TOKEN]"
        },
        "alwaysAllow": [],
        "disabled": false
      }
    }
  };

4. Add Claude Code Support

Issue: Claude Code is not included as an IDE option.

Action Required:

1. Add Claude Code button to IDE selector
2. Implement configuration format for Claude Code
3. Verify correct configuration format with @dheerajoruganty

Proposed Implementation:

Add button in IDE selector:

<button
  onClick={() => setSelectedIDE('claude-code')}
  className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
    selectedIDE === 'claude-code'
      ? 'bg-blue-600 text-white'
      : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
  }`}
>
  Claude Code
</button>

Add case in generateMCPConfig:

case 'claude-code':
  return {
    "mcpServers": {
      [serverName]: {
        "type": "http", // or "streamable-http"?
        "url": url,
        "headers": {
          "Authorization": "Bearer [YOUR_AUTH_TOKEN]"
        }
      }
    }
  };

Need to verify:

• What is the correct configuration format for Claude Code?
• Does it use "http" or "streamable-http" transport?
• Are there any Claude Code-specific configuration parameters?

Implementation Checklist

Phase 1: Removals

• Remove "AI Agents" button from IDE selector
• Remove 'agents' from selectedIDE type definition
• Remove 'agents' case from generateMCPConfig switch
• Update default selectedIDE if it was 'agents'

Phase 2: Windsurf Update

• Verify correct Windsurf configuration format with @dheerajoruganty
• Add authorization header to Windsurf configuration
• Test Windsurf configuration works correctly

Phase 3: Cline Verification

• Verify correct Cline configuration format with @dheerajoruganty
• Update Cline configuration if needed
• Update Cline documentation link if format changes
• Test Cline configuration works correctly

Phase 4: Claude Code Addition

• Verify correct Claude Code configuration format with @dheerajoruganty
• Add Claude Code button to IDE selector
• Add Claude Code case to generateMCPConfig
• Update selectedIDE type to include 'claude-code'
• Add Claude Code to configuration display section
• Test Claude Code configuration works correctly

Phase 5: Documentation

• Update inline comments with correct documentation links
• Ensure all IDE-specific notes are accurate
• Update PR description with changes

Files to Modify

Primary File: frontend/src/components/ServerCard.tsx

Sections to Update:

1. Line 96: Type definition for selectedIDE
2. Lines 195-274: generateMCPConfig function switch statement
3. Lines 586-636: IDE selector buttons
4. Lines 666-710: Configuration display badges

Testing Requirements

Manual Testing Checklist

• VS Code configuration copies correctly
• Cursor configuration copies correctly
• Cline configuration copies correctly (with updated format)
• Windsurf configuration copies correctly (with authorization)
• Claude Code configuration copies correctly
• All configurations use correct base URL
• All configurations include proper authorization headers
• UI properly highlights selected IDE
• Copy to clipboard works for all IDE options
• Modal displays correct configuration based on selection

Configuration Validation

For each IDE, verify:

• Configuration format matches official IDE documentation
• Authorization headers are present where required
• URLs are correctly formatted
• Transport types are appropriate
• Required fields are included
• Optional fields are appropriate

Questions for @dheerajoruganty

Please provide clarification on:

1. Windsurf Configuration:

   • Is the proposed authorization header format correct?
   • Are there any other required fields?

2. Cline Configuration:

   • Should Cline use the curl command approach or direct HTTP?
   • What is the official/recommended configuration format?
   • Is there official documentation we should reference?

3. Claude Code Configuration:

   • What is the correct configuration format for Claude Code?
   • Does it use "http", "streamable-http", or another transport type?
   • Are there any Claude Code-specific configuration parameters?
   • Is there official documentation we should reference?

References

• PR Feature: Registry UI - Add MCP Configuration Generator with Copy-Paste Functionality #142: Feature: Registry UI - Add MCP Configuration Generator with Copy-Paste Functionality #142
• Current Implementation: frontend/src/components/ServerCard.tsx
• VS Code MCP Docs: https://code.visualstudio.com/docs/copilot/customization/mcp-servers
• Cursor MCP Docs: https://cursor.com/docs/context/mcp
• Cline MCP Docs: https://docs.cline.bot/mcp/configuring-mcp-servers
• Windsurf MCP Docs: https://docs.windsurf.com/windsurf/cascade/mcp

Related Issues

• Issue Registry UI: Add MCP Configuration Generator with Copy-Paste Functionality #132: Original feature request for configuration generator
• PR Feature: Registry UI - Add MCP Configuration Generator with Copy-Paste Functionality #142: MCP Configuration Generator implementation

Notes

• All changes should maintain backward compatibility with existing configurations
• Ensure proper error handling for clipboard operations
• Maintain consistent UI/UX across all IDE options
• Update any relevant documentation or README files

[dheerajoruganty]

Cline uses this format for mcp servers.

{
	"mcpServers": {
		    "xyz": {
                          "type": "streamableHttp",
                           "url": "http://localhost:7320/mcp",
                           "disabled": false,
                           "headers": {
				"Authorization": "Bearer your-token"
      },
    }
  }
}

This is for Claude code

{
  "mcpServers": {
    "api-server": {
      "type": "http",
      "url": "${API_BASE_URL:-https://api.example.com}/mcp",
      "headers": {
        "Authorization": "Bearer ${API_KEY}"
      }
    }
  }
}

Windsurf header format is incorrect, according to https://docs.windsurf.com/windsurf/cascade/mcp, was not able to find any documentation on how to pass headers as part of mcp protocol.