Storybook MCP: τα συστατικά σου, σε γλώσσα που καταλαβαίνει ο πράκτορας

Τι κάνει

Όποιος έχει δουλέψει με πράκτορα πάνω σε διεπαφή ξέρει τη συνηθέστερη ζημιά: ο πράκτορας φτιάχνει από την αρχή ένα κουμπί, με δικά του χρώματα και δικά του ονόματα πεδίων, την ίδια στιγμή που το project έχει ήδη κουμπί.

Για να καταλάβεις τι κάνει αυτό το εργαλείο, χρειάζονται τρεις λέξεις. Συστατικό (component) είναι το μικρότερο κομμάτι διεπαφής που το φτιάχνεις μία φορά και το χρησιμοποιείς παντού: ένα κουμπί, ένα πεδίο κειμένου, μια κάρτα με τίτλο. Ιστορία (story) είναι μια συνταγή που δείχνει το συστατικό σε μία συγκεκριμένη κατάσταση — το κουμπί όταν περιμένει απάντηση, το ίδιο κουμπί όταν είναι απενεργοποιημένο, η κάρτα με πολύ μακρύ τίτλο. Το Storybook είναι το εργαστήριο όπου στέκονται αυτές οι ιστορίες: ανοίγεις μια σελίδα και βλέπεις όλα τα συστατικά σου ζωντανά, χωρίς να στήσεις ολόκληρη εφαρμογή για να τα δεις.

Το MCP — Model Context Protocol — είναι το καλώδιο. Είναι ένα πρωτόκολλο με το οποίο ένας πράκτορας ανακαλύπτει και καλεί εργαλεία που του προσφέρει κάποιος άλλος. Το Storybook MCP σηκώνει έναν τέτοιο διακομιστή μέσα στον τοπικό διακομιστή ανάπτυξης του Storybook, και ο πράκτορας αποκτά τρεις ομάδες δυνατοτήτων.

Η ομάδα τεκμηρίωσης απαντά στην ερώτηση «τι συστατικά έχω και πώς χρησιμοποιούνται». Το docs-list γυρίζει τον κατάλογο, το docs-show δίνει αναλυτικά τα πεδία ενός συστατικού μαζί με τις πρώτες του ιστορίες, και το docs-show-story ολόκληρη την ιστορία όταν η πρώτη απάντηση δεν φτάνει. Η ομάδα ανάπτυξης βοηθά στη συγγραφή νέων ιστοριών: το get-storybook-story-instructions δίνει οδηγίες, το stories-preview δείχνει την προεπισκόπηση μέσα στη συνομιλία, το stories-find-by-component βρίσκει ποιες ιστορίες σχετίζονται με ένα αρχείο, το stories-changed εντοπίζει τι επηρεάστηκε από τις τελευταίες αλλαγές και το review-create σηκώνει σελίδα ελέγχου. Η ομάδα δοκιμής έχει ένα εργαλείο, το test-run, που τρέχει τις ιστορίες και επιστρέφει αποτελέσματα, μαζί με θέματα προσβασιμότητας αν τα έχεις ενεργοποιήσει.

Το κρίσιμο σημείο είναι από πού αντλούν όλα αυτά. Ο πράκτορας δεν μαντεύει. Διαβάζει τον κατάλογο συστατικών (components manifest), ένα αρχείο που παράγει το ίδιο το Storybook και περιγράφει τα συστατικά, τα πεδία τους και τη χρήση τους. Ο κατάλογος είναι κλειστός από προεπιλογή και πρέπει να τον ανάψεις με componentsManifest στο .storybook/main.ts — αν δεν το κάνεις, όλα τα άλλα δουλεύουν, μόνο η ομάδα τεκμηρίωσης μένει σιωπηλή.

Υπάρχει και ένα κόλπο μεγαλύτερης κλίμακας. Αν συνθέτεις πολλά Storybook μαζί — το δικό σου και της βιβλιοθήκης συστατικών που χρησιμοποιείς — ο διακομιστής MCP μαζεύει αυτόματα τους καταλόγους όλων. Η σύνθεση (composition) σημαίνει πρακτικά ότι ο πράκτορας βλέπει ως ένα σώμα γνώσης τα συστατικά που έγραψες εσύ και εκείνα που κληρονόμησες από αλλού.

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

Αν έχεις ένα σύστημα σχεδιασμού (design system) που το συντηρείς καιρό — ή απλώς έναν φάκελο όπου μαζεύονται τα κουμπιά, οι φόρμες και οι κάρτες σου — αυτό το εργαλείο αλλάζει τη δουλειά του πράκτορα από «παράγει άγνωστο κώδικα» σε «συναρμολογεί ό,τι έχεις». Όταν το ρωτήσεις να στήσει μια σελίδα σύνδεσης, θα ψάξει πρώτα ποιο πεδίο και ποιο κουμπί έχεις, θα δει τα ονόματα των πεδίων τους, και θα τα τοποθετήσει.

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

Δεν ταιριάζει σε μικρό project με δύο ή τρία συστατικά. Εκεί το κόστος σε tokens θα είναι μεγαλύτερο από το όφελος, επειδή πληρώνεις για τη γνώση σε κάθε συνεδρία. Δεν ταιριάζει και σε ομάδες που δεν έχουν ακόμη Storybook — πρώτα στήνεις Storybook, μετά MCP.

Εγκατάσταση

Η εγκατάσταση γίνεται μέσα από τον επίσημο εγκαταστάτη του Storybook. Τρέχεις τις εντολές από τη ρίζα του project, τον φάκελο όπου βρίσκεται το package.json.

Στο δικό μας πείραμα δεν χρειάστηκε καν να προσθέσουμε το πρόσθετο στο χέρι: ο εγκαταστάτης το αναγνώρισε και το κατέγραψε μόνος του.

npx storybook add @storybook/addon-mcp

Μετά άναψε τον κατάλογο συστατικών. Πρόσθεσε τη γραμμή features στο αρχείο .storybook/main.ts σου, κρατώντας το framework που ήδη έχεις:

const config: StorybookConfig = {
  framework: '@storybook/react-vite',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    componentsManifest: true,
  },
};

Αν το Storybook υπάρχει από πριν και θέλεις να δεις μόνο το πακέτο, ο δρόμος είναι ο συνηθισμένος:

npm i @storybook/addon-mcp

Τέλος, δήλωσε τον διακομιστή στον πράκτορα. Η επίσημη οδηγία δίνει ένα βοηθητικό εργαλείο που γράφει τη ρύθμιση για λογαριασμό σου:

npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

Από αυτό το σημείο και μετά, ο διακομιστής MCP ζει στη διεύθυνση http://localhost:6006/mcp όσο τρέχει το Storybook, και η θύρα αλλάζει αν έχεις αλλάξει τη θύρα ανάπτυξης. Μία προειδοποίηση που την είδαμε με τα μάτια μας στα Windows: ο εγκαταστάτης πετάει σφάλμα για το πρόγραμμα wmic. Δεν εμποδίζει τίποτα, αλλά τρομάζει άδικα — η εγκατάσταση ολοκληρώνεται κανονικά.

Και ένα βήμα που το ξεχνάνε όλοι: οι πράκτορες δεν διαβάζουν το εργαλείο αν δεν τους πεις. Το Storybook προτείνει να προσθέσεις στο AGENTS.md — ή στο CLAUDE.md αν δουλεύεις με Claude — μια οδηγία που τους απαγορεύει να εφευρίσκουν πεδία. Μια πρόταση αρκεί: πριν χρησιμοποιήσεις οποιαδήποτε ιδιότητα ενός συστατικού, ρώτα το Storybook MCP.

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

Το MCP είναι πρότυπο, άρα μιλάει με ό,τι μιλάει MCP. Η διαφορά είναι στο πόσο έτοιμη δουλειά έχει κάνει ο καθένας.

Claude Code

Το Storybook δίνει επίσημο πρόσθετο για το Claude Code. Δεν είναι απλή ρύθμιση διακομιστή: το πρόσθετο κουβαλά δεξιότητες — σύντομες οδηγίες που λένε στον πράκτορα πότε και πώς να χρησιμοποιήσει το Storybook — μαζί με τη δήλωση του διακομιστή MCP. Το πρόσθετο φορτώνει τον διακομιστή μέσα από το @storybook/mcp-proxy, μια σταθερή διεύθυνση που δεν αλλάζει με τις εκδόσεις σου. Σύμφωνα με το επίσημο αποθετήριο, η εγκατάσταση γίνεται σε δύο εντολές, από οποιονδήποτε φάκελο:

claude plugin marketplace add storybookjs/mcp@main --scope user

claude plugin install storybook@storybook --scope user

Ο έλεγχος ότι μπήκε σωστά, με δύο ακόμη εντολές:

claude plugin list --json

claude mcp list

Αν προτιμάς να μη βάλεις πρόσθετο και να κρατήσεις μόνο τον διακομιστή, η χειροκίνητη δήλωση είναι μία γραμμή:

claude mcp add --transport http storybook-mcp http://localhost:6006/mcp

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

Codex CLI

Στο Codex CLI το επίσημο πρόσθετο εγκαθίσταται μέσω του καταλόγου προσθέτων που φιλοξενεί το αποθετήριο. Η πρώτη εντολή προσθέτει τον κατάλογο από το GitHub, η δεύτερη κατεβάζει το πρόσθετο:

codex plugin marketplace add storybookjs/mcp --ref main

codex plugin add storybook@storybook

Η επαλήθευση, πάλι σε δύο βήματα:

codex plugin marketplace list

codex plugin list --marketplace storybook

Αν θέλεις χειροκίνητη ρύθμιση, το Codex διαβάζει διακομιστές MCP από το αρχείο ~/.codex/config.toml. Εκεί δηλώνεις τη διεύθυνση του Storybook ως απομακρυσμένο διακομιστή HTTP, με το όνομα που θέλεις να βλέπεις στη συνομιλία.

Cursor

Το Cursor δεν έχει επίσημο πρόσθετο από το Storybook, οπότε εδώ μιλάμε για τη γενική ρύθμιση MCP. Ο πιο καθαρός δρόμος είναι ένα αρχείο μέσα στο project, στο .cursor/mcp.json, ώστε η ρύθμιση να ταξιδεύει μαζί με τον κώδικα:

{
  "mcpServers": {
    "storybook": {
      "url": "http://localhost:6006/mcp"
    }
  }
}

Αν προτιμάς τα κλικ, το Cursor έχει ρυθμίσεις MCP μέσα στο πρόγραμμα, όπου προσθέτεις νέο διακομιστή με τύπο HTTP και τη διεύθυνση του Storybook. Και στις δύο περιπτώσεις, το Storybook πρέπει να τρέχει — ο διακομιστής MCP δεν ζει μόνος του, ζει μέσα στη διαδικασία ανάπτυξης. Και στις δύο περιπτώσεις επίσης, δεν το δοκιμάσαμε οι ίδιοι· η διεύθυνση και το σχήμα του αρχείου είναι τα τεκμηριωμένα του προϊόντος.

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

Κερδίζει στο πιο ακριβό λάθος των πρακτόρων. Ένας πράκτορας που δεν ξέρει τα συστατικά σου παράγει κώδικα που μοιάζει σωστός και δεν είναι: βάζει ιδιότητες που δεν υπάρχουν, ονόματα που δεν αντιστοιχούν, χρώματα εκτός κλίμακας. Εδώ ρωτά πρώτα και μετά γράφει. Το δεύτερο κέρδος είναι ο αυτοέλεγχος: ο πράκτορας τρέχει τις ιστορίες, βλέπει τι έσπασε, διορθώνει και ξανατρέχει. Το τρίτο είναι το MIT και το ότι ζει μέσα στο αποθετήριο του Storybook πια — δεν είναι πείραμα ενός ατόμου.

Χάνει σε βάρος. Η δοκιμή μας κατέβασε 719 MB προγράμματα περιήγησης Playwright για τις δοκιμές, άφησε 220 MB στο node_modules και έπιασε πάνω από 1,5 GB μνήμη σε λειτουργία. Σε ένα μηχάνημα με 8 GB αυτό το νιώθεις.

Χάνει σε κάλυψη. Η ομάδα τεκμηρίωσης θέλει κατάλογο συστατικών, και κατάλογο παράγουν σήμερα τα React framework, το @storybook/angular-vite και το @storybook/vue3-vite. Το Angular με Webpack δεν παράγει καθόλου κατάλογο, και άλλα framework ακόμη όχι. Ο ίδιος ο διακομιστής δουλεύει παντού — η γνώση των συστατικών, όχι.

Χάνει, προσωρινά, σε σταθερότητα. Η ίδια η τεκμηρίωση γράφει ότι οι δυνατότητες αυτές είναι σε προεπισκόπηση και το API μπορεί να αλλάξει. Προσθέτουμε από εμάς μια μικρή ταλαιπωρία πλοήγησης: το αποθετήριο του MCP μετακόμισε στο κύριο αποθετήριο του Storybook από την έκδοση 10.6.0, και το παλιό storybookjs/mcp είναι αρχειοθετημένο με 271 αστέρια. Όποιος ακολουθεί παλιά άρθρα, θα καταλήξει σε αποθετήριο που δεν δέχεται αλλαγές.

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

Δοκιμή

Στήσαμε πραγματικό project React με Vite, με τον τρόπο που θα το έστηνε οποιοσδήποτε. Ο επίσημος εγκαταστάτης έβαλε μόνος του το πρόσθετο, χωρίς να το προσθέσουμε εμείς στο αρχείο ρυθμίσεων. Κατόπιν άνοιξε το Storybook και ο διακομιστής εμφανίστηκε στο localhost:6006/mcp.

Η χειραψία με τον διακομιστή πέρασε χωρίς κλειδί, με τη μία. Ο διακομιστής δήλωσε οκτώ εργαλεία — τόσα είναι διαθέσιμα όταν έχεις ενεργές και τις τρεις ομάδες, με τον κατάλογο συστατικών αναμμένο.

Μετρήσεις, σε ένα μηχάνημα με 12 GB μνήμη:

Το docs-list απάντησε σε 1,04 δευτερόλεπτα και γύρισε τα αληθινά συστατικά του project μας, όχι γενικόλογο κείμενο. Το docs-show πάνω σε ένα από αυτά έδωσε έτοιμο κώδικα χρήσης, με τα σωστά ονόματα πεδίων. Το test-run χρειάστηκε 11,1 δευτερόλεπτα και επέστρεψε οκτώ ιστορίες που περνούν, με καθαρό αποτέλεσμα ανά ιστορία.

Η πιο χρήσιμη μέτρηση δεν είναι χρόνος, είναι μέγεθος. Η απάντηση του tools/list — ο κατάλογος δηλαδή που στέλνεται στον πράκτορα για να ξέρει τι μπορεί να καλέσει — είναι 21.903 χαρακτήρες. Με τον συνηθισμένο υπολογισμό των τεσσάρων περίπου χαρακτήρων ανά token, αυτό είναι περίπου 5.500 tokens που μπαίνουν σε κάθε συνεδρία, πριν καν ρωτήσεις κάτι. Αν δουλεύεις με συνδρομή αντί για μετρημένα tokens, το πληρώνεις σε χώρο· αν πληρώνεις με τη χρήση, το πληρώνεις σε χρήμα σε κάθε μήνυμα.

Δύο ακόμη παρατηρήσεις από τη δοκιμή. Ο εγκαταστάτης έβγαλε το σφάλμα wmic στα Windows, χωρίς συνέπεια στη λειτουργία. Και οι δοκιμές κατέβασαν τα προγράμματα περιήγησης του Playwright — μια φορά, αλλά 719 MB τη φορά.

Τι κοστίζει

Χρήμα. Μηδέν. Το Storybook είναι ανοιχτό λογισμικό με άδεια MIT και το MCP του έρχεται μαζί του — δεν πληρώνεις συνδρομή, δεν αγοράζεις κλειδί. Πληρώνεις μόνο τη δουλειά που θα κάνει ο πράκτορας πάνω του.

Χώρος. 220 MB για τα node_modules του project, και 719 MB ακόμη αν επιλέξεις να κατεβάσεις τους browsers του Playwright — αυτοί είναι που τρέχουν τις ιστορίες δοκιμής. Σχεδόν ένα γίγα δίσκο, σε ένα εργαλείο που δουλεύει τοπικά.

Μνήμη. Πάνω από 1,5 GB όταν ο διακομιστής του Storybook και οι browsers του δουλεύουν μαζί. Δεν το αφήνεις ανοιχτό επειδή το ξέχασες· το κλείνεις, όπως τον φούρνο.

Χρόνος. Το docs-list γύρισε τα συστατικά του project σε 1,04 δευτερόλεπτα. Το test-run χρειάστηκε 11,1 δευτερόλεπτα για να τρέξει οχτώ ιστορίες και να επιστρέψει οχτώ επιτυχίες. Είναι χρόνοι από τους οποίους δεν καταλαβαίνεις ότι έχεις πράκτορα στη μέση.

Πλαίσιο — και εδώ είναι το νούμερο που θέλω να θυμάσαι. Ο κατάλογος των εργαλείων του είναι 21.903 χαρακτήρες, δηλαδή περίπου 5.500 tokens που μπαίνουν στο πλαίσιο σε κάθε συνεδρία, ακόμη κι αν δεν το αγγίξεις ποτέ. Χθες γράψαμε για το Fabric, που κρατά διακόσιες εξήντα πέντε οδηγίες αλλά φορτώνει μία τη φορά. Αυτό εδώ κάνει το αντίθετο: φορτώνει όλη τη βιβλιοθήκη μαζί. Δεν είναι λάθος — είναι σκόπιμο, γιατί τα συστατικά ενός project είναι κάτι που το αγγίζεις συνεχώς. Δεν είναι όμως δωρεάν: μετριέται σε πλαίσιο, και μετριέται σε κάθε μήνυμα.

Η ετυμηγορία του κόστους. Αξίζει τον κόπο όταν το project σου έχει κιόλας Storybook και δουλεύεις τα συστατικά του καθημερινά — τότε τα 5.500 tokens είναι φθηνότερα από το να εξηγείς στον πράκτορα, κάθε φορά, ποια συστατικά έχεις και πώς χρησιμοποιούνται. Και δεν αξίζει καθόλου για ένα project χωρίς Storybook: εκεί πληρώνεις έναν κατάλογο εργαλείων για μια βιβλιοθήκη που δεν υπάρχει.

Ετυμηγορία

Αξίζει, με μια προϋπόθεση και έναν όρο. Η προϋπόθεση: να έχεις πραγματική βιβλιοθήκη συστατικών. Όσο περισσότερα συστατικά και όσο πιο αυστηρό το σύστημα σχεδιασμού σου, τόσο μεγαλύτερο το κέρδος, γιατί τόσο ακριβότερο είναι το λάθος που αποτρέπει. Αν έχεις τρία συστατικά, το πρόσθετο δεν έχει τι να μάθει.

Ο όρος: το μέγεθος του καταλόγου εργαλείων είναι το κόστος συμμετοχής, και είναι μόνιμο. Περίπου 5.500 tokens σε κάθε συνεδρία είναι σαν να κουβαλάς μαζί σου ένα μικρό εγχειρίδιο. Αν δουλεύεις με μικρά μοντέλα ή σφιχτό προϋπολογισμό, κλείσε την ομάδα που δεν χρειάζεσαι — η τεκμηρίωση δίνει διακόπτη ανά ομάδα και αυτό είναι καλή σχεδιαστική απόφαση.

Στα υπόλοιπα, το εργαλείο κάνει τη δουλειά του χωρίς θέατρο. Είναι επίσημο, είναι MIT, έχει 9.635.598 λήψεις τον μήνα στο npm, και δουλεύει με όποιον πελάτη μιλάει MCP. Το ότι η τεκμηρίωση δεν το βαφτίζει έτοιμο προϊόν αλλά προεπισκόπηση, το λέει ο ίδιος ο κατασκευαστής — και όποιος γράφει διεπαφές με πράκτορες αξίζει να το ξέρει πριν το βάλει στον αγωγό του.

Σκορ: 8 στα 10. Χάνει δύο βαθμούς: έναν για το κόστος σε tokens και σε πόρους, έναν για την κάλυψη framework, που σήμερα αφήνει απέξω αρκετά project.

Πηγές: https://storybook.js.org/docs/ai/mcp/overview · https://www.npmjs.com/package/@storybook/addon-mcp · https://www.npmjs.com/package/@storybook/mcp · https://github.com/storybookjs/mcp · https://github.com/storybookjs/storybook · https://github.com/storybookjs/storybook/releases/tag/v10.6.0 · https://storybook.js.org/addons/@storybook/addon-mcp · https://code.claude.com/docs/en/mcp · https://developers.openai.com/codex/mcp/ · https://docs.cursor.com/context/model-context-protocol