Model Context Protocol

Supercharge Your AI Coding

Connect your AI assistant directly to your Component Library. Fetch code, designs, and themes instantly inside your editor.

Get Connected How it works ↓
Online
> connecting to mcp...
> fetching component: 'hero-01'...
> component loaded successfully.
> ready for implementation.

What is this?

🔌

Direct Integration

No more copy-pasting from web documentation. Your AI (Cursor, VS Code, etc.) can read directly from the library.

🎨

Context-Aware Design

The MCP server provides design tokens, guidelines, and component decision logic to the AI, ensuring consistency.

🚀

Smart Recommendations

Tools like get_recommended_sections and match_design_style help the AI plan your pages intelligently.

See It In Action

Watch how your AI interacts with the Component Library.

AI Assistant
🔒 localhost:3000/resto-cafe
Waiting for input...

Configure Your Editor

Add this server to your MCP client configuration file.

vscode/settings.json or cline_mcp_settings.json 

"mcpServers": {
  "component-library": {
    "command": "npx",
    "args": [
      "-y",
      "mcp-remote",
      "https://mcp.ui-comp-mcp.acodez.ca/mcp",
      "--header",
      "x-api-key:${MCP_API_KEY}"
    ],
    "env": {
      "MCP_API_KEY": "YOUR_API_KEY_HERE"
    }
  }
}
Project Configuration 

{
  "mcpServers": {
    "component-library": {
      "command": "npx",
      "args": [
        "-y", 
        "mcp-remote", 
        "https://mcp.ui-comp-mcp.acodez.ca/mcp",
        "--header",
        "x-api-key:${MCP_API_KEY}"
      ],
      "env": {
        "MCP_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}
Generic Config 

{
  "command": "npx",
  "args": [
    "-y",
    "mcp-remote",
    "https://mcp.ui-comp-mcp.acodez.ca/mcp", 
    "--header",
    "x-api-key:YOUR_API_KEY"
  ]
}

Note: Replace YOUR_API_KEY_HERE with the key provided by your administrator.

The server URL https://mcp.ui-comp-mcp.acodez.ca/mcp is the public endpoint.