# Magic (21st.dev UI Generator)

> Use this tool when you need to generate UI components or search for company logos within an AI assistant workflow. It solves problems of tedious UI design and asset searching by providing a bridge to the 21st.dev Magic API, accepting text descriptions and API keys as inputs and outputting UI components and logos in various formats. Ideal for developers seeking to streamline their workflow and quickly find or generate UI components and brand assets without leaving their AI client.

Canonical page: https://skillsregistry.net/skills/21stdev-magic-ui-generator  
JSON: https://api.skillsregistry.net/v1/skills/21stdev-magic-ui-generator

## Description

Magic MCP Server provides a bridge to 21st.dev's Magic API, enabling AI assistants to generate UI components and search for logos. Developed by serafim@21st.dev, this TypeScript implementation offers three specialized tools: creating UI components from descriptions, fetching existing components for inspiration, and searching for company logos in various formats (SVG, JSX, TSX). The server authenticates with the 21st.dev API using an API key and is designed to be easily integrated with AI clients like Cline and Windsurf through Smithery. Ideal for developers who want to quickly generate or find UI components and brand assets without leaving their AI assistant workflow.

## Trust

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

## Facts

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

## Source

- **Source listing:** [PulseMCP](https://www.pulsemcp.com/servers/21stdev-magic-ui-generator)
- **Repository:** <https://github.com/oyasimi1209/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": "21stdev-magic-ui-generator"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/21stdev-magic-ui-generator` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/21stdev-magic-ui-generator/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