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:
- Claude Desktop (Free - recommended for beginners)
- Cursor (AI-powered code editor)
- Windsurf by Codeium (AI development platform)
- Other MCP-compatible tools
Step 2: Locate Your Configuration File
Depending on your AI tool, you'll need to edit one of these files:
- Claude Desktop:
~/Library/Application\ Support/Claude/claude_desktop_config.json
for macOS and%APPDATA%\Claude\claude_desktop_config.json
for Windows - 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/mcp"
]
}
}
}
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/mcp"]
},
"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