Rename experimentalComponentsManifest → componentsManifest with backwards compat

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

@@ -0,0 +1,8 @@
+---
+'@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.

.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,6 @@ 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`
 
 **Configuration Methods:**
 

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

@@ -9,8 +9,5 @@ const config: StorybookConfig = {
 		'@storybook/addon-mcp',
 	],
 	framework: '@storybook/react-vite',
-	features: {
-		experimentalComponentsManifest: true,
-	},
 };
 export default config;

packages/addon-mcp/README.md

@@ -48,21 +48,19 @@ 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)
 				},
 			},
 		},
 	],
-	features: {
-		experimentalComponentsManifest: true, // Enable manifest generation for the docs toolset, only supported in React-based setups.
-	},
+	// componentsManifest is enabled by default in recent Storybook versions, no need to set it
 };
 ```
 
 **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,24 +170,31 @@ 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` enabled (defaults to `true` in recent Storybook versions)
 
 **To enable:**
 
+The `componentsManifest` feature is enabled by default in recent Storybook versions — no configuration needed.
+
+If you are on an older Storybook version that doesn't default to `true`, you may need to enable it explicitly. Use the flag that matches your Storybook version:
+
 ```javascript
 // .storybook/main.js
 export default {
 	// ... other config
 	features: {
-		experimentalComponentsManifest: true,
+		// For Storybook 10.3.x and later:
+		componentsManifest: true,
+		// For older Storybook versions (before the flag was renamed):
+		// experimentalComponentsManifest: 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

@@ -20,7 +20,7 @@
 			presets: {
 				apply: vi.fn((key: string) => {
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -172,7 +172,7 @@
 			presets: {
 				apply: vi.fn((key: string) => {
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -265,7 +265,7 @@
 						});
 					}
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -275,7 +275,7 @@
 		await (experimental_devServer as any)(mockApp, optionsWithRefs);
 
 		// The preset should have called presets.apply('refs')
 		expect(optionsWithRefs.presets.apply).toHaveBeenCalledWith('refs', {});
 	});
 
 	it('should handle refs config returning non-object gracefully', async () => {
@@ -285,7 +285,7 @@
 				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);
 				}),
@@ -304,7 +304,7 @@
 				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,

packages/mcp/src/utils/get-manifest.test.ts

@@ -111,7 +111,7 @@ describe('getManifest', () => {
 				"You must either pass the original request forward to the server context, or set a custom manifestProvider that doesn't need the request",
 			);
 		});
-		it('should throw ManifestGetError when fetch fails with 404 and include hint about experimentalComponentsManifest', async () => {
+		it('should throw ManifestGetError when fetch fails with 404 and include hint about componentsManifest', async () => {
 			global.fetch = vi.fn().mockResolvedValue({
 				ok: false,
 				status: 404,
@@ -123,6 +123,7 @@ describe('getManifest', () => {
 			await expect(getManifests(request)).rejects.toThrow(
 				'Failed to fetch manifest: 404 Not Found',
 			);
+			await expect(getManifests(request)).rejects.toThrow('componentsManifest');
 			await expect(getManifests(request)).rejects.toThrow('experimentalComponentsManifest');
 		});
 
@@ -140,7 +141,7 @@ describe('getManifest', () => {
 			try {
 				await getManifests(request);
 			} catch (error) {
-				expect((error as Error).message).not.toContain('experimentalComponentsManifest');
+				expect((error as Error).message).not.toContain('componentsManifest');
 			}
 		});
 

packages/mcp/src/utils/get-manifest.ts

@@ -123,7 +123,7 @@ export async function getManifests(
 		const reason = componentResult.reason;
 		const is404 = reason instanceof ManifestGetError && reason.message.includes('404');
 		const hint = is404
-			? `\nHint: The Storybook at this URL may not have the component manifest enabled. Add \`features: { experimentalComponentsManifest: true }\` to its main.ts config.`
+			? `\nHint: The Storybook at this URL may not have the component manifest enabled. Add \`features: { componentsManifest: true }\` (or \`features: { experimentalComponentsManifest: true }\` for older Storybook versions) to its main.ts config.`
 			: '';
 		throw new ManifestGetError(
 			`Failed to get component manifest: ${reason instanceof Error ? reason.message : String(reason)}${hint}`,