Shopify Polaris Web Components MCP

An MCP (Model Context Protocol) server that provides accurate Shopify Polaris web component documentation to AI tools like Cursor, GitHub Copilot, Claude, and Antigravity.

Supports all components featured in the official Shopify documentation:
👉 https://shopify.dev/docs/api/app-home/polaris-web-components

Why This Exists

Shopify's official MCP often hallucinates attributes because:

• Polaris web components have specialized attributes only
• Standard HTML attributes (style, class, onclick) don't work
• AI models haven't learned the correct patterns yet

This MCP provides:

• ✅ Only valid attributes from official docs
• ✅ Workaround patterns for styling limitations
• ✅ System prompts with Polaris-specific rules

Installation

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "shopify-polaris-webcomp-mcp": {
      "command": "npx",
      "args": ["-y", "shopify-polaris-webcomp-mcp"]
    }
  }
}

Antigravity

Add to your MCP config:

{
  "mcpServers": {
    "shopify-polaris-webcomp-mcp": {
      "command": "npx",
      "args": ["-y", "shopify-polaris-webcomp-mcp"]
    }
  }
}

GitHub Copilot (VS Code)

Add to .vscode/mcp.json:

{
  "servers": {
    "shopify-polaris-webcomp-mcp": {
      "command": "npx",
      "args": ["-y", "shopify-polaris-webcomp-mcp"]
    }
  }
}

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "shopify-polaris-webcomp-mcp": {
      "command": "npx",
      "args": ["-y", "shopify-polaris-webcomp-mcp"]
    }
  }
}

Usage

Once configured, the AI will have access to:

Tools

• list_components - List all 47 Polaris components
• get_component - Get full documentation for a component
• search_components - Search by keyword

Resources

• polaris://components/{name} - Direct access to component docs

Prompts

• polaris_rules - Critical rules and workaround patterns

Key Concept: Styling Workarounds

Polaris web components don't support style or class attributes. When you need custom styling, put it INSIDE the component:

<!-- ❌ WRONG: style on component does nothing -->
<s-paragraph style="text-align: center;">Text</s-paragraph>

<!-- ✅ CORRECT: style on inner element -->
<s-paragraph>
  <div style="text-align: center;">Text</div>
</s-paragraph>

Components Included

47 Polaris web components including:

• Actions: button, buttongroup, link, menu
• Forms: textfield, select, checkbox, datepicker
• Layout: box, stack, grid, section, page
• Feedback: banner, modal, popover, tooltip
• Display: text, heading, badge, avatar, icon

License

MIT