Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds extensive documentation and snippet files for Storybook AI and the MCP server (overview, API, sharing, manifests, best practices), multiple story/snippet examples, and small sidebar/frontmatter ordering adjustments across several docs pages. Changes
Sequence Diagram(s)(Skipped — changes are documentation and snippets; no new runtime control flow introduced.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Comment |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/ai/index.mdx`:
- Line 46: The sentence starting "Next, guide your agent to use your MCP server,
you should adjust your [`AGENTS.md`] (or [`CLAUDE.md`])..." contains a comma
splice; split it into two clear sentences and rephrase for onboarding
clarity—for example: "Next, guide your agent to use your MCP server. Update your
[`AGENTS.md`] (or [`CLAUDE.md`]) with the specific setup for your project."
Update the line in docs/ai/index.mdx accordingly, preserving the same links and
context.
In `@docs/ai/manifests.mdx`:
- Around line 60-78: The JSON example under the "components" ->
"components-button" manifest contains a trailing comma after the last item in
the "stories" array which makes it invalid JSON; remove the extra comma
following the final story object (the one with "id":
"components-button--disabled") so the "stories" array closes properly, ensuring
the structure around "components-button", "stories", "id", and "snippet" remains
unchanged.
In `@docs/ai/mcp/api.mdx`:
- Around line 102-103: Replace the unresolved "Type: `TK`" placeholders with
concrete type blocks matching the format used in the existing get-documentation
and list-all-documentation entries; update each affected tool's API reference to
include its actual input/output shape (e.g., parameter names, types, and return
structure) instead of "`TK`", mirroring the same code block style and naming
conventions used by get-documentation/list-all-documentation so the three spots
are fully specified for publishing.
- Line 12: The three relative links in this file are one directory too shallow
(they currently use a single "../" from docs/ai/mcp/api.mdx); update each of
those links (the [preview] link to releases/features.mdx, the [React] renderer
link, and the other two occurrences at the same spots) to add one additional
"../" (i.e., change "../releases/..." → "../../releases/..." and
"../?renderer=react" → "../../?renderer=react") so they resolve correctly from
docs/ai/mcp/api.mdx.
In `@docs/ai/mcp/overview.mdx`:
- Line 81: Replace the phrase "develop toolset" with "development toolset" in
the sentence that begins "The develop toolset provides tools for authoring
well-considered stories..." so the text reads "The development toolset provides
tools for authoring well-considered stories..." to match terminology used
elsewhere in the docs.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
docs/_assets/ai/addon-mcp-splash.pngis excluded by!**/*.pngdocs/_assets/ai/manifest-debugger.pngis excluded by!**/*.png
📒 Files selected for processing (22)
docs/_snippets/addon-mcp-add.mddocs/_snippets/addon-mcp-options.mddocs/_snippets/component-description-on-meta.mddocs/_snippets/mcp-add.mddocs/_snippets/story-description.mddocs/_snippets/tag-manifest-remove-in-story.mddocs/addons/index.mdxdocs/ai/best-practices.mdxdocs/ai/index.mdxdocs/ai/manifests.mdxdocs/ai/mcp/api.mdxdocs/ai/mcp/index.mdxdocs/ai/mcp/overview.mdxdocs/ai/mcp/sharing.mdxdocs/api/index.mdxdocs/builders/index.mdxdocs/configure/index.mdxdocs/contribute/index.mdxdocs/essentials/index.mdxdocs/faq.mdxdocs/releases/index.mdxdocs/sharing/index.mdx
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/ai/manifests.mdx`:
- Around line 185-201: The children property in the manifest JSON currently has
an incorrect description ("Does the button have an icon?"); update the
"description" value for the "children" object to accurately describe its purpose
(e.g., "Content to be rendered inside the component; accepts string or
React.ReactNode") so it matches the tsType ("string | React.ReactNode") and the
intended usage of the children prop.
In `@docs/ai/mcp/overview.mdx`:
- Line 81: The link in the sentence uses embedded backticks around the anchor
text (`[testing toolset](\`#testing-toolset\`)`) which can break Markdown
parsing; edit the text so the link reads `[testing toolset](`#testing-toolset`)`
(remove the backticks around `#testing-toolset`) wherever the mention appears
(search for the `[testing toolset]` link in this paragraph).
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
docs/_assets/ai/addon-mcp-splash.pngis excluded by!**/*.pngdocs/_assets/ai/manifest-debugger.pngis excluded by!**/*.png
📒 Files selected for processing (4)
docs/ai/index.mdxdocs/ai/manifests.mdxdocs/ai/mcp/api.mdxdocs/ai/mcp/overview.mdx
| title: 'Frequently Asked Questions' | ||
| sidebar: | ||
| order: 13 | ||
| order: 15 |
There was a problem hiding this comment.
nit: if you changed the order properties here to be magnitudes of 10's or 100's, you could easily inject pages in between other pages without needing to change them every time.
- Properly demarcate React-only features - Add more best practices - Remove `--name` from `mcp-add` call - Improve agent instructions - Remove individual tool API references - Add additional example workflows - Clarify what tools are published - Add default `manifest` tag - Fix various inaccuracies
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
docs/ai/mcp/index.mdx (1)
8-8:⚠️ Potential issue | 🟡 MinorScope statement over-promises for non-React users.
On Line 8, the intro implies docs/manifests capabilities are universal. This conflicts with the React-only docs toolset scope documented elsewhere.
✍️ Suggested wording fix
-Storybook's MCP server connects your Storybook to AI agents, enabling them to understand your components and documentation, generate stories, run tests, and more. It follows the [Model Context Protocol](https://modelcontextprotocol.io/) standard, so any MCP-compatible agent can use it. +Storybook's MCP server connects your Storybook to AI agents, enabling them to <If renderer={['react']}>understand your components and documentation, </If>generate stories, run tests, and more. It follows the [Model Context Protocol](https://modelcontextprotocol.io/) standard, so any MCP-compatible agent can use it.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/ai/mcp/index.mdx` at line 8, Update the opening sentence that begins "Storybook's MCP server connects your Storybook to AI agents..." to avoid implying universal support; clarify that AI agents' ability to understand components, generate stories, and run tests applies to setups that include the React-focused docs/tooling. Specifically, modify the line mentioning the Model Context Protocol so it either states "for projects using Storybook's React docs/tooling" or explicitly notes "capabilities depend on your project's component framework (React support is required for the docs toolset described here)"; target the sentence that references the MCP server and the Model Context Protocol to make this scope limitation explicit.
🧹 Nitpick comments (1)
docs/ai/index.mdx (1)
34-64: Extract shared AGENTS/setup block to a reusable snippet to avoid drift.This section substantially overlaps with
docs/ai/mcp/overview.mdx. Keeping both inline will likely diverge over time.♻️ Suggested direction
-<details> -<summary>AGENTS.md</summary> -... -</details> +<CodeSnippets path="ai-agents-instructions.md" />Then keep renderer-specific variants in one snippet source and include it in both pages.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/ai/index.mdx` around lines 34 - 64, Extract the duplicated AGENTS/setup markdown (the entire conditional block containing the <If renderer={['react']}> and <If notRenderer={['react']}> variants and the "AGENTS.md" snippet content) into a single reusable MDX snippet source (e.g., a shared snippet file or MDX export) and replace both inline occurrences (in docs/ai/index.mdx and docs/ai/mcp/overview.mdx) with an include/import of that snippet; keep the renderer-specific variants inside the snippet (preserve the <If renderer={['react']}> and <If notRenderer={['react']}> blocks) so both pages reference the same source and avoid drift, and ensure the snippet still references the `your-project-sb-mcp` placeholder and the "AGENTS.md" title so content and tooling directives remain identical.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/ai/index.mdx`:
- Line 84: Replace the incorrect phrase "stories files" with "story files" in
the documentation sentence that reads "There are manifests for components, based
on stories files, and for documentation, based on MDX files." Update the text so
it reads "...manifests for components, based on story files, and for
documentation, based on MDX files." to fix the grammatical phrasing.
In `@docs/writing-stories/tags.mdx`:
- Line 23: Update the sentence that currently reads "The `dev`, `manifest`, and
`test` tags are automatically, implicitly applied to every story in your
Storybook project." to clarify that while `dev` and `test` are universal, the
`manifest` tag is currently React-only; specifically change that sentence to
indicate "`dev` and `test` are applied to every Storybook project, while
`manifest` is implicitly applied only in React projects (see the React-specific
section for details)" so readers aren’t misled about cross-framework scope.
---
Duplicate comments:
In `@docs/ai/mcp/index.mdx`:
- Line 8: Update the opening sentence that begins "Storybook's MCP server
connects your Storybook to AI agents..." to avoid implying universal support;
clarify that AI agents' ability to understand components, generate stories, and
run tests applies to setups that include the React-focused docs/tooling.
Specifically, modify the line mentioning the Model Context Protocol so it either
states "for projects using Storybook's React docs/tooling" or explicitly notes
"capabilities depend on your project's component framework (React support is
required for the docs toolset described here)"; target the sentence that
references the MCP server and the Model Context Protocol to make this scope
limitation explicit.
---
Nitpick comments:
In `@docs/ai/index.mdx`:
- Around line 34-64: Extract the duplicated AGENTS/setup markdown (the entire
conditional block containing the <If renderer={['react']}> and <If
notRenderer={['react']}> variants and the "AGENTS.md" snippet content) into a
single reusable MDX snippet source (e.g., a shared snippet file or MDX export)
and replace both inline occurrences (in docs/ai/index.mdx and
docs/ai/mcp/overview.mdx) with an include/import of that snippet; keep the
renderer-specific variants inside the snippet (preserve the <If
renderer={['react']}> and <If notRenderer={['react']}> blocks) so both pages
reference the same source and avoid drift, and ensure the snippet still
references the `your-project-sb-mcp` placeholder and the "AGENTS.md" title so
content and tooling directives remain identical.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ef568e05-a478-4c5e-ab72-49a21fe36067
📒 Files selected for processing (11)
docs/_snippets/best-practices-in-story.mddocs/_snippets/mcp-add.mddocs/_snippets/story-description-and-summary.mddocs/ai/best-practices.mdxdocs/ai/index.mdxdocs/ai/manifests.mdxdocs/ai/mcp/api.mdxdocs/ai/mcp/index.mdxdocs/ai/mcp/overview.mdxdocs/ai/mcp/sharing.mdxdocs/writing-stories/tags.mdx
✅ Files skipped from review due to trivial changes (1)
- docs/_snippets/best-practices-in-story.md
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/ai/manifests.mdx
- docs/ai/best-practices.mdx
jonniebigodes
left a comment
There was a problem hiding this comment.
Thanks for adding the documentation. This is shaping up nicely. Left some items for you to look into when you can.
Let me know and we'll go from there.
Co-authored-by: jonniebigodes <joaocontadesenvolvimento@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
docs/ai/manifests.mdx (1)
89-89:⚠️ Potential issue | 🟡 MinorRemove machine-specific absolute path from the example manifest.
The
definedInFilevalue includes a local user path; this should be a neutral placeholder so the docs stay portable and non-identifying.Suggested fix
- "definedInFile": "/Users/kylegach/projects/kylegach/mealdrop/packages/ui/src/components/Button/Button.tsx", + "definedInFile": "/path/to/src/components/Button/Button.tsx",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/ai/manifests.mdx` at line 89, Replace the machine-specific absolute path in the manifests example by changing the definedInFile value to a neutral, non-identifying placeholder (e.g. a relative or generic path) so the docs remain portable; locate the definedInFile entry in docs/ai/manifests.mdx and replace "/Users/.../packages/ui/src/components/Button/Button.tsx" with a generic placeholder like "packages/ui/src/components/Button/Button.tsx" or "<projectRoot>/packages/ui/src/components/Button/Button.tsx".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/ai/best-practices.mdx`:
- Around line 85-89: The MDX example imports Meta from the wrong package; update
the import so Meta is imported from '@storybook/addon-docs/blocks' (change the
import statement that references Meta in the Colors.mdx example) to match the
rest of the docs and keep examples consistent.
In `@docs/ai/mcp/sharing.mdx`:
- Line 12: Update the anchor link in docs/ai/mcp/sharing.mdx that currently
points to "./overview.mdx#docs" so it targets the React-rendered variant;
replace the href with the React-specific URL (e.g.
"./overview.mdx?renderer=react#docs") to avoid the dead anchor for non-React
readers and ensure it matches the React-gated "docs" section on the overview
page.
- Around line 64-67: The top-level await for createStorybookMcpHandler
(storybookMcpHandler) requires ESM; to make the example module-system agnostic,
remove the top-level await and defer initialization into the export async
function handleRequest(request: Request): implement a lazy/singleton init inside
handleRequest that checks if storybookMcpHandler is already created and, if not,
awaits createStorybookMcpHandler() before using it; ensure subsequent requests
reuse the initialized handler and keep the exported function signature unchanged
so the example works in both CommonJS and ESM setups.
---
Duplicate comments:
In `@docs/ai/manifests.mdx`:
- Line 89: Replace the machine-specific absolute path in the manifests example
by changing the definedInFile value to a neutral, non-identifying placeholder
(e.g. a relative or generic path) so the docs remain portable; locate the
definedInFile entry in docs/ai/manifests.mdx and replace
"/Users/.../packages/ui/src/components/Button/Button.tsx" with a generic
placeholder like "packages/ui/src/components/Button/Button.tsx" or
"<projectRoot>/packages/ui/src/components/Button/Button.tsx".
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 200d57fd-bf9e-4249-98cc-3b57642d3b4b
📒 Files selected for processing (5)
docs/ai/best-practices.mdxdocs/ai/manifests.mdxdocs/ai/mcp/index.mdxdocs/ai/mcp/overview.mdxdocs/ai/mcp/sharing.mdx
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/ai/mcp/index.mdx
- Add docs for feature flags - Remove PII from manifest example - Prose tweaks
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/ai/mcp/overview.mdx`:
- Around line 229-233: The statement claiming “Any agent that supports MCP can
be connected to Storybook's MCP server, and will be able to use Storybook's
manifests and tools” overpromises because the manifests produced by Storybook
are currently React-only; update the copy around the MCP server and the "Why is
the docs toolset React-only?" section to clarify that while any MCP-capable
agent (referenced as MCP server/agents) can connect and use Storybook's tool
endpoints, the generated manifests are currently limited to React projects and
other renderers (Vue, Angular, Web Components, Svelte) are planned for future
support.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b8118789-40ed-4a2e-abaf-57a1e86f332f
📒 Files selected for processing (5)
docs/_snippets/main-config-features-components-manifest.mddocs/_snippets/main-config-features-experimental-code-examples.mddocs/ai/manifests.mdxdocs/ai/mcp/overview.mdxdocs/api/main-config/main-config-features.mdx
✅ Files skipped from review due to trivial changes (2)
- docs/_snippets/main-config-features-experimental-code-examples.md
- docs/_snippets/main-config-features-components-manifest.md
* next: (80 commits) Add Serena MCP server configuration for AI-assisted development Update duplicate code detector workflow to analyze TypeScript files and refine issue creation criteria Add agentic workflow duplicate-code-detector Update lock file Refactor code simplifier workflow to enhance clarity and consistency in documentation Add agentic workflow code-simplifier docs: fix custom render function typo Docs: Follow-up to #34025 Update CHANGELOG.md for v10.2.16 [skip ci] Remove duplicate env var Next.js: Add support for v16.2 Apply suggestion from @valentinpalkovic Update default allowed hosts in host validation middleware Fix glob special character escaping in optimizeDeps.entries to prevent cold-cache failures Initial plan Add docs Change warning to info Adjust wording Convert class component to functional component with hooks Build: Add NX Cloud access token to publish jobs in workflow ...
Co-authored-by: Jeppe Reinhold <jeppe@chromatic.com>
Co-authored-by: Jeppe Reinhold <jeppe@chromatic.com>
- Clarify unstable nature of manifest schemas - Fix inaccuracy in example workflow - Clarify behavior of `componentsManifest` feature flag
* next: (65 commits) Revert "REVERT THIS COMMIT" Bump version from "10.3.0-alpha.15" to "10.3.0-alpha.16" [skip ci] REVERT THIS COMMIT Fix Nx cloud in sandbox generation Write changelog for 10.3.0-alpha.16 [skip ci] Restore portable story CI jobs for svelte and nextjs Angular: Set moduleResolution to bundler Angular: Add noCheck: true to tsconfig.json Update CHANGELOG.md for v10.2.17 [skip ci] Bump version from "10.3.0-alpha.14" to "10.3.0-alpha.15" [skip ci] Update docs/releases/index.mdx Build: Bump node in .nvmrc file undo nextjs workarounds Revert "undo workarounds that supposedly are not needed anymore" undo workarounds that supposedly are not needed anymore Write changelog for 10.3.0-alpha.15 [skip ci] update vite resolution Fix Layout story unduly failing Show multiple favicons warning as debug message: revert: drop unrelated layout story change ...
- Single-line `mcp-add` snippet - Don't hide renderer selector on any pages - Consolidate callouts and include for all renderers - Improve get started/installation section
What I did
Adds a docs section for AI-related features, like the component/docs manifests and MCP server.
Checklist for Contributors
Testing
Manual testing
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.Summary by CodeRabbit
New Features
Documentation