ai/manifests

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.

Manifest generation evaluates rendered story with all args and decorators

The manifest generation process evaluates the final rendered story with all args, decorators, and other configurations applied, so it can focus on the concept being demonstrated rather than implementation specifics.

Manifest generation uses static analysis of MDX files

Storybook generates the docs manifest through static analysis of MDX files, which means it is limited to information explicitly present in the source. External data sources referenced through imports or component rendering are not included in the manifest.

Exclude stories from manifest using !manifest tag

For stories that agents do not need to reference (such as anti-pattern examples), exclude them from the manifest by removing the 'manifest' tag in the story file.

Remove entire component from manifest via meta tags

Remove an entire component from the manifest by removing the 'manifest' tag in the meta (default export) of the file, which will exclude all stories in that file from the manifests.

Generated manifests currently supported only for React

Generated manifests are currently only supported for React projects. The API may change in future releases.

Manifests overview and purpose

Manifests are JSON objects that describe the contents of a Storybook in a concise, structured way designed for AI agents to understand and use. They are generated automatically from Storybook's CSF and MDX files and provide comprehensive, up-to-date representations of Storybook contents.

Two types of manifests generated by Storybook

Storybook generates two types of manifests: components manifest (from CSF files and component source code) and docs manifest (from MDX files).

Components manifest content and generation

The components manifest is generated from static analysis of CSF files and prop type extraction from component source code. It contains component names, descriptions, props, and usage examples, designed to help AI agents understand which components are available and how to use them.

Prop type extraction tools and recommendations

Prop type extraction uses whatever is specified in the reactDocgen option, or react-docgen by default. For most projects, react-docgen-typescript is recommended because it provides more accurate and comprehensive information about component props, though react-docgen is faster but less detailed.

experimentalDocgenServer feature for prop extraction

When experimentalDocgenServer is enabled, prop type extraction runs server-side via React Component Meta instead, and manifests use a ref-based format with per-component JSON snapshots when combined with componentsManifest.

JSDoc comments for enhanced manifest metadata

JSDoc comments in component source code provide additional metadata for the manifest that can be helpful for AI agents. Adding JSDoc comments to components and their props provides context for agents, and is highly recommended.

JSDoc example for component documentation

Example of JSDoc for a Button component: ```ts title="Button.tsx" import React from 'react'; type ButtonProps = { /** * Optional click handler */ onClick?: () => void; }; /** * Button is used for user interactions that do not navigate to another route. * For navigation, use [Link](?path=/docs/link--default) instead. */ export const Button: React.FC<ButtonProps> = ({ onClick }) => { //... }; ```

Subcomponents in components manifest

If a story file declares subcomponents, the components manifest includes a subcomponents object for that component, providing supplemental API documentation for child components even when they are only meant to be used together with the parent.

Accessing components manifest JSON

The raw JSON components manifest can be accessed at http://localhost:6006/manifests/components.json when Storybook is running or at the /manifests/components.json route in a built Storybook (port may vary).

Docs manifest content and generation

The docs manifest is generated from MDX files in Storybook. These files document specific components or create standalone documentation pages like Getting Started guides, accessibility guidelines, or design tokens, all of which can provide helpful context to AI agents.

Accessing docs manifest JSON

The raw JSON docs manifest can be accessed at http://localhost:6006/manifests/docs.json when Storybook is running or at the /manifests/docs.json route in a built Storybook (port may vary).

Manifest debugger tool

Storybook provides a combined manifest debugger at http://localhost:6006/manifests/components.html (port may vary) that shows the contents of both component and docs manifests in human-readable format, along with any errors or warnings encountered during manifest generation.

Manifest debugger filtering

The manifest debugger displays errors or warnings at the top of the page. You can click these buttons to filter the manifest to show only the relevant entries, which is helpful for debugging.

Default manifest tag inclusion

By default, all stories and independent docs pages have the manifest tag applied, which means they will be included in the manifests.

Curating manifests with tags

You can curate what is included in manifests by adding or removing the manifest tag from stories and docs pages. Removing the manifest tag from a story excludes it from the manifests. Removing the tag from a file's meta or default export excludes all stories in that file.

Excluding MDX docs from manifests

To exclude an entire MDX docs page from the manifests, remove the manifest tag from the page's metadata, for example: <Meta title="Doc for Humans Only" tags={['!manifest']} />

Manifest schema stability note

While in preview, the manifest schema is not yet stable and should not be considered a public API.

Storybook MCP server functions

The Storybook MCP server gives agents ongoing access to component documentation, story generation, and component tests. It exposes component information, story generation capabilities, component tests, and more as tools that agents can call.

MCP server browser page

When the MCP server is accessed in a browser, it displays a page showing which tools are available and includes a link to the manifest debugger.

Manifests definition

Storybook collects all metadata about components, stories, and docs into manifests. Each manifest is a JSON object that serves as a comprehensive map of Storybook's content and structure. There are manifests for components based on story files and for documentation based on MDX files. Manifests are automatically generated and updated as you work on Storybook.

Model Context Protocol (MCP) standard

Model Context Protocol is a standard for communication between AI agents and external tools. Storybook's MCP server exposes Storybook's content and functionality as a set of tools that agents can call.

Storybook AI capabilities preview status and React-only support

Storybook's AI capabilities, specifically the manifests and MCP server, are currently only supported for React projects and are in preview. The API may change in future releases.

Give your agent this brain