ΤΕΥΧΟΣ 023  ·  27 ΟΚΤΩΒΡΙΟΥ 2026 RSS
CodeCity
ΣΧΕΔΙΑΣΜΟΣ № 0022

shadcn-ui-mcp-server: ο βοηθός διαβάζει τον κώδικα των components, δεν τον μαντεύει

Ο shadcn-ui-mcp-server είναι διακομιστής MCP που δίνει στον βοηθό τον πραγματικό πηγαίο κώδικα των components του shadcn/ui v4, σε React, Svelte, Vue και React Native. Αντί να μαντεύει props και variants, τα διαβάζει από την πηγή. Δέκα εργαλεία, χωρίς κλειδί, μηδέν χρήμα. Τον ζυγίσαμε στο μηχάνημά μας: 972 tokens σε κάθε συνεδρία, 40 MB στον δίσκο, 83 MB μνήμη. Και μία επιφύλαξη που δεν την κρύβουμε: δύο ανεξάρτητοι έλεγχοι ασφαλείας διαφωνούν.

shadcn-ui-mcp-server: ο βοηθός διαβάζει τον κώδικα των components, δεν τον μαντεύει

Τι κάνει

Έχεις δει τον βοηθό να σου φτιάχνει κουμπί με λάθος ύψος, λάθος χρώμα, λάθος variant. Δεν το κάνει από αδιαφορία. Το γράφει από τη μνήμη του, και η μνήμη του δεν ξέρει πώς είναι σήμερα το component. Ο shadcn-ui-mcp-server υπάρχει για να του δώσει τα μάτια.

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

Αυτός ο διακομιστής, λοιπόν, δεν εγκαθιστά τίποτα. Διαβάζει. Πάει στα αποθετήρια του shadcn/ui v4 και φέρνει στον βοηθό τον πηγαίο κώδικα, τα παραδείγματα χρήσης, τα blocks (έτοιμες συνθέσεις σελίδων, όπως ταμπλό και φόρμες) και τα metadata. Δουλεύει με τέσσερα οικοσυστήματα: το shadcn/ui για React, το shadcn-svelte, το shadcn-vue και το react-native-reusables, τα οποία επιλέγεις με τη σημαία --framework (αποθετήριο).

Δεν είναι το ίδιο εργαλείο με τον επίσημο MCP server του shadcn, που μιλάει με registries και σου φτιάχνει εντολή εγκατάστασης. Εκείνος σου λέει «πρόσθεσε αυτό»· αυτός σου ανοίγει τον κώδικα και στον δείχνει. Είναι συμπληρωματικοί, όχι ανταγωνιστές, και το λέμε γιατί εύκολα μπερδεύονται.

Δέκα εργαλεία εκθέτει, και τα είδα να δηλώνονται στο μηχάνημά μας: get_component, get_component_demo, list_components, get_component_metadata, get_directory_structure, get_block, list_blocks, apply_theme, list_themes, get_theme. Τα εννέα είναι ανάγνωση. Το δέκατο γράφει, και θα το πούμε στην ώρα του.

Τα τρία τελευταία, τα list_themes, get_theme και apply_theme, δεν αφορούν components αλλά θέματα. Το tweakcn είναι μια συλλογή έτοιμων χρωματικών θεμάτων, και ο διακομιστής τα κατεβάζει και μπορεί να εφαρμόσει ένα στο project σου. Είναι το μόνο σημείο του εργαλείου που αλλάζει κάτι, και γι’ αυτό το ξεχωρίζουμε από τα υπόλοιπα εννέα.

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

Για όποιον φτιάχνει interfaces με shadcn/ui και βαριέται να διορθώνει τον βοηθό. Ο ερασιτέχνης που έμαθε τη λέξη «πράκτορας» την περασμένη βδομάδα θα καταλάβει το όφελος από την πρώτη ερώτηση: αντί να του δώσει ο βοηθός ένα κουμπί από τη φαντασία του, του δίνει το κουμπί που είναι σήμερα στο επίσημο αποθετήριο, με όλα τα variants του. Ο επαγγελματίας κερδίζει κάτι πιο συγκεκριμένο: σταματά να διορθώνει props και ονόματα που άλλαξαν.

Λάμπει όταν δουλεύεις React και χρειάζεσαι σύνθετα blocks, ή όταν το project σου έχει περάσει σε Svelte, Vue ή React Native και το ίδιο σου φτιάχνει component για όλα. Και λάμπει όταν δεν θέλεις να στήσεις τίποτα — ούτε λογαριασμό, ούτε κλειδί.

Δεν είναι για σένα αν δεν δουλεύεις με shadcn/ui. Ο διακομιστής δεν έχει άλλη ύλη. Και δεν είναι για σένα αν θέλεις να εγκαταστήσεις component με μία εντολή από τον βοηθό· αυτό το κάνει ο επίσημος MCP server του shadcn, όχι αυτός.

Εγκατάσταση

Θέλεις Node 20 ή νεότερο· το δηλώνει το πεδίο engines του πακέτου (η εικόνα Docker, από την άλλη, χρησιμοποιεί Node 22). Το npx έρχεται μαζί με το Node, οπότε δεν εγκαθιστάς τίποτα χειροκίνητα.

Λες στον πελάτη σου να τρέξει τον διακομιστή, κάνεις επανεκκίνηση, και ρωτάς. Δεν κατεβάζεις αρχείο, δεν ανοίγεις κλειδί. Το npx κατεβάζει το πακέτο την πρώτη φορά — στη μέτρησή μας, 40 MB σε 4.274 αρχεία.

Η σημαία -y λέει στο npx να μην περιμένει επιβεβαίωση. Χωρίς κλειδί GitHub έχεις 60 αιτήματα την ώρα· με ένα προσωπικό κλειδί GitHub χωρίς δικαιώματα, 5.000 (αποθετήριο). Χωρίς κλειδί, η δοκιμή μας δούλεψε κανονικά.

Θέλεις άλλο οικοσύστημα, αλλάζεις μία σημαία: για Svelte --framework svelte, για Vue --framework vue, για React Native --framework react-native. Και στο React, αν προτιμάς τη βιβλιοθήκη primitives Base αντί για τη Radix, προσθέτεις --ui-library base. Είναι ισχυρισμοί κατασκευαστή, από την τεκμηρίωση του αποθετηρίου· δεν έτρεξα καθένα ξεχωριστά.

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

Εδώ ο διακομιστής είναι MCP, άρα μιλάς με το σχήμα του: μία ρύθμιση, όπου δηλώνεις το εκτελέσιμο και τα ορίσματά του. Το γενικό σχήμα είναι το ίδιο παντού — ένα αντικείμενο mcpServers με ένα κλειδί, μέσα του command ίσο με npx και args ίσο με -y και @jpisnice/shadcn-ui-mcp-server. Αυτό που αλλάζει από πελάτη σε πελάτη είναι το αρχείο και η μορφή. Δεν οδήγησα συνεδρία μέσα σε κάποιον από αυτούς· τα βήματα είναι τεκμηρίωση, εκτός από όπου το λέω ρητά.

Claude Code

Το Claude Code έχει δική του εντολή, και είναι το πιο καθαρό μονοπάτι:

claude mcp add shadcn-ui -- npx -y @jpisnice/shadcn-ui-mcp-server

Μετά κάνεις επανεκκίνηση και ελέγχεις με claude mcp list, ή μέσα στη συνεδρία με /mcp. Περιμένεις τη γραμμή shadcn-ui: Connected. Αν δεν τη δεις, τις περισσότερες φορές φταίει ότι δεν έγινε επανεκκίνηση.

Codex CLI

Το Codex δεν έχει βοηθητική εντολή· η ρύθμιση μπαίνει με το χέρι στο ~/.codex/config.toml. Προσθέτεις μία ενότητα mcp_servers.shadcn_ui, όπου δηλώνεις command = "npx" και args = ["-y", "@jpisnice/shadcn-ui-mcp-server"]. Είναι η ίδια ρύθμιση, σε μορφή TOML αντί για JSON. Αυτό το μονοπάτι δεν το έτρεξα ως το τέλος — δεν έχουμε Codex στο μηχάνημά μας.

Cursor

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

Μία σημείωση για όλους: μετά τη ρύθμιση ζητάς κάτι σαν «δώσε μου τον πηγαίο κώδικα του button από το shadcn/ui v4». Αν δεν απαντήσει, οι δύο συνηθισμένες αιτίες είναι η επανεκκίνηση που ξεχάστηκε και η ρύθμιση γραμμένη σε λάθος αρχείο.

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

Κερδίζει στο κεντρικό: ο βοηθός βλέπει τον πραγματικό κώδικα, όχι την ανάμνησή του. Το get_component button έφερε 2.546 χαρακτήρες με όλα τα variants — default, destructive, outline, secondary, ghost, link. Αυτό είναι το τέλος της διόρθωσης props που άλλαξαν.

Κερδίζει στο εύρος. Τέσσερα οικοσυστήματα με ένα εργαλείο, και δύο βιβλιοθήκες primitives για το React (Radix και Base). Κερδίζει στην τιμή: μηδέν λογαριασμός, μηδέν κλειδί, μηδέν συνδρομή. Και κερδίζει στο ότι είναι γρήγορο — εκκίνηση 1,6 δευτερόλεπτα στη μέτρησή μας.

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

Πρώτο, το apply_theme γράφει. Από τα δέκα εργαλεία, τα εννέα διαβάζουν· αυτό αλλάζει θέμα στο project σου, από τα έτοιμα presets του tweakcn. Δεν είναι κακό — είναι το μόνο εργαλείο που αφήνει σημάδι. Άρα το τρέχεις σε project, όχι στο αντίγραφο του πελάτη σου, και κάνεις commit πριν.

Δεύτερο, θέλει δίκτυο. Κάθε component το φέρνει ζωντανά από το GitHub. Χωρίς σύνδεση δεν έχει ύλη, και χωρίς κλειδί GitHub το όριο είναι 60 αιτήματα την ώρα — αρκετό για δοκιμή, λίγο για βαριά δουλειά.

Τρίτο, δεν συμπιέζει. Κάθε component μπαίνει στο πλαίσιο ολόκληρο. Το button είναι 2.546 χαρακτήρες· ένα block είναι πολύ μεγαλύτερο. Αν ο βοηθός τραβήξει τρία blocks για να απαντήσει σε μια ερώτηση, τα πληρώνεις όλα.

Και η επιφύλαξη ασφάλειας, που δεν την κρύβουμε. Δύο ανεξάρτητοι έλεγχοι διαφωνούν, και τις δύο φορές κοιτάζουν τον ίδιο κώδικα. Το M8ven δίνει A, 98/100, με απόφανση «ο κώδικας καθαρός, ισχυρή υιοθέτηση», δέκα εργαλεία μετρημένα, και κανένα μυστικό στον κώδικα. Το ModelsAtlas το μπλοκάρει με D, 69/100, και καταγράφει δύο ευρήματα υψηλής σοβαρότητας. Και τα δύο είναι το ίδιο πράγμα: new Function που εκτελεί κείμενο ως κώδικα, στις γραμμές 92 και 118 του src/tools/tweakcn/fetch-presets.ts. Είναι ο κώδικας που διαβάζει τα presets του θέματος, και η τεχνική είναι γνωστό μοτίβο έγχυσης κώδικα. Ο ένας έλεγχος το προσπερνά, ο άλλος το βαθμολογεί ως αποτυχία. Εμείς δεν πήραμε θέση: λέμε τι βρήκε ο καθένας, επειδή ο αναγνώστης πρέπει να το ξέρει πριν το βάλει σε δουλειά πελάτη. Ο κώδικας ζει σε ένα πρόσωπο, με άδεια MIT.

Δοκιμή

Ό,τι ακολουθεί τρέξαμε σε Windows 11, σε Dell Inspiron 3576, χωρίς κάρτα γραφικών. Δεν έστησα συνεδρία πράκτορα μέσα σε Claude Code, Codex ή Cursor· ό,τι δοκιμάστηκε, δοκιμάστηκε στο κέλυφος και μέσα από πρωτόκολλο.

Πρώτα η έκδοση. Η εντολή npx -y @jpisnice/shadcn-ui-mcp-server --version τύπωσε 3.0.0, όπως δηλώνει το npm.

Μετά το πιο πειστικό κομμάτι, που δεν το δίνουν τα περισσότερα άρθρα: άνοιξα τον διακομιστή με το χέρι, μιλώντας του JSON-RPC πάνω από την πρότυπη είσοδο. Στο initialize δήλωσε serverInfo με όνομα shadcn-ui-mcp-server και έκδοση 3.0.0, και συμφώνησε στο πρωτόκολλο MCP της 28ης Ιουλίου 2026. Το tools/list γύρισε 10 εργαλεία: τα get_component, get_component_demo, list_components, get_component_metadata, get_directory_structure, get_block, list_blocks, apply_theme, list_themes, get_theme.

Και μετά μια πραγματική κλήση, χωρίς κλειδί GitHub. Το get_component button γύρισε 2.546 χαρακτήρες πηγαίου κώδικα, με όλα τα variants μέσα: default, destructive, outline, secondary, ghost, link. Το list_components γύρισε 61 components. Χρόνος εκκίνησης: 1,6 δευτερόλεπτα. Δηλαδή η υπόσχεση ισχύει: ο βοηθός δεν μαντεύει, διαβάζει.

Τι δεν έτρεξα, και το λέω καθαρά. Δεν δοκίμασα το apply_theme σε ζωντανό project, για να μην αλλάξω θέμα σε δικό μας· ό,τι γράφω γι’ αυτό είναι από την τεκμηρίωση και από τη δήλωση των εργαλείων. Δεν πέρασα από Codex. Και τα νούμερα του αποθετηρίου — 3.069 αστέρια, 315 forks, 7 ανοιχτά issues, άδεια MIT, τελευταίο push στις 3 Οκτωβρίου 2026 — τα διάβασε η έρευνα, μαζί με τις 16.454 λήψεις του npm για τον μήνα 23 Σεπτεμβρίου με 22 Οκτωβρίου 2026 και τις δύο σελίδες ελέγχου ασφαλείας που είδαμε πιο πάνω.

Τι κοστίζει

Το μοντέλο. Δικό μας νούμερο: το σχήμα των δέκα εργαλείων είναι 3.890 χαρακτήρες, περίπου 972 tokens, και φορτώνεται σε κάθε συνεδρία που ο server είναι ανοιχτός — ακόμα κι όταν δεν ζητήσεις component. Είναι φόρος, όχι χρέωση: τον πληρώνεις μία φορά ανά συνεδρία, στην αρχή.

Το μηχάνημα. Δικό μας νούμερο: 40 MB στον δίσκο σε 4.274 αρχεία στο πρώτο κατέβασμα, και ~83 MB μνήμη (RSS) με μία διεργασία node εν κινήσει. Ισχυρισμός κατασκευαστή: θέλει Node 20+, όπως το δηλώνει το πεδίο engines.

Σε χρήμα, μηδέν. Ούτε κλειδί, ούτε συνδρομή, ούτε κάρτα. Το προαιρετικό κλειδί GitHub δεν κοστίζει τίποτα· απλώς ανεβάζει το όριο από 60 σε 5.000 αιτήματα την ώρα — ισχυρισμός κατασκευαστή, από την τεκμηρίωση του αποθετηρίου.

Και μία δική μας παρατήρηση, από την έρευνα: η σελίδα του M8ven που μας έδωσε το 98/100 είχε αποθηκευτεί στις 6 Οκτωβρίου 2026, και ο ίδιος ο έλεγχος τη σημαδεύει ως πολύ παλιά για να εμφανιστεί. Ο βαθμός ισχύει για ό,τι είδε τότε, όχι απαραίτητα για τον κώδικα που θα κατεβάσεις σήμερα.

Ετυμηγορία

Score: 8.2/10.

Ο shadcn-ui-mcp-server λύνει ένα πρόβλημα που το νιώθεις πριν το ονομάσεις: ο βοηθός σου φτιάχνει components που δεν μοιάζουν με τα σημερινά. Το λύνει δίνοντας στον πράκτορα τον πραγματικό πηγαίο κώδικα, δωρεάν, χωρίς κλειδί, με δέκα καθαρά ονόματα. Το get_component button έφερε 2.546 χαρακτήρες με έξι variants· το list_components, 61 components· η εκκίνηση, 1,6 δευτερόλεπτα. Και το --version λέει 3.0.0, όπως στο npm.

Τους δύο βαθμούς τους χάνει σε τρία σημεία. Το apply_theme γράφει, άρα θέλει προσοχή. Θέλει δίκτυο και, χωρίς κλειδί, έχει χαμηλό όριο. Και δεν συμπιέζει: κάθε component μπαίνει ολόκληρο στο πλαίσιο. Πάνω από όλα αυτά, η επιφύλαξη ασφάλειας: M8ven A/98, ModelsAtlas D/69, με δύο ευρήματα έγχυσης κώδικα που ο ένας τα προσπερνά και ο άλλος τα βαθμολογεί ως αποτυχία. Δεν παίρνουμε θέση· το λέμε, και το αφήνουμε στην κρίση σου.

Αν δουλεύεις shadcn/ui με πράκτορα, δοκίμασέ το σε ένα project δικό σου, όχι σε project πελάτη, και διάβασε πρώτα τη σελίδα του ModelsAtlas.

Πηγές: αποθετήριο https://github.com/Jpisnice/shadcn-ui-mcp-server · πακέτο npm https://www.npmjs.com/package/@jpisnice/shadcn-ui-mcp-server · εκδόσεις https://github.com/Jpisnice/shadcn-ui-mcp-server/releases · έλεγχος M8ven https://m8ven.ai/check · έλεγχος ModelsAtlas https://modelsatlas.com/mcp/jpisnice/shadcn-ui-mcp-server/ · shadcn/ui https://ui.shadcn.com/


shadcn-ui-mcp-server: the assistant reads the component code instead of guessing it

What it does

You have watched an assistant build you a button with the wrong height, the wrong colour, the wrong variant. It does not do it out of carelessness. It writes from memory, and its memory does not know what the component looks like today. shadcn-ui-mcp-server exists to give it eyes.

Two words first, because without them the rest makes no sense. MCP is a protocol that lets an AI assistant connect to external tools inside the conversation; the assistant does not know them in advance, it discovers them at the start of a session. shadcn/ui is a set of ready-made web components — buttons, dialogs, tables — with one difference: you do not install it as a library. It copies the code into your own project.

So this server installs nothing. It reads. It goes to the shadcn/ui v4 repositories and brings the assistant the source code, the usage demos, the blocks (ready-made page assemblies such as dashboards and forms) and the metadata. It works with four ecosystems: shadcn/ui for React, plus shadcn-svelte, shadcn-vue and react-native-reusables, selected with the --framework flag (repository).

It is not the same tool as the official shadcn MCP server, which talks to registries and generates an install command for you. That one tells you “add this”; this one opens the code and shows it. They are complementary, not rivals, and we say so because the two are easily confused.

It exposes ten tools, and I watched it declare them on our machine: get_component, get_component_demo, list_components, get_component_metadata, get_directory_structure, get_block, list_blocks, apply_theme, list_themes, get_theme. Nine of them read. The tenth writes, and we will get to it in due course.

Who it is for

For anyone building interfaces with shadcn/ui who is tired of correcting the assistant. The beginner who heard the word “agent” last week will grasp the benefit from the first question: instead of an imaginary button, the assistant hands over the button that sits in the official repository today, with all its variants. The professional gains something more specific: no more fixing props and names that changed.

It shines when you work in React and need complex blocks, or when your project has moved to Svelte, Vue or React Native and you want one tool building components for all of them. And it shines when you want to set up nothing — no account, no key.

It is not for you if you do not work with shadcn/ui. The server has no other material. And it is not for you if you want the assistant to install a component with one command; that is the official shadcn MCP server’s job, not this one’s.

Install

You want Node 20 or newer; the package declares it in its engines field (the Docker image, for its part, uses Node 22). npx ships with Node, so you install nothing by hand.

You tell your client to run the server, you restart, and you ask. You download no file, you open no key. npx pulls the package on first run — on our measurement, 40 MB across 4,274 files.

The -y flag tells npx not to wait for confirmation. Without a GitHub token you get 60 requests an hour; with a scope-free personal GitHub token, 5,000 (repository). Without a key, our test ran fine.

Using it per LLM

Here the server is an MCP server, so you speak its shape: one configuration entry, naming the executable and its arguments. The general shape is the same everywhere — an mcpServers object with one key, holding command set to npx and args set to -y and @jpisnice/shadcn-ui-mcp-server. What changes from client to client is the file and the format. I drove no session inside any of them; the steps are documentation, except where I say otherwise.

Claude Code

Claude Code has its own command, and it is the cleanest path:

claude mcp add shadcn-ui -- npx -y @jpisnice/shadcn-ui-mcp-server

Then restart and check with claude mcp list, or inside a session with /mcp. You are looking for the line shadcn-ui: Connected. If you do not see it, the usual cause is a restart you skipped.

Codex CLI

Codex has no helper command; the configuration goes into ~/.codex/config.toml by hand. You add an mcp_servers.shadcn_ui section declaring command = "npx" and args = ["-y", "@jpisnice/shadcn-ui-mcp-server"]. It is the same configuration, in TOML rather than JSON. I did not run that path to the end — we have no Codex on our machine.

Cursor

Cursor reads .cursor/mcp.json at the project root, or ~/.cursor/mcp.json for every project. You write the mcpServers object with the server into it, and then — do not skip this step — you open Cursor Settings and enable the server. Cursor does not start servers just because the file exists. Once enabled, you see a green dot next to the name and the list of tools.

One note for all of them: after setup you ask something like “give me the source code of the button from shadcn/ui v4”. If nothing comes back, the two usual causes are the forgotten restart and the configuration written into the wrong file.

Where it wins, where it loses

It wins on the core point: the assistant sees the real code, not its recollection of it. get_component button returned 2,546 characters with every variant — default, destructive, outline, secondary, ghost, link. That is the end of fixing props that changed.

It wins on breadth. Four ecosystems from one tool, and two primitive libraries for React (Radix and Base). It wins on price: no account, no key, no subscription. And it wins on speed — startup of 1.6 seconds on our measurement.

Now where it loses.

First, apply_theme writes. Of the ten tools, nine read; this one changes the theme in your project, from tweakcn’s ready-made presets. That is not a flaw — it is simply the one tool that leaves a mark. So you run it in a project, not in your client’s copy, and you commit first.

Second, it needs the network. Every component is fetched live from GitHub. Offline it has nothing, and without a GitHub token the limit is 60 requests an hour — enough for a test, little for heavy work.

Third, it compresses nothing. Every component enters the context whole. The button is 2,546 characters; a block is far larger. If the assistant pulls three blocks to answer one question, you pay for all of them.

And the security caveat, which we do not hide. Two independent checks disagree, and both are looking at the same code. M8ven gives it A, 98/100, with the verdict “code clean and strongly established adoption”, ten tools counted, and no secrets in the source. ModelsAtlas blocks it at D, 69/100 and records two high-severity findings. Both are the same thing: new Function evaluating text as code, on lines 92 and 118 of src/tools/tweakcn/fetch-presets.ts. It is the code that reads theme presets, and the technique is a known code-injection pattern. One check walks past it, the other scores it as a failure. We take no side: we report what each found, because the reader must know before putting it to work on a client. The code lives behind one person, under the MIT licence.

Testing

Everything below we ran on Windows 11, on a Dell Inspiron 3576, with no graphics card. I stood up no agent session inside Claude Code, Codex or Cursor; what was tested, was tested in the shell and over the protocol.

First the version. npx -y @jpisnice/shadcn-ui-mcp-server --version printed 3.0.0, as declared on npm.

Then the most convincing part, which most write-ups skip: I brought the server up by hand, speaking JSON-RPC over standard input. On initialize it declared serverInfo with the name shadcn-ui-mcp-server and version 3.0.0, and agreed on the 28 July 2026 MCP protocol. tools/list returned 10 tools: get_component, get_component_demo, list_components, get_component_metadata, get_directory_structure, get_block, list_blocks, apply_theme, list_themes, get_theme.

And then a real call, with no GitHub token. get_component button returned 2,546 characters of source code, with every variant inside: default, destructive, outline, secondary, ghost, link. list_components returned 61 components. Startup time: 1.6 seconds. The promise holds: the assistant does not guess, it reads.

What I did not run, and I say so plainly. I did not try apply_theme on a live project, to avoid changing the theme of one of ours; everything I write about it comes from the documentation and from the tools’ own declarations. I did not go through Codex. And the repository figures — 3,069 stars, 315 forks, 7 open issues, MIT licence, last push on 3 October 2026 — were read by our research, together with the 16,454 npm downloads for the month of 23 September to 22 October 2026 and the two security-check pages we saw above.

What it costs

The model. Our own figure: the schema of the ten tools is 3,890 characters, about 972 tokens, and it loads into every session that has the server open — even when you never ask for a component. It is a tax, not a charge: you pay it once per session, at the start.

The machine. Our own figure: 40 MB on disk across 4,274 files on first download, and ~83 MB of memory (RSS) with one node process running. Vendor claim: it wants Node 20+, as its engines field declares.

In money, nothing. No key, no subscription, no card. The optional GitHub token costs nothing; it merely raises the limit from 60 to 5,000 requests an hour — a vendor claim, from the repository’s documentation.

And one observation of our own, from research: the M8ven page that gave us the 98/100 was cached on 6 October 2026, and the check itself flags it as too old to display. The grade holds for what it saw then, not necessarily for the code you download today.

Verdict

Score: 8.2/10.

shadcn-ui-mcp-server solves a problem you feel before you can name it: your assistant builds components that do not look like today’s. It solves it by giving the agent the real source code, free, with no key, under ten clean names. get_component button returned 2,546 characters across six variants; list_components, 61 components; startup, 1.6 seconds. And --version says 3.0.0, as on npm.

It loses its two points in three places. apply_theme writes, so it needs care. It needs the network and, with no key, has a low limit. And it compresses nothing: every component enters the context whole. Above all these sits the security caveat: M8ven A/98, ModelsAtlas D/69, with two code-injection findings that one check walks past and the other scores as a failure. We take no side; we state it, and leave it to your judgement.

If you work with shadcn/ui and an agent, try it on a project of your own, not on a client’s, and read the ModelsAtlas page first.

Sources: repository https://github.com/Jpisnice/shadcn-ui-mcp-server · npm package https://www.npmjs.com/package/@jpisnice/shadcn-ui-mcp-server · releases https://github.com/Jpisnice/shadcn-ui-mcp-server/releases · M8ven check https://m8ven.ai/check · ModelsAtlas check https://modelsatlas.com/mcp/jpisnice/shadcn-ui-mcp-server/ · shadcn/ui https://ui.shadcn.com/