Shopify Liquid MCP Server

# Visual Studio Code Setup Guide Complete guide for using the Shopify Liquid MCP Server with Visual Studio Code. ## Prerequisites - Visual Studio Code 1.80 or higher - Python 3.10+ or Docker - VS Code extension for MCP support (if available) or compatible AI assistant extension ## Installation Methods ### Method 1: Project-Level Configuration (Recommended) This method works for any MCP-compatible VS Code extension (Claude, Cursor, Continue.dev, etc.). #### Step 1: Install the MCP Server **Option A: Using pip** ```bash pip install git+https://github.com/florinel-chis/shopify-liquid-mcp.git ``` **Option B: Using Docker** ```bash docker pull florinel-chis/shopify-liquid-mcp:latest ``` #### Step 2: Create Project Configuration Create `.mcp.json` in your project root: **For local installation:** ```json { "mcpServers": { "shopify-liquid": { "type": "stdio", "command": "shopify-liquid-mcp" } } } ``` **For Docker:** ```json { "mcpServers": { "shopify-liquid": { "type": "stdio", "command": "docker", "args": ["run", "-i", "--rm", "shopify-liquid-mcp:latest"] } } } ``` **For Docker with persistent data:** ```json { "mcpServers": { "shopify-liquid": { "type": "stdio", "command": "docker", "args": [ "run", "-i", "--rm", "-v", "mcp-data:/data", "shopify-liquid-mcp:latest" ] } } } ``` ### Method 2: VS Code Settings (Global) Add to your VS Code `settings.json` (Cmd/Ctrl + Shift + P > "Preferences: Open Settings (JSON)"): ```json { "mcp.servers": { "shopify-liquid": { "command": "shopify-liquid-mcp", "args": [], "transport": "stdio" } } } ``` Or with Docker: ```json { "mcp.servers": { "shopify-liquid": { "command": "docker", "args": ["run", "-i", "--rm", "shopify-liquid-mcp:latest"], "transport": "stdio" } } } ``` ## Using with Continue.dev Extension [Continue.dev](https://continue.dev/) is a popular VS Code extension for AI-assisted coding. ### Setup 1. Install Continue.dev extension from VS Code marketplace 2. Open Continue settings: `~/.continue/config.json` 3. Add the MCP server: ```json { "mcpServers": [ { "name": "shopify-liquid", "command": "shopify-liquid-mcp" } ], "models": [ { "title": "Claude with Shopify Liquid", "provider": "anthropic", "model": "claude-3-5-sonnet-20241022", "apiKey": "your-api-key" } ] } ``` ### Usage Open Continue panel (Cmd/Ctrl + L) and ask: - "Show me Shopify Liquid tags" - "How do I use the for loop in Liquid?" - "What filters are available for dates?" ## Using with Other AI Extensions ### Codeium If using Codeium with MCP support: ```json { "codeium.mcp.servers": { "shopify-liquid": { "command": "shopify-liquid-mcp" } } } ``` ### Tabnine For Tabnine with MCP: ```json { "tabnine.mcp.servers": { "shopify-liquid": { "command": "shopify-liquid-mcp" } } } ``` ## Workspace Setup for Shopify Themes For optimal Shopify theme development, create this workspace structure: ``` your-shopify-theme/ ├── .mcp.json # MCP server config ├── .vscode/ │ ├── settings.json # VS Code settings │ ├── extensions.json # Recommended extensions │ └── tasks.json # Build tasks ├── assets/ ├── config/ ├── layout/ ├── sections/ ├── snippets/ └── templates/ ``` ### Recommended `.vscode/settings.json` ```json { // File associations "files.associations": { "*.liquid": "liquid", "*.liquid.json": "json" }, // Liquid settings "liquid.format.enable": true, // MCP server "mcp.servers": { "shopify-liquid": { "command": "shopify-liquid-mcp" } }, // Auto-save "files.autoSave": "onFocusChange", // Exclude from search "search.exclude": { "**/node_modules": true, "**/dist": true } } ``` ### Recommended `.vscode/extensions.json` ```json { "recommendations": [ "sissel.shopify-liquid", "continue.continue", "github.copilot", "esbenp.prettier-vscode" ] } ``` ## Keyboard Shortcuts Add these to your `keybindings.json` for quick access: ```json [ { "key": "cmd+shift+l", "command": "continue.focusContinueInput", "when": "editorTextFocus && editorLangId == 'liquid'" } ] ``` ## Example Workflow ### 1. Starting a New Liquid File 1. Create `snippets/product-card.liquid` 2. Open Continue panel (Cmd+L) 3. Ask: "Show me how to create a product card in Shopify Liquid" 4. The AI will use the MCP server to get relevant documentation 5. Follow the provided examples ### 2. Debugging Liquid Code 1. Select the problematic Liquid code 2. Open AI assistant 3. Ask: "Why isn't this for loop working?" 4. The AI retrieves for loop documentation via MCP 5. Get contextual help ### 3. Exploring Available Objects 1. In any Liquid file 2. Ask: "What properties does the product object have?" 3. MCP server returns complete object documentation 4. Use autocomplete-style suggestions ## Troubleshooting ### MCP Server Not Recognized **Issue:** VS Code doesn't recognize the MCP server **Solutions:** 1. Verify installation: ```bash which shopify-liquid-mcp # Should show path ``` 2. Check command works: ```bash shopify-liquid-mcp --help ``` 3. Try absolute path in config: ```json { "command": "/full/path/to/shopify-liquid-mcp" } ``` ### Docker Permission Denied **Issue:** Docker command fails in VS Code **Solution:** 1. Add your user to docker group: ```bash sudo usermod -aG docker $USER ``` 2. Or use sudo in config (not recommended): ```json { "command": "sudo", "args": ["docker", "run", "-i", "--rm", "shopify-liquid-mcp:latest"] } ``` ### Server Not Responding **Issue:** MCP server starts but doesn't respond **Diagnostics:** 1. Check server logs 2. Test manually: ```bash python -c "from shopify_liquid_mcp.ingest import search_documentation; print(search_documentation(['test']))" ``` 3. Verify database: ```bash sqlite3 ~/.mcp/shopify-liquid-docs/database.db "SELECT COUNT(*) FROM liquid_docs;" ``` ### Extension Compatibility **Issue:** Your AI extension doesn't support MCP **Alternative:** Use project-level `.mcp.json` and command-line integration: ```bash # Query the server directly echo '{"queries": ["for loop"]}' | shopify-liquid-mcp ``` ## Performance Tips ### 1. Use Local Installation for Speed Docker adds ~100ms overhead. For fastest response, use local installation: ```bash pip install -e /path/to/shopify-liquid-mcp ``` ### 2. Persistent Database Keep the database loaded: ```json { "mcp.servers": { "shopify-liquid": { "command": "shopify-liquid-mcp", "keepAlive": true, "restartOnFailure": true } } } ``` ### 3. Custom Database Location For faster SSD access: ```json { "mcp.servers": { "shopify-liquid": { "command": "shopify-liquid-mcp", "env": { "SHOPIFY_LIQUID_DB_PATH": "/fast/ssd/path/mcp.db" } } } } ``` ## Advanced Configuration ### Multi-Project Setup Different database per project: ```json { "mcp.servers": { "shopify-liquid-project-a": { "command": "shopify-liquid-mcp", "env": { "SHOPIFY_LIQUID_DB_PATH": "${workspaceFolder}/.mcp/database.db" } } } } ``` ### Custom Documentation Add project-specific docs: 1. Create `custom-docs/` in your project 2. Add `.md` files with Liquid snippets 3. Index them: ```bash python -m shopify_liquid_mcp.ingest --docs-path ./custom-docs ``` ### Environment Variables ```json { "mcp.servers": { "shopify-liquid": { "command": "shopify-liquid-mcp", "env": { "SHOPIFY_LIQUID_DB_PATH": "${workspaceFolder}/.mcp/db.sqlite", "LOG_LEVEL": "DEBUG", "CACHE_SIZE": "1000" } } } } ``` ## Integration with Other Tools ### Prettier Format Liquid files with Shopify Liquid docs context: ```json { "editor.defaultFormatter": "sissel.shopify-liquid", "editor.formatOnSave": true, "[liquid]": { "editor.defaultFormatter": "sissel.shopify-liquid" } } ``` ### Theme Check Run Shopify's theme checker: ```json { "liquid.themeCheck.onSave": true, "liquid.themeCheck.enabled": true } ``` ## Resources - [Continue.dev Docs](https://continue.dev/docs) - [VS Code MCP Extension](https://marketplace.visualstudio.com/items?itemName=mcp) - [Shopify Liquid Extension](https://marketplace.visualstudio.com/items?itemName=sissel.shopify-liquid) --- **Need help?** Open an issue on [GitHub](https://github.com/florinel-chis/shopify-liquid-mcp/issues)