npm package: @shramiknakarmi/polaris-mcp-server
Description: Shopify Polaris UI Components MCP Server for AI assistants
Author: Shramik Nakarmi
Latest version: 1.0.21

# 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:

```bash
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](https://docs.cursor.com/context/model-context-protocol) or the [Claude Desktop MCP guide](https://modelcontextprotocol.io/quickstart/user).

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

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

```json
{
    "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:
    ```bash
    npm install
    ```
3. Build the project:
    ```bash
    npm run build
    ```
4. Run the scraper to collect component data:
    ```bash
    npm run scrape
    ```
5. Start the server:
    ```bash
    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