Skip to main content
Glama
enesjakozh
idcdev

MCP Magic UI

by idcdev
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

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.

Related MCP server: Magic UI MCP Server

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

Available Tools

2 tools
get_all_componentsD
ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_component_by_pathD
ParametersJSON Schema
NameRequiredDescriptionDefault
pathYesPath to the component file

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

D1.8/5.0
Disambiguation5/5

The two tools have clearly distinct purposes: one retrieves all components, while the other retrieves a specific component by path. There is no overlap or ambiguity between them, making it easy for an agent to choose the correct tool based on the need for bulk vs. targeted retrieval.

Naming Consistency5/5

Both tools follow a consistent verb_noun pattern with 'get' as the verb, and they use snake_case uniformly. The naming is predictable and readable, with no deviations in style or convention across the tool set.

Tool Count2/5

With only 2 tools, the server feels thin for a UI-related domain, as it lacks operations for creating, updating, or deleting components, which are typical in such contexts. This minimal set may not support comprehensive agent workflows effectively.

Completeness2/5

The tool surface is severely incomplete for a UI component domain, covering only retrieval operations. There are obvious gaps for CRUD/lifecycle management, such as create, update, or delete tools, which will likely cause agent failures when full component manipulation is needed.

Maintenance

ActivityInactive
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/idcdev/mcp-magic-ui'

If you have feedback or need assistance with the MCP directory API, please join our Discord server