Adobe Commerce + Windsurf Editor: Complete MCP Integration

Adobe Commerce is a MCP server that Adobe Commerce MCP server.

When integrated with Windsurf Editor, you can:

• Analyze and explore Adobe Commerce GraphQL schema structure
• Write and test GraphQL queries and mutations for Adobe Commerce
• Interact with Adobe Commerce business logic through GraphQL

This guide provides step-by-step instructions to set up Adobe Commerce in Windsurf Editor, including configuration, examples, and troubleshooting.

What You'll Achieve

After completing this setup:

• Adobe Commerce will be fully integrated and operational
• You can use Adobe Commerce tools directly in Windsurf Editor
• All Adobe Commerce capabilities will be available for your workflows
• Access to 4 different tools

Prerequisites

Before starting, ensure you have:

• Node.js
• npm
• Adobe Commerce environment
• Windsurf Editor installed and configured
• Compatible operating system (Desktop App)

Installation

Step 1: Install Adobe Commerce

Install using npm:

npx -y @rafaelcg/adobe-commerce-dev-mcp@latest

Verify installation:

npx @rafaelcg/adobe-commerce-dev-mcp@latest --help

Configuration

Step 2: Configure Windsurf Editor

1. Locate your configuration file:

   • Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
   • macOS: ~/.codeium/windsurf/mcp_config.json
   • Linux: ~/.codeium/windsurf/mcp_config.json

2. Add server configuration:

{
  "mcpServers": {
    "adobe-commerce": {
      "command": "npx",
      "args": ["-y", "@rafaelcg/adobe-commerce-dev-mcp@latest"]
    }
  }
}

Note: If Adobe Commerce requires environment variables, add them to the server configuration:
"env": {
  
}

3. Restart Windsurf Editor

Completely quit and restart Windsurf Editor to load the new configuration.

Examples

Once configured, you can use Adobe Commerce in Windsurf Editor:

Explore GraphQL Schema

Introspect Adobe Commerce admin GraphQL schema

Ask Windsurf Editor: "Show me the available GraphQL schema for product management in Adobe Commerce"

Expected Result: Detailed schema information including product types, fields, and available operations

Create Product Query

Build GraphQL query to retrieve product information

Ask Windsurf Editor: "Help me write a GraphQL query to get product details including name, price, and inventory status"

Expected Result: Well-formed GraphQL query with proper field selection and structure

Customer Management Operation

Develop customer-related GraphQL operations

Ask Windsurf Editor: "Create a GraphQL mutation to update customer profile information"

Expected Result: GraphQL mutation with proper input types and customer field updates

Order Processing Query

Build order management GraphQL operations

Ask Windsurf Editor: "Write a GraphQL query to retrieve order history with product details and shipping information"

Expected Result: Complex GraphQL query with nested relationships and order data structure

Testing Your Setup

1. Launch Windsurf Editor
2. Verify Adobe Commerce is available in the tools list
3. Test basic Adobe Commerce functionality

Troubleshooting

Common Issues

Schema Introspection Failed

Symptoms: Schema not accessible, GraphQL endpoint errors, Authentication failures

Cause: Invalid GraphQL endpoint URL or authentication token

Solution:

• Verify Adobe Commerce GraphQL endpoint is accessible
• Check admin integration token has proper permissions
• Test endpoint manually with GraphQL client
• Ensure Adobe Commerce instance is running and configured

NPM Package Installation Error

Symptoms: Package not found, Installation timeouts, Version conflicts

Cause: Network issues, package registry problems, or dependency conflicts

Solution:

• Clear npm cache: npm cache clean --force
• Try alternative registry: npm install --registry https://registry.npmjs.org/
• Check network connectivity and proxy settings
• Update npm to latest version: npm install -g npm@latest

GraphQL Operation Syntax Error

Symptoms: Syntax validation errors, Malformed query messages, Parser errors

Cause: Invalid GraphQL syntax or schema incompatibility

Solution:

• Validate GraphQL syntax with online validator
• Check field names match schema definitions
• Ensure proper query structure and formatting
• Use introspect_admin_schema to verify available fields

Windows Command Execution Error

Symptoms: Command not recognized, Execution policy errors, Path issues

Cause: Windows-specific command execution or security policy restrictions

Solution:

• Use cmd configuration: "command": "cmd", "args": ["/c", "npx", ...]
• Check PowerShell execution policy: Set-ExecutionPolicy RemoteSigned
• Verify Node.js and npm are in system PATH
• Run terminal as administrator if needed

Tools Not Appearing

Symptoms: Cascade does not see new tools, Hammer icon missing

Cause: Configuration syntax error or server failed to start.

Solution:

• Check the JSON configuration for syntax errors.
• Verify the command (e.g., npx, python) is in your system PATH.
• Check Windsurf logs for MCP connection errors.

Environment Variables

Symptoms: Authentication failed, Permission denied

Cause: Missing API keys in configuration.

Solution:

• Ensure env block is correctly defined inside the server config.
• Restart Windsurf after changing environment variables.

Adobe Commerce not appearing in Windsurf Editor

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check Adobe Commerce installation
• Restart Windsurf Editor
• Check logs for error messages

Next Steps

Now that Adobe Commerce is integrated with Windsurf Editor:

• Explore all Adobe Commerce capabilities through Windsurf Editor
• Check out other MCP servers that work with Windsurf Editor
• Join the MCP community for tips and support
• Consider contributing to Adobe Commerce development

Need Help?

• Search for Adobe Commerce documentation
• Check the Windsurf Editor MCP guide
• Join the MCP community discussions