MCP Magic Ui

🚀 MCP Magic UI Server

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

🚀 Quick Start

The MCP Magic UI Server is designed to implement the Model Context Protocol (MCP), enabling access to Magic UI components. It fetches component data from the Magic UI GitHub repository, automatically categorizes them, and makes these components available via the MCP API. This allows AI assistants and other MCP clients to easily discover and utilize Magic UI components in applications.

✨ Features

• Component Discovery: Access all Magic UI components through MCP tools.
• Component Categorization: Automatically categorize components based on names and dependencies.
• Caching System: Locally cache component data to reduce GitHub API calls and support offline use.
• Multiple Transport Options: Support stdio and HTTP transport methods.
• Backup Mechanism: Provide mock data when the 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

📚 Documentation

Configuration

To avoid GitHub API rate limits, it is 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 directory (or copy from .env.example).
3. Add your token to the .env file:

GITHUB_TOKEN=your_github_token_here

Usage

Start the Server

You can start the server using stdio or HTTP transport:

# Use the default stdio transport
npm start

# Use HTTP transport
TRANSPORT_TYPE=http npm start

Connect to the Server

You can connect to the server using any MCP client. For example, use 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 and their metadata.
• get_component_by_path - Get the source code of a specific component based on the file path.