drio
Open app

MCP Magic UI

Source

An MCP (Model Context Protocol) server for accessing and searching Magic UI components

Catalog onlyCatalog onlySTDIO

Overview

MCP Magic UI is a server that implements the Model Context Protocol (MCP) to provide access to Magic UI components. It fetches component data from the Magic UI GitHub repository, categorizes them, and makes them available through an MCP API. This allows AI assistants and other MCP clients to easily discover and use Magic UI components in their applications.

To use MCP Magic UI, clone the repository, install dependencies, and start the server using either stdio or HTTP transport. Connect to the server using any MCP client, such as the MCP Inspector.

  • Component Discovery: Access all Magic UI components through MCP tools - Component Categorization: Components are automatically categorized based on their names and dependencies - Caching System: Local caching of component data to reduce GitHub API calls and work offline - Multiple Transport Options: Support for both stdio and HTTP transport methods - Fallback Mechanism: Mock data is provided when GitHub API is unavailable
  1. Discovering and using Magic UI components in applications
  2. Integrating with AI assistants that require access to UI components
  3. Reducing API calls to GitHub by utilizing local caching

Add to your AI client

Use these steps to connect MCP Magic UI in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-magic-ui-idcdev": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-magic-ui-idcdev"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-magic-ui-idcdev": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-magic-ui-idcdev"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-magic-ui-idcdev": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-magic-ui-idcdev"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-magic-ui-idcdev": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-magic-ui-idcdev"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-magic-ui-idcdev": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-magic-ui-idcdev"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-magic-ui-idcdev": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-magic-ui-idcdev"
      ]
    }
  }
}

FAQ

How do I set up the GitHub personal access token?

Create a token at https://github.com/settings/tokens and add it to the `.env` file in the project root.

Can I use MCP Magic UI offline?

Yes! The caching system allows you to use it offline after the initial data fetch.

What transport methods are supported?

MCP Magic UI supports both stdio and HTTP transport methods.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2250,"uuid":"453af43c-7372-466f-a092-aee71aee341f","name":"mcp-magic-ui","title":"MCP Magic UI","description":"An MCP (Model Context Protocol) server for accessing and searching Magic UI components","avatar_url":"https://avatars.githubusercontent.com/u/201366824?v=4","created_at":"2025-03-09T06:54:55.701Z","updated_at":"2025-03-12T10:20:55.123Z","status":"created","author_name":"idcdev","author_avatar_url":"https://avatars.githubusercontent.com/u/201366824?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/idcdev/mcp-magic-ui","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"1\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-06 22:39:20\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools