21st-dev Magic MCP Server

Co robi serwer MCP “21st-dev Magic”?

21st-dev Magic MCP Server to platforma napędzana przez AI, zaprojektowana, by pomagać deweloperom w natychmiastowym tworzeniu pięknych, nowoczesnych komponentów UI poprzez opisy w języku naturalnym. Działa jako pomost między asystentami AI a środowiskiem deweloperskim, umożliwiając płynne generowanie interfejsów, podgląd w czasie rzeczywistym oraz integrację profesjonalnych zasobów i logotypów marki. Dzięki wsparciu dla popularnych IDE, takich jak Cursor, Windsurf, VSCode i Cline, usprawnia workflow frontendowy, pozwalając użytkownikom opisać oczekiwany UI, a Magic MCP Server generuje i wstawia dopracowane, konfigurowalne komponenty bezpośrednio do projektu. Jego celem jest zwiększenie produktywności deweloperów poprzez automatyzację powtarzalnych zadań UI i wprowadzenie twórczości AI do codziennego procesu developmentu.

Lista promptów

W udostępnionej dokumentacji repozytorium nie wymieniono jawnych szablonów promptów.

Lista zasobów

W udostępnionej dokumentacji repozytorium nie wymieniono jawnych zasobów.

Lista narzędzi

W udostępnionej dokumentacji repozytorium ani w pliku server.py (lub równoważnym) nie wymieniono jawnych narzędzi.

Przykładowe zastosowania tego serwera MCP

• Generowanie UI wspierane przez AI: Natychmiast twórz nowoczesne komponenty UI, opisując je w języku naturalnym, oszczędzając czas na kodzie szablonowym i projektowaniu.
• Ulepszanie komponentów: Ulepszaj istniejące komponenty UI o zaawansowane funkcje i animacje (funkcja wkrótce), usprawniając iteracyjny rozwój.
• Integracja zasobów marki: Łatwo uzyskuj dostęp i integruj profesjonalne zasoby oraz logotypy marki w swoim frontendzie, zachowując spójność i profesjonalizm designu.
• Podgląd w czasie rzeczywistym: Oglądaj komponenty w trakcie ich tworzenia, co pozwala na szybki prototyping i pętle feedbacku.
• Wsparcie wielu IDE: Korzystaj z tego samego workflow generowania UI przez AI w Cursor, Windsurf, VSCode i Cline, zapewniając spójne doświadczenie developmentu.

Jak skonfigurować

Windsurf

1. Wymaganie: Zainstaluj Node.js (najnowsza wersja LTS).
2. Pobierz klucz API: Wygeneruj go w 21st.dev Magic Console.
3. Otwórz plik konfiguracyjny: Edytuj ~/.codeium/windsurf/mcp_config.json.
4. Dodaj Magic MCP Server:

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

5. Zapisz i zrestartuj Windsurf, aby zastosować zmiany.

Bezpieczne przechowywanie kluczy API: Użyj zmiennych środowiskowych w konfiguracji:

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

Claude

1. Wymaganie: Zainstaluj Node.js (najnowsza wersja LTS).
2. Pobierz klucz API: Wygeneruj go w 21st.dev Magic Console.
3. Otwórz plik konfiguracyjny: Edytuj ~/.claude/mcp_config.json.
4. Dodaj Magic MCP Server:

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

5. Zapisz i zrestartuj Claude, aby zastosować zmiany.

Bezpieczne przechowywanie kluczy API:

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

Cursor

1. Wymaganie: Zainstaluj Node.js (najnowsza wersja LTS).
2. Pobierz klucz API: Wygeneruj go w 21st.dev Magic Console.
3. Otwórz plik konfiguracyjny: Edytuj ~/.cursor/mcp.json.
4. Dodaj Magic MCP Server:

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

5. Zapisz i zrestartuj Cursor, aby zastosować zmiany.

Bezpieczne przechowywanie kluczy API:

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

Cline

1. Wymaganie: Zainstaluj Node.js (najnowsza wersja LTS).
2. Pobierz klucz API: Wygeneruj go w 21st.dev Magic Console.
3. Otwórz plik konfiguracyjny: Edytuj ~/.cline/mcp_config.json.
4. Dodaj Magic MCP Server:

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

5. Zapisz i zrestartuj Cline, aby zastosować zmiany.

Bezpieczne przechowywanie kluczy API:

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

Jak użyć tego MCP w flow

Korzystanie z MCP w FlowHunt

Aby zintegrować serwery MCP z workflowem w FlowHunt, zacznij od dodania komponentu MCP do swojego flow i połącz go z agentem AI:

Kliknij komponent MCP, aby otworzyć panel konfiguracji. W sekcji konfiguracji systemowej MCP wprowadź dane swojego serwera MCP w poniższym formacie JSON:

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

Po skonfigurowaniu agent AI może używać tego MCP jako narzędzia z dostępem do wszystkich jego funkcji i możliwości. Pamiętaj, by zmienić "magic-mcp" na rzeczywistą nazwę swojego serwera MCP i podać własny URL serwera MCP.

Przegląd

Wsparcie dla Roots nie jest określone w repozytorium.

Nasza opinia

21st-dev Magic MCP Server posiada doskonałą dokumentację instalacji i konfiguracji na wielu platformach, z jasnymi realnymi przykładami użycia oraz dużą, aktywną bazą użytkowników. Brak jednak jawnej dokumentacji promptów MCP, zasobów, narzędzi oraz zaawansowanych koncepcji MCP, jak Roots i Sampling, co ogranicza jego przejrzystość dla zaawansowanych użytkowników i integratorów.

Ocena MCP

Ocena: 6/10

21st-dev Magic MCP Server wypada świetnie pod kątem użyteczności, aktywności i jasności konfiguracji, lecz traci punkty za brak zaawansowanych szczegółów technicznych i jawnych prymitywów MCP w publicznej dokumentacji.