shadcn MCP — το design system σου γίνεται καλούπι στα χέρια του agent

Τι κάνει

Έχεις δει πόσο αργά πάει η δουλειά όταν ο βοηθός σου μαντεύει πώς μοιάζει ένα κουμπί. Σου φτιάχνει ένα κουμπί από το μηδέν, με δικά του χρώματα, δικές του γωνίες, δικό του ύψος. Εσύ το πετάς και το ξαναγράφεις, γιατί το design system σου λέει αλλιώς. Το shadcn MCP υπάρχει για να σταματήσει αυτή η επανάληψη.

Εξηγώ πρώτα με απλά λόγια, γιατί χωρίς αυτά το υπόλοιπο δεν βγάζει νόημα. MCP σημαίνει «πρωτόκολλο για το πλαίσιο του μοντέλου»: ένας τρόπος να δίνεις σε έναν βοηθό τεχνητής νοημοσύνης πρόσβαση σε εξωτερικά εργαλεία, μέσα στην κουβέντα. Ο βοηθός δεν τα ξέρει από πριν· τα ανακαλύπτει στην αρχή της συνεδρίας και τα ζητάει όταν τα χρειαστεί. Το shadcn είναι ένα σύνολο από έτοιμα components για ιστοσελίδες — κουμπιά, διάλογοι, πίνακες — με τη διαφορά ότι δεν τα εγκαθιστάς ως βιβλιοθήκη: σου αντιγράφει τον κώδικα μέσα στο δικό σου project, και από εκεί και πέρα είναι δικός σου. Ένα registry είναι ο κατάλογος από όπου κατεβαίνουν αυτά τα components.

Το εργαλείο, λοιπόν, βάζει το shadcn CLI στην υπηρεσία του agent. Ο agent αποκτά επτά εργαλεία και με αυτά ψάχνει μέσα σε ένα registry, βλέπει τι υπάρχει, διαβάζει παραδείγματα χρήσης, και παράγει την εντολή εγκατάστασης. Το κρίσιμο σημείο δεν είναι η αναζήτηση. Είναι ότι μπορείς να του δώσεις το δικό σου registry — δηλαδή το εσωτερικό design system της ομάδας σου. Τότε ο agent δεν δουλεύει με ένα πρόχειρο παράδειγμα από το διαδίκτυο· δουλεύει με το καλούπι σου.

Τα επτά εργαλεία, όπως τα επέστρεψε ο server στη δοκιμή μας: get_project_registries, list_items_in_registries, search_items_in_registries, view_items_in_registries, get_item_examples_from_registries, get_add_command_for_items και get_audit_checklist. Τα ονόματα λένε τι κάνει το καθένα, και αυτό είναι σπάνιο — δεν χρειάζεται λεξικό για να τα διαβάσεις.

Δουλεύει με τέσσερις κατηγορίες καταλόγων: το δημόσιο shadcn/ui, registries τρίτων που ακολουθούν την ίδια προδιαγραφή, ιδιωτικά registries εταιρειών, και πολλαπλά registries με πρόθεμα ονόματος (@namespace) (τεκμηρίωση).

Για ποιον είναι

Για όποιον έχει design system και θέλει ο agent να το σέβεται. Αν είσαι μόνος σου και φτιάχνεις ένα μικρό site, θα το βρεις χρήσιμο, αλλά δεν είναι εκεί που λάμπει: ένα κουμπί το γράφεις και με το χέρι.

Λάμπει σε δύο περιπτώσεις. Στην ομάδα που έχει δικά της components και βαρέθηκε να τα ξαναεξηγεί στον κάθε βοηθό. Και στον άνθρωπο που δουλεύει με πολλά projects, όπου κάθε φορά πρέπει να θυμηθεί ποιο component του ταιριάζει — εκεί η αναζήτηση με λόγια, αντί για περιήγηση σε φακέλους, κερδίζει χρόνο.

Δεν έχει νόημα αν δουλεύεις με design system που δεν μιλάει τη γλώσσα του shadcn. Το εργαλείο ζει μέσα σε αυτό το οικοσύστημα και δεν βγαίνει από κει. Αν το δικό σου σύστημα είναι αλλού, δεν σου λύνει το πρόβλημα.

Εγκατάσταση

Η εγκατάσταση γίνεται μέσα από το ίδιο το CLI, μέσα στο project σου. Δεν κατεβάζεις τίποτα με το χέρι.

Πρώτα, μια προϋπόθεση που δεν τη λέει κανείς και την πληρώσαμε: θέλει πραγματικό project. Αν τρέξεις την εντολή σε άδειο φάκελο, σκάει με «Failed to load tsconfig.json». Το tsconfig.json είναι το αρχείο που λέει στο TypeScript πώς να διαβάζει τον κώδικα του project. Χωρίς αυτό, το εργαλείο δεν έχει πού να δουλέψει. Άρα πρώτα μπαίνεις στον φάκελο του project σου, και μετά τρέχεις:

npx shadcn@latest mcp init --client cursor

Αυτό είναι το ένα βήμα για το Cursor. Για το Claude Code, η ίδια εντολή με άλλο όνομα πελάτη:

npx shadcn@latest mcp init --client claude

Και οι δύο γράφουν ένα αρχείο ρυθμίσεων με το ίδιο περιεχόμενο, {"mcpServers":{"shadcn":{"command":"npx","args":["shadcn@latest","mcp"]}}} — μόνο ο φάκελος αλλάζει: .cursor/mcp.json για το Cursor, .mcp.json για το Claude Code. Τα δύο αυτά τα είδαμε να γράφονται, στο δικό μας μηχάνημα, με Windows.

Αν θέλεις να το κάνεις με το χέρι, το περιεχόμενο είναι αυτό ακριβώς, και το βάζεις στο αρχείο του πελάτη σου.

Χρήση σε κάθε LLM

Εδώ το εργαλείο συμπεριφέρεται διαφορετικά σε κάθε πρόγραμμα, και οι διαφορές έχουν σημασία. Στο ένα γράφει μόνο του τη ρύθμιση· στο άλλο τη γράφεις εσύ.

Claude Code

Μπαίνεις στον φάκελο του project σου — αυτό δεν το παραλείπεις, γιατί αλλιώς πέφτεις στο σφάλμα του tsconfig.json που είπαμε πιο πάνω — και τρέχεις:

npx shadcn@latest mcp init --client claude

Γράφει το .mcp.json στη ρίζα του project. Μετά κάνεις επανεκκίνηση του Claude Code και ζητάς τη λίστα των servers:

claude mcp list

Περιμένεις να δεις τη γραμμή shadcn: Connected. Μέσα σε συνεδρία, το ίδιο πράγμα το βλέπεις με την εντολή /mcp. Αν δεν δεις «Connected», τις περισσότερες φορές φταίει ένα από τα δύο: δεν έγινε επανεκκίνηση, ή η ρύθμιση γράφτηκε σε φάκελο που δεν είναι project (τεκμηρίωση).

Codex CLI

Εδώ το CLI δεν σε βοηθάει, και δεν το κρύβω. Η τεκμηρίωση το δηλώνει ρητά: το shadcn CLI δεν μπορεί να ενημερώσει αυτόματα το αρχείο ~/.codex/config.toml του Codex. Το προσθέτεις με το χέρι.

Ανοίγεις το ~/.codex/config.toml και προσθέτεις μία ενότητα με όνομα mcp_servers.shadcn, όπου δηλώνεις command = "npx" και args = ["shadcn@latest", "mcp"]. Είναι η ίδια ρύθμιση που το CLI γράφει μόνο του για τους άλλους δύο πελάτες, σε μορφή TOML αντί για JSON (τεκμηρίωση).

Αυτό το μονοπάτι δεν το τρέξαμε μέχρι το τέλος — δεν έχουμε Codex στο μηχάνημά μας. Το γράφω ως τεκμηρίωση, όχι ως μέτρηση, και το ξαναλέω στην τελευταία γραμμή.

Cursor

Ίδια αρχή με το Claude Code, με μία προσθήκη στο τέλος. Από τον φάκελο του project:

npx shadcn@latest mcp init --client cursor

Γράφει το .cursor/mcp.json — αυτό το αρχείο το είδαμε να δημιουργείται στη δοκιμή. Μετά ανοίγεις τις ρυθμίσεις του Cursor και ενεργοποιείς τον server shadcn. Το βήμα δεν είναι διακοσμητικό: το Cursor δεν ξεκινάει τους servers μόνο του επειδή υπάρχει το αρχείο. Όταν ενεργοποιηθεί, βλέπεις πράσινη κουκκίδα δίπλα στο όνομα και τη λίστα των εργαλείων (τεκμηρίωση).

Τι κοστίζει

Σε χρήμα, τίποτα. Άδεια MIT, χωρίς λογαριασμό, χωρίς κλειδί, χωρίς όριο κλήσεων για το δημόσιο registry — και πίσω του 48 εκατομμύρια λήψεις τον μήνα, δηλαδή δεν μιλάμε για πείραμα κάποιου. Έκδοση 4.21.5, 217 χιλιάδες bytes, τριάντα τρεις εξαρτήσεις. Το κόστος δεν είναι εδώ.

Το πραγματικό κόστος είναι το πλαίσιο, και το μέτρησα μόνη μου, όχι από περιγραφές: τα επτά εργαλεία του server φορτώνουν 4.674 χαρακτήρες ορισμών — περίπου 1.168 tokens — σε κάθε συνεδρία που τον έχει ανοιχτό. Για σύγκριση: το ccusage, που μετράει κόστος, φορτώνει 672 tokens για έξι εργαλεία, ενώ ένας μεγάλος MCP server εταιρικού τύπου φτάνει τις δεκάδες χιλιάδες. Είναι δηλαδή ένας λογικός φόρος, αλλά φόρος: τον πληρώνεις σε κάθε κουβέντα, ακόμα κι όταν δεν ζητήσεις component.

Και μετά, τα ίδια τα components. Τα κατέβασα και τα ζύγισα: το κουμπί είναι 2.795 bytes, ο διάλογος 4.812, το γράφημα 11.411. Σε χοντρική μετατροπή, περίπου 700, 1.200 και 2.850 tokens — και μια σελίδα με δέκα με δεκαπέντε components φτάνει τις 4.000 με 10.000 tokens. Αυτό όμως το πληρώνεις μία φορά, και εδώ κρύβεται η πραγματική διαφορά: το shadcn δεν σου φορτώνει βιβλιοθήκη — σου αντιγράφει τον κώδικα μέσα στο δικό σου project. Άρα μετά την πρώτη φορά δεν έχεις ούτε εξάρτηση, ούτε αναβαθμίσεις που σπάνε, ούτε φόρο ανά συνεδρία· έχεις κώδικα δικό σου. Ό,τι πληρώνεις σε πλαίσιο, το ξαναπαίρνεις σε ελευθερία.

Ένα τελευταίο νούμερο, για όποιον δουλέψει με ιδιωτικό registry: εκεί θέλει REGISTRY_TOKEN στο .env.local — κόστος υποδομής, όχι τιμοκατάλογος. Και μία πρακτική αλήθεια: ταχύτητα δεν είναι το πρόβλημα· η αναζήτηση γύρισε τριάντα τρία αποτελέσματα σε τρία δέκατα του δευτερολέπτου, ενώ η εκκίνηση του server παίρνει περίπου τρία δευτερόλεπτα, μία φορά.

Πού κερδίζει, πού χάνει

Το πρώτο κέρδος είναι το πιο σημαντικό, και δεν είναι τεχνικό: ο agent δουλεύει με το καλούπι σου, όχι με ένα πρόχειρο παράδειγμα. Δίνεις στον server το δικό σου registry, και κάθε component που προτείνει ο βοηθός βγαίνει από τα δικά σου components. Αυτό αλλάζει το αποτέλεσμα της δουλειάς, όχι μόνο την ταχύτητά της.

Δεύτερο, τα ιδιωτικά registries. Μια ομάδα εκθέτει το εσωτερικό της σύστημα στον agent και δεν ξαναεξηγεί τίποτα. Θέλει ένα REGISTRY_TOKEN στο .env.local του project και τη δήλωση του καταλόγου στο components.json (τεκμηρίωση) — υποδομή, όχι μαγεία.

Τρίτο, είναι γρήγορο, δωρεάν και χωρίς λογαριασμό. Το δημόσιο registry δεν θέλει κλειδί ούτε έχει όριο κλήσεων, και η αναζήτηση γύρισε σε τρία δέκατα του δευτερολέπτου. Δεν υπάρχει στάδιο δοκιμής, δεν υπάρχει κάρτα.

Τέταρτο, επτά εργαλεία με καθαρά ονόματα. Δεν χρειάζεται να μάθεις λεξικό για να καταλάβεις τι κάνει το get_add_command_for_items.

Τώρα πού χάνει.

Πρώτο και μεγαλύτερο: δεν συμπιέζει τίποτα. Κάθε component που βλέπει ο agent μπαίνει στο πλαίσιο ολόκληρο. Δεν υπάρχει φίλτρο, δεν υπάρχει σύνοψη, δεν υπάρχει «δείξε μου μόνο το κομμάτι που ρώτησα». Το γράφημα που μέτρησα είναι 11.411 bytes, και αν ο agent το τραβήξει για να απαντήσει σε μια ερώτηση, αυτά τα bytes τα πληρώνεις όλα.

Δεύτερο, θέλει υπάρχον project. Η παγίδα του tsconfig.json δεν είναι λεπτομέρεια· είναι το πρώτο πράγμα που θα σου τύχει αν δοκιμάσεις το εργαλείο σε άδειο φάκελο, όπως κάναμε εμείς.

Τρίτο, το ιδιωτικό registry θέλει δουλειά. REGISTRY_TOKEN στο .env.local, δήλωση στο components.json, και προσοχή να μη μπει το κλειδί στο αποθετήριο.

Τέταρτο, ζει μέσα στο οικοσύστημα του shadcn. Αν το design system σου είναι αλλού — άλλη βιβλιοθήκη, άλλη γλώσσα, άλλη προδιαγραφή — δεν σου λύνει το πρόβλημα. Δεν είναι εργαλείο που προσαρμόζεται σε σένα· είσαι εσύ που πρέπει να μιλάς τη γλώσσα του.

Δοκιμή

Τρέξαμε το εργαλείο στ’ αλήθεια, σε Windows, με μηδέν κόστος. Χωρίς λογαριασμό, χωρίς κλειδί, χωρίς εγκατάσταση. Ορίστε τι είδα, με τη σειρά.

Πρώτα η εγκατάσταση. Η εντολή npx shadcn@latest mcp init --client cursor έγραψε όντως το .cursor/mcp.json, και η αντίστοιχη με --client claude έγραψε το .mcp.json. Και τα δύο με το ίδιο περιεχόμενο που δίνουμε στην ενότητα της εγκατάστασης. Δηλαδή το πρώτο μισό της υπόσχεσης το κρατάει: γράφει τη ρύθμιση, δεν σε βάζει να την αντιγράψεις.

Και η παγίδα, στην ίδια δοκιμή: όταν τρέξαμε την εντολή σε φάκελο χωρίς tsconfig.json, σκάει με «Failed to load tsconfig.json». Δεν το ανακάλυψα σε κάποιο φόρουμ· το είδα να συμβαίνει, και γι’ αυτό το γράφω πρώτο στην εγκατάσταση.

Μετά το ανεξάρτητο τεστ, που το θεωρώ το πιο πειστικό κομμάτι. Άνοιξα τον server με το χέρι, μιλώντας του JSON-RPC πάνω από stdio, και πέρασα τη σειρά των κλήσεων: initialize, notifications/initialized, tools/list, και μετά κλήση του search_items_in_registries. Ο server δήλωσε serverInfo με όνομα shadcn και έκδοση 1.0.0. Η λίστα των εργαλείων γύρισε επτά, τα ονόματα που είδες πιο πάνω. Και η αναζήτηση με {"registries":["@shadcn"],"query":"button","limit":5} γύρισε 33 items με εντολές εγκατάστασης, σε 0,3 δευτερόλεπτα. Το όριο ήταν πέντε· το εργαλείο σου δίνει την πλήρη αντιστοίχιση και όχι μόνο τα πρώτα πέντε, κάτι που στην πράξη είναι καλό και στην τιμή του πλαισίου είναι το αντίθετο.

Ο χρόνος εκκίνησης μετρήθηκε 2,9 με 3,8 δευτερόλεπτα στο initialize. Είναι το κόστος που πληρώνεις μία φορά, στην αρχή της συνεδρίας, και μετά η δουλειά πάει γρήγορα.

Στο Claude Code, ο έλεγχος με claude mcp list και με /mcp μέσα στη συνεδρία δίνει τη γραμμή shadcn: Connected. Αυτό είναι η αναμενόμενη εικόνα· η τεκμηρίωση την περιγράφει έτσι (τεκμηρίωση).

Τι δεν τρέξαμε, και το λέω καθαρά. Δεν έστησα ιδιωτικό registry για να δω το REGISTRY_TOKEN σε ζωντανή δουλειά· ό,τι γράφω γι’ αυτό είναι τεκμηρίωση. Δεν πέρασα από Codex, γιατί δεν έχουμε Codex στο μηχάνημα. Και τα νούμερα του αποθετηρίου — 125.736 αστέρια, 13.392 forks, 1.795 ανοιχτά ζητήματα, τελευταίο push σήμερα 16 Οκτωβρίου 2026 — τα διάβασε η ομάδα έρευνας, μαζί με τα 48.183.875 των λήψεων npm στις τριάντα ημέρες και τα 217.215 bytes της έκδοσης 4.21.5, που δημοσιεύτηκε στις 14 Οκτωβρίου 2026.

Ετυμηγορία

Το shadcn MCP λύνει ένα πρόβλημα που το νιώθεις πριν το ονομάσεις: ο βοηθός σου φτιάχνει interfaces που δεν μοιάζουν με τα δικά σου. Το λύνει δίνοντας στον agent πρόσβαση στο registry σου, με φυσική γλώσσα, δωρεάν, χωρίς λογαριασμό.

Είναι μικρό και ειλικρινές: επτά εργαλεία, καθαρά ονόματα, μία εντολή εγκατάστασης, μηδέν χρήμα. Δεν υπάρχει στάδιο δοκιμής να ξεπεράσεις, δεν υπάρχει κάρτα να δώσεις.

Οι ενστάσεις είναι συγκεκριμένες. Δεν συμπιέζει τίποτα, οπότε κάθε component μπαίνει στο πλαίσιο ολόκληρο. Θέλει πραγματικό project, και το μαθαίνεις με το «Failed to load tsconfig.json». Το ιδιωτικό registry θέλει δουλειά. Και μένει μέσα στο οικοσύστημα του shadcn, άρα δεν σου λύνει τίποτα αν το design system σου είναι αλλού.

Για όποιον έχει design system και δουλεύει με agent, η ζυγαριά γέρνει καθαρά προς το «δοκίμασέ το». Η εγκατάσταση είναι μία εντολή μέσα στο project σου:

npx shadcn@latest mcp init --client cursor

Score: 8.7/10.

Πηγές: https://github.com/shadcn-ui/ui · https://www.npmjs.com/package/shadcn · https://ui.shadcn.com/docs/mcp · https://ui.shadcn.com/docs/registry/mcp · https://ui.shadcn.com/docs/registry/authentication