Description

This MCP server implementation provides a bridge to the 21st.dev/magic API, enabling AI assistants to interact with frontend development tasks. Developed by sergeibynas, it offers tools for working with frontend code directly from IDEs like Cursor, WindSurf, and VSCode with Cline. The server is built using TypeScript and integrates with the Model Context Protocol SDK. It focuses on secure API key management and is designed to streamline frontend development workflows. The implementation is particularly useful for AI applications that need to automate or assist with frontend coding tasks, offering a unique approach to AI-assisted web development.

Installation

git clone https://github.com/21st-dev/magic-mcp

Claude Desktop Configuration

Add this configuration to your Claude Desktop config file to enable this MCP server:

Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json

Config file location: %APPDATA%\Claude\claude_desktop_config.json

Config file location: ~/.config/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "magic-21stdev": {
      "command": "node",
      "args": [
        "path/to/server.js"
      ]
    }
  }
}