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