add attached docs to component documentation output

Author: JReinhold

.changeset/silent-lamps-argue.md

@@ -0,0 +1,8 @@
+---
+'@storybook/mcp': patch
+'@storybook/addon-mcp': patch
+---
+
+Render component-attached MDX docs entries in markdown output for `get-documentation`.
+
+This fixes a regression where docs attached to components via `component.docs` in `components.json` were not included in markdown responses. The markdown formatter now emits a `## Docs` section below stories (and before props).

apps/internal-storybook/tests/mcp-endpoint.e2e.test.ts

@@ -493,77 +493,19 @@ describe('MCP Endpoint E2E Tests', () => {
 				},
 			});
 
-			expect(response.result).toMatchInlineSnapshot(`
-				{
-				  "content": [
-				    {
-				      "text": "# Button
-
-				ID: example-button
-
-				Primary UI component for user interaction
-
-				## Stories
-
-				### Primary
-
-				\`\`\`
-				import { Button } from "@my-org/my-component-library";
-
-				const Primary = () => <Button onClick={fn()} primary label="Button" />;
-				\`\`\`
-
-				### Secondary
-
-				\`\`\`
-				import { Button } from "@my-org/my-component-library";
-
-				const Secondary = () => <Button onClick={fn()} label="Button" />;
-				\`\`\`
-
-				### Large
-
-				\`\`\`
-				import { Button } from "@my-org/my-component-library";
-
-				const Large = () => <Button onClick={fn()} size="large" label="Button" />;
-				\`\`\`
-
-				### Other Stories
-
-				- Small
-
-				## Props
+			expect(response.result).toHaveProperty('content');
+			expect(response.result.content[0]).toHaveProperty('type', 'text');
 
-				\`\`\`
-				export type Props = {
-				  /**
-				    Is this the principal call to action on the page?
-				  */
-				  primary?: boolean = false;
-				  /**
-				    What background color to use
-				  */
-				  backgroundColor?: string;
-				  /**
-				    How large should the button be?
-				  */
-				  size?: 'small' | 'medium' | 'large' = 'medium';
-				  /**
-				    Button contents
-				  */
-				  label: string;
-				  /**
-				    Optional click handler
-				  */
-				  onClick?: () => void;
-				}
-				\`\`\`",
-				      "type": "text",
-				    },
-				  ],
-				}
-			`);
+			const text = response.result.content[0].text as string;
+			expect(text).toContain('# Button');
+			expect(text).toContain('## Stories');
+			expect(text).toContain('## Docs');
+			expect(text).toContain('### Additional Information');
+			expect(text).toContain(
+				'that the string passed to the `label` prop uses the 🍌-emoji instead of spaces.',
+			);
+			expect(text).toContain('<Canvas of={ButtonStories.Primary} />');
+			expect(text).toContain('## Props');
 		});
 
 		it('should return error for non-existent component', async () => {

packages/mcp/src/utils/manifest-formatter/markdown.test.ts

@@ -385,6 +385,94 @@ describe('MarkdownFormatter - formatComponentManifest', () => {
 		});
 	});
 
+	describe('attached docs section', () => {
+		it('should include attached docs', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				stories: [
+					{
+						name: 'Primary',
+						snippet: '<Button>Primary</Button>',
+					},
+				],
+				docs: {
+					'button--additional-information': {
+						id: 'button--additional-information',
+						name: 'Additional Information',
+						title: 'Button',
+						path: 'src/components/Button.mdx',
+						content: 'Detailed docs content',
+					},
+				},
+				reactDocgen: {
+					props: {
+						size: {
+							type: { name: 'string' },
+						},
+					},
+				},
+			};
+
+			const result = markdownFormatter.formatComponentManifest(manifest);
+
+			expect(result).toMatchInlineSnapshot(`
+				"# Button
+
+				ID: button
+
+				## Stories
+
+				### Primary
+
+				\`\`\`
+				<Button>Primary</Button>
+				\`\`\`
+
+				## Props
+
+				\`\`\`
+				export type Props = {
+				  size: string;
+				}
+				\`\`\`
+
+				## Docs
+
+				### Additional Information
+
+				Detailed docs content"
+			`);
+
+			expect(result.indexOf('## Docs')).toBeGreaterThan(result.indexOf('## Stories'));
+			expect(result.indexOf('## Docs')).toBeGreaterThan(result.indexOf('## Props'));
+			expect(result).not.toContain('ID: button--additional-information');
+		});
+
+		it('should not include docs section when all attached docs have empty trimmed content', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				docs: {
+					'button--blank': {
+						id: 'button--blank',
+						name: 'Blank Doc',
+						title: 'Button',
+						path: 'src/components/ButtonBlank.mdx',
+						content: '   \n\t  ',
+					},
+				},
+			};
+
+			const result = markdownFormatter.formatComponentManifest(manifest);
+
+			expect(result).not.toContain('## Docs');
+			expect(result).not.toContain('### Blank Doc');
+		});
+	});
+
 	describe('props section - table format', () => {
 		it('should format props with rich metadata as table', () => {
 			const manifest: ComponentManifest = {

packages/mcp/src/utils/manifest-formatter/markdown.ts

@@ -156,6 +156,26 @@ export const markdownFormatter: ManifestFormatter = {
 			}
 		}
 
+		// Attached docs section
+		if (componentManifest.docs && Object.keys(componentManifest.docs).length > 0) {
+			const docsWithContent = Object.values(componentManifest.docs).filter(
+				(doc) => doc.content.trim().length > 0,
+			);
+
+			if (docsWithContent.length > 0) {
+				parts.push('## Docs');
+				parts.push('');
+
+				for (const doc of docsWithContent) {
+					parts.push(`### ${doc.name}`);
+					parts.push('');
+
+					parts.push(doc.content);
+					parts.push('');
+				}
+			}
+		}
+
 		return parts.join('\n').trim();
 	},