21st-dev Magic MCP Server

Co dělá “21st-dev Magic” MCP Server?

21st-dev Magic MCP Server je AI platforma určená vývojářům pro okamžité vytváření krásných, moderních UI komponent pomocí přirozených jazykových popisů. Funguje jako most mezi AI asistenty a vaším vývojovým prostředím; umožňuje hladké generování UI, náhledy v reálném čase a integraci profesionálních brandových assetů a log. Díky podpoře populárních IDE jako Cursor, Windsurf, VSCode a Cline zjednodušuje frontendové workflow tím, že uživatel popíše, jaké UI chce, a Magic MCP Server vygeneruje a vloží vyladěné, přizpůsobitelné komponenty přímo do projektu. Jeho cílem je zvýšit produktivitu vývojářů automatizací opakujících se UI úloh a přinést AI kreativitu do každodenního vývoje.

Seznam promptů

V poskytnuté dokumentaci repozitáře nejsou explicitně uvedeny žádné šablony promptů.

Seznam zdrojů

V poskytnuté dokumentaci repozitáře nejsou explicitně uvedeny žádné zdroje.

Seznam nástrojů

V poskytnuté dokumentaci repozitáře ani v server.py (či obdobném souboru) nejsou explicitně uvedeny žádné nástroje.

Scénáře použití tohoto MCP Serveru

• AI generování UI: Okamžitě vytvářejte moderní UI komponenty popisem v přirozeném jazyce, což šetří čas na šablonách i designu.
• Vylepšení komponent: Upgradujte existující UI komponenty o pokročilé funkce a animace (funkce brzy dostupná), což urychluje iterativní vývoj.
• Integrace brandových assetů: Snadno přistupujte k profesionálním brandovým assetům a logům a integrujte je do svého frontendu, udržujte konzistenci a profesionalitu designu.
• Náhled v reálném čase: Sledujte komponenty v okamžiku jejich tvorby pro rychlý prototyp a zpětnou vazbu.
• Podpora více IDE: Používejte stejný AI workflow generování UI napříč Cursor, Windsurf, VSCode i Cline a zajistěte si konzistentní vývojové prostředí.

Jak jej nastavit

Windsurf

1. Předpoklad: Nainstalujte Node.js (nejnovější LTS).
2. Získejte svůj API klíč: Vygenerujte na 21st.dev Magic Console.
3. Otevřete konfigurační soubor: Editujte ~/.codeium/windsurf/mcp_config.json.
4. Přidejte Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Uložte a restartujte Windsurf pro aplikaci změn.

Zabezpečení API klíče: Použijte proměnné prostředí v konfiguraci:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. Předpoklad: Nainstalujte Node.js (nejnovější LTS).
2. Získejte svůj API klíč: Vygenerujte na 21st.dev Magic Console.
3. Otevřete konfigurační soubor: Editujte ~/.claude/mcp_config.json.
4. Přidejte Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Uložte a restartujte Claude pro aplikaci změn.

Zabezpečení API klíče:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. Předpoklad: Nainstalujte Node.js (nejnovější LTS).
2. Získejte svůj API klíč: Vygenerujte na 21st.dev Magic Console.
3. Otevřete konfigurační soubor: Editujte ~/.cursor/mcp.json.
4. Přidejte Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Uložte a restartujte Cursor pro aplikaci změn.

Zabezpečení API klíče:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. Předpoklad: Nainstalujte Node.js (nejnovější LTS).
2. Získejte svůj API klíč: Vygenerujte na 21st.dev Magic Console.
3. Otevřete konfigurační soubor: Editujte ~/.cline/mcp_config.json.
4. Přidejte Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Uložte a restartujte Cline pro aplikaci změn.

Zabezpečení API klíče:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Jak tento MCP používat ve flow

Použití MCP ve FlowHunt

Pro integraci MCP serveru do workflowu FlowHunt začněte přidáním MCP komponenty do svého flow a propojte ji se svým AI agentem:

Klikněte na MCP komponentu pro otevření panelu nastavení. V sekci systémové konfigurace MCP vložte detaily svého MCP serveru v tomto JSON formátu:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Po uložení je nyní AI agent schopen využívat tento MCP jako nástroj a má přístup ke všem jeho funkcím. Nezapomeňte změnit "magic-mcp" na skutečný název vašeho MCP serveru a upravit URL na adresu vašeho MCP serveru.

Přehled

Podpora Roots není v repozitáři specifikována.

Náš názor

21st-dev Magic MCP Server má výbornou dokumentaci k instalaci a nastavení na různých platformách, jasné příklady z praxe i velkou aktivní uživatelskou základnu. Absence explicitní dokumentace k promptům MCP, zdrojům, nástrojům a pokročilým konceptům MCP (jako Roots a Sampling) však omezuje transparentnost pro pokročilé uživatele a integrátory.

MCP skóre

Hodnocení: 6/10

21st-dev Magic MCP Server získává vysoké skóre za použitelnost, aktivitu a jasnost nastavení, ale ztrácí body za absenci detailnější technické dokumentace a explicitních MCP primitiv ve veřejné dokumentaci.