Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
export default {
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
features: {
experimentalDocgenServer: true,
},
};
```

```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
features: {
experimentalDocgenServer: true,
},
};

export default config;
```

```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';

export default defineMain({
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
features: {
experimentalDocgenServer: true,
},
});
```

<!-- JS snippets still needed while providing both CSF 3 & Next -->

```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';

export default defineMain({
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
features: {
experimentalDocgenServer: true,
},
});
```
2 changes: 2 additions & 0 deletions docs/ai/manifests.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ The components manifest is generated from static analysis of the CSF files in yo

For prop type extraction, the manifest generation will use whatever is specified in the [`reactDocgen`](../api/main-config/main-config-typescript.mdx#reactdocgen) option, or `react-docgen` by default. We recommend using `react-docgen-typescript` for most projects, because it provides more accurate and comprehensive information about your components' props. If manifest generation seems too slow, you can switch to `react-docgen`, which is faster but less detailed.

When [`experimentalDocgenServer`](../api/main-config/main-config-features.mdx#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`](../api/main-config/main-config-features.mdx#componentsmanifest).

While the types themselves provide a basic level of information, JSDoc comments in your component source code can provide additional metadata for the manifest, which can be helpful for AI agents. We highly recommend adding JSDoc comments to your components and their props to provide as much context as possible for the agents. For example:

```ts title="Button.tsx"
Expand Down
23 changes: 23 additions & 0 deletions docs/api/main-config/main-config-features.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ Type:
controls?: boolean;
developmentModeForBuild?: boolean;
experimentalCodeExamples?: boolean;
experimentalDocgenServer?: boolean;
experimentalTestSyntax?: boolean;
highlight?: boolean;
interactions?: boolean;
Expand Down Expand Up @@ -145,6 +146,8 @@ Default: `false`

Generate [manifests](../../ai/manifests.mdx), used by the [MCP server](../../ai/mcp/overview.mdx).

When combined with [`experimentalDocgenServer`](#experimentaldocgenserver), manifests use a ref-based format with per-component JSON snapshots for faster MCP loading.

<CodeSnippets path="main-config-features-components-manifest.md" />

</If>
Expand Down Expand Up @@ -187,12 +190,32 @@ Set `NODE_ENV` to `'development'` in built Storybooks for better testing and deb

Type: `boolean`

Prefer [`experimentalDocgenServer`](#experimentaldocgenserver) — it supersedes this flag and provides the same static snippet behavior along with faster, more accurate docgen.

Enable the new code example generation method for React components (as seen in the story previews in an [autodocs](../../writing-docs/autodocs.mdx) page).

Unlike the current implementation, this method reads the actual stories source file, which is faster to generate, more readable, and more accurate. However, they are not dynamic: they won't update if you change values in the Controls table.

<CodeSnippets path="main-config-features-experimental-code-examples.md" />

## `experimentalDocgenServer`

(⚠️ **Experimental**)

Type: `boolean`

Default: `false`

Enable server-side docgen for React projects. Storybook extracts component metadata on the dev server using the TypeScript Language Service (via React Component Meta) instead of injecting docgen into the preview bundle. This provides faster startup, more accurate [Controls](../../essentials/controls.mdx) and ArgTypes tables in [autodocs](../../writing-docs/autodocs.mdx), and improved static code snippets in docs and the Code panel. [Manifests](../../ai/manifests.mdx) and the [MCP server](../../ai/mcp/overview.mdx) use an optimized, ref-based format that loads faster for AI agents.

When enabled, you do not need [`experimentalCodeExamples`](#experimentalcodeexamples) because snippet generation is handled by the server-side story-docs service.

Snippets are static: they won't update if you change values in the Controls table.

This feature is currently only supported for React projects. We [welcome feedback](https://github.com/storybookjs/storybook/discussions/35333) on the RFC.

<CodeSnippets path="main-config-features-experimental-docgen-server.md" />

## `experimentalTestSyntax`

(⚠️ **Experimental**)
Expand Down