Magic UI MCP server

This server implements the Model Context Protocol (MCP) to provide access to Magic UI components from the magicuidesign/magicui repository. It categorizes components and makes them available through an MCP API, enabling AI assistants and other MCP clients to easily discover and use Magic UI components in their applications.

Installation

To get started with the MCP Magic UI server:

# Clone the repository
git clone https://github.com/idcdev/mcp-magic-ui.git
cd mcp-magic-ui

# Install dependencies
npm install

# Build the project
npm run build

Configuration

To avoid GitHub API rate limits, it's recommended to configure a GitHub personal access token:

1. Create a token at https://github.com/settings/tokens
2. Create a .env file in the project root (or copy from .env.example)
3. Add your token to the .env file:

GITHUB_TOKEN=your_github_token_here

Running the Server

You can start the server using either stdio or HTTP transport:

# Using stdio transport (default)
npm start

# Using HTTP transport
TRANSPORT_TYPE=http npm start

Connecting to the Server

Connect to the server using any MCP client. For example, with the MCP Inspector:

# For stdio transport
npx @modelcontextprotocol/inspector mcp-magic-ui

# For HTTP transport
npx @modelcontextprotocol/inspector http://localhost:3000

Available Tools

The server provides the following MCP tools:

• get_all_components - Returns a list of all available Magic UI components with their metadata
• get_component_by_path - Retrieves the source code of a specific component by its file path

Key Features

• Component Discovery - Access all Magic UI components through MCP tools
• Automatic Categorization - Components are categorized based on their names and dependencies
• Caching System - Local caching of component data for reduced GitHub API calls and offline work
• Multiple Transport Options - Support for both stdio and HTTP transport methods
• Fallback Mechanism - Mock data is provided when GitHub API is unavailable

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.