mcp

MCP.Pizza Chef: magicuidesign

Magic UI is a free library of animated pieces you drop into a website: marquees of logos, blur-fade text, shimmering buttons, grid backgrounds. Three tools let your editor list what exists, search it by description, and open one item to see its code plus the one-line command that adds it. It reads a public catalogue of 247 entries, so there is nothing to sign up for and no key to paste. Note that it hands your editor the install command; your editor is what actually runs it.

Coding

Images/Design

Use This MCP server To

Add an animated logo marquee to my landing page Find a text effect that fades in as you scroll See a component's code before deciding to use it Browse every Magic UI component without leaving my editor Ask which component fits an idea I describe in words

README

@magicuidesign/mcp

Official ModelContextProtocol (MCP) server for Magic UI.

Install MCP configuration

npx @magicuidesign/cli@latest install <client>

Supported Clients

Manual Installation

Add to your IDE's MCP config:

{
  "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"

mcp FAQ

Do I need an API key or an account?

No. It reads Magic UI's public catalogue over the open web, with nothing to sign up for and no credentials to paste anywhere.

Does it install the component for me?

Not by itself. It returns a one-line command; your editor is what runs that command and writes the files into your project.

Which apps does it work in?

Cursor, Windsurf, Cline, Roo Code and Claude are all covered by the setup helper, and any other app that speaks the same protocol can use it too.

Is Magic UI free?

The components this reaches are free and open source. Magic UI separately sells paid page templates, and those are not part of the catalogue it reads.

How many components can it actually see?

247 catalogue entries, of which 77 are components and the rest are worked examples and styles you can copy from.

Can I use this to build a landing page?

Yes. Describe the section you want and it will find matching pieces, show you the code, and give your editor the command to add each one.

Will these components work on any website?

They are written for projects built with React and Tailwind. On a plain HTML site or a page builder, you would be copying ideas rather than code.

How hard is setup?

Easy. Either run the one-line setup helper for your editor, or paste a short block into your editor's settings file.