Back to MCP Servers
Magic
Create crafted UI components inspired by the best 21st.dev design engineers.
developer-tools
By 21st-dev
Installation
npx -y magic-mcpConfiguration
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": ["-y", "magic-mcp"]
}
}
}How to use
- Run the installation command above (if needed)
- Open your Claude Code settings file (~/.claude/settings.json)
- Add the configuration to the mcpServers section
- Restart Claude Code to apply changes