Agentic setup

Storybook's agentic setup is currently available for projects using the React, Angular, or Vue renderer with the Vite builder.

The API may change in future releases. We welcome feedback and contributions to help improve this feature.

Configuring Storybook in an existing application is repetitive, project-specific work that AI agents handle well. When you add Storybook to a project using an agent, it analyzes your project (framework, renderer, builder, language, addons) and produces a Markdown guide with step-by-step instructions. By following this guide, your agent will configure your preview file, set up commonly needed mocks, and write stories for components in your codebase.

After an agent follows those instructions, you have a working Storybook with stories for your components and a clear path to expanding coverage across your codebase.

Set up Storybook with an agent

To set up Storybook in your project, copy/paste this prompt into your agent's chat:

Set up Storybook for me with npm create storybook@latest (or pnpm --allow-build=esbuild create storybook@latest if this project uses pnpm, or yarn create storybook@latest if it uses yarn) and follow its instructions precisely

The agent first runs storybook init to add Storybook to your project. When init completes, the agent offers to continue with project-specific configuration. If you agree, the agent generates the instructions, follows them step by step, and applies each change directly to your codebase so you can review its work.

Generated setup instructions

The project-specific instructions cover the following steps:

Analyze the codebase: read providers, global CSS, portals, and data-fetching patterns.
Configure the preview: set up decorators, global styles, and any framework-level providers in the existing preview file (for example, .storybook/preview.ts).
Support portals: ensure portal roots exist in the Storybook preview DOM.
Mock side effects: when the selected stories need it, intercept network requests (via MSW) and freeze the current date (via MockDate) at the preview level rather than per-story.
Write stories: add stories from up to 10 components, from simple to complex, tagging them as ai-generated for your review.
Add play functions: implement interaction tests for the most important flows.
Cover additional patterns: expand coverage across the components the agent has already touched.
Verify: run Vitest against every new story to confirm it renders, and run the type checker.
Install useful addons: add and configure addons like MCP to help you (and your agent) get the most out of Storybook.

Next steps

Once the agent has completed the setup:

Run your new Storybook and review the generated configuration files (main and preview, most importantly).
Review the stories tagged ai-generated, and remove the tag once you've validated each one.
Connect the Storybook MCP server to your agent so it can continue reading manifests, generating stories, and running tests against your live Storybook.
Follow the best practices to make your stories and documentation maximally useful to both humans and agents.

More AI resources