--- title: How LLMs Are Reshaping Web Development Right Now | daily.dev description: Storybook's team is building an MCP server to help AI coding agents (like Copilot or Claude Code) discover and reuse existing design system components instead... canonical: https://daily.dev/posts/how-llms-are-reshaping-web-development-right-now-xiieajdob twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How LLMs Are Reshaping Web Development Right Now | daily.dev og:description: Storybook's team is building an MCP server to help AI coding agents (like Copilot or Claude Code) discover and reuse existing design system components instead... og:url: https://daily.dev/posts/how-llms-are-reshaping-web-development-right-now-xiieajdob og:image: https://api.daily.dev/og/posts/xIIeaJdOB.png og:image:alt: How LLMs Are Reshaping Web Development Right Now og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How LLMs Are Reshaping Web Development Right Now **[devtools-fm](https://daily.dev/sources/devtoolsfm)** · 12 min read · 5 upvotes · 0 comments ## Summary Storybook's team is building an MCP server to help AI coding agents (like Copilot or Claude Code) discover and reuse existing design system components instead of generating generic code from scratch. The approach introduces a 'component manifest' — a JSON file exported from Storybook 10.1 containing component metadata, prop types, JSDoc descriptions, and usage examples converted from CSF stories to JSX. The MCP server exposes this data to agents so they can query available components, fetch documentation, and automatically write Storybook stories for newly generated UI. Future plans include running story-based tests through the MCP server so agents can iterate on failures autonomously. Chromatic, the commercial platform backing Storybook, has also expanded with features like accessibility regression testing with baseline tracking, flake-resistant 'steady snap' screenshots, and TurboSnap for git-aware selective snapshotting to reduce CI costs. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How does the Storybook MCP server help AI coding agents use my existing design system components? The Storybook MCP server exposes tools that let an agent query a list of available components, then request usage examples, prop types, and written documentation for the relevant ones before generating UI code. This solves the common problem where agents default to plain Tailwind classes and ignore components living in a separate design system package. It also auto-writes Storybook stories for newly generated components. _Developers wiring coding agents into design systems can follow MCP integration progress on daily.dev._ ### What is the Storybook component manifest introduced in Storybook 10.1? The component manifest is a JSON export, added as an opt-in feature in Storybook 10.1, containing every component along with usage examples converted from CSF stories into JSX, JSDoc descriptions, and auto-inferred TypeScript prop types. It is designed to feed structured component data to tools like the Storybook MCP server or external documentation sites. _Teams tracking new Storybook releases and features can keep up on daily.dev._ ### What is TurboSnap in Chromatic and how does it reduce visual testing costs? TurboSnap is a Chromatic feature that inspects git changes against the module graph to determine which stories are actually affected by a code change, then only takes and bills for snapshots of those affected stories rather than the entire Storybook. For example, changing only a button component would trigger snapshots for just the five stories that use it, cutting both time and cost. _Teams optimizing visual regression testing costs can track tooling changes like this on daily.dev._ ## Similar posts on daily.dev - [Supercharge Your Design System with LLMs and Storybook MCP](https://daily.dev/posts/supercharge-your-design-system-with-llms-and-storybook-mcp-sli8efb8e) · Codrops · 1 upvotes · 1 comments - [Storybook MCP for React](https://daily.dev/posts/storybook-mcp-for-react-x35ultaaf) · Storybook · 104 upvotes · 4 comments - [Storybook MCP for AI-aware component libraries](https://daily.dev/posts/storybook-mcp-for-ai-aware-component-libraries-cqjtrtq0r) · LogRocket · 1 upvotes · 1 comments - [Storybook MCP sneak peek](https://daily.dev/posts/storybook-mcp-sneak-peek-9gnahslhl) · Storybook · 96 upvotes · 1 comments --- Tags: [#mcp](https://daily.dev/tags/mcp), [#design-systems](https://daily.dev/tags/design-systems), [#storybook](https://daily.dev/tags/storybook) [View this post on daily.dev](https://daily.dev/posts/how-llms-are-reshaping-web-development-right-now-xiieajdob) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How LLMs Are Reshaping Web Development Right Now","url":"https://daily.dev/posts/how-llms-are-reshaping-web-development-right-now-xiieajdob","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-llms-are-reshaping-web-development-right-now-xiieajdob"},"datePublished":"2026-07-18T14:06:09.310Z","dateModified":"2026-09-14T08:57:13.775Z","description":"Storybook's team is building an MCP server to help AI coding agents (like Copilot or Claude Code) discover and reuse existing design system components instead...","image":"https://i.ytimg.com/vi/py9Srv9j5jo/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/py9Srv9j5jo/sddefault.jpg","isAccessibleForFree":true,"articleSection":"devtools-fm","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"devtools-fm","logo":"https://media.daily.dev/image/upload/s--yvUzE7NR--/f_auto/v1717745371/logos/devtoolsfm","url":"https://daily.dev/sources/devtoolsfm"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-llms-are-reshaping-web-development-right-now-xiieajdob","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"mcp,design-systems,storybook","timeRequired":"PT12M","video":{"@type":"VideoObject","name":"How LLMs Are Reshaping Web Development Right Now","description":"Storybook's team is building an MCP server to help AI coding agents (like Copilot or Claude Code) discover and reuse existing design system components instead...","thumbnailUrl":"https://i.ytimg.com/vi/py9Srv9j5jo/sddefault.jpg","uploadDate":"2026-07-18T14:06:09.310Z","duration":"PT12M","url":"https://api.daily.dev/r/xIIeaJdOB","embedUrl":"https://www.youtube.com/embed/py9Srv9j5jo"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"devtools-fm","item":"https://daily.dev/sources/devtoolsfm"},{"@type":"ListItem","position":3,"name":"How LLMs Are Reshaping Web Development Right Now"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-llms-are-reshaping-web-development-right-now-xiieajdob#faq","mainEntity":[{"@type":"Question","name":"How does the Storybook MCP server help AI coding agents use my existing design system components?","acceptedAnswer":{"@type":"Answer","text":"The Storybook MCP server exposes tools that let an agent query a list of available components, then request usage examples, prop types, and written documentation for the relevant ones before generating UI code. This solves the common problem where agents default to plain Tailwind classes and ignore components living in a separate design system package. It also auto-writes Storybook stories for newly generated components. Developers wiring coding agents into design systems can follow MCP integration progress on daily.dev."}},{"@type":"Question","name":"What is the Storybook component manifest introduced in Storybook 10.1?","acceptedAnswer":{"@type":"Answer","text":"The component manifest is a JSON export, added as an opt-in feature in Storybook 10.1, containing every component along with usage examples converted from CSF stories into JSX, JSDoc descriptions, and auto-inferred TypeScript prop types. It is designed to feed structured component data to tools like the Storybook MCP server or external documentation sites. Teams tracking new Storybook releases and features can keep up on daily.dev."}},{"@type":"Question","name":"What is TurboSnap in Chromatic and how does it reduce visual testing costs?","acceptedAnswer":{"@type":"Answer","text":"TurboSnap is a Chromatic feature that inspects git changes against the module graph to determine which stories are actually affected by a code change, then only takes and bills for snapshots of those affected stories rather than the entire Storybook. For example, changing only a button component would trigger snapshots for just the five stories that use it, cutting both time and cost. Teams optimizing visual regression testing costs can track tooling changes like this on daily.dev."}}]} ```