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.

🔬 Playground

Try Magic (21st.dev) live in the browser with security context.
⚪
Unverified
No automated security scan has been run on this server yet.

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"
      ]
    }
  }
}

Community Reviews

Authenticated reviews from GitHub users. No anonymous submissions. Your experience helps others choose wisely.

—
★★★★★
0 reviews
5★
0
4★
0
3★
0
2★
0
1★
0

No reviews yet. Be the first to share your experience.