Skip to main content
Glama
mrbkrustamov

@21st-dev/magic

by mrbkrustamov
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

21st.dev Magic AI Agent

MCP Banner

Magic Component Platform (MCP) is a powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions. It integrates seamlessly with popular IDEs and provides a streamlined workflow for UI development.

🌟 Features

  • AI-Powered UI Generation: Create UI components by describing them in natural language

  • Multi-IDE Support:

  • Modern Component Library: Access to a vast collection of pre-built, customizable components inspired by 21st.dev

  • Real-time Preview: Instantly see your components as you create them

  • TypeScript Support: Full TypeScript support for type-safe development

  • SVGL Integration: Access to a vast collection of professional brand assets and logos

  • Component Enhancement: Improve existing components with advanced features and animations (Coming Soon)

Related MCP server: Magic Component Platform

🎯 How It Works

  1. Tell Agent What You Need

    • In your AI Agent's chat, just type /ui and describe the component you're looking for

    • Example: /ui create a modern navigation bar with responsive design

  2. Let Magic Create It

    • Your IDE prompts you to use Magic

    • Magic instantly builds a polished UI component

    • Components are inspired by 21st.dev's library

  3. Seamless Integration

    • Components are automatically added to your project

    • Start using your new UI components right away

    • All components are fully customizable

🚀 Getting Started

Prerequisites

  • Node.js (Latest LTS version recommended)

  • One of the supported IDEs:

    • Cursor

    • Windsurf

    • VSCode (with Cline extension)

Installation

  1. Generate API Key

  2. Choose Installation Method

Method 1: CLI Installation (Recommended)

One command to install and configure MCP for your IDE:

npx @21st-dev/cli@latest install <client> --api-key <key>

Supported clients: cursor, windsurf, cline, claude

Method 2: Manual Configuration

If you prefer manual setup, add this to your IDE's MCP config file:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
    }
  }
}

Config file locations:

  • Cursor: ~/.cursor/mcp.json

  • Windsurf: ~/.codeium/windsurf/mcp_config.json

  • Cline: ~/.cline/mcp_config.json

  • Claude: ~/.claude/mcp_config.json

Method 3: VS Code Installation

For one-click installation, click one of the install buttons below:

Install with NPX in VS Code Install with NPX in VS Code Insiders

Manual VS Code Setup

First, check the install buttons above for one-click installation. For manual setup:

Add the following JSON block to your User Settings (JSON) file in VS Code. You can do this by pressing Ctrl + Shift + P and typing Preferences: Open User Settings (JSON):

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

Optionally, you can add it to a file called .vscode/mcp.json in your workspace:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "apiKey",
      "description": "21st.dev Magic API Key",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ FAQ

How does Magic AI Agent handle my codebase?

Magic AI Agent only writes or modifies files related to the components it generates. It follows your project's code style and structure, and integrates seamlessly with your existing codebase without affecting other parts of your application.

Can I customize the generated components?

Yes! All generated components are fully editable and come with well-structured code. You can modify the styling, functionality, and behavior just like any other React component in your codebase.

What happens if I run out of generations?

If you exceed your monthly generation limit, you'll be prompted to upgrade your plan. You can upgrade at any time to continue generating components. Your existing components will remain fully functional.

How soon do new components get added to 21st.dev's library?

Authors can publish components to 21st.dev at any time, and Magic Agent will have immediate access to them. This means you'll always have access to the latest components and design patterns from the community.

Is there a limit to component complexity?

Magic AI Agent can handle components of varying complexity, from simple buttons to complex interactive forms. However, for best results, we recommend breaking down very complex UIs into smaller, manageable components.

🛠️ Development

Project Structure

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

Key Components

  • IdeInstructions: Setup instructions for different IDEs

  • ApiKeySection: API key management interface

  • WelcomeOnboarding: Onboarding flow for new users

🤝 Contributing

We welcome contributions! Please join our Discord community and provide feedback to help improve Magic Agent. The source code is available on GitHub.

👥 Community & Support

⚠️ Beta Notice

Magic Agent is currently in beta. All features are free during this period. We appreciate your feedback and patience as we continue to improve the platform.

📝 License

MIT License

🙏 Acknowledgments

  • Thanks to our beta testers and community members

  • Special thanks to the Cursor, Windsurf, and Cline teams for their collaboration

  • Integration with 21st.dev for component inspiration

  • SVGL for logo and brand asset integration

For more information, join our Discord community or visit 21st.dev/magic.

Available Tools

4 tools
21st_magic_component_builderA

"Use this tool when the user requests a new UI component—e.g., mentions /ui, /21 /21st, or asks for a button, input, dialog, table, form, banner, card, or other React component. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesGenerate a search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase
standaloneRequestQueryYesYou need to formulate what component user wants to create, based on his message, possbile chat histroy and a place where he makes the request.Extract additional context about what should be done to create a ui component/page based on the user's message, search query, and conversation history, files. Don't halucinate and be on point.
absolutePathToCurrentFileYesAbsolute path to the current file to which we want to apply changes
absolutePathToProjectDirectoryYesAbsolute path to the project root directory

TDQS

A4.2/5.0
Behavior4/5

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

With no annotations, the description carries the burden of disclosing behavior. It states the tool only returns a snippet and does not modify files, requiring the agent to edit/add files afterward. This is honest and useful, though it doesn't cover error cases or output format details.

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

Conciseness5/5

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

The description is three sentences, front-loaded with the usage trigger, and every sentence serves a purpose. The 'ONLY' emphasis is efficient and no filler is present.

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

Completeness4/5

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

The description covers the tool's purpose, when to use it, what it returns, and the required follow-up action (edit/add files). It lacks an explicit description of the snippet's format or error behavior, but for a simple snippet builder this is acceptable given the schema and absent output schema.

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

Parameters3/5

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

Schema description coverage is 100%, so the baseline is 3. The description itself does not add parameter-specific meaning beyond what the schema already provides, so it does not exceed the baseline.

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

Purpose5/5

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

The description clearly states the tool builds new UI components and that it 'ONLY returns the text snippet', which differentiates it from the inspiration and refiner siblings. Trigger examples (button, input, dialog) make its scope unambiguous.

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

Usage Guidelines4/5

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

It explicitly tells when to use the tool ('when the user requests a new UI component' with examples like /ui and /21st). It does not mention when not to use it or name alternatives, but the guidance is clear enough for an agent to decide.

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

21st_magic_component_inspirationA

"Use this tool when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev. This tool returns the JSON data of matching components without generating new code. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesSearch query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase

TDQS

A4.2/5.0
Behavior4/5

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

With no annotations, the description must fully disclose behavior. It does so by stating the tool returns JSON data and only a text snippet, does not generate code, and requires integration steps. This provides a clear behavioral profile, though it could have mentioned potential edge cases like no-matches or authentication, but for a straightforward fetch tool, the transparency is solid.

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

Conciseness5/5

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

The description is three sentences, each earning its place: a usage trigger, a statement of return type, and a mandatory follow-up note. It is front-loaded with the primary use case and avoids fluff, making it highly concise and well-structured.

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

Completeness4/5

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

For a tool with two parameters, no output schema, and no annotations, the description covers all essential aspects: purpose, return format, and necessary post-actions. It is complete enough for an agent to invoke it correctly, though it could add a note on error handling or that the tool only applies to 21st.dev components, but these are minor gaps.

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

Parameters3/5

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

Schema description coverage is 100%, as both 'message' and 'searchQuery' have detailed descriptions including format constraints. The tool description adds no extra parameter semantics beyond what the schema already provides, so the score aligns with the baseline of 3 for high schema coverage.

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

Purpose5/5

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

The description clearly states the tool's purpose: it fetches and returns component snippets from 21st.dev when the user wants inspiration or a specific component. It distinguishes itself from siblings by explicitly stating 'without generating new code' and 'ONLY returns the text snippet,' making it clear this is a lookup tool, not a builder.

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

Usage Guidelines4/5

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

The description specifies when to use the tool ('when the user wants to see component, get inspiration, or /21st fetch data and previews') and provides a clear post-condition ('After calling this tool, you must edit or add files'). It does not explicitly name alternative tools or provide exclusion criteria, but the 'without generating new code' phrasing implies a contrast with the builder, offering adequate usage guidance.

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

21st_magic_component_refinerA

"Use this tool when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule (NOT for big pages). This tool improves UI of components and returns redesigned version of the component and instructions on how to implement it."

ParametersJSON Schema
NameRequiredDescriptionDefault
contextYesExtract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string.
userMessageYesFull user's message about UI refinement
absolutePathToRefiningFileYesAbsolute path to the file that needs to be refined

TDQS

A4.2/5.0
Behavior4/5

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

No annotations are provided, so the description carries the behavioral burden. It discloses that the tool returns a redesigned version and implementation instructions, implying a non-mutating output. It also sets expectations around scope (components/molecules only, not big pages). It doesn't detail permissions or side effects, but for a UI refinement tool, the key behavior is clearly stated.

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

Conciseness5/5

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

The description is two sentences, front-loaded with the usage condition, and contains zero fluff. Every clause adds value: trigger commands, scope, output, and exclusion.

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

Completeness4/5

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

Given the tool's moderate complexity (3 params, no output schema, no annotations), the description covers the essential aspects: what it does, when to use it, and what it returns. It could elaborate on the structure of the 'instructions' or the exact form of the redesigned version, but it is sufficiently complete for an agent to understand the tool's role among siblings.

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

Parameters3/5

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

Schema description coverage is 100%, with each parameter having a detailed description (e.g., context extraction rules). The tool description adds no additional parameter-level semantics, so the schema already does the heavy lifting. Baseline 3 is appropriate.

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

Purpose5/5

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

The description clearly states the tool's purpose: to refine/improve existing UI components for React components or molecules, distinguishing it from building new ones (sibling builder). It explicitly mentions the trigger commands (/ui, /21) and the scope limitation (NOT for big pages), making it unambiguous.

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

Usage Guidelines4/5

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

The description provides explicit usage context: when the user requests re-design/refinement of a current UI component or when context is about improving a React component/molecule. It also includes an exclusion (NOT for big pages). However, it doesn't explicitly name alternative tools, relying on the 'current' vs 'new' distinction to differentiate from the builder sibling.

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

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 4 tool updatesv0.1.1-beta.1
    • First observed21st_magic_component_builder
    • First observed21st_magic_component_inspiration
    • First observed21st_magic_component_refiner
    • First observedlogo_search
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A4.4/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose: builder creates new component snippets, inspiration fetches data/previews from 21st.dev, refiner improves existing components, and logo_search specifically handles logo lookup. There is no overlap or ambiguity between them.

Naming Consistency4/5

The three component tools follow a consistent naming pattern with the '21st_magic_component_' prefix, but logo_search deviates from this convention. While readable and mostly predictable, the mixed pattern prevents a perfect score.

Tool Count5/5

With 4 tools, the server is well-scoped for its purpose of assisting with React component workflows (create, inspire, refine, and logos). Each tool earns its place without unnecessary redundancy.

Completeness5/5

The tool surface covers the core workflow for a UI component assistant: building new components, gathering inspiration, refining existing ones, and searching logos. There are no obvious gaps for the stated niche, and the server's purpose is fully addressed.

Maintenance

ActivitySlowing
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

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/mrbkrustamov/magic_mcp'

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