Shopify Dev MCP + Windsurf Editor: Complete MCP Integration

Shopify Dev MCP is a MCP server that Official Shopify MCP server that enables AI assistants to search Shopify docs, explore API schemas, build Functions, and get up-to-date answers about Shopify APIs..

When integrated with Windsurf Editor, you can:

• Access Shopify Dev MCP functionality through Windsurf Editor

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

What You'll Achieve

After completing this setup:

• Shopify Dev MCP will be fully integrated and operational
• You can use Shopify Dev MCP tools directly in Windsurf Editor
• All Shopify Dev MCP capabilities will be available for your workflows

Prerequisites

Before starting, ensure you have:

• Windsurf Editor installed and configured
• Compatible operating system (Desktop App)

Installation

Step 1: Install Shopify Dev MCP

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": {
    "shopify-dev-mcp": {
      "command": "shopify dev mcp",
      "args": []
    }
  }
}

Note: If Shopify Dev MCP 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 Shopify Dev MCP in Windsurf Editor:

Testing Your Setup

1. Launch Windsurf Editor
2. Verify Shopify Dev MCP is available in the tools list
3. Test basic Shopify Dev MCP functionality

Troubleshooting

Common Issues

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.

Shopify Dev MCP not appearing in Windsurf Editor

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check Shopify Dev MCP installation
• Restart Windsurf Editor
• Check logs for error messages

Next Steps

Now that Shopify Dev MCP is integrated with Windsurf Editor:

• Explore all Shopify Dev MCP 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 Shopify Dev MCP development

Need Help?

• Search for Shopify Dev MCP documentation
• Check the Windsurf Editor MCP guide
• Join the MCP community discussions