MCP: Support reactComponentMeta manifests (#206)

kasperpeulen · web-flow · commit 70b5b2333a3b · 2026-03-23T16:04:12.000+01:00
diff --git a/.changeset/quiet-lions-sing.md b/.changeset/quiet-lions-sing.md
@@ -0,0 +1,8 @@
+---
+"@storybook/mcp": patch
+---
+
+Support Storybook component manifests that use `reactComponentMeta` for React prop extraction.
+
+This keeps MCP documentation output working when Storybook is configured to emit the newer
+`reactComponentMeta` payload instead of `reactDocgen` or `reactDocgenTypescript`.
diff --git a/packages/mcp/src/tools/get-documentation.test.ts b/packages/mcp/src/tools/get-documentation.test.ts
@@ -290,6 +290,97 @@ describe('getDocumentationTool', () => {
 		`);
 	});
 
+	it('should include props section when reactComponentMeta is present', async () => {
+		const manifestWithReactComponentMeta = {
+			v: 1,
+			components: {
+				button: {
+					id: 'button',
+					name: 'Button',
+					description: 'A button component',
+					reactComponentMeta: {
+						displayName: 'Button',
+						filePath: 'src/components/Button.tsx',
+						description: '',
+						exportName: 'Button',
+						props: {
+							variant: {
+								name: 'variant',
+								description: 'Button style variant',
+								required: false,
+								defaultValue: { value: '"primary"' },
+								type: {
+									name: 'enum',
+									raw: '"primary" | "secondary"',
+								},
+							},
+							disabled: {
+								name: 'disabled',
+								description: 'Disable the button',
+								required: false,
+								defaultValue: null,
+								type: {
+									name: 'boolean',
+								},
+							},
+						},
+					},
+				},
+			},
+		};
+
+		getManifestsSpy.mockResolvedValue({
+			componentManifest: manifestWithReactComponentMeta,
+		});
+
+		const request = {
+			jsonrpc: '2.0' as const,
+			id: 1,
+			method: 'tools/call',
+			params: {
+				name: GET_TOOL_NAME,
+				arguments: {
+					id: 'button',
+				},
+			},
+		};
+
+		const mockHttpRequest = new Request('https://example.com/mcp');
+		const response = await server.receive(request, {
+			custom: { request: mockHttpRequest },
+		});
+
+		expect(response.result).toMatchInlineSnapshot(`
+			{
+			  "content": [
+			    {
+			      "text": "# Button
+
+			ID: button
+
+			A button component
+
+			## Props
+
+			\`\`\`
+			export type Props = {
+			  /**
+			    Button style variant
+			  */
+			  variant?: "primary" | "secondary" = "primary";
+			  /**
+			    Disable the button
+			  */
+			  disabled?: boolean;
+			}
+			\`\`\`",
+			      "type": "text",
+			    },
+			  ],
+			}
+		`);
+	});
+
 	describe('multi-source mode', () => {
 		const sources = [
 			{ id: 'local', title: 'Local' },
diff --git a/packages/mcp/src/types.ts b/packages/mcp/src/types.ts
@@ -133,6 +133,8 @@ export const ComponentManifest = v.object({
 	reactDocgen: v.optional(v.any()),
 	// loose schema for react-docgen-typescript types
 	reactDocgenTypescript: v.optional(v.any()),
+	// loose schema for react-component-meta types
+	reactComponentMeta: v.optional(v.any()),
 	docs: v.optional(v.record(v.string(), Doc)),
 });
 export type ComponentManifest = v.InferOutput<typeof ComponentManifest>;
diff --git a/packages/mcp/src/utils/manifest-formatter/markdown.test.ts b/packages/mcp/src/utils/manifest-formatter/markdown.test.ts
@@ -601,6 +601,59 @@ describe('MarkdownFormatter - formatComponentManifest', () => {
 			`);
 		});
 
+		it('should format props from reactComponentMeta', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				reactComponentMeta: {
+					displayName: 'Button',
+					filePath: 'src/components/Button.tsx',
+					description: '',
+					exportName: 'Button',
+					props: {
+						variant: {
+							name: 'variant',
+							description: 'The visual style variant',
+							type: { name: 'enum', raw: '"primary" | "secondary"' },
+							defaultValue: { value: '"primary"' },
+							required: false,
+						},
+						onClick: {
+							name: 'onClick',
+							description: 'Click handler',
+							type: { name: '(event: MouseEvent) => void' },
+							defaultValue: null,
+							required: true,
+						},
+					},
+				},
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			expect(result).toMatchInlineSnapshot(`
+				"# Button
+
+				ID: button
+
+				## Props
+
+				\`\`\`
+				export type Props = {
+				  /**
+				    The visual style variant
+				  */
+				  variant?: "primary" | "secondary" = "primary";
+				  /**
+				    Click handler
+				  */
+				  onClick: (event: MouseEvent) => void;
+				}
+				\`\`\`"
+			`);
+		});
+
 		it('should prefer reactDocgen over reactDocgenTypescript when both are present', () => {
 			const manifest: ComponentManifest = {
 				id: 'button',
@@ -638,6 +691,50 @@ describe('MarkdownFormatter - formatComponentManifest', () => {
 			expect(result).not.toContain('From react-docgen-typescript');
 		});
 
+		it('should prefer reactDocgenTypescript over reactComponentMeta when both are present', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				reactDocgenTypescript: {
+					displayName: 'Button',
+					filePath: 'src/components/Button.tsx',
+					description: '',
+					exportName: 'Button',
+					methods: [],
+					props: {
+						label: {
+							name: 'label',
+							description: 'From react-docgen-typescript',
+							type: { name: 'string' },
+							defaultValue: null,
+							required: true,
+						},
+					},
+				},
+				reactComponentMeta: {
+					displayName: 'Button',
+					filePath: 'src/components/Button.tsx',
+					description: '',
+					exportName: 'Button',
+					props: {
+						label: {
+							name: 'label',
+							description: 'From react-component-meta',
+							type: { name: 'string' },
+							defaultValue: null,
+							required: true,
+						},
+					},
+				},
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			expect(result).toContain('From react-docgen-typescript');
+			expect(result).not.toContain('From react-component-meta');
+		});
+
 		it('should limit stories when reactDocgenTypescript has props', () => {
 			const manifest: ComponentManifest = {
 				id: 'button',
@@ -688,6 +785,54 @@ describe('MarkdownFormatter - formatComponentManifest', () => {
 			expect(result).toContain('- WithIcon: Button with an icon');
 		});
 
+		it('should limit stories when reactComponentMeta has props', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				import: 'import { Button } from "@/components";',
+				stories: [
+					{ name: 'Default', snippet: '<Button>Default</Button>' },
+					{ name: 'Primary', snippet: '<Button variant="primary">Primary</Button>' },
+					{ name: 'Secondary', snippet: '<Button variant="secondary">Secondary</Button>' },
+					{
+						name: 'Disabled',
+						summary: 'Button in disabled state',
+						snippet: '<Button disabled>Disabled</Button>',
+					},
+					{
+						name: 'WithIcon',
+						description: 'Button with an icon',
+						snippet: '<Button icon="check">With Icon</Button>',
+					},
+				],
+				reactComponentMeta: {
+					displayName: 'Button',
+					filePath: 'src/components/Button.tsx',
+					description: '',
+					exportName: 'Button',
+					props: {
+						variant: {
+							name: 'variant',
+							description: '',
+							type: { name: 'string' },
+							defaultValue: null,
+							required: false,
+						},
+					},
+				},
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			expect(result).toContain('### Default');
+			expect(result).toContain('### Primary');
+			expect(result).toContain('### Secondary');
+			expect(result).toContain('### Other Stories');
+			expect(result).toContain('- Disabled: Button in disabled state');
+			expect(result).toContain('- WithIcon: Button with an icon');
+		});
+
 		it('should format props with only name and type as bullet list', () => {
 			const manifest: ComponentManifest = {
 				id: 'button',
diff --git a/packages/mcp/src/utils/manifest-formatter/markdown.ts b/packages/mcp/src/utils/manifest-formatter/markdown.ts
@@ -1,5 +1,6 @@
 import type { AllManifests, ComponentManifest, Doc, SourceManifests, Story } from '../../types.ts';
 import {
+	parseReactComponentMeta,
 	parseReactDocgen,
 	parseReactDocgenTypescript,
 	type ParsedDocgen,
@@ -61,7 +62,8 @@ function extractSummary(
 }
 
 /**
- * Extract parsed docgen from a component manifest, preferring reactDocgen over reactDocgenTypescript.
+ * Extract parsed docgen from a component manifest, preferring reactDocgen over
+ * reactDocgenTypescript over reactComponentMeta.
  */
 function getParsedDocgen(componentManifest: ComponentManifest): ParsedDocgen | undefined {
 	if (componentManifest.reactDocgen) {
@@ -70,6 +72,9 @@ function getParsedDocgen(componentManifest: ComponentManifest): ParsedDocgen | u
 	if (componentManifest.reactDocgenTypescript) {
 		return parseReactDocgenTypescript(componentManifest.reactDocgenTypescript);
 	}
+	if (componentManifest.reactComponentMeta) {
+		return parseReactComponentMeta(componentManifest.reactComponentMeta);
+	}
 	return undefined;
 }
 
diff --git a/packages/mcp/src/utils/parse-react-docgen.ts b/packages/mcp/src/utils/parse-react-docgen.ts
@@ -13,6 +13,10 @@ export type ParsedDocgen = {
 	>;
 };
 
+// Storybook's `reactComponentMeta` payload is not the same full schema as
+// `react-docgen-typescript`'s `ComponentDoc`, but `props` has the same type shape.
+type ComponentDocLike = Pick<ComponentDoc, 'props'>;
+
 // Serialize a react-docgen tsType into a TypeScript-like string when raw is not available
 function serializeTsType(tsType: PropDescriptor['tsType']): string | undefined {
 	if (!tsType) return undefined;
@@ -93,8 +97,8 @@ export const parseReactDocgen = (reactDocgen: Documentation): ParsedDocgen => {
  * RDT uses flat type strings (prop.type.name / prop.type.raw) instead of react-docgen's
  * nested tsType structure, so no serialization is needed.
  */
-export const parseReactDocgenTypescript = (reactDocgenTypescript: ComponentDoc): ParsedDocgen => {
-	const props = reactDocgenTypescript.props ?? {};
+const parseComponentDocLike = (componentDoc: ComponentDocLike): ParsedDocgen => {
+	const props = componentDoc.props ?? {};
 	return {
 		props: Object.fromEntries(
 			Object.entries(props).map(([propName, prop]) => [
@@ -111,3 +115,9 @@ export const parseReactDocgenTypescript = (reactDocgenTypescript: ComponentDoc):
 		),
 	};
 };
+
+export const parseReactDocgenTypescript = (reactDocgenTypescript: ComponentDoc): ParsedDocgen =>
+	parseComponentDocLike(reactDocgenTypescript);
+
+export const parseReactComponentMeta = (reactComponentMeta: ComponentDocLike): ParsedDocgen =>
+	parseComponentDocLike(reactComponentMeta);
