Shopify Polaris MCP Server for AI Assistants

This project implements a Model Context Protocol (MCP) server that provides tools and prompts for working with Shopify Polaris UI components. It helps developers find, understand, and implement Polaris components in their applications.

Features

• Search for Polaris components by name, category, or functionality
• Get detailed information about specific components, including props, best practices, and related components
• Access code examples for implementing components
• Use specialized prompts for component implementation, layout design, and customization

Setup

Installation

To install and run the Shopify Polaris MCP server using npx, use the following command:

npx -y polaris-mcp-server@latest

Usage with Cursor or Claude Desktop

Add the following configuration to your MCP client. For more information, read the Cursor MCP documentation or the Claude Desktop MCP guide.

{
    "mcpServers": {
        "polaris-mcp-server": {
            "command": "npx",
            "args": ["-y", "polaris-mcp-server@latest"]
        }
    }
}

On Windows, you might need to use this alternative configuration:

{
    "mcpServers": {
        "polaris-mcp-server": {
            "command": "cmd",
            "args": ["/k", "npx", "-y", "polaris-mcp-server@latest"]
        }
    }
}

Available Tools

This MCP server provides the following tools:

| Tool Name | Description | | --------------------------- | ----------------------------------------------------------------- | | search_polaris_components | Search for Polaris components by name, category, or functionality | | get_component_details | Get detailed information about a specific component | | get_component_examples | Get code examples for using a specific component |

Available Prompts

This MCP server provides the following prompts:

| Prompt Name | Description | | ---------------------------------- | ---------------------------------------------------------- | | polaris_component_implementation | Help you implement a Polaris component in your application | | polaris_layout_design | Help you design layouts using Polaris components | | polaris_component_customization | Help you customize Polaris components |

Development

Prerequisites

• Node.js 14.17.0 or higher
• npm or yarn

Setup

1. Clone the repository
2. Install dependencies:

   npm install

3. Build the project:

   npm run build

4. Run the scraper to collect component data:

   npm run scrape

5. Start the server:

   npm start

Project Structure

• data/: Contains JSON files with component data
• scripts/: Contains scripts for data collection
• src/: Contains the source code for the MCP server
  • tools-all.ts: Implementation of MCP tools for Polaris components
  • prompts-all.ts: Implementation of MCP prompts for Polaris components
  • index.ts: Main server file
• tests/: Contains test files

License

MIT