21st-dev Magic MCP Server

Čo robí „21st-dev Magic“ MCP Server?

21st-dev Magic MCP Server je platforma poháňaná umelou inteligenciou, navrhnutá na pomoc vývojárom pri okamžitom vytváraní krásnych, moderných UI komponentov pomocou prirodzených jazykových opisov. Funguje ako most medzi AI asistentmi a vaším vývojovým prostredím, umožňuje bezproblémové generovanie UI, náhľady v reálnom čase a integráciu profesionálnych značkových materiálov a log. S podporou populárnych IDE ako Cursor, Windsurf, VSCode a Cline zefektívňuje frontend workflow tým, že užívateľ opíše, aké UI chce, a Magic MCP Server vygeneruje a vloží vyleštené, prispôsobiteľné komponenty priamo do projektu. Jeho cieľom je zvýšiť produktivitu vývojára automatizáciou opakovaných UI úloh a preniesť AI kreativitu priamo do každodenného vývoja.

Zoznam promptov

V poskytnutej dokumentácii repozitára nie sú uvedené žiadne explicitné šablóny promptov.

Zoznam zdrojov

V poskytnutej dokumentácii repozitára nie sú uvedené žiadne explicitné zdroje.

Zoznam nástrojov

V poskytnutej dokumentácii repozitára ani v server.py (alebo ekvivalente) nie sú uvedené žiadne explicitné nástroje.

Prípady použitia tohto MCP Servera

• AI generovanie UI: Okamžite vytvárajte moderné UI komponenty popisom v prirodzenom jazyku, čím ušetríte množstvo času na šablónach a dizajne.
• Vylepšovanie komponentov: Upgradujte existujúce UI komponenty o pokročilé funkcie a animácie (funkcia už čoskoro), čím urýchlite iteratívny vývoj.
• Integrácia značkových materiálov: Jednoducho získajte a integrujte profesionálne značkové materiály a logá do frontendu, čím zachováte konzistenciu a profesionalitu dizajnu.
• Náhľad v reálnom čase: Sledujte komponenty už počas ich tvorby, čo umožňuje rýchle prototypovanie a spätnú väzbu.
• Podpora viacerých IDE: Rovnaký workflow AI generovania UI vo všetkých IDE (Cursor, Windsurf, VSCode, Cline) pre konzistentný vývojársky zážitok.

Ako to nastaviť

Windsurf

1. Predpoklad: Nainštalujte Node.js (najnovšia LTS verzia).
2. Získajte svoj API kľúč: Vygenerujte ho v 21st.dev Magic Console.
3. Otvorte konfiguračný súbor: Upravte ~/.codeium/windsurf/mcp_config.json.
4. Pridajte Magic MCP Server:

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

5. Uložte a reštartujte Windsurf pre aplikovanie zmien.

Zabezpečenie API kľúčov: Použite premenné prostredia vo vašej konfigurácii:

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

Claude

1. Predpoklad: Nainštalujte Node.js (najnovšia LTS verzia).
2. Získajte svoj API kľúč: Vygenerujte ho v 21st.dev Magic Console.
3. Otvorte konfiguračný súbor: Upravte ~/.claude/mcp_config.json.
4. Pridajte Magic MCP Server:

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

5. Uložte a reštartujte Claude pre aplikovanie zmien.

Zabezpečenie API kľúčov:

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

Cursor

1. Predpoklad: Nainštalujte Node.js (najnovšia LTS verzia).
2. Získajte svoj API kľúč: Vygenerujte ho v 21st.dev Magic Console.
3. Otvorte konfiguračný súbor: Upravte ~/.cursor/mcp.json.
4. Pridajte Magic MCP Server:

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

5. Uložte a reštartujte Cursor pre aplikovanie zmien.

Zabezpečenie API kľúčov:

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

Cline

1. Predpoklad: Nainštalujte Node.js (najnovšia LTS verzia).
2. Získajte svoj API kľúč: Vygenerujte ho v 21st.dev Magic Console.
3. Otvorte konfiguračný súbor: Upravte ~/.cline/mcp_config.json.
4. Pridajte Magic MCP Server:

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

5. Uložte a reštartujte Cline pre aplikovanie zmien.

Zabezpečenie API kľúčov:

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

Ako používať tento MCP vo flowoch

Použitie MCP vo FlowHunt

Na integráciu MCP serverov do vášho workflowu vo FlowHunt začnite pridaním MCP komponentu do flowu a jeho prepojením s AI agentom:

Kliknite na MCP komponent pre otvorenie panelu konfigurácie. Do sekcie systémovej MCP konfigurácie vložte detaily vášho MCP servera v tomto JSON tvare:

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

Po nakonfigurovaní dokáže AI agent používať tento MCP ako nástroj so všetkými jeho funkciami a schopnosťami. Nezabudnite zmeniť "magic-mcp" na skutočný názov vášho MCP servera a URL na vašu vlastnú MCP adresu.

Prehľad

Podpora Roots nie je v repozitári špecifikovaná.

Náš názor

21st-dev Magic MCP Server má výbornú dokumentáciu pre inštaláciu a nastavenie naprieč viacerými platformami, s jasne popísanými reálnymi prípadmi použitia a veľkou, aktívnou používateľskou základňou. Absencia explicitnej dokumentácie promptov MCP, zdrojov, nástrojov a pokročilejších MCP konceptov ako Roots a Sampling však obmedzuje jeho transparentnosť pre pokročilých používateľov a integrátorov.

MCP hodnotenie

Hodnotenie: 6/10

21st-dev Magic MCP Server dosahuje vysoké skóre v oblasti použiteľnosti, aktivity a jasnosti nastavenia, no body stráca za absenciu pokročilých technických detailov a explicitných MCP primitív v verejnej dokumentácii.