Vad gör “21st-dev Magic” MCP-servern?

21st-dev Magic MCP-servern är en AI-driven plattform utformad för att hjälpa utvecklare att skapa vackra, moderna UI-komponenter direkt genom naturliga språkliga beskrivningar. Den fungerar som en brygga mellan AI-assistenter och din utvecklingsmiljö och möjliggör sömlös UI-generering, realtidsförhandsvisningar samt integration av professionella varumärkesresurser och logotyper. Med stöd för populära IDE:er som Cursor, Windsurf, VSCode och Cline effektiviserar den frontend-arbetsflöden genom att låta användare beskriva det UI de vill ha, och Magic MCP-servern genererar och infogar snygga, anpassningsbara komponenter direkt i projektet. Målet är att öka utvecklarens produktivitet genom att automatisera repetitiva UI-uppgifter och integrera AI-drivna kreativa lösningar i den dagliga utvecklingsprocessen.

Lista över promtpmallar

Inga explicita promptmallar listas i den tillhandahållna dokumentationen för arkivet.

Lista över resurser

Inga explicita resurser listas i den tillhandahållna dokumentationen för arkivet.

Lista över verktyg

Inga explicita verktyg listas i den tillhandahållna dokumentationen för arkivet eller i server.py (eller motsvarande).

Användningsområden för denna MCP-server

• AI-driven UI-generering: Skapa moderna UI-komponenter direkt genom att beskriva dem med naturligt språk, vilket sparar avsevärd tid på standardkod och design.
• Komponentförbättring: Uppgradera befintliga UI-komponenter med avancerade funktioner och animationer (funktion kommer snart), vilket förenklar iterativ utveckling.
• Varumärkestillgångsintegration: Få enkel åtkomst till och integrera professionella varumärkestillgångar och logotyper i din frontend, så att designen förblir enhetlig och professionell.
• Realtidsförhandsvisning: Se komponenterna medan de skapas, vilket möjliggör snabb prototypning och återkoppling.
• Stöd för flera IDE:er: Använd samma AI-baserade UI-genereringsflöde i Cursor, Windsurf, VSCode och Cline, vilket ger en konsekvent utvecklarupplevelse.

Så här sätter du upp det

Windsurf

1. Förkunskap: Installera Node.js (senaste LTS).
2. Hämta din API-nyckel: Generera från 21st.dev Magic Console.
3. Öppna konfigurationsfil: Redigera ~/.codeium/windsurf/mcp_config.json.
4. Lägg till Magic MCP-servern:

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

5. Spara och starta om Windsurf för att tillämpa ändringarna.

Säker hantering av API-nycklar: Använd miljövariabler i din konfiguration:

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

Claude

1. Förkunskap: Installera Node.js (senaste LTS).
2. Hämta din API-nyckel: Generera från 21st.dev Magic Console.
3. Öppna konfigurationsfil: Redigera ~/.claude/mcp_config.json.
4. Lägg till Magic MCP-servern:

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

5. Spara och starta om Claude för att tillämpa ändringarna.

Säker hantering av API-nycklar:

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

Cursor

1. Förkunskap: Installera Node.js (senaste LTS).
2. Hämta din API-nyckel: Generera från 21st.dev Magic Console.
3. Öppna konfigurationsfil: Redigera ~/.cursor/mcp.json.
4. Lägg till Magic MCP-servern:

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

5. Spara och starta om Cursor för att tillämpa ändringarna.

Säker hantering av API-nycklar:

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

Cline

1. Förkunskap: Installera Node.js (senaste LTS).
2. Hämta din API-nyckel: Generera från 21st.dev Magic Console.
3. Öppna konfigurationsfil: Redigera ~/.cline/mcp_config.json.
4. Lägg till Magic MCP-servern:

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

5. Spara och starta om Cline för att tillämpa ändringarna.

Säker hantering av API-nycklar:

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

Så här använder du denna MCP i flows

Använd MCP i FlowHunt

För att integrera MCP-servrar i ditt FlowHunt-arbetsflöde, börja med att lägga till MCP-komponenten i ditt flöde och koppla den till din AI-agent:

Klicka på MCP-komponenten för att öppna konfigurationspanelen. I avsnittet för systemets MCP-konfiguration, ange din MCP-serverinformation med detta JSON-format:

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

När du har konfigurerat är AI-agenten redo att använda denna MCP som ett verktyg och får tillgång till alla dess funktioner och möjligheter. Kom ihåg att ändra "magic-mcp" till det faktiska namnet på din MCP-server och byt ut URL:en mot URL:en till din egen MCP-server.

Översikt

Roots-stöd anges ej i arkivet.

Vår bedömning

21st-dev Magic MCP-servern har utmärkt dokumentation för installation och uppsättning på flera plattformar, med tydliga verkliga användningsområden och en stor, aktiv användarbas. Dock begränsar avsaknaden av explicit dokumentation för MCP-prompter, resurser, verktyg och avancerade MCP-koncept som Roots och Sampling dess transparens för avancerade användare och integratörer.

MCP-betyg

Betyg: 6/10

21st-dev Magic MCP-servern får höga poäng för användbarhet, aktivitet och tydlighet i uppsättning, men tappar på grund av brist på avancerade tekniska detaljer och explicita MCP-primitiver i den publika dokumentationen.