An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
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
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
Let Magic Create It
Your IDE prompts you to use Magic
Components are inspired by 21st.dev's library
Seamless Integration
Generate API Key
Visit 21st.dev Magic Console
Generate a new 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.jsonMagic 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 assetsIdeInstructions: 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.
[
{
"description": "n"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.nThis tool ONLY returns the text snippet for that UI component. nAfter calling this tool, you must edit or add files to integrate the snippet into the codebase."n",
"inputSchema": {
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false,
"properties": {
"message": {
"description": "Full users message",
"type": "string"
},
"searchQuery": {
"description": "Generate 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",
"type": "string"
}
},
"required": [
"message",
"searchQuery"
],
"type": "object"
},
"name": "21st_magic_component_builder"
},
{
"description": "nSearch and return logos in specified format (JSX, TSX, SVG).nSupports single and multiple logo searches with category filtering.nCan return logos in different themes (light/dark) if available.nnWhen to use this tool:n1. When user types "/logo" command (e.g., "/logo GitHub")n2. When user asks to add a company logo that's not in the local projectnnExample queries:n- Single company: ["discord"]n- Multiple companies: ["discord", "github", "slack"]n- Specific brand: ["microsoft office"]n- Command style: "/logo GitHub" -> ["github"]n- Request style: "Add Discord logo to the project" -> ["discord"]nnFormat options:n- TSX: Returns TypeScript React componentn- JSX: Returns JavaScript React componentn- SVG: Returns raw SVG markupnnEach result includes:n- Component name (e.g., DiscordIcon)n- Component coden- Import instructionsn",
"inputSchema": {
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false,
"properties": {
"format": {
"description": "Output format",
"enum": [
"JSX",
"TSX",
"SVG"
],
"type": "string"
},
"queries": {
"description": "List of company names to search for logos",
"items": {
"type": "string"
},
"type": "array"
}
},
"required": [
"queries",
"format"
],
"type": "object"
},
"name": "logo_search"
},
{
"description": "n"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. nAfter calling this tool, you must edit or add files to integrate the snippet into the codebase."n",
"inputSchema": {
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false,
"properties": {
"message": {
"description": "Full users message",
"type": "string"
},
"searchQuery": {
"description": "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",
"type": "string"
}
},
"required": [
"message",
"searchQuery"
],
"type": "object"
},
"name": "21st_magic_component_inspiration"
}
]