Storybook

Storybook is a workshop for components: each one is shown in its states, one story per state, outside the app it lives in. Teams use it to build components, to document them, and to test them, including accessibility checks. Its addon for agents, @storybook/addon-mcp, installs with npx storybook add @storybook/addon-mcp and serves an MCP server from the running Storybook.

• Development tools write stories and preview them in the agent’s chat.
• Docs tools help the agent find an existing component and use it the documented way. They read the components manifest, a JSON file Storybook builds from your stories and your components’ prop types, with their names, descriptions and usage examples.
• Testing tools run the component tests, accessibility checks among them, when Storybook Test is set up.

A team’s own Storybook can serve its agents without the team writing a server of its own. The components manifest turns typed props and doc comments into data an agent can query, and the test tools let the agent check its own work before a person does, the habit checking an agent’s output argues for. Among the 12 ranked systems, Microsoft Fluent 2 serves its docs as a Storybook, and its llms.txt is made from it.

• Preview. The AI features may change between releases.
• The manifest has gaps. The docs tools need a framework that makes a components manifest; Angular on Webpack and other frameworks do not yet.
• Local by default. The server runs with your Storybook’s dev server, on your machine or wherever you host it. Plan how agents in other places will reach it.

The addon is a quick route to agent access for a design system you own. See an MCP server for your design system for the wider choice, and the best AI-ready design systems, ranked for what agent access is worth on the board.