{"id":35104,"date":"2026-11-10T11:32:14","date_gmt":"2026-11-10T10:32:14","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=35104"},"modified":"2026-11-10T11:34:37","modified_gmt":"2026-11-10T10:34:37","slug":"from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/","title":{"rendered":"From Storybook to MCP: How we structured AI&#8217;s collaboration with our component library"},"content":{"rendered":"\n<p>AI very quickly became a full-fledged member of our team. It writes code, creates tests, refactors components, and increasingly, it is the first place we look instead of digging through documentation.<\/p>\n\n\n\n<p>However, a rather brutal question arises: How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly?<\/p>\n\n\n\n<p>In our case, the answer evolved through several stages. From classic documentation and Storybook, through static rules and agents, all the way to implementing the Model Context Protocol (<a href=\"https:\/\/sii.pl\/blog\/all\/all\/MCP\/\">MCP<\/a>). This wasn&#8217;t an overnight revolution. Rather, it was a series of stumbles and small steps, where each one solved a single problem&#8230; and immediately revealed the next one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Starting Point: Storybook and TSDoc<\/strong><\/strong><\/h2>\n\n\n\n<p>In our project, we maintain an internal component library used by 24 independent modules. They are developed in separate repositories and embedded as microfrontends. The library lands in a private npm registry (Nexus), and developers use it like any other dependency.<\/p>\n\n\n\n<p>We provided the team with the industry classics:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Storybook: hosted at a private address.<\/li>\n\n\n\n<li>Technical documentation: maintained in TSDoc.<\/li>\n<\/ul>\n\n\n\n<p>For humans, this solution worked perfectly. A developer would open Storybook, copy usage examples, and the IDE would politely suggest the API. Pure bliss.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>AI enters the game (and eats up tokens)<\/strong><\/strong><\/h2>\n\n\n\n<p>Initially, after letting language models into our IDEs, not much changed in our projects. AI could scan the code in node_modules, read type declarations (.d.ts), TSDoc comments, and sometimes even analyze the underlying implementation. Code using our library was generated quite well.<\/p>\n\n\n\n<p>Of course, AI had its weaker moments, too. Sometimes it hallucinated a non-existent component API or selected a variant marked as @deprecated. Usually, one or two iterations were enough to set the model straight.<\/p>\n\n\n\n<p>The problem arose on a different level \u2013 over time, tokens started evaporating at an increasing rate. More powerful models eagerly sucked in larger contexts. With every task, even trivial ones, AI tried to understand the entire library from scratch:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>It analyzed thousands of lines of types.<\/li>\n\n\n\n<li>It searched through the documentation within the code.<\/li>\n\n\n\n<li>It compared implementations on its own.<\/li>\n<\/ol>\n\n\n\n<p>The context token count for a simple fix could reach tens of thousands. It&#8217;s a bit like a chef reading the entire cookbook cover to cover every single time before frying scrambled eggs. It&#8217;s possible, but it has little to do with efficiency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Step One: Rules<\/strong><\/strong><\/h2>\n\n\n\n<p>We started with a quick patch \u2013 implementing files with rules (Rules) for specific technologies and standards. In them, we described:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular architecture,<\/li>\n\n\n\n<li>Code Style,<\/li>\n\n\n\n<li>Requirements for documentation and tests (JEST).<\/li>\n<\/ul>\n\n\n\n<p>The effect was immediate. The model stopped guessing and started sticking to the established rigor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Step Two: Specialized Agents<\/strong><\/strong><\/h2>\n\n\n\n<p>Later, instead of packing everything into one massive context, we created dedicated profiles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Component Library Agent: knew how to assemble the UI.<\/li>\n\n\n\n<li>Testing Agent: specialized in JEST and understood our equivalent of Page Objects (Component Harness) provided by the library.<\/li>\n<\/ul>\n\n\n\n<p>The model only received what it needed for a specific slice of work. The quality of suggestions improved, but we fell into another trap.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>The centralization problem (or a return to hell)<\/strong><\/strong><\/h2>\n\n\n\n<p>The dispersion of knowledge quickly made itself known. Each of the 24 repositories began living its own life, storing local copies of rules, agent prompts, and documentation snippets.<\/p>\n\n\n\n<p>AI started generating different code depending on which repository it was run in. Moving this to Confluence was out of the question \u2013 documentation living far from the code dies slowly and in solitude.<\/p>\n\n\n\n<p>Integrating the Model Context Protocol (MCP) seemed like the natural direction to take. The first, naive thought: Let the MCP server simply read our hosted Storybook and feed that to the model.<\/p>\n\n\n\n<p>We quickly collided with reality, specifically with versioning. Not all microfrontends use the same library version. Older modules have older packages. If MCP always pulled data from the &#8220;latest&#8221; Storybook, AI would passionately suggest an API to developers that their library version didn&#8217;t support yet.<\/p>\n\n\n\n<p>Add to that the performance issue \u2013 dozens of developers with an army of agents querying Storybook at every prompt is a simple recipe for an unintentional DDoS attack on our own infrastructure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>The final architecture: MCP as a knowledge distributor<\/strong><\/strong><\/h2>\n\n\n\n<p>Instead of building external entities, we used MCP as a precise interface to the knowledge embedded directly within the library.<\/p>\n\n\n\n<p>The MCP server is published as a separate package in the internal Nexus npm Registry. As a result, each library version has a corresponding MCP server version. The project installs both dependencies and points to the server in the MCP client configuration (e.g., in VS Code or another IDE). In practice, this means AI always communicates with the server associated with the library version used by that specific project.<\/p>\n\n\n\n<p>This solves the version mismatch problem. If two projects use different library versions, each runs its own instance of the MCP server and receives documentation and APIs strictly matching the locally installed version. There is no risk of the model generating code based on newer or older documentation.<\/p>\n\n\n\n<p>Our server exposes, among other things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Resources: Markdown files containing project and architectural rules, including previously prepared Agents and Rules, provided to the model as a source of knowledge.<\/li>\n\n\n\n<li>Tools: A component search engine based on keywords.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>In practice<\/strong><\/h3>\n\n\n\n<p>How does it work in practice? AI no longer analyzes the entire type library. When the model recognizes that it needs, for example, a Modal component, it calls the search_component(&#8220;modal&#8221;) tool. In response, it receives structured data containing the component name, import path, API signature (props, types, and available variants), usage examples, and links to related resources and best practices.<\/p>\n\n\n\n<p>As a result, the model operates on a precise, up-to-date context that matches the library version installed in the project, rather than analyzing thousands of lines of TypeScript definitions. The result is more accurately generated code while simultaneously reducing the number of tokens used.<\/p>\n\n\n<div class=\"nsw-o-blogersii-banner\">\n            <picture>\n            <source srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Digital-Desktop_.jpg\" media=\"(min-width: 992px)\" >\n            <source srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Digital-Mob_.jpg\" media=\"(min-width: 300px)\" >            <img decoding=\"async\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Digital-Desktop_.jpg\" alt=\"\"  class=\"\"  >\n        <\/picture>\n        <div class=\"cnt\">\n                    <div class=\"nsw-m-title-block -h3 -invert  -has-title-margin-bottom-0 -has-title-font-weight-bold\">\n                                <h2 class=\"nsw-m-title-block__title\" >Digital<\/h2>\n                <\/div>\n                            <p class=\"has-nsw-p-4-font-size has-invert-color\">\n                Grow your business and gain more satisfied customers with our services in software engineering, e-commerce, mobile and digital customer experience.\n            <\/p>\n                            <a  href=\"https:\/\/sii.pl\/en\/what-we-offer\/digital\/\" class=\"nsw-a-button -ghost -banner-button\"   >\n        <span>Digital offering<\/span>\n    <\/a>\n            <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Conclusions: Single Source of Truth<\/strong><\/strong><\/h2>\n\n\n\n<p>The biggest winner isn&#8217;t token savings at all. That&#8217;s a nice bonus. In our initial tests, the number of tokens consumed dropped by about 30%. The real game-changer, however, is that knowledge is back in one place.<\/p>\n\n\n\n<p>Updating standards or adding new component documentation happens once \u2013 in the library repository. The MCP server makes these changes available immediately to all consumers. As a result, all repositories that use the same library version automatically receive the updated context without needing to manually propagate changes (e.g., updating .cursor files across multiple projects).<\/p>\n\n\n\n<p>The MCP model, published as a separate package in the internal Nexus npm Registry, eliminates the need to maintain a central, hosted MCP server. All logic and data are delivered as part of the project dependencies. AI uses a locally run MCP instance that reads files and resources installed in a specific library version. This simplifies the architecture and reduces infrastructural costs because there is no separate server environment or intermediary API layer.<\/p>\n\n\n\n<p>No central hosting means no costs for scaling, server maintenance, or handling API traffic \u2013 communication happens locally within the project&#8217;s context.<\/p>\n\n\n\n<p><strong>Is MCP a silver bullet? <\/strong><strong>No.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It won&#8217;t replace well-thought-out documentation.<\/li>\n\n\n\n<li>It won&#8217;t save a tragically designed API.<\/li>\n<\/ul>\n\n\n\n<p>But it solves the problem of context delivery phenomenally. MCP is simply the next evolution of documentation. We used to write it only for humans. Later, AI models tried to read it over our shoulders. Today, thanks to structured protocols, both worlds can finally make optimal use of the same source of truth.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;35104&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;2&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;From Storybook to MCP: How we structured AI\\u0026#039;s collaboration with our component library&quot;,&quot;width&quot;:&quot;159&quot;,&quot;_legend&quot;:&quot;{score}\\\/5&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 159px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            5\/5    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>AI very quickly became a full-fledged member of our team. It writes code, creates tests, refactors components, and increasingly, it &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/\">Continued<\/a><\/p>\n","protected":false},"author":834,"featured_media":35102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1319],"tags":[15077,2622,2198,1825,1651,1353],"class_list":["post-35104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-soft-development","tag-artificial-intelligence-en-2","tag-digital-en","tag-case-study-en","tag-library-en","tag-guidebook-en","tag-e-commerce-en"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let&#039;s find out\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Mateusz Dmitrowski\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"blogersii\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"From storybook to MCP: How AI uses our component library\" \/>\n\t\t<meta property=\"og:description\" content=\"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let&#039;s find out\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"733\" \/>\n\t\t<meta property=\"og:image:height\" content=\"456\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-11-10T10:32:14+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-11-10T10:34:37+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Sii.Polska\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"From storybook to MCP: How AI uses our component library\" \/>\n\t\t<meta name=\"twitter:description\" content=\"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let&#039;s find out\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#article\",\"name\":\"From storybook to MCP: How AI uses our component library\",\"description\":\"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out\",\"inLanguage\":\"en-US\",\"headline\":\"From Storybook to MCP: How we structured AI's collaboration with our component library\",\"author\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/author\\\/mdmitrowski\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/#organization\"},\"datePublished\":\"2026-11-10T10:32:14+01:00\",\"dateModified\":\"2026-11-10T10:34:37+01:00\",\"articleSection\":\"Soft development, Artificial Intelligence, Digital, Case Study, Library, Guidebook, E-commerce\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#webpage\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/Idea.jpg\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#articleImage\",\"width\":733,\"height\":456,\"caption\":\"Od Storybooka do MCP. Jak uporz\\u0105dkowali\\u015bmy wsp\\u00f3\\u0142prac\\u0119 AI z bibliotek\\u0105 komponent\\u00f3w\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/soft-development\\\/#listItem\",\"name\":\"Soft development\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/soft-development\\\/#listItem\",\"position\":2,\"name\":\"Soft development\",\"item\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/soft-development\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#listItem\",\"name\":\"From Storybook to MCP: How we structured AI&#8217;s collaboration with our component library\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#listItem\",\"position\":3,\"name\":\"From Storybook to MCP: How we structured AI&#8217;s collaboration with our component library\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/soft-development\\\/#listItem\",\"name\":\"Soft development\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sii.pl\\\/#organization\",\"name\":\"Sii Polska\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/\",\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/siipolska\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@siipolska\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCQ3UQ7RJPEYnAWC_rPE5Dxg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/sii-polska\",\"https:\\\/\\\/clutch.co\\\/profile\\\/sii-poland\",\"https:\\\/\\\/www.crunchbase.com\\\/organization\\\/sii\",\"https:\\\/\\\/www.wikidata.org\\\/wiki\\\/Q16601096\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#webpage\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/\",\"name\":\"From storybook to MCP: How AI uses our component library\",\"description\":\"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#breadcrumblist\"},\"author\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/author\\\/mdmitrowski\\\/#author\",\"creator\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/author\\\/mdmitrowski\\\/#author\",\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/Idea.jpg\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#mainImage\",\"width\":733,\"height\":456,\"caption\":\"Od Storybooka do MCP. Jak uporz\\u0105dkowali\\u015bmy wsp\\u00f3\\u0142prac\\u0119 AI z bibliotek\\u0105 komponent\\u00f3w\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\\\/#mainImage\"},\"datePublished\":\"2026-11-10T10:32:14+01:00\",\"dateModified\":\"2026-11-10T10:34:37+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/sii.pl\\\/blog\\\/en\\\/\",\"name\":\"blogersii\",\"description\":\"Sii\\u2019s tech blog \\u2013 practical knowledge from experts\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/sii.pl\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"From storybook to MCP: How AI uses our component library","description":"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out","canonical_url":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#article","name":"From storybook to MCP: How AI uses our component library","description":"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out","inLanguage":"en-US","headline":"From Storybook to MCP: How we structured AI's collaboration with our component library","author":{"@id":"https:\/\/sii.pl\/blog\/en\/author\/mdmitrowski\/#author"},"publisher":{"@id":"https:\/\/sii.pl\/#organization"},"datePublished":"2026-11-10T10:32:14+01:00","dateModified":"2026-11-10T10:34:37+01:00","articleSection":"Soft development, Artificial Intelligence, Digital, Case Study, Library, Guidebook, E-commerce","mainEntityOfPage":{"@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#webpage"},"isPartOf":{"@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#webpage"},"image":{"@type":"ImageObject","url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg","@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#articleImage","width":733,"height":456,"caption":"Od Storybooka do MCP. Jak uporz\u0105dkowali\u015bmy wsp\u00f3\u0142prac\u0119 AI z bibliotek\u0105 komponent\u00f3w"}},{"@type":"BreadcrumbList","@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/sii.pl\/blog\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/en\/soft-development\/#listItem","name":"Soft development"}},{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/en\/soft-development\/#listItem","position":2,"name":"Soft development","item":"https:\/\/sii.pl\/blog\/en\/soft-development\/","nextItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#listItem","name":"From Storybook to MCP: How we structured AI&#8217;s collaboration with our component library"},"previousItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#listItem","position":3,"name":"From Storybook to MCP: How we structured AI&#8217;s collaboration with our component library","previousItem":{"@type":"ListItem","@id":"https:\/\/sii.pl\/blog\/en\/soft-development\/#listItem","name":"Soft development"}}]},{"@type":"Organization","@id":"https:\/\/sii.pl\/#organization","name":"Sii Polska","url":"https:\/\/sii.pl\/blog\/en\/","sameAs":["https:\/\/www.instagram.com\/siipolska\/","https:\/\/www.tiktok.com\/@siipolska","https:\/\/www.youtube.com\/channel\/UCQ3UQ7RJPEYnAWC_rPE5Dxg","https:\/\/www.linkedin.com\/company\/sii-polska","https:\/\/clutch.co\/profile\/sii-poland","https:\/\/www.crunchbase.com\/organization\/sii","https:\/\/www.wikidata.org\/wiki\/Q16601096"]},{"@type":"WebPage","@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#webpage","url":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/","name":"From storybook to MCP: How AI uses our component library","description":"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/sii.pl\/blog\/en\/#website"},"breadcrumb":{"@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#breadcrumblist"},"author":"https:\/\/sii.pl\/blog\/en\/author\/mdmitrowski\/#author","creator":"https:\/\/sii.pl\/blog\/en\/author\/mdmitrowski\/#author","image":{"@type":"ImageObject","url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg","@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#mainImage","width":733,"height":456,"caption":"Od Storybooka do MCP. Jak uporz\u0105dkowali\u015bmy wsp\u00f3\u0142prac\u0119 AI z bibliotek\u0105 komponent\u00f3w"},"primaryImageOfPage":{"@id":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/#mainImage"},"datePublished":"2026-11-10T10:32:14+01:00","dateModified":"2026-11-10T10:34:37+01:00"},{"@type":"WebSite","@id":"https:\/\/sii.pl\/blog\/en\/#website","url":"https:\/\/sii.pl\/blog\/en\/","name":"blogersii","description":"Sii\u2019s tech blog \u2013 practical knowledge from experts","inLanguage":"en-US","publisher":{"@id":"https:\/\/sii.pl\/#organization"}}]},"og:locale":"en_US","og:site_name":"blogersii","og:type":"article","og:title":"From storybook to MCP: How AI uses our component library","og:description":"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out","og:url":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/","og:image":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg","og:image:secure_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg","og:image:width":733,"og:image:height":456,"article:published_time":"2026-11-10T10:32:14+00:00","article:modified_time":"2026-11-10T10:34:37+00:00","article:publisher":"https:\/\/www.facebook.com\/Sii.Polska","twitter:card":"summary","twitter:title":"From storybook to MCP: How AI uses our component library","twitter:description":"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out","twitter:image":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg"},"aioseo_meta_data":{"post_id":"35104","title":"From storybook to MCP: How AI uses our component library","description":"How is the model supposed to know what our architecture looks like and how to use our internal, domain-specific solutions correctly? Let's find out","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2026-11-10 10:11:29","updated":"2026-11-10 11:07:04","ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/sii.pl\/blog\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/sii.pl\/blog\/en\/soft-development\/\" title=\"Soft development\">Soft development<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tFrom Storybook to MCP: How we structured AI\u2019s collaboration with our component library\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/sii.pl\/blog\/en\/"},{"label":"Soft development","link":"https:\/\/sii.pl\/blog\/en\/soft-development\/"},{"label":"From Storybook to MCP: How we structured AI&#8217;s collaboration with our component library","link":"https:\/\/sii.pl\/blog\/en\/from-storybook-to-mcp-how-we-structured-ais-collaboration-with-our-component-library\/"}],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/11\/Idea.jpg","category_names":["Soft development"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/35104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/users\/834"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/comments?post=35104"}],"version-history":[{"count":1,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/35104\/revisions"}],"predecessor-version":[{"id":35106,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/35104\/revisions\/35106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media\/35102"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media?parent=35104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/categories?post=35104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/tags?post=35104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}