MCP

How to use Ultracite with MCP

The Model Context Protocol (MCP) is an open standard that allows AI assistants like Claude, Cursor, and other AI-powered tools to securely connect with external data sources and systems. Think of it as a "universal remote" that lets your AI tools access real-world data and functionality.

Ultracite supports MCP to supercharge your AI development workflow.

Installation Guide

Step 1: Choose Your AI Tool

First, make sure you're using an AI development tool that supports MCP:

Step 2: Locate Your Configuration File

Depending on your AI tool, you'll need to edit one of these files:

  • Claude Desktop: .cursor/mcp.json
  • Cursor: .cursor/mcp.json
  • Windsurf: .codeium/windsurf/mcp_config.json
  • Other tools: Check your tool's MCP documentation

Step 3: Add Ultracite Configuration

Copy and paste this configuration into your MCP config file:

{
  "mcpServers": {
    "ultracite": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://www.ultracite.ai/api/mcp/http"
      ]
    }
  }
}

Step 4: Restart Your AI Tool

Close and reopen your AI application for the changes to take effect.

Step 5: Verify the Connection

Test the integration by asking your AI assistant:

"What Ultracite rules are available?"

If successful, your AI should be able to list and explain Ultracite rules!

Multiple MCP Servers

You can use Ultracite alongside other MCP servers:

{
  "mcpServers": {
    "ultracite": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://www.ultracite.ai/api/mcp/http"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "filesystem": {
      "command": "npx", 
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}

Usage Examples

Getting Component Information

Ask your AI assistant:

Show me how to use the Ultracite rules

Expected response will include current documentation and code examples.

Building Layouts

Help me create a dashboard layout using Ultracite rules

Your AI can suggest appropriate layout components and provide implementation code.

Styling Guidance

What are the recommended spacing tokens in Ultracite?

Get up-to-date information about design tokens and styling conventions.

Security and Privacy

Data Handling

  • The Ultracite MCP server only provides public component documentation
  • No personal data or code is transmitted to our servers
  • All communication happens through your chosen AI tool's security layer

Authentication

  • No authentication required for public component information
  • Future premium features may require API keys
  • Always use official Ultracite MCP endpoints