Serwer MCP shadcn/ui

Potrzebujesz palety poleceń w swojej aplikacji. Wiesz, że shadcn/ui taką ma, ale nie pamiętasz dokładnej nazwy komponentu, jakie zależności ciągnie za sobą ani jak dostosować go do motywu twojego projektu. Więc otwierasz dokumentację, szukasz “command”, znajdujesz komponent, czytasz instrukcje instalacji, kopiujesz polecenie instalacji, uruchamiasz je, czytasz dokumentację użycia i zaczynasz adaptować przykłady do swojej bazy kodu. Piętnaście minut przeglądania dokumentacji, zanim napiszesz choćby jedną linijkę kodu aplikacji.

Serwer MCP shadcn/ui przenosi cały rejestr komponentów do kontekstu twojego AI. AI wyszukuje komponenty, czyta ich dokumentację, sprawdza przykłady i generuje polecenie instalacji — wszystko w jednej rozmowie. Opisujesz, czego potrzebujesz, a AI zajmuje się resztą.

Czego się nauczysz

• Konfiguracja oficjalnego serwera MCP shadcn/ui we wszystkich trzech narzędziach
• Prompty do odkrywania, instalacji i dostosowywania komponentów
• Zrozumienie wsparcia dla rejestrów (React, Svelte, Vue, React Native)
• Strategie łączenia MCP shadcn/ui z MCP Figma dla przepływów design-to-code

Konfiguracja

Oficjalny serwer MCP shadcn jest utrzymywany przez zespół shadcn i zapewnia dostęp do rejestru komponentów, dokumentacji i przykładów.

Cursor

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Claude Code

Serwer MCP shadcn jest dostępny jako wbudowany profil:

claude mcp add shadcn -- npx shadcn@latest mcp

Lub dodaj do .claude/settings.json:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Codex

[mcp.shadcn]
transport = "stdio"
command = "npx"
args = ["shadcn@latest", "mcp"]

Dostępne narzędzia

Serwer MCP shadcn udostępnia narzędzia do nawigacji i korzystania z ekosystemu komponentów:

Narzędzie	Co robi
list_items_in_registries	Wyświetla wszystkie dostępne komponenty, bloki i hooki
search_items_in_registries	Wyszukuje komponenty po nazwie lub opisie
view_items_in_registries	Pokazuje pełną dokumentację konkretnego komponentu
get_item_examples_from_registries	Pobiera przykłady użycia komponentu
get_add_command_for_items	Generuje prawidłowe polecenie npx shadcn add
get_audit_checklist	Zwraca listę kontrolną najlepszych praktyk dla shadcn/ui

Odkrywanie i instalacja komponentów

Wskazówka

Gotowy prompt do odkrywania komponentów:

“Search the shadcn/ui registry for components related to data display. List all matching components with a brief description of each. Then show me the full documentation and examples for the DataTable component, including its dependencies.”

Wskazówka

Gotowy prompt do instalacji:

“I need a dialog for confirming destructive actions and a toast notification system. Search the shadcn/ui registry for the right components, show me what each one looks like from the examples, and then give me the install commands for all of them. Also check if any of these components are already installed in my project.”

Budowanie z komponentami shadcn/ui

Prawdziwa wartość to nie tylko instalowanie komponentów — to budowanie kompletnych funkcji przez AI z prawidłowym użyciem wzorców shadcn/ui.

Wskazówka

Gotowy prompt do implementacji funkcji:

“Use the shadcn/ui MCP server to look up the Dialog, Form, Input, and Select components. Then build a user settings form at src/components/settings-form.tsx that uses these components. The form should have fields for name, email, timezone (select), and notification preferences (switch). Use react-hook-form with zod validation as shown in the shadcn Form documentation.”

Wsparcie dla wielu frameworków

Serwer MCP shadcn obsługuje rejestry wykraczające poza React:

Rejestr	Framework	Komponenty
shadcn/ui	React + Tailwind	Pełna biblioteka komponentów
shadcn-svelte	Svelte + Tailwind	Port komponentów shadcn dla Svelte
shadcn-vue	Vue + Tailwind	Port komponentów shadcn dla Vue
react-native-reusables	React Native	Komponenty dostosowane do urządzeń mobilnych

Przy korzystaniu z rejestrów wieloframeworkowych, określ rejestr w swoich promptach: “Search the shadcn-svelte registry for a DatePicker component.”

Łączenie MCP shadcn/ui z MCP Figma

Najskuteczniejszy przepływ design-to-code łączy MCP Figma z MCP shadcn/ui. AI odczytuje design z Figmy, identyfikuje, które komponenty shadcn/ui pasują do wzorców projektu, i generuje kod implementacji używający prawidłowych komponentów z odpowiednim dostosowaniem.

Wskazówka

Gotowy prompt do mapowania designu na komponenty:

“Look at my current Figma selection. Identify which shadcn/ui components would be needed to implement this design. For each identified component, use the shadcn MCP server to get the documentation and examples. Then implement the full component using shadcn/ui components with the exact colors and spacing from the Figma design.”

Lista kontrolna audytu

Serwer MCP shadcn zawiera narzędzie get_audit_checklist, które zwraca najlepsze praktyki użycia shadcn/ui w projekcie. Jest to przydatne przy przeglądzie kodu lub wdrażaniu nowych członków zespołu w system projektowy.

Wskazówka

Gotowy prompt do audytu systemu projektowego:

“Get the shadcn/ui audit checklist. Then scan the components in src/components/ui/ and check each one against the checklist. Flag any components that deviate from recommended patterns and suggest corrections.”

Kiedy coś się psuje

“Command not found” dla CLI shadcn. Serwer MCP generuje polecenia npx shadcn add, które wymagają CLI shadcn. Jeśli nie zainicjalizowałeś shadcn w swoim projekcie, najpierw uruchom npx shadcn init.

Komponenty się instalują, ale nie renderują. Sprawdź, czy konfiguracja Tailwind CSS zawiera preset shadcn i czy plik components.json wskazuje prawidłowe ścieżki. Serwer MCP generuje polecenia na podstawie domyślnej konfiguracji.

Wykryto zły framework. Jeśli AI generuje kod React dla projektu Svelte, jasno określ swój framework w prompcie: “I am using shadcn-svelte, not the React version.”

Nieaktualne przykłady komponentów. Serwer MCP pobiera dane z aktualnego rejestru, więc przykłady są aktualne. Ale jeśli zainstalowałeś komponent miesiące temu, twoja lokalna wersja może być nieaktualna. Uruchom npx shadcn diff, aby sprawdzić aktualizacje.

Co dalej

Figma MCP Połącz projekty Figma bezpośrednio z implementacją shadcn/ui.

Kontekst dokumentacji Utrzymuj swoje AI oparte na aktualnej dokumentacji bibliotek.