MCP Magic UI
An MCP (Model Context Protocol) server for accessing and exploring Magic UI components from the [magicuidesign/magicui](https://github.com/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
Configuration
To avoid GitHub API rate limits, it's recommended to set up a GitHub personal access token:
- Create a token at https://github.com/settings/tokens
- Create a `.env` file in the project root (or copy from `.env.example`)
- Add your token to the `.env` file:
Usage
Starting the server
You can start the server using either stdio or HTTP transport:
Connecting to the server
You can connect to the server using any MCP client. For example, using the MCP Inspector:
Or, if using HTTP transport:
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
- The server fetches component data from the Magic UI GitHub repository
- Component data is cached locally to reduce API calls and enable offline usage
- Components are categorized based on their names and dependencies
- The server exposes MCP tools to access and search for components
- 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