| name | 21st-dev-magic-mcp |
| description | Use the 21st.dev Magic MCP (now the 21st MCP) to generate, search, and fetch high-quality React components and UI inspiration. Use when you need to generate new components, get design inspiration, search for components, fetch specific component code, or find logos. Install via npx @21st-dev/cli. |
| license | MIT |
| metadata | {"author":"21st-dev","version":"1.0.0"} |
21st.dev Magic MCP
The 21st.dev Magic MCP (now the "21st MCP") lets you generate, search, and fetch high-quality React components and UI inspiration directly in your workflow.
When to Use This Skill
Apply when:
- Generating new React components from a description
- Getting UI design inspiration
- Searching for existing components
- Fetching specific component code
- Finding logos for a project
- Building polished, production-ready React UIs
Setup
Install and initialize the 21st CLI:
npx @21st-dev/cli@latest init --client <cursor|claude|vscode|windsurf|codex>
Get your API key at: https://21st.dev/mcp
Available Tools
- generate — Generate a new React component from a natural language description
- get_inspiration — Get UI design inspiration and ideas
- search — Search for existing components
- get_component — Fetch the code for a specific component
- search_logo — Search for and fetch logos
Workflow
- Get inspiration for the design direction
- Search for existing components that match your needs
- Generate new components when nothing fits
- Fetch component code to integrate into your project
- Search for logos to complete the branding
Best Practices
- Provide clear, specific descriptions when generating components
- Reference existing components for consistency
- Review generated code before integrating
- Combine generated components with your design system
Resources
