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
- 01Opret en aktuel API-nøgle på din konto på https://21st.dev/mcp.
- 02Åbn Apps > Forbindelser, find 21st.dev, og vælg Forbind.
- 03Indsæt din nøgle. Serveradressen og headeren x-api-key er allerede angivet.
- 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"
}
}
}
}- 01Tilføj en brugerdefineret MCP, og vælg Importér JSON.
- 02Indsæt konfigurationen, og vælg Læs konfiguration.
- 03Kontrollér de fundne oplysninger, og overfør dem til formularen.
- 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.