Create crafted UI components inspired by the best 21st.dev design engineers.
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.
Tell Agent What You Need
/ui
and describe the component you're looking for/ui create a modern navigation bar with responsive design
Let Magic Create It
Seamless Integration
Generate API Key
Choose Installation Method
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
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/mcp.json
~/.codeium/windsurf/mcp_config.json
~/.cline/mcp_config.json
~/.claude/mcp_config.json
For one-click installation, click one of the install buttons below:
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}"
}
}
}
}
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.
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.
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.
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.
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.
mcp/
āāā app/
ā āāā components/ # Core UI components
āāā types/ # TypeScript type definitions
āāā lib/ # Utility functions
āāā public/ # Static assets
IdeInstructions
: Setup instructions for different IDEsApiKeySection
: API key management interfaceWelcomeOnboarding
: Onboarding flow for new usersWe welcome contributions! Please join our Discord community and provide feedback to help improve Magic Agent. The source code is available on GitHub.
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.
MIT License
For more information, join our Discord community or visit 21st.dev/magic.
Converts LaTeX mathematical expressions to MathML format using MathJax-node.
MCP server to provide golang packages and their information from pkg.go.dev
A server for Zep, a long-term memory store for AI applications, requiring a ZEP_API_KEY for access.
A Python server providing Retrieval-Augmented Generation (RAG) functionality. It indexes various document formats and requires a PostgreSQL database with pgvector.
Analyzes your codebase identifying important files based on dependency relationships. Generates diagrams and importance scores per file, helping AI assistants understand the codebase. Automatically parses popular programming languages, Python, Lua, C, C++, Rust, Zig.
A local MCP server for developers that mirrors your in-development MCP server, allowing seamless restarts and tool updates so you can build, test, and iterate on your MCP server within the same AI session without interruption.
Tools for Xcode project management, building, testing, archiving, code signing, and iOS development utilities.
MCP Server that exposes Creatify AI API capabilities for AI video generation, including avatar videos, URL-to-video conversion, text-to-speech, and AI-powered editing tools.
An SSE-based MCP server that allows LLM-powered applications to interact with OCI registries. It provides tools for retrieving information about container images, listing tags, and more.
A server for blockchain interactions, offering Ethereum vanity address generation, 4byte lookup, ABI encoding, and multi-chain RPC calls.