In a remarkably quick time, builders have gone from “AI what?” to “Which AI coding device do you utilize?” LLM-based coding brokers generate code quick and you’ll even spin up a number of brokers to deal with duties in parallel.
However there’s a catch. Left to their very own units, brokers produce unmergeable slop: incorrect props, hallucinated states, render errors. They generate new code as an alternative of reusing what you’ve constructed. And naively pointing them at your supply code to reference will burn tokens ($$$).
Instruments just like the Storybook MCP server clear up this by giving brokers succinct, curated context—part APIs, validated patterns, and check suites— in an optimized payload.
This text exhibits the way to mix your design system with LLM-based brokers and Storybook MCP to construct autonomously with out sacrificing high quality.
The frontend workflow is evolving
Historically, the workflow targeted on a human suggestions loop: write code, check it, and debug points. Now, we’re incorporating brokers to help at each stage. Builders describe necessities in plain language, and brokers generate code. These brokers write exams and hold documentation in sync with the codebase. They even assist in debugging code issues.
In idea, that is improbable. Nonetheless, points come up when you dig into the small print of this workflow.
Your agent isn’t adequate as-is
The principle downside is getting prime quality outcomes out of an agent. AI coding depends closely on inference—the flexibility to extrapolate subsequent steps from the present state of a venture. The standard agentic workflow consists of planning, constructing, and verifying. Nonetheless, there are gaps on this course of, resulting in diversified and sometimes subpar outcomes.
Mismanaged context results in skyrocketing prices
By default, the agent tries to learn your supply to determine issues out, however this results in data overload—the identical subject a brand new developer faces on their first day. Your part library has hundreds of recordsdata, inside utilities scattered throughout directories, and kind definitions buried six ranges deep. There may even be outdated experimental elements that have been by no means cleaned up. The agent hundreds all this into context and rapidly burns via tokens.
Token prices add up quickly. A single part technology job can eat 50K-100K tokens simply to load context earlier than the agent begins writing code. Scale this throughout your staff and a number of brokers operating in parallel, and also you’re coping with important value for minimal high quality enchancment.
Poor high quality and “common” output
With out correct context and steerage, brokers are inclined to default to patterns from their coaching information. They’ve encountered tens of millions of elements, main them to confidently generate “common elements” that aren’t more likely to align with the distinctive conventions of your venture. These are conventions that you just and your staff have spent years establishing—how variants compose, how tokens cascade, and the way accessibility is enforced. Whereas the generated code technically works, it’s not the precise match in your system.
Storybook MCP curates context for high quality output and fewer tokens
So how can we repair this?
Storybook is the industry-standard device for constructing and documenting UI elements in isolation. It already captures your part APIs, utilization patterns, and check suites—every thing that defines how your design system really works. The problem is making this data accessible to AI brokers.
Storybook MCP helps brokers comply with your patterns by equipping them with curated, machine-readable context. As an alternative of dumping your total codebase, Storybook generates a Element Manifest which packages all your part metadata, together with:
- Element APIs with validated prop varieties
- Utilization examples out of your Storybook tales
- JSDoc descriptions and tags
- Take a look at suites that encode your necessities
What’s MCP?
“Mannequin Context Protocol is an open-source customary for connecting AI functions to exterior programs.”
The Element Manifest is an optimized payload, permitting an agent to parse a part’s interface, its variants, its design token bindings, and instance utilization—in a fraction of the tokens it could take to parse the supply file, its dependencies, and the encircling codebase.
High quality goes up and prices go down as a result of context is purposeful. The agent sees the way you really use elements, what patterns you’ve validated, what exams should go. It generates code that matches your system as a result of it’s working out of your system’s information, not generic coaching information.
Utilizing Storybook MCP with Claude Code
To get began, you’ll want a React-based design system that makes use of Storybook model 10.1 or later. In case you don’t have one, I recommend utilizing my fork of the Reshaped design system.
It’s already outfitted with the MCP addon and able to go: https://github.com/winkerVSbecks/reshaped.
In case you’re utilizing this pattern venture, you may skip the first step.
Notice: Storybook MCP is an experimental function below energetic improvement. To remain up to date on the most recent modifications, comply with the Storybook weblog.
1. Arrange Storybook MCP
Allow the part manifest function in your .storybook/fundamental.ts file. I additionally suggest the experimentalCodeExamples function. Although optionally available, it aligns your addon-docs supply snippets with the manifest content material.
// .storybook/fundamental.ts
export default {
// tales: [] and so forth.
options: {
experimentalComponentsManifest: true,
experimentalCodeExamples: true,
}
}When you begin your Storybook npm run storybook, you must have the ability to see the manifest at: http://localhost:PORT/manifests/elements.html
Your manifest may present errors and warnings, which might appear alarming, nevertheless it’s anticipated. You possibly can handle these later to optimize the manifest. When you verify that the manifest is functioning, set up the MCP addon to put it to use.
npx storybook add @storybook/addon-mcpIt’s best to now have the ability to browse the MCP server in your Storybook at http://localhost:PORT/mcp
2. Utilizing Storybook MCP with Claude Code
To make use of this addon with Claude Code, use the built-in MCP configuration command:
- Begin Storybook: Be sure that your Storybook improvement server is operating:
npm run storybook- Add the MCP server to Claude Code by operating the next command:
claude mcp add storybook-mcp --transport http http://localhost:PORT/mcp --scope venture- Begin Claude Code with a system degree immediate to make sure your agent makes use of the Storybook instruments when applicable
claude --system-prompt "Earlier than doing any UI, frontend or React improvement, ALWAYS name the storybook MCP server to get additional directions."- Confirm that MCP is enabled through the use of the
/mcp recordcommand
In case you desire a special coding agent, take a look at the addon documentation for setup guides for different in style purchasers.
3. Run your first immediate
We’re all set to run our first immediate. Give your agent the next immediate to generate a FlightBooking part.
Create a flight reserving part that features:
- An autocomplete part for selecting supply and vacation spot from the next record of airports:
SYD: – Sydney Airport, Australia
MEL: – Melbourne Airport (Tullamarine), Australia
LAX: – Los Angeles Worldwide Airport, USA
JFK: – John F. Kennedy Worldwide Airport, New York, USA
LHR: – Heathrow Airport, London, UK
CDG: – Charles de Gaulle Airport, Paris, France
ATL: – Hartsfield–Jackson Atlanta Worldwide Airport, USA
DXB: – Dubai Worldwide Airport, UAE
HKG: – Hong Kong Worldwide Airport, Hong Kong
BNE: – Brisbane Airport, Australia
PER: – Perth Airport, Australia
DFW: – Dallas Fort Value Worldwide Airport, USA
- A toggle button for return vs a technique
- One or two date selects that when clicked on triggers a popover with a calendar widget.
The calendar widget should not enable choosing dates prior to now and the return flight have to be after the outward flight.Claude will plan and execute this job. Alongside the way in which, you’ll see it use the storybook-mcp instruments to acquire construct directions, part documentation, and story URLs.
As soon as full, you must see a practical FlightBooking part in your Storybook, constructed utilizing elements out of your design system.
Seeing newly generated elements immediately in your Storybook is a game-changer. It affords a fast suggestions loop, eliminating the necessity to click on across the app to search out the precise state to view a part after every immediate execution. You possibly can immediate and evaluation instantly.
4. Host your MCP server
We’ve been utilizing a neighborhood Storybook MCP server, however you too can make it accessible to customers of your design system by internet hosting it. The best technique to host your MCP server is thru Chromatic. With the part manifest enabled, Chromatic will robotically create an MCP server as a part of the publishing course of.
To get began with Chromatic, join and create a brand new venture. Use your venture token to publish your Storybook by operating:
npx chromatic --project-token <your-project-token>
As soon as printed, you may entry your venture’s MCP server at: https://your-published-storybook-url/mcp
Utilizing your coding agent with the hosted server is much like utilizing the native MCP server, besides you’ll use the URL for the hosted server. I like to recommend utilizing permalinks to create persistent URLs that purchasers can level to:
claude mcp add storybook-mcp --transport http https://canary--6931b94e8a4ed8a6e74c7ffa.chromatic.com/mcp --scope ventureConstruct quicker with out drowning in AI slop
The promise of AI coding brokers is actual, however provided that you may meet three essential necessities:
Top quality: Keep away from AI slop. Generated code ought to align along with your design system’s conventions, not depend on generic patterns from coaching information.
Quick suggestions: Don’t waste time ready for outcomes. Complicated multi-agent programs can take minutes and even hours to finish duties. For each day work, you want fast suggestions loops.
Price environment friendly: Keep away from exorbitant device bills. Token prices can skyrocket when brokers load total codebases into context for each job.
Storybook MCP addresses all three points by offering brokers with precisely what they want: curated part metadata, validated patterns, and check suites in an optimized payload. The result’s code that matches seamlessly into your codebase, generated in seconds as an alternative of minutes, and at a fraction of the token value.Reminder: Storybook MCP is an experimental function nonetheless in improvement. To remain up to date, think about signing up for our Early Entry Program.
