mcpField
M
MCP Magic UI

MCP Magic UI

Local
github.com/idcdevDeveloper Tools14Updated 86w ago
Repository

About MCP Magic UI

MCP Magic UI lets AI assistants and other MCP clients discover and retrieve components from the Magic UI repository. It categorizes component data and caches it locally, with stdio and HTTP transport options.

Key features

  1. 01Discover Magic UI components
  2. 02Categorize components automatically
  3. 03Cache data locally for offline use
  4. 04stdio and HTTP transports
  5. 05Fallback mock data

Use cases

  1. 01Find components for an application
  2. 02Retrieve a component's source by path
  3. 03Browse components when GitHub is unavailable

MCP support

The MCP server provides tools to list component metadata and retrieve source code by file path. Clients can connect over stdio or HTTP.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "magic-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/inspector"
      ]
    }
  }
}
Run commandnpx -y @modelcontextprotocol/inspector

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@modelcontextprotocol/inspector

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

MCP Magic UI

An MCP (Model Context Protocol) server for accessing and exploring Magic UI components from the magicuidesign/magicui repository.

What is MCP Magic UI?

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.

Features

  • 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

Installation

# 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 set up 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

Usage

Starting 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

You can connect to the server using any MCP client. For example, using the MCP Inspector:

npx @modelcontextprotocol/inspector mcp-magic-ui

Or, if using HTTP transport:

npx @modelcontextprotocol/inspector http://localhost:3000

Available Tools

The server provides the following MCP tools:

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

Project Structure

  • src/ - Source code

    • index.ts - Main entry point for the server
    • cli.ts - Command-line interface
    • server.ts - MCP server configuration and tool definitions
    • services/ - Service modules
      • github.ts - GitHub API interaction and caching
      • component-parser.ts - Component categorization and processing

  • cache/ - Local cache for component data

  • dist/ - Compiled JavaScript code

How It Works

  1. The server fetches component data from the Magic UI GitHub repository
  2. Component data is cached locally to reduce API calls and enable offline usage
  3. Components are categorized based on their names and dependencies
  4. The server exposes MCP tools to access and search for components
  5. Clients can connect to the server using stdio or HTTP transport

Contributing

Contributions are welcome! Here are some ways you can contribute:

  • Report bugs and suggest features by creating issues
  • Improve documentation
  • Submit pull requests with bug fixes or new features

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.