ContextQMD
Back to Storybook

Agentic setup

docs/ai/setup.mdx

10.4.03.9 KB
Original Source
<Callout variant="info" icon="🧪">

Storybook's agentic setup is currently only available for projects using the React renderer with the Vite builder. Support for additional renderers and builders will follow.

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

</Callout>

<If renderer={['react']}>

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:

<CodeSnippets path="prompt-install-storybook.md" />

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:

  1. Analyze the codebase: read providers, global CSS, portals, and data-fetching patterns.
  2. Configure the preview: set up decorators, global styles, and any framework-level providers in preview.tsx.
  3. Support portals: ensure portal roots exist in the Storybook preview DOM.
  4. Mock side effects: intercept network requests (via MSW), storage, timers, and navigation at the preview level rather than per-story.
  5. Write stories: add stories from up to 10 components, from simple to complex, tagging them as ai-generated for your review.
  6. Add play functions: implement interaction tests for the most important flows.
  7. Cover additional patterns: expand coverage across the components the agent has already touched.
  8. Verify: run Vitest against every new story to confirm it renders, and run the type checker.
  9. 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.
</If>

More AI resources