Agentic review feature status
Agentic review is currently experimental and the experience may change in future releases. Feedback and contributions are welcome to help improve this feature.
agentic-review
27 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Agentic review purpose
Agentic review allows agents to generate a summary of their work, including a curated selection of stories that have been affected by their changes. This provides a single, focused view of the agent's work so users can quickly understand and review it.
Agentic review requirements
Agentic review requires Storybook 10.5 or later, the experimentalReview feature flag enabled in Storybook configuration (automatically enabled with ADE plugin), and an MCP server running and connected to your agent or ADE plugin installed.
Agentic review experimentalReview feature flag
The experimentalReview feature flag must be enabled in your Storybook main configuration to use agentic review. This is automatically enabled if you are using a Storybook ADE plugin.
How to open agentic review summary
The review summary can be opened by clicking the link provided by the agent, requesting a review from your agent in a prompt, or clicking the review widget that appears in the Storybook sidebar when a review is available.
Review widget and change detection interaction
When both agentic review and change detection are enabled, the review widget takes precedence in the Storybook sidebar. You can still use change detection filters to view new and modified stories, but the review widget will always be visible when a review is available.
Review summary page content
The review summary page displays a text summary generated or curated by the agent, with stories grouped into collections of related work. Each collection has a helpful title and summary. This is a curated selection of the most relevant stories, not a comprehensive list of all affected stories.
Viewing story details in review
To see a story in more detail from the review summary, click its thumbnail. You can inspect the component using Storybook features and browser tools, and run tests if your Storybook is configured to do so.
Navigating review detail page
When viewing a story detail page from a review, you can use the next and previous buttons in the top right corner to navigate through other stories in the review. You can also click the 'Back to review' button to return to the summary page.
Stale review detection and refresh
If you perform work after a review is generated, a banner appears informing you that the review may be stale. You can use the provided prompt to request a new review from your agent at any time.
Returning to Storybook from review
To return to your Storybook from the review page, click the Storybook logo in the top left corner of the page.
Agentic setup current limitations
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.
Agent setup workflow overview
When adding Storybook to a project using an agent, the agent analyzes the project (framework, renderer, builder, language, addons) and produces a Markdown guide with step-by-step instructions. By following this guide, the agent configures the preview file, sets up commonly needed mocks, and writes stories for components in the codebase.
Generated setup instructions steps
The project-specific setup instructions cover these steps: (1) Analyze the codebase by reading providers, global CSS, portals, and data-fetching patterns. (2) Configure the preview by setting up decorators, global styles, and framework-level providers in preview.tsx. (3) Support portals by ensuring portal roots exist in the Storybook preview DOM. (4) Mock side effects by intercepting network requests (via MSW), storage, timers, and navigation at the preview level. (5) Write stories from up to 10 components, tagging them as ai-generated for review. (6) Add play functions implementing interaction tests for the most important flows. (7) Cover additional patterns by expanding coverage across already-touched components. (8) Verify by running Vitest against every new story to confirm rendering, and run the type checker. (9) Install useful addons like MCP.
Post-setup agent tasks
After the agent completes the agentic setup, the next steps are to: (1) Run the new Storybook and review the generated configuration files (main and preview). (2) Review stories tagged ai-generated and remove the tag once validated. (3) Connect the Storybook MCP server to the agent so it can continue reading manifests, generating stories, and running tests against the live Storybook. (4) Follow best practices to make stories and documentation maximally useful to both humans and agents.
Agent setup prompt trigger
To set up Storybook in a project, users copy and paste a specific prompt (referenced as prompt-install-storybook.md) into an agent's chat. The agent first runs storybook init to add Storybook to the project. When init completes, the agent offers to continue with project-specific configuration. If agreed, the agent generates the instructions, follows them step by step, and applies each change directly to the codebase for review.
AI contributions must be human-initiated and disclosed
All issues and pull requests must be opened by a real person using official templates. If AI assisted in creating a pull request, the tool used must be disclosed (e.g. Claude, Codex, Copilot). Pull requests or issues entirely generated by AI with no human involvement will be labeled by maintainers and closed automatically after 3 days unless a real person responds.
AI-generated comments on contributions subject to moderation
AI-generated comments on issues, pull requests, or discussions that add no value or contain incorrect information will be hidden by maintainers and can be subject to a ban if this becomes spam behavior. These measures help reduce maintenance burden and keep the team's work efficient.
MCP server purpose and workflow
Storybook's MCP server connects Storybook to AI agents, allowing them to understand components and documentation, generate stories, run tests, and more. Agents can reuse existing components and follow documented usage guidelines when generating UI. The workflow includes generating stories to preview generated UI, automatically running interaction tests and accessibility checks on those stories, and creating a self-healing loop where agents can fix issues and re-run tests to confirm resolution.
MCP server installation step 1: Install the addon
Run the addon installation command to install and register the Storybook MCP addon. When running Storybook's dev server, the MCP server is accessible at http://localhost:6006/mcp (port may vary). The browser page shows which tools are available and a link to the manifest debugger.
MCP server installation step 2: Add to agent
Run the mcp-add command to configure your agent to use the MCP server. You may need to update the port number in the URL. You will be prompted for a name for your MCP server (e.g. 'my-project-sb-mcp'), which you'll use when calling tools from your agent. The mcp-add CLI tool simplifies adding MCP servers to various agents. Alternatively, follow your agent's documentation to add the MCP server manually, e.g. Claude Code, Google Gemini CLI, OpenAI Codex, VS Code Copilot, etc.
MCP server installation step 3: Adjust agent instructions in AGENTS.md
Configure your AGENTS.md file (or CLAUDE.md for Claude users) to guide your agent to use the MCP server. Include the MCP server name chosen in step 2. Critical instructions include: never hallucinate component properties; query docs-list for documented components; query docs-show for component properties and examples; only use documented or shown properties; use get-storybook-story-instructions tool for story creation conventions; check work by running test-run. A story name may not reflect property names correctly, so always verify properties through documentation or examples before using them.
Docs toolset tools
The docs toolset includes: docs-show (returns detailed documentation for a specific component including props, first three stories, index of remaining stories, and additional documentation), docs-show-story (returns full story and associated documentation for a specific story), docs-list (returns index containing components and unattached docs entries).
Testing toolset tools
If Storybook Test is set up, the testing toolset includes test-run, which runs tests for specific stories and returns results including accessibility issues if configured. It instructs the agent to interpret results and resolve any issues found.
MCP server composition support
If you need to develop UI using components from multiple Storybooks, you can use Storybook composition. If a composed Storybook has manifests, the MCP server automatically includes content from those manifests in its responses, allowing agents to access combined knowledge from all composed Storybooks and find and reference components from any composed Storybook.
Supported agents for MCP server
Any agent that supports MCP can be connected to Storybook's MCP server. Supported agents include Claude Code, OpenAI Codex, Cursor, Google Gemini CLI, VS Code Copilot, and many more.
Why docs toolset is React-only
The docs toolset relies on manifests generated by Storybook, which is currently limited to React projects. After ensuring a solid experience with React, support will be expanded to other core Storybook renderers: Vue, Angular, Web Components, and Svelte.