{"type":"mcp_server","name":"magic-mcp","description":"This repository hosts the Magic Component Platform (MCP), an AI-driven tool that generates modern UI components from natural language descriptions, integrating with popular IDEs like Cursor and VSCode for streamlined UI development.","category":"Developer Tools","language":"HTML","stars":5267,"forks":55,"owner":"21st-dev","github_url":"https://github.com/21st-dev/magic-mcp","homepage":"https://21st.dev/magic","setup":"## Setup\n\n### Prerequisites\n\n- Node.js (Latest LTS version recommended)\n- One of the supported IDEs:\n  - Cursor\n  - Windsurf\n  - VSCode (with Cline extension)\n\n### Installation\n\n1. **Generate API Key**\n\n   - Visit [21st.dev Magic Console](https://21st.dev/magic/console)\n   - Generate a new API key\n\n2. **Choose Installation Method**\n\n#### Method 1: CLI Installation (Recommended)\n\nOne command to install and configure MCP for your IDE:\n\n```bash\nnpx @21st-dev/cli@latest install <client> --api-key <key>\n```\n\nSupported clients: cursor, windsurf, cline, claude\n\n#### Method 2: Manual Configuration\n\nIf you prefer manual setup, add this to your IDE's MCP config file:\n\n```json\n{\n  \"mcpServers\": {\n    \"@21st-dev/magic\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@21st-dev/magic@latest\", \"API_KEY=\\\"your-api-key\\\"\"]\n    }\n  }\n}\n```\n\nConfig file locations:\n\n- Cursor: `~/.cursor/mcp.json`\n- Windsurf: `~/.codeium/windsurf/mcp_config.json`\n- Cline: `~/.cline/mcp_config.json`\n- Claude: `~/.claude/mcp_config.json`","tools":"## Available Tools\n\n1. AI-Powered UI Generation (Create UI components by describing them in natural language)\n2. Multi-IDE Support (Integration with Cursor, Windsurf, and VSCode + Cline)\n3. Modern Component Library (Access to a vast collection of pre-built, customizable components inspired by 21st.dev)\n4. Real-time Preview (Instantly see your components as you create them)\n5. TypeScript Support (Full TypeScript support for type-safe development)\n6. SVGL Integration (Access to a vast collection of professional brand assets and logos)\n7. Component Enhancement (Improve existing components with advanced features and animations)","faq":null,"created_at":"2025-02-19T13:17:50+00:00","updated_at":"2025-03-29T00:00:37+00:00","source_url":"https://model-context-protocol.com/servers/magic-ai-driven-ui-component-platform","related_articles":[]}