# Magic (21st.dev)

> Use this tool when you need to automate or assist with frontend coding tasks, such as interacting with frontend development workflows directly from IDEs. It provides a bridge to the 21st.dev/magic API, enabling AI assistants to work with frontend code securely and efficiently. Ideal for AI applications that require streamlined frontend development workflows, it offers tools for secure API key management and integration with the Model Context Protocol SDK.

Canonical page: https://skillsregistry.net/skills/21st-dev-magic  
JSON: https://api.skillsregistry.net/v1/skills/21st-dev-magic

## 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.

## Trust

- **Trust score (0–1):** 0.95
- **Verification tier:** verified
- **Last scanned:** 2026-09-19

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** productivity
- **Updated:** 2026-09-19

## Source

- **Source listing:** [PulseMCP](https://www.pulsemcp.com/servers/21st-dev-magic)
- **Repository:** <https://github.com/21st-dev/magic-mcp>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "21st-dev-magic"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/21st-dev-magic` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/21st-dev-magic/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt