DokumentationIntegrationer

Forbind 21st.dev med din egen API-nøgle

Find UI-komponenter og designinspiration via den officielle 21st-MCP med din egen 21st.dev-konto.

3 min. læsningOpdateret

Det kan du bruge

21st tilbyder komponentsøgning, designskabeloner og hentning af kode. De tilgængelige værktøjer afhænger af din konto. AI-generering kræver desuden den relevante 21st-adgang og kan bruge kreditter.

Forbind fra kataloget

  1. 01Opret en aktuel API-nøgle på din konto på https://21st.dev/mcp.
  2. 02Åbn Apps > Forbindelser, find 21st.dev, og vælg Forbind.
  3. 03Indsæt din nøgle. Serveradressen og headeren x-api-key er allerede angivet.
  4. 04Test forbindelsen, og gem den. Du kan også bruge den i workflow-trin.

Brug din egen nøgle. Forbrug og fakturering sker via din 21st.dev-konto. Gamle Magic-nøgler er nulstillet og skal oprettes igen.

Alternativt kan du importere JSON

Du kan importere den samme forbindelse som en brugerdefineret MCP. Standardformatet mcpServers virker også i en JSON-kodeblok. Erstat pladsholderen med din egen nøgle.

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "YOUR_21ST_API_KEY"
      }
    }
  }
}
  1. 01Tilføj en brugerdefineret MCP, og vælg Importér JSON.
  2. 02Indsæt konfigurationen, og vælg Læs konfiguration.
  3. 03Kontrollér de fundne oplysninger, og overfør dem til formularen.
  4. 04Kontrollér din nøgle, test forbindelsen, og gem. Den hostede server kræver ikke en npx-pakke.

Adgang og værktøjer

Den eksterne server leverer værktøjslisten. Forbindelsen er derfor ikke begrænset til læsning. Gennemgå skrivehandlinger og betalt generering, før du godkender dem. Din 21st-konto bestemmer, hvilke funktioner du har adgang til.

Officiel opsætning