21st-dev Magic MCP Server

Hva gjør “21st-dev Magic” MCP Server?

21st-dev Magic MCP Server er en AI-drevet plattform laget for å hjelpe utviklere med å lage vakre, moderne UI-komponenter umiddelbart gjennom naturlige språkbeskrivelser. Som en bro mellom AI-assistenter og ditt utviklingsmiljø muliggjør den sømløs UI-generering, sanntidsforhåndsvisning og integrering av profesjonelle merkevareelementer og logoer. Med støtte for populære IDE-er som Cursor, Windsurf, VSCode og Cline, effektiviserer den frontend-arbeidsflyten ved at brukeren beskriver ønsket UI, og Magic MCP Server genererer og setter inn polerte, tilpassbare komponenter direkte i prosjektet. Målet er å øke utviklerproduktiviteten ved å automatisere repeterende UI-oppgaver og integrere AI-drevet kreativitet i den daglige utviklingsprosessen.

Liste over promter

Ingen eksplisitte prompt-maler er oppført i den medfølgende dokumentasjonen til repositoryet.

Liste over ressurser

Ingen eksplisitte ressurser er oppført i den medfølgende dokumentasjonen til repositoryet.

Liste over verktøy

Ingen eksplisitte verktøy er oppført i den medfølgende dokumentasjonen til repositoryet eller i server.py (eller tilsvarende).

Bruksområder for denne MCP-serveren

• AI-drevet UI-generering: Lag moderne UI-komponenter umiddelbart ved å beskrive dem med naturlig språk, og spar betydelig tid på boilerplate og design.
• Komponentforbedring: Oppgrader eksisterende UI-komponenter med avanserte funksjoner og animasjoner (funksjon kommer snart), og effektiviser iterativ utvikling.
• Integrering av merkevareelementer: Få enkel tilgang til og integrer profesjonelle merkevareelementer og logoer i frontend for å opprettholde designkonsistens og profesjonalitet.
• Sanntidsforhåndsvisning: Se komponentene mens de blir laget, og muliggjør rask prototyping og tilbakemeldingssløyfer.
• Støtte for flere IDE-er: Bruk samme AI UI-genereringsarbeidsflyt på tvers av Cursor, Windsurf, VSCode og Cline, og sikre konsekvent utvikleropplevelse.

Slik setter du det opp

Windsurf

1. Forutsetning: Installer Node.js (nyeste LTS).
2. Hent API-nøkkelen din: Generer fra 21st.dev Magic Console.
3. Åpne konfigurasjonsfilen: Rediger ~/.codeium/windsurf/mcp_config.json.
4. Legg til Magic MCP Server:

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

5. Lagre og start Windsurf på nytt for å bruke endringene.

Sikring av API-nøkler: Bruk miljøvariabler i konfigurasjonen:

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

Claude

1. Forutsetning: Installer Node.js (nyeste LTS).
2. Hent API-nøkkelen din: Generer fra 21st.dev Magic Console.
3. Åpne konfigurasjonsfilen: Rediger ~/.claude/mcp_config.json.
4. Legg til Magic MCP Server:

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

5. Lagre og start Claude på nytt for å bruke endringene.

Sikring av API-nøkler:

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

Cursor

1. Forutsetning: Installer Node.js (nyeste LTS).
2. Hent API-nøkkelen din: Generer fra 21st.dev Magic Console.
3. Åpne konfigurasjonsfilen: Rediger ~/.cursor/mcp.json.
4. Legg til Magic MCP Server:

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

5. Lagre og start Cursor på nytt for å bruke endringene.

Sikring av API-nøkler:

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

Cline

1. Forutsetning: Installer Node.js (nyeste LTS).
2. Hent API-nøkkelen din: Generer fra 21st.dev Magic Console.
3. Åpne konfigurasjonsfilen: Rediger ~/.cline/mcp_config.json.
4. Legg til Magic MCP Server:

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

5. Lagre og start Cline på nytt for å bruke endringene.

Sikring av API-nøkler:

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

Slik bruker du denne MCP-en i flows

Bruke MCP i FlowHunt

For å integrere MCP-servere i din FlowHunt-arbeidsflyt, start med å legge til MCP-komponenten i flowen og koble den til AI-agenten:

Klikk på MCP-komponenten for å åpne konfigurasjonspanelet. I systemets MCP-konfigurasjonsseksjon legger du inn MCP-serverdetaljene dine i dette JSON-formatet:

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

Når dette er konfigurert, kan AI-agenten nå bruke denne MCP-en som et verktøy med tilgang til alle dens funksjoner og muligheter. Husk å endre "magic-mcp" til det faktiske navnet på MCP-serveren din og bytt ut URL-en med din egen MCP-server-URL.

Oversikt

Roots-støtte er ikke spesifisert i repositoryet.

Vår mening

21st-dev Magic MCP Server har utmerket dokumentasjon for installasjon og oppsett på flere plattformer, med tydelige reelle bruksområder og en stor, aktiv brukerbase. Imidlertid begrenser mangelen på eksplisitt dokumentasjon for MCP-promter, ressurser, verktøy og avanserte MCP-konsepter som Roots og Sampling transparensen for avanserte brukere og integratører.

MCP-score

Vurdering: 6/10

21st-dev Magic MCP Server scorer høyt på brukervennlighet, aktivitet og tydelighet i oppsett, men mister poeng for manglende avansert teknisk detaljering og eksplisitte MCP-primitiver i offentlig dokumentasjon.