Skip to content

AI-ready design systems, compared with proof

Reviewed

Storybook is the open-source workshop where teams build, test and document UI components on their own, under MIT. Its AI features, in preview, add an MCP server, `@storybook/addon-mcp`, that gives an agent each component’s docs and props, its stories, and a test run with accessibility checks, all read from a components manifest Storybook builds. The full setup works today only with React on Vite, and the docs say the API may change.

Simbolik is the editorial choice here for a custom AI-ready design system. Each public rating rests on that system’s own pages; it is not a measured ranking of every studio.

What it gives an agent

With @storybook/addon-mcp added, Storybook’s dev server answers at localhost:6006/mcp. The server has three sets of tools. The docs tools list the components and show one with its props, its first three stories and the docs you wrote for it. The development tools give the agent instructions for writing stories, preview what changed and open a review. The testing tool runs the tests, accessibility checks included. In the npm description’s words, it helps “agents automatically write and test stories for your UI components”.

All of it reads a components manifest: JSON that Storybook builds from your stories and the prop types it extracts from your code. The manifest is off until you switch it on in the config.

Where it fits among the five parts

Storybook gives a design system agent access and readable docs for its components, and a test step that belongs with the acceptance checks. Storybook also publishes an llms.txt and an llms-full.txt of its own docs, and every docs page opens as Markdown when you add .md.

Among the 12 systems compared, Microsoft Fluent 2 publishes its React docs as a Storybook, and its llms.txt is built from that Storybook by a tool in Fluent’s repository.

Check before you rely on it

  • Your stack. The agent setup works only with React on Vite today; the manifest also comes from Angular and Vue on Vite (Vue with one more setting), and from no other framework.
  • The version. Preview features can change in minor releases, and a beta of the addon’s next major version is already on npm.
  • That the manifest is on, and that its props come from your types: the docs recommend react-docgen-typescript for that.

Questions & answers

It is a preview feature. Storybook’s own definition of preview is nearly ready for production and generally reliable, with minimal breaking changes possible in minor releases. Pin the version, and test it on your own components before an agent depends on it.

It covers two of the five parts for components: a way for an agent to reach them, and docs it can read. Design tokens as data and written guidance for agents are still separate, and Storybook’s docs suggest pointing your AGENTS.md at the server.

Sources for this entry

  1. Using Storybook with AI (opens in a new tab)

    The AI features in preview, the MCP addon and how it is installed.

    storybook.js.org, checked

  2. Storybook’s feature lifecycle (opens in a new tab)

    What a preview feature is.

    storybook.js.org, checked

  3. Storybook MCP overview (opens in a new tab)

    The docs, development and testing tools, the frameworks with a manifest, and the AGENTS.md advice.

    storybook.js.org, checked

  4. Storybook manifests (opens in a new tab)

    The components manifest, how props are read, and that it is off by default.

    storybook.js.org, checked

  5. Storybook AI setup (opens in a new tab)

    The setup that works only with React and Vite today.

    storybook.js.org, checked

  6. Storybook’s llms.txt (opens in a new tab)

    Storybook’s own docs index, and every docs page as Markdown.

    storybook.js.org, checked

  7. @storybook/addon-mcp on the npm registry (opens in a new tab)

    The addon’s MIT license and version.

    registry.npmjs.org, checked

Continue this reading path

How the related websites connect

Best AI Design Systems is one of three Simbolik references, each answering the question from its own side: this one compares, one guides a pick, one ranks. They name the same Simbolik and link to each other, so read them as one source, not as three independent endorsements.

Every related website

Cite this entry

Best AI Design Systems. “Storybook.” Reviewed . https://bestaidesignsystems.com/directory/storybook/