feat: rename experimentalComponentsManifest → componentsManifest with backwards compat

Co-authored-by: JReinhold <5678122+JReinhold@users.noreply.github.com>

Author: Copilot

.changeset/components-manifest-flag-rename.md

@@ -0,0 +1,21 @@
+---
+'@storybook/addon-mcp': patch
+'@storybook/mcp': patch
+---
+
+Rename feature flag `experimentalComponentsManifest` → `componentsManifest`
+
+The Storybook feature flag has been renamed from `experimentalComponentsManifest` to `componentsManifest` and now defaults to `true` in Storybook core.
+
+The addon is backwards compatible with older Storybook versions that still use the old flag name — it checks `features.componentsManifest` first and falls back to `features.experimentalComponentsManifest`.
+
+**Migration:** Update your `.storybook/main.js` if you had the flag explicitly set:
+
+```js
+// Before
+features: { experimentalComponentsManifest: true }
+
+// After
+features: { componentsManifest: true }
+// Or omit entirely — it defaults to true in recent Storybook versions
+```

.github/copilot-instructions.md

@@ -253,7 +253,7 @@ export { addMyTool, MY_TOOL_NAME } from './tools/my-tool.ts';
 - `addon-mcp` depends on `@storybook/mcp` (workspace dependency)
 - `AddonContext` extends `StorybookContext` to ensure type compatibility
 - Component manifest tools are conditionally registered based on feature flags:
-  - Checks `features.experimentalComponentsManifest` flag
+  - Checks `features.componentsManifest` flag (or `features.experimentalComponentsManifest` for backwards compatibility)
   - Checks for `experimental_manifests` preset
   - Only registers `addListAllDocumentationTool` and `addGetDocumentationTool` when enabled
 - Context includes `request` (HTTP Request object) which tools use to determine manifest location

.github/instructions/addon-mcp.instructions.md

@@ -31,7 +31,7 @@ The addon supports two toolsets that can be enabled/disabled:
 2. **`docs`** (default: true)
    - `list-all-documentation`: List all available components from manifest
    - `get-documentation`: Get detailed component documentation
-   - Requires experimental feature flag `features.experimentalComponentsManifest`
+   - Requires feature flag `features.componentsManifest`
 
 **Configuration Methods:**
 

apps/internal-storybook/.storybook/main.ts

@@ -29,7 +29,7 @@ const config = defineMain({
 		disableTelemetry: true,
 	},
 	features: {
-		experimentalComponentsManifest: true,
+		componentsManifest: true,
 	},
 	// No refs - single source mode
 });

eval/templates/grading/.storybook/main.ts

@@ -10,7 +10,7 @@ const config: StorybookConfig = {
 	],
 	framework: '@storybook/react-vite',
 	features: {
-		experimentalComponentsManifest: true,
+		componentsManifest: true,
 	},
 };
 export default config;

packages/addon-mcp/README.md

@@ -48,21 +48,21 @@ export default {
 			options: {
 				toolsets: {
 					dev: true, // Tools for story URL retrieval and UI building instructions (default: true)
-					docs: true, // Tools for component manifest and documentation (default: true, requires experimental feature flag below 👇)
+					docs: true, // Tools for component manifest and documentation (default: true, requires feature flag below 👇)
 				},
 			},
 		},
 	],
 	features: {
-		experimentalComponentsManifest: true, // Enable manifest generation for the docs toolset, only supported in React-based setups.
+		componentsManifest: true, // Enable manifest generation for the docs toolset, only supported in React-based setups.
 	},
 };
 ```
 
 **Available Toolsets:**
 
 - `dev`: Enables [Dev Tools](#dev-tools)
-- `docs`: Enables [Documentation Tools](#docs-tools-experimental)
+- `docs`: Enables [Documentation Tools](#docs-tools)
 
 Disabling the Dev Tools is useful when you want to try out the same experience that your external component consumers will get, because they only get the Component Documentation Tools.
 
@@ -172,15 +172,15 @@ Agent calls tool, gets response:
 http://localhost:6006/?path=/story/example-button--primary
 ```
 
-### Docs Tools (Experimental)
+### Docs Tools
 
-These additional tools are available when the **experimental** component manifest feature is enabled. They provide agents with detailed documentation about your UI components.
+These additional tools are available when the component manifest feature is enabled. They provide agents with detailed documentation about your UI components.
 
 **Requirements:**
 
 - Storybook version 10.1.0 or higher (currently only available as prereleases, `storybook@next`)
 - React-based framework (`react-vite`, `nextjs-vite`, `nextjs`, `react-webpack5`)
-- Feature flag `features.experimentalComponentsManifest` set to `true` in `.storybook/main.js`
+- Feature flag `features.componentsManifest` set to `true` in `.storybook/main.js`
 
 **To enable:**
 
@@ -189,7 +189,7 @@ These additional tools are available when the **experimental** component manifes
 export default {
 	// ... other config
 	features: {
-		experimentalComponentsManifest: true,
+		componentsManifest: true,
 	},
 };
 ```

packages/addon-mcp/src/mcp-handler.test.ts

@@ -329,7 +329,7 @@ describe('mcpServerHandler', () => {
 				return { disableTelemetry: false };
 			}
 			if (key === 'features') {
-				return { experimentalComponentsManifest: true };
+				return { componentsManifest: true };
 			}
 			if (key === 'experimental_manifests') {
 				return vi.fn();

packages/addon-mcp/src/preset.test.ts

@@ -19,7 +19,7 @@ describe('experimental_devServer', () => {
 			presets: {
 				apply: vi.fn((key: string) => {
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -124,7 +124,7 @@ describe('experimental_devServer', () => {
 			presets: {
 				apply: vi.fn((key: string) => {
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -217,7 +217,7 @@ describe('experimental_devServer', () => {
 						});
 					}
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -237,7 +237,7 @@ describe('experimental_devServer', () => {
 				apply: vi.fn((key: string) => {
 					if (key === 'refs') return Promise.resolve(null);
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -256,7 +256,7 @@ describe('experimental_devServer', () => {
 				apply: vi.fn((key: string) => {
 					if (key === 'refs') return Promise.reject(new Error('Config error'));
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),

packages/addon-mcp/src/tools/is-manifest-available.test.ts

@@ -4,11 +4,13 @@ import type { Options } from 'storybook/internal/types';
 
 function createMockOptions({
 	featureFlag = false,
+	featureFlagName = 'componentsManifest' as 'componentsManifest' | 'experimentalComponentsManifest',
 	hasManifests = false,
 	hasLegacyComponentManifestGenerator = false,
 	hasFeaturesObject = true,
 }: {
 	featureFlag?: boolean;
+	featureFlagName?: 'componentsManifest' | 'experimentalComponentsManifest';
 	hasManifests?: boolean;
 	hasLegacyComponentManifestGenerator?: boolean;
 	hasFeaturesObject?: boolean;
@@ -17,7 +19,7 @@ function createMockOptions({
 		presets: {
 			apply: vi.fn(async (key: string) => {
 				if (key === 'features') {
-					return hasFeaturesObject ? { experimentalComponentsManifest: featureFlag } : {};
+					return hasFeaturesObject ? { [featureFlagName]: featureFlag } : {};
 				}
 				if (key === 'experimental_manifests') {
 					return hasManifests ? { components: { v: 1, components: {} } } : undefined;
@@ -67,6 +69,24 @@ describe('getManifestStatus', () => {
 			options: { hasManifests: true, hasFeaturesObject: false },
 			expected: { available: false, hasManifests: true, hasFeatureFlag: false },
 		},
+		{
+			description: 'legacy experimentalComponentsManifest flag is true (backwards compat)',
+			options: {
+				featureFlag: true,
+				featureFlagName: 'experimentalComponentsManifest' as const,
+				hasManifests: true,
+			},
+			expected: { available: true, hasManifests: true, hasFeatureFlag: true },
+		},
+		{
+			description: 'legacy experimentalComponentsManifest flag is false (backwards compat)',
+			options: {
+				featureFlag: false,
+				featureFlagName: 'experimentalComponentsManifest' as const,
+				hasManifests: true,
+			},
+			expected: { available: false, hasManifests: true, hasFeatureFlag: false },
+		},
 	])('should return correct status when $description', async ({ options, expected }) => {
 		const mockOptions = createMockOptions(options);
 		const result = await getManifestStatus(mockOptions);

packages/addon-mcp/src/tools/is-manifest-available.ts

@@ -22,7 +22,9 @@ export const getManifestStatus = async (options: Options): Promise<ManifestStatu
 	]);
 
 	const hasManifests = !!manifests || !!legacyComponentManifestGenerator;
-	const hasFeatureFlag = !!features?.experimentalComponentsManifest;
+	const hasFeatureFlag = !!(
+		features?.componentsManifest ?? features?.experimentalComponentsManifest
+	);
 
 	return {
 		available: hasFeatureFlag && hasManifests,