Mitä “21st-dev Magic” MCP -palvelin tekee?

21st-dev Magic MCP -palvelin on tekoälyohjattu alusta, joka on kehitetty auttamaan kehittäjiä luomaan kauniita, moderneja käyttöliittymäkomponentteja välittömästi luonnollisen kielen kuvauksilla. Se toimii sillanrakentajana AI-avustajien ja kehitysympäristösi välillä, mahdollistaen saumattoman käyttöliittymägeneroinnin, reaaliaikaiset esikatselut sekä ammattilaistason brändivarojen ja logojen integroinnin. Suosittujen IDE-ympäristöjen, kuten Cursorin, Windsurfin, VSCode:n ja Clinen tuella se virtaviivaistaa frontend-työnkulkuja antamalla käyttäjien kuvata haluamansa käyttöliittymän, jonka Magic MCP -palvelin generoi ja liittää hienostuneet, muokattavat komponentit suoraan projektiin. Tavoitteena on parantaa kehittäjän tuottavuutta automatisoimalla toistuvat käyttöliittymätehtävät sekä tuoda tekoälypohjaista luovuutta päivittäiseen kehitystyöhön.

Kehotepohjien lista

Yksittäisiä kehotepohjia ei ole listattu toimitetussa repositio-dokumentaatiossa.

Resurssilista

Yksittäisiä resursseja ei ole listattu toimitetussa repositio-dokumentaatiossa.

Työkalulista

Yksittäisiä työkaluja ei ole listattu toimitetussa repositio-dokumentaatiossa tai tiedostossa server.py (tai vastaavassa).

Tämän MCP-palvelimen käyttötapaukset

• Tekoälypohjainen käyttöliittymägenerointi: Luo moderneja käyttöliittymäkomponentteja hetkessä kuvailemalla ne luonnollisella kielellä, säästäen merkittävästi aikaa pohjarakenteen ja suunnittelun osalta.
• Komponenttien parantaminen: Päivitä olemassa olevia käyttöliittymäkomponentteja uusilla ominaisuuksilla ja animaatioilla (ominaisuus tulossa pian), tehostaen iteratiivista kehitystä.
• Brändivarojen integrointi: Käytä ja integroi helposti ammattilaistason brändivarantoja ja logoja frontendiin, säilyttäen suunnittelun yhtenäisyyden ja ammattimaisuuden.
• Reaaliaikainen esikatselu: Näe komponentit niiden luontihetkellä, mikä mahdollistaa nopean prototypoinnin ja palautesilmukat.
• Moni-IDE-tuki: Käytä samaa tekoälypohjaista käyttöliittymätyönkulkua Cursorissa, Windsurfissa, VSCode:ssa ja Clinessä, varmistaen yhtenäiset kehityskokemukset.

Näin asetat sen käyttöön

Windsurf

1. Edellytys: Asenna Node.js (uusin LTS).
2. Hanki API-avaimesi: Luo osoitteessa 21st.dev Magic Console.
3. Avaa asetustiedosto: Muokkaa tiedostoa ~/.codeium/windsurf/mcp_config.json.
4. Lisää Magic MCP -palvelin:

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

5. Tallenna ja käynnistä Windsurf uudelleen, jotta muutokset astuvat voimaan.

API-avainten suojaaminen: Käytä ympäristömuuttujia konfiguraatiossasi:

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

Claude

1. Edellytys: Asenna Node.js (uusin LTS).
2. Hanki API-avaimesi: Luo osoitteessa 21st.dev Magic Console.
3. Avaa asetustiedosto: Muokkaa tiedostoa ~/.claude/mcp_config.json.
4. Lisää Magic MCP -palvelin:

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

5. Tallenna ja käynnistä Claude uudelleen, jotta muutokset astuvat voimaan.

API-avainten suojaaminen:

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

Cursor

1. Edellytys: Asenna Node.js (uusin LTS).
2. Hanki API-avaimesi: Luo osoitteessa 21st.dev Magic Console.
3. Avaa asetustiedosto: Muokkaa tiedostoa ~/.cursor/mcp.json.
4. Lisää Magic MCP -palvelin:

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

5. Tallenna ja käynnistä Cursor uudelleen, jotta muutokset astuvat voimaan.

API-avainten suojaaminen:

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

Cline

1. Edellytys: Asenna Node.js (uusin LTS).
2. Hanki API-avaimesi: Luo osoitteessa 21st.dev Magic Console.
3. Avaa asetustiedosto: Muokkaa tiedostoa ~/.cline/mcp_config.json.
4. Lisää Magic MCP -palvelin:

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

5. Tallenna ja käynnistä Cline uudelleen, jotta muutokset astuvat voimaan.

API-avainten suojaaminen:

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

Näin käytät tätä MCP:tä floissa

MCP:n käyttö FlowHuntissa

Integroi MCP-palvelimet FlowHunt-työnkulkuusi lisäämällä MCP-komponentti flow’hun ja yhdistämällä se AI-agenttiin:

Napsauta MCP-komponenttia avataksesi konfigurointipaneelin. Järjestelmän MCP-konfiguraatio -osioon syötä MCP-palvelimesi tiedot seuraavassa JSON-muodossa:

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

Kun asetukset on tehty, AI-agentti voi käyttää tätä MCP:tä työkaluna ja hyödyntää sen kaikkia ominaisuuksia. Muista vaihtaa "magic-mcp" MCP-palvelimesi oikeaan nimeen ja korvaa URL omalla MCP-palvelimen osoitteellasi.

Yhteenveto

Roots-tukea ei ole määritelty repositoriossa.

Oma mielipiteemme

21st-dev Magic MCP -palvelimella on erinomainen dokumentaatio asennukseen ja käyttöönottoon eri alustoilla, selkeät esimerkkikäyttötapaukset ja suuri, aktiivinen käyttäjäkunta. Kuitenkin MCP-kehotteiden, resurssien, työkalujen ja edistyneiden MCP-käsitteiden (kuten Roots ja Sampling) puuttuminen avoimesta dokumentaatiosta rajoittaa läpinäkyvyyttä edistyneille käyttäjille ja integraattoreille.

MCP-pisteet

Arvosana: 6/10

21st-dev Magic MCP -palvelin saa korkeat pisteet käytettävyydestä, aktiivisuudesta ja selkeydestä asennuksessa, mutta menettää pisteitä edistyneen teknisen tiedon ja eksplisiittisten MCP-primitiiivien puutteesta julkisessa dokumentaatiossa.