21st-dev Magic MCP Server

Wat doet de “21st-dev Magic” MCP Server?

De 21st-dev Magic MCP Server is een AI-gestuurd platform dat is ontworpen om ontwikkelaars direct prachtige, moderne UI-componenten te laten maken via natuurlijke taalomschrijvingen. Het fungeert als brug tussen AI-assistenten en je ontwikkelomgeving, waardoor naadloze UI-generatie, real-time previews en integratie van professionele merkmiddelen en logo’s mogelijk wordt. Met ondersteuning voor populaire IDE’s zoals Cursor, Windsurf, VSCode en Cline stroomlijnt het frontend-workflows doordat gebruikers de gewenste UI kunnen beschrijven en de Magic MCP Server direct gepolijste, aanpasbare componenten in het project genereert en invoegt. Het doel is de productiviteit van ontwikkelaars te vergroten door repetitieve UI-taken te automatiseren en AI-gestuurde creativiteit te integreren in het dagelijkse ontwikkelproces.

Lijst van Prompts

Er worden geen expliciete prompt-sjablonen vermeld in de meegeleverde repositorydocumentatie.

Lijst van Resources

Er worden geen expliciete resources vermeld in de meegeleverde repositorydocumentatie.

Lijst van Tools

Er worden geen expliciete tools vermeld in de meegeleverde repositorydocumentatie of in server.py (of equivalent).

Toepassingen van deze MCP Server

• AI-gestuurde UI-generatie: Maak direct moderne UI-componenten door ze in natuurlijke taal te beschrijven, wat veel tijd op boilerplate en ontwerp bespaart.
• Componentverbetering: Upgrade bestaande UI-componenten met geavanceerde functies en animaties (functie binnenkort beschikbaar), wat het iteratief ontwikkelen versnelt.
• Integratie van merkmiddelen: Toegang tot en integratie van professionele merkmiddelen en logo’s in je frontend voor consistente en professionele designs.
• Real-time preview: Bekijk componenten terwijl ze worden aangemaakt, wat snelle prototyping en feedback mogelijk maakt.
• Multi-IDE ondersteuning: Gebruik dezelfde AI UI-generatieworkflow in Cursor, Windsurf, VSCode en Cline voor een consistente ontwikkelervaring.

Hoe stel je het in

Windsurf

1. Vereiste: Installeer Node.js (laatste LTS).
2. Haal je API-sleutel op: Genereer via 21st.dev Magic Console.
3. Open het configuratiebestand: Bewerk ~/.codeium/windsurf/mcp_config.json.
4. Voeg Magic MCP Server toe:

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

5. Sla op en herstart Windsurf om de wijzigingen toe te passen.

API-sleutels beveiligen: Gebruik omgevingsvariabelen in je configuratie:

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

Claude

1. Vereiste: Installeer Node.js (laatste LTS).
2. Haal je API-sleutel op: Genereer via 21st.dev Magic Console.
3. Open het configuratiebestand: Bewerk ~/.claude/mcp_config.json.
4. Voeg Magic MCP Server toe:

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

5. Sla op en herstart Claude om de wijzigingen toe te passen.

API-sleutels beveiligen:

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

Cursor

1. Vereiste: Installeer Node.js (laatste LTS).
2. Haal je API-sleutel op: Genereer via 21st.dev Magic Console.
3. Open het configuratiebestand: Bewerk ~/.cursor/mcp.json.
4. Voeg Magic MCP Server toe:

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

5. Sla op en herstart Cursor om de wijzigingen toe te passen.

API-sleutels beveiligen:

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

Cline

1. Vereiste: Installeer Node.js (laatste LTS).
2. Haal je API-sleutel op: Genereer via 21st.dev Magic Console.
3. Open het configuratiebestand: Bewerk ~/.cline/mcp_config.json.
4. Voeg Magic MCP Server toe:

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

5. Sla op en herstart Cline om de wijzigingen toe te passen.

API-sleutels beveiligen:

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

Hoe gebruik je deze MCP in flows

MCP gebruiken in FlowHunt

Om MCP-servers in je FlowHunt-workflow te integreren, voeg je de MCP-component toe aan je flow en verbind je deze met je AI-agent:

Klik op de MCP-component om het configuratievenster te openen. Voeg in het systeem-MCP-configuratiegedeelte je MCP-servergegevens toe met dit JSON-formaat:

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

Na configuratie kan de AI-agent deze MCP nu als tool gebruiken met toegang tot alle functies en mogelijkheden. Vergeet niet "magic-mcp" te vervangen door de daadwerkelijke naam van jouw MCP-server en de URL te vervangen door je eigen MCP-server-URL.

Overzicht

Roots-ondersteuning niet gespecificeerd in de repository.

Onze mening

De 21st-dev Magic MCP Server heeft uitstekende documentatie voor installatie en setup op meerdere platformen, met duidelijke praktijkvoorbeelden en een grote, actieve gebruikersgroep. Het ontbreken van expliciete documentatie voor MCP-prompts, resources, tools en geavanceerde MCP-concepten zoals Roots en Sampling beperkt echter de transparantie voor gevorderde gebruikers en integratoren.

MCP Score

Beoordeling: 6/10

De 21st-dev Magic MCP Server scoort hoog op bruikbaarheid, activiteit en duidelijkheid van installatie, maar verliest punten door het ontbreken van geavanceerde technische details en expliciete MCP-primitieven in de openbare documentatie.