21st-dev Magic MCP Server

Hvad laver “21st-dev Magic” MCP Server?

21st-dev Magic MCP Server er en AI-drevet platform designet til at hjælpe udviklere med øjeblikkeligt at oprette smukke, moderne UI-komponenter via naturlige sprog-beskrivelser. Den fungerer som bro mellem AI-assistenter og dit udviklingsmiljø og muliggør problemfri UI-generering, realtidsvisninger og integration af professionelle brandaktiver og logoer. Med understøttelse af populære IDE’er som Cursor, Windsurf, VSCode og Cline strømliner den frontend-arbejdsgange ved at lade brugere beskrive det UI, de ønsker, og Magic MCP Server genererer og indsætter polerede, tilpasselige komponenter direkte i projektet. Målet er at øge udviklernes produktivitet ved at automatisere gentagne UI-opgaver og integrere AI-drevet kreativitet i den daglige udviklingsproces.

Liste over Prompts

Ingen eksplicitte promptskabeloner er anført i den medfølgende repository-dokumentation.

Liste over Ressourcer

Ingen eksplicitte ressourcer er anført i den medfølgende repository-dokumentation.

Liste over Værktøjer

Ingen eksplicitte værktøjer er anført i den medfølgende repository-dokumentation eller i server.py (eller tilsvarende).

Anvendelsestilfælde for denne MCP Server

• AI-drevet UI-generering: Opret moderne UI-komponenter øjeblikkeligt ved at beskrive dem med naturligt sprog, hvilket sparer betydelig tid på boilerplate og design.
• Komponentforbedring: Opgrader eksisterende UI-komponenter med avancerede funktioner og animationer (funktion kommer snart), hvilket strømliner iterativ udvikling.
• Brand Asset Integration: Få let adgang til og integrer professionelle brandaktiver og logoer i dit frontend, så designet forbliver konsistent og professionelt.
• Realtidsvisning: Se komponenter, efterhånden som de oprettes, hvilket muliggør hurtig prototyping og feedbackloops.
• Multi-IDE-understøttelse: Brug den samme AI UI-genereringsarbejdsgang på tværs af Cursor, Windsurf, VSCode og Cline for en ensartet udvikleroplevelse.

Sådan sættes det op

Windsurf

1. Forudsætning: Installer Node.js (seneste LTS).
2. Få din API-nøgle: Generér fra 21st.dev Magic Console.
3. Åbn konfigurationsfilen: Rediger ~/.codeium/windsurf/mcp_config.json.
4. Tilføj Magic MCP Server:

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

5. Gem og genstart Windsurf for at anvende ændringerne.

Sikring af API-nøgler: Brug 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. Forudsætning: Installer Node.js (seneste LTS).
2. Få din API-nøgle: Generér fra 21st.dev Magic Console.
3. Åbn konfigurationsfilen: Rediger ~/.claude/mcp_config.json.
4. Tilføj Magic MCP Server:

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

5. Gem og genstart Claude for at anvende ændringerne.

Sikring af API-nøgler:

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

Cursor

1. Forudsætning: Installer Node.js (seneste LTS).
2. Få din API-nøgle: Generér fra 21st.dev Magic Console.
3. Åbn konfigurationsfilen: Rediger ~/.cursor/mcp.json.
4. Tilføj Magic MCP Server:

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

5. Gem og genstart Cursor for at anvende ændringerne.

Sikring af API-nøgler:

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

Cline

1. Forudsætning: Installer Node.js (seneste LTS).
2. Få din API-nøgle: Generér fra 21st.dev Magic Console.
3. Åbn konfigurationsfilen: Rediger ~/.cline/mcp_config.json.
4. Tilføj Magic MCP Server:

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

5. Gem og genstart Cline for at anvende ændringerne.

Sikring af API-nøgler:

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

Sådan bruger du denne MCP i flows

Brug af MCP i FlowHunt

For at integrere MCP-servere i din FlowHunt-arbejdsgang skal du starte med at tilføje MCP-komponenten til dit flow og forbinde den til din AI-agent:

Klik på MCP-komponenten for at åbne konfigurationspanelet. I system-MCP-konfigurationssektionen indsætter du dine MCP-serveroplysninger med dette JSON-format:

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

Når den er konfigureret, kan AI-agenten nu bruge denne MCP som et værktøj med adgang til alle dens funktioner og muligheder. Husk at ændre "magic-mcp" til det faktiske navn på din MCP-server og erstatte URL’en med din egen MCP-server-URL.

Oversigt

Roots-support ikke specificeret i repository’et.

Vores mening

21st-dev Magic MCP Server har fremragende dokumentation for installation og opsætning på tværs af flere platforme, med klare virkelige anvendelsestilfælde og en stor, aktiv brugerbase. Manglen på eksplicit dokumentation for MCP-prompter, ressourcer, værktøjer og avancerede MCP-koncepter som Roots og Sampling begrænser dog gennemsigtigheden for avancerede brugere og integratorer.

MCP Score

Vurdering: 6/10

21st-dev Magic MCP Server scorer højt på brugervenlighed, aktivitet og tydelig opsætning, men mister point på manglende avancerede tekniske detaljer og eksplicitte MCP-primitiver i den offentlige dokumentation.