Magic MCP: MCP service for generating modernized UI components

General Introduction

Magic MCP is an AI-driven tool developed by the 21st.dev team and designed for front-end developers. It generates modern UI components on-the-fly from natural language descriptions and integrates with development environments such as Cursor, WindSurf and VS Code (Cline plugin). Users enter simple requirements, such as "Create a modern navigation bar", and Magic MCP generates a modern UI component based on the React component code with Tailwind CSS styles and TypeScript support. The tool is completely open source, hosted on GitHub, and free for developers to use. It offers live previews and a rich component library for rapid prototyping or team development.

Function List

• natural language generation component: Describe the requirements in text and automatically generate the React component code.
• Multiple IDE support: Seamless integration with Cursor, WindSurf and VS Code (Cline Beta).
• Modern Component Library: offers a large number of customizable components inspired by 21st.dev.
• Real-time preview: Instantly view the effect when generating components for easy debugging.
• TypeScript Support: Ensure that the generated code is type-safe and reduces errors.
• SVGL Integration: Built-in professional branding icons and logos, embedded directly into the component.
• Component enhancements (coming soon): Add advanced features and animations to existing components.

Using Help

Installation process

Magic MCP needs to be installed in one of the supported IDEs, as follows Cursor For example, other IDEs (e.g. WindSurf (or VS Code + Cline) installs similarly:

1. Preparing the environment
   Ensure that your computer has Node.js (the latest LTS version is recommended, e.g. v22) and npm installed; this is the basis for running Magic MCP.
2. Getting the API key
   Visit the 21st.dev website, log in and go to the "API" page and generate a new TWENTY_FIRST_API_KEY. You can try it without a key, but the functionality is limited.
3. Installing Magic MCP
   Open a terminal and run the following command:

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\"\:\"Your API key\"}"

commander-in-chief (military) Your API key Replace the key with the one obtained from the official website.

4. Configuring the Cursor IDE
   Open Settings in Cursor, find the Model Context Protocol (MCP) option and add the following configuration:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y","@smithery/cli@latest", "install","@21st-dev/magic-mcp","--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "Your API key"}
}
}
}

Save and restart the IDE.

5. Verify Installation
   In the Cursor chat window type /uiIf you are prompted with "Creating Components with Magic MCP", the installation was successful.

WindSurf Configuration

exist ~/.codeium/windsurf/mcp_config.json Add in:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"], {
"env": {"TWENTY_FIRST_API_KEY": "Your API key"}
}
}
}

VS Code + Cline Configuration (Beta)

exist Cline is added to the MCP configuration of the

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"], {
"env": {"TWENTY_FIRST_API_KEY": "Your API key"}
}
}
}

How to use the main features

Generating UI Components

• procedure::
  1. In the IDE chat window type /ui, followed by a requirement, such as /ui Create a navigation bar with search functionThe
  2. Magic MCP generates a React component code that is displayed directly in the window.
  3. Click "Insert Code" and the code is automatically added to the project file.
• Detailed description::
  The component uses Tailwind CSS styles and TypeScript by default, and the code can be adjusted manually. The more specific the input description, the more relevant the result will be.
• typical example::
  Input:/ui a blue button
  Output:

  const BlueButton = () => {
  return (
  
  Click on me
  </button
  );
  }; }
  export default BlueButton.
  

Real-time preview

• procedure::
  1. After generating the component, the IDE displays a preview window showing the effect of the component.
  2. After modifying the code, the preview is automatically updated.
• Detailed description::
  If the local project is not running, the preview relies on Magic MCP's built-in rendering, which may differ slightly from the actual result.

Using SVGL Icons

• procedure::
  1. importation /logo Brand Namee.g. /logo TwitterThe
  2. The tool returns the icon code in SVG or JSX format.
  3. Copied for use in a component.
• typical example::
  Input:/logo GitHub
  Output:

  const GitHubIcon = () => (
  
  
  </svg
  );
  

Operation process details

1. Initiation of projects
   Ensure that the front-end project has been created (e.g. with Create React App).Magic MCP generates code based on the project structure.
2. input requirement
   Use natural language descriptions in the IDE, such as "a responsive card list". Clearer descriptions lead to more accurate results.
3. Adjustment code
   Check the code after generation and modify the style or logic to meet the requirements.
4. operational test
   Save the code and run the project (e.g. npm start), confirming the effect.

caveat

• Limited number of generation per month, after exceeding the limit, you need to upgrade the paid plan.
• Complex components are recommended to be split into multiple simple requirements generation.
• Join the Discord community to ask questions.

application scenario

1. Rapid Prototyping
   When developers need to show UI effects, Magic MCP saves time by generating components quickly.
2. Team Code Reuse
   Teams share components through 21st.dev to standardize style and improve efficiency.
3. Learn front-end technologies
   Beginners use it to generate standard code, learn as they change, and get started with React quickly.

QA

1. Is Magic MCP free?
   Yes, it's open source on GitHub, free for basic features and requires API keys and paid plans for advanced features.
2. Is the generated code commercially available?
   Yes, the code is owned by the user and can be used for any project.
3. What IDEs are supported?
   Currently supports Cursor, WindSurf and VS Code (Cline Beta), may be extended in the future.