21st-dev/Magic-MCP
Create crafted UI components inspired by the best 21st.dev design engineers.
Ads
Overview
Create crafted UI components inspired by the best 21st.dev design engineers.
Installation
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
Configuration
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}Capabilities
- Search the 21st.dev catalog
find components, themes, or templates by describing what you need with the `search` tool.
- Generate UI components from a prompt
ask for a React component matching a description and receive ready-to-use code via `generate`.
- Get component inspiration
retrieve curated component examples for a given use case with `get_inspiration`.
- Look up company logos
find SVG logos by company name using `search_logo` (one query per call).
- Retrieve paid code
access premium components you have purchased through the platform.
Tags
- design
- development
- awesome-list
Related MCP servers
Context7 MCP
OfficialOfficial Context7 MCP server that brings up-to-date, version-specific library documentation and code examples into AI coding prompts.
Chrome DevTools MCP
OfficialOfficial Chrome DevTools MCP server for controlling and inspecting a live Chrome browser from coding agents such as Gemini, Claude, Cursor, and Copilot.
Mastra/mcp
OfficialClient implementation for Mastra, providing seamless integration with MCP-compatible AI models and tools.
GitHub MCP Server
OfficialConnect your AI assistant to GitHub repositories, issues, pull requests, and search.