# 21st.dev Magic MCP

> A community-driven, extensible MCP server implementation focused on flexibility for Claude-based AI agents. It offers customizable memory persistence and toolchains, suitable for indie developers and personal projects.

- **URL:** https://github.com/21st-dev/magic-mcp
- **Category:** AI Integration MCP Servers
- **Tags:** Mcp, Claude, Memory, Extensible
- **Updated:** 2025-05-14 00:36
- **Canonical page:** https://mcpserver.ever.works/es/items/21stdev-magic-mcp

## Details

# 21st.dev Magic MCP

[GitHub Repository](https://github.com/21st-dev/magic-mcp)

A community-driven, extensible MCP (Magic Component Platform) server implementation focused on flexibility for Claude-based AI agents. Designed for developers to generate modern UI components via natural language and integrate with popular IDEs.

---

## Features

- **AI-Powered UI Generation**: Create React UI components by describing them in natural language (e.g., "/ui create a modern navigation bar with responsive design").
- **Multi-IDE Support**:
  - Cursor IDE integration
  - Windsurf support
  - VSCode with Cline extension (Beta)
- **Modern Component Library**: Access a curated library of customizable components inspired by 21st.dev.
- **Real-time Preview**: Instantly preview generated components as they are created.
- **TypeScript Support**: All components and code are type-safe.
- **SVGL Integration**: Built-in access to a large collection of professional brand assets and logos.
- **Component Enhancement**: Planned support for upgrading existing components with advanced features and animations (feature coming soon).
- **Customizable Memory Persistence and Toolchains**: Extensible architecture for indie developers and personal projects.
- **Seamless Integration**: Generated components are automatically added to your project structure and follow your code style.
- **Editable Output**: All components are fully editable and can be customized further.
- **Handles Various Component Complexity**: Capable of generating both simple and complex UI elements.
- **Community-Driven**: New components and design patterns from the community can be published and accessed immediately.
- **Open Source**: MIT License, encourages contributions.

## Getting Started

- **Prerequisites**:
  - Node.js (latest LTS recommended)
  - Supported IDE (Cursor, Windsurf, VSCode+Cline)
- **Installation**:
  - Generate API key from Magic dashboard
  - Follow IDE-specific setup instructions to integrate the Magic MCP server

## Pricing

- **Beta Period**: All features are free during beta. After exceeding monthly generation limits, users will be prompted to upgrade (future paid plans to be announced).

## License

- MIT License

## Tags

`mcp` `claude` `memory` `extensible`

---

_This Markdown mirror is generated by Ever Works for AI agents. The canonical HTML page is at https://mcpserver.ever.works/es/items/21stdev-magic-mcp._