Skip to main content
Glama
BACH-AI-Tools

21st.dev Magic AI Agent

by BACH-AI-Tools
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.

基于原项目: 此项目基于 magic-mcp 修改而来

🌟 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", "bach-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", "bach-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
absolutePathToCurrentFileYesAbsolute path to the current file to which we want to apply changes
absolutePathToProjectDirectoryYesAbsolute path to the project root directory
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.

TDQS

A3.8/5.0
Behavior3/5

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

No annotations are provided, so the description carries the full burden. It discloses key behavioral traits: the tool returns only a text snippet (not integrated code) and requires post-call file editing. However, it lacks details on error handling, rate limits, authentication needs, or what happens if inputs are invalid. For a tool with 5 parameters and no annotations, this leaves gaps in understanding its full behavior.

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

Conciseness4/5

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

The description is appropriately sized and front-loaded, starting with usage triggers and core functionality. It uses three concise sentences with zero waste, clearly stating purpose, limitation, and required follow-up. However, it could be slightly more structured by separating usage conditions from post-call instructions for better readability.

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

Completeness3/5

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

Given the complexity (5 parameters, no annotations, no output schema), the description is partially complete. It covers when to use the tool and its output nature but lacks details on error cases, return format, or how parameters influence the snippet generation. Without an output schema, it should ideally hint at what the snippet contains (e.g., code, documentation), leaving some contextual gaps for effective agent use.

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 schema already documents all 5 parameters thoroughly. The description does not add any parameter-specific information beyond what's in the schema (e.g., it doesn't explain how 'searchQuery' relates to '21st.dev' or clarify parameter interactions). With high schema coverage, the baseline is 3, as the description doesn't compensate with extra semantic context.

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

Purpose4/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 return a text snippet for a UI component when users request new UI components. It specifies the verb 'returns' and resource 'text snippet for that UI component,' and mentions React components as examples. However, it doesn't explicitly differentiate from sibling tools like '21st_magic_component_refiner' or '21st_magic_component_inspiration,' which likely have related but distinct purposes.

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

Usage Guidelines5/5

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

The description provides explicit usage guidelines: 'Use this tool when the user requests a new UI component' and lists specific triggers (e.g., mentions of /ui, /21, /21st, or component names like button, input). It also states 'This tool ONLY returns the text snippet' and instructs on post-call actions ('you must edit or add files to integrate'), clearly outlining when and how to use it versus alternatives like manual coding or other tools.

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

21st_magic_component_inspirationC

"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

C2.5/5.0
Behavior2/5

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

No annotations are provided, so the description carries full burden. It discloses that the tool returns JSON data without generating new code and that the agent must edit files afterward, which adds some behavioral context. However, it lacks details on permissions, rate limits, error handling, or what 'previews' entail. For a tool with no annotations, this is insufficient to fully understand its behavior.

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

Conciseness3/5

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

The description is three sentences but has redundancy (e.g., repeating 'this tool') and unclear phrasing like '/21st fetch data.' It's front-loaded with purpose but includes an instruction ('After calling this tool...') that might be better placed elsewhere. Some sentences could be more efficient, but it's not overly verbose.

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

Completeness2/5

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

Given no annotations, no output schema, and two parameters with full schema coverage, the description is incomplete. It mentions returning JSON data and requiring file edits but doesn't explain the output format, error cases, or how 'previews' are handled. For a tool that involves fetching and post-processing, more context is needed to guide the agent effectively.

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 schema already documents both parameters ('message' and 'searchQuery'). The description doesn't add any meaning beyond the schema—it doesn't explain how parameters interact or provide usage examples. With high schema coverage, the baseline is 3, as the description doesn't compensate but doesn't detract either.

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

Purpose3/5

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

The description states the tool fetches data and previews from 21st.dev and returns JSON data of matching components, which clarifies its purpose. However, it doesn't clearly differentiate from sibling tools like '21st_magic_component_builder' or '21st_magic_component_refiner'—it mentions 'without generating new code' but doesn't specify how this differs from those siblings. The purpose is somewhat vague regarding the exact scope compared to alternatives.

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

Usage Guidelines2/5

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

The description provides minimal guidance: it says 'Use this tool when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev,' but this is broad and doesn't specify when to choose this over siblings like '21st_magic_component_builder' or 'logo_search.' No explicit alternatives, exclusions, or context for tool selection are given, leaving usage unclear.

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

21st_magic_component_refinerB

"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
userMessageYesFull user's message about UI refinement
absolutePathToRefiningFileYesAbsolute path to the file that needs to be refined
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.

TDQS

B3.4/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. While it states the tool 'improves UI' and 'returns redesigned version,' it lacks details about how the improvement works (e.g., is it AI-generated, template-based, manual?), what permissions or prerequisites are needed, whether changes are destructive or reversible, or any rate limits. For a tool that modifies UI components with no annotation coverage, this is a significant gap in transparency.

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

Conciseness4/5

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

The description is appropriately concise with two sentences that directly address usage and purpose. The first sentence efficiently covers when to use the tool, and the second explains what it does. There's no wasted text, though it could be slightly more structured (e.g., separating usage and output more clearly).

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

Completeness3/5

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

Given the complexity (a UI refinement tool with 3 parameters, no annotations, and no output schema), the description is moderately complete. It covers the tool's purpose and usage context adequately but lacks behavioral details (e.g., how refinement works, output format beyond 'redesigned version') and doesn't leverage sibling tool context to differentiate alternatives. Without annotations or output schema, the description should do more to compensate, but it meets a minimum viable level.

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 schema already documents all three parameters thoroughly. The description doesn't add any parameter-specific information beyond what's in the schema (e.g., it doesn't clarify the relationship between 'userMessage' and 'context' or provide examples). With high schema coverage, the baseline is 3, as the description doesn't compensate with additional parameter insights.

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

Purpose4/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: 'improves UI of components and returns redesigned version of the component and instructions on how to implement it.' This specifies both the action (improves UI) and the output (redesigned component + implementation instructions). However, it doesn't explicitly differentiate from sibling tools like '21st_magic_component_builder' or '21st_magic_component_inspiration' beyond mentioning it's for refinement rather than building new components.

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 clear context for when to 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 includes specific triggers (commands) and scope limitations (components/molecules, not big pages). However, it doesn't explicitly mention when to use alternatives like the sibling 'builder' or 'inspiration' tools.

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 updatesv1.0.0
    • 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

B3.1/5.0
Disambiguation2/5

The first three tools have significant overlap and unclear boundaries. 'component_builder' and 'component_inspiration' both mention returning text snippets for UI components, while 'component_refiner' also deals with UI components but focuses on redesign. The descriptions create confusion about when to use each, especially between builder and inspiration. Only 'logo_search' stands clearly apart.

Naming Consistency3/5

Three tools follow a consistent '21st_magic_component_*' pattern with descriptive suffixes (builder, inspiration, refiner), which is good. However, 'logo_search' breaks this pattern entirely with a different naming convention, creating inconsistency across the set. The naming within the component group is consistent but not across all tools.

Tool Count4/5

Four tools is a reasonable count for a UI/component-focused server, allowing focused functionality without being overwhelming. It covers component creation, inspiration, refinement, and logo handling, which aligns well with the apparent scope of React component development assistance. The count is appropriate though slightly lean.

Completeness3/5

For a UI component development server, there are notable gaps. While it covers component creation, inspiration, refinement, and logo integration, it lacks tools for component testing, deployment, or management (e.g., listing existing components, deleting components). The surface supports basic workflows but leaves agents without complete lifecycle coverage for the domain.

Maintenance

ActivityInactive
ResponsivenessNo issues

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/BACH-AI-Tools/bach-magic-mcp'

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