Magic UI

Organization

magicuidesign

Official Magic UI MCP server.

Publisher	magicuidesign
Repository	`mcp`
Language	TypeScript
Forks	32
Stars	185
Available tools	8
Transport type	stdio, streamable-http
Categories	Developer Tools Design
License	MIT
Links	GitHub Homepage

Connect tools to AI workflows
Magic UI exposes MCP capabilities that can be used by compatible AI clients and agents.
8 available tools
Browse the callable actions below, including names and descriptions when provided by the server.
Ready-to-copy setup
Use the installation snippets to configure this server in your preferred MCP client.
Open source signals
185 stars and 32 forks from the linked repository.

@magicuidesign/mcp

Official ModelContextProtocol (MCP) server for Magic UI.

Install MCP configuration

bash
npx @magicuidesign/cli@latest install <client>

Supported Clients

Manual Installation

Add to your IDE's MCP config:

json
{
  "mcpServers": {
    "magicuidesign-mcp": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

Example Usage

Once configured, you can questions like:

"Make a marquee of logos"

"Add a blur fade text animation"

"Add a grid background"

Available Tools

The server provides the following tools callable via MCP:

Tool Name	Description
`listRegistryItems`	Lists Magic UI registry items with optional filters like `kind`, `query`, `limit`, and `offset`. Recommended for registry browsing.
`searchRegistryItems`	Searches Magic UI registry items by keyword across names, titles, descriptions, and registry types, with pagination support.
`getRegistryItem`	Returns details for a single registry item, including install instructions and optional source, related items, and examples.

MCP Limitations

Some clients have a limit on the number of tools they can call. The server keeps a small generic tool surface and reads directly from the live Magic UI registry, rather than relying on hardcoded category buckets. Broad semantic discovery concepts such as widgets, media, or devices are not currently modeled as first-class categories in the MCP API.

Credits

Big thanks to @beaubhp for creating the MCP server 🙏

MIT

Installation

TypingMind

Prerequisites:

Node.js 18+

{
  "mcpServers": {
    "@magicuidesign/mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Available Tools

getUIComponents
Provides a comprehensive list of all Magic UI components.
getComponents
Provides implementation details for marquee, terminal, hero-video-dialog, bento-grid, animated-list, dock, globe, tweet-card, client-tweet-card, orbiting-circles, avatar-circles, icon-cloud, animated-circular-progress-bar, file-tree, code-comparison, script-copy-btn, scroll-progress, lens, pointer components.
getDeviceMocks
Provides implementation details for safari, iphone-15-pro, android components.
getSpecialEffects
Provides implementation details for animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal components.
getAnimations
Provides implementation details for blur-fade components.
getTextAnimations
Provides implementation details for text-animate, line-shadow-text, aurora-text, number-ticker, animated-shiny-text, animated-gradient-text, text-reveal, hyper-text, word-rotate, typing-animation, scroll-based-velocity, flip-text, box-reveal, sparkles-text, morphing-text, spinning-text components.
getButtons
Provides implementation details for rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button components.
getBackgrounds
Provides implementation details for warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple, dot-pattern, grid-pattern, interactive-grid-pattern components.

Use Magic UI MCP with multiple AI models

TypingMind connects MCP tools at the workspace level, so once Magic UI is connected, you can use it with different AI models in TypingMind instead of setting it up separately for each model. You can run MCP locally on your device or connect to a remote MCP server URL.

Option 1: Use the local connector

Use this when the MCP server needs access to local files, apps, or private resources on your computer.

Open the MCP settings

In TypingMind, go to Settings, Advanced Settings, then Model Context Protocol and choose Setup Connector.

Open TypingMind in your browser.
Click the Settings icon.
Go to Advanced Settings.
Open the Model Context Protocol section.
Click Setup Connector and choose This Device.

TypingMind MCP connector setup screen with This Device selected

Run the connector command

Choose This Device, copy the command from TypingMind, and run it in Terminal. Keep the process running while you use MCP.

Copy the setup command shown by TypingMind.
Open Terminal on macOS or Windows Terminal on Windows.
Paste and run the command.
Approve the package install if Terminal asks you to proceed.
Keep the Terminal window running while using MCP tools.

Add Magic UI as a server

When the connector status is Ready, click Edit Servers and paste the MCP server configuration.

Wait until the connector status shows Ready.
Click Edit Servers.
Paste the Magic UI MCP server configuration.
Save the server list.
Refresh if you want to confirm the connector is still ready.

TypingMind MCP settings showing active server and Edit Servers button

Use it across models

Save the server list, open Plugins, enable the Magic UI MCP tools, then select any supported AI model in TypingMind and use the tools in chat or assign them to an AI agent.

Open the Plugins page in TypingMind.
Enable the Magic UI MCP tools.
Start a chat and choose the AI model you want to use.
Use the MCP tools in chat or assign them to an AI agent.
Switch to another AI model whenever needed without reconnecting MCP.

TypingMind chat using enabled MCP tools with a selected AI model

Option 2: Add an MCP server URL

Use this when Magic UI is already hosted remotely or your team wants one shared connector that multiple users can access.

Open MCP connectors

In TypingMind, go to Plugins, open MCP connectors, then choose Add URL.

Open TypingMind in your browser.
Go to Plugins.
Open MCP connectors.
Click Add URL.

TypingMind Add Custom MCP Server URL form

Paste the server URL

Enter your server URL in the Server URL field. Add a connection name, description, icon, custom HTTP headers, or OAuth client settings if the server requires them.

Paste your server URL into the Server URL field.
Enter a connection name for Magic UI.
Add a description and icon if you want it to be easier to identify.
Add custom HTTP headers or OAuth client details if the server requires authentication.

Create the connection

Click Create connection, then return to the Plugins list and confirm the new MCP connection is active.

Click Create connection.
Return to the MCP connectors list.
Confirm the Magic UI connection appears as active.
Refresh the plugin list if the connection does not appear immediately.

Switch models without reconnecting

Start a chat with your preferred model, enable the Magic UI tools from Plugins, and switch to another model whenever needed. The MCP connection stays available to the TypingMind workspace.

Start a new chat in TypingMind.
Select the AI model you want to use.
Enable the Magic UI tools from Plugins.
Ask the model to use the tool when needed.
Switch to another AI model and reuse the same MCP connection.

Frequently asked questions

What is the Magic UI MCP server used for?

Magic UI is an MCP server that lets compatible AI clients connect to external tools and context. In TypingMind, you can add this MCP server once and make its tools available in your AI workspace.

Can I use Magic UI MCP with multiple AI models in TypingMind?

Yes. TypingMind connects MCP tools at the workspace level, so you can use Magic UI with different AI models such as Claude, ChatGPT, Gemini, or other models you have configured in TypingMind without setting up the MCP server separately for each model.

Why use Magic UI MCP with TypingMind?

TypingMind is one of the best frontends for LLM chat because it brings multiple AI models, prompts, plugins, AI agents, API keys, and MCP tools into one workspace. With Magic UI connected, you can use its MCP tools across your preferred models while keeping your chat workflow organized in TypingMind.

How do I connect Magic UI MCP to TypingMind?

Magic UI can be connected in TypingMind with the local MCP connector or by adding a remote MCP server URL. Use the local connector when the server needs access to files, apps, or private resources on your device, and use a server URL when the MCP server is hosted remotely.

What tools does Magic UI MCP provide in TypingMind?

Magic UI exposes 8 MCP tools that can be enabled from the TypingMind Plugins page and used in chat or assigned to AI agents.

Do I need to share my API keys with TypingMind to use Magic UI MCP?

No. TypingMind is local-first and lets you keep your model providers, API keys, prompts, and MCP configuration under your control. If Magic UI requires authentication, add the required headers, OAuth settings, or local configuration for that MCP server when you create the connection.

Related MCP Servers

View all

Chrome DevTools

chromedevtools

OrganizationPopular

Chrome DevTools for coding agents

Chrome DevTools MCP

Chrome DevTools for coding agents

GitHub

GitHub's official MCP Server

FastMCP

🚀 The fast, Pythonic way to build MCP servers and clients.

25.3K

0 tools

View details

@magicuidesign/mcp

Install MCP configuration

Supported Clients

Manual Installation

Example Usage

Available Tools

MCP Limitations

Credits

Installation

Available Tools

Use Magic UI MCP with multiple AI models

Option 1: Use the local connector

Open the MCP settings

Run the connector command

Add Magic UI as a server

Use it across models

Option 2: Add an MCP server URL

Open MCP connectors

Paste the server URL

Create the connection

Switch models without reconnecting

Frequently asked questions

Related MCP Servers

Set up your own AI workspace now