MCP Server

Connect your AI assistant to Mekari Pixel 3 documentation, design tokens, and implementation tools.

What is MCP

MCP (Model Context Protocol) is an open standard for connecting AI applications to external systems (resources, tools, and prompts).

Learn more: modelcontextprotocol.io

What is Mekari Pixel MCP

Mekari Pixel MCP is a remote MCP server hosted on the internet. It provides structured access to Pixel component documentation, design tokens, and implementation guides.

TIP

You can use it from VS Code, Cursor, Codex Desktop, or any MCP-compatible client without local server installation.

How to Use Mekari Pixel MCP

Visual Studio Code

Add this to your VS Code MCP configuration (.vscode/mcp.json):

{
  "servers": {
    "pixel": {
      "type": "http",
      "url": "https://pixel-mcp.netlify.app/mcp"
    }
  }
}

Cursor

Add this to your Cursor MCP configuration (~/.cursor/mcp.json):

{
  "mcpServers": {
    "pixel": {
      "type": "http",
      "url": "https://pixel-mcp.netlify.app/mcp"
    }
  }
}

After updating config, restart your editor/client.

Available MCP Tools

get-docs

Answers questions about Pixel setup, component usage, design tokens (v2.1 vs v2.4), and implementation guides.

Examples: "How to setup Pixel?" or "Difference between token 2.1 and 2.4"

get-component

Retrieves Pixel component documentation and details (props, slots, and events).

Examples:

Get MpButton component documentation

or

List all components

get-pattern

Retrieves Pixel UI pattern documentation and code examples. Supports partial name matching — no need to type the full name.

Examples:

Show me the floating bulk action pattern

or

Show all patterns

get-template

Retrieves Pixel UI template documentation and code examples. Supports partial name matching.

Examples:

Get the report index template

or

List all templates

hello-pixel

Simple test tool to verify MCP server connection.

Example:

Hello Pixel, I'm Zakiy

Available MCP Prompts

implement-figma-to-pixel

Generates an implementation guide for converting Figma designs to Pixel 3 components, including design analysis, component mapping, and styling recommendations.

Example:

/implement-figma-to-pixel https://figma.com/file/node-id=123-456

create-design-to-pixel

Generates Vue component code from a natural-language UI description using Pixel 3.

Example:

/create-design-to-pixel "a login form with email, password, and reset button"

Usage Examples

Once configured, ask your assistant:

• "How to setup Pixel in my project?"
• "Get MpButton component documentation"
• "What's the difference between design token 2.1 and 2.4?"
• "Show me the floating bulk action pattern"
• "Get the report index template"
• "/create-design-to-pixel a user profile card with avatar and edit button"