Render subcomponents in get-documentation

Author: kasperpeulen

packages/mcp/src/tools/get-documentation.test.ts

@@ -381,6 +381,100 @@ describe('getDocumentationTool', () => {
 		`);
 	});
 
+	it('should include subcomponents in get-documentation output', async () => {
+		getManifestsSpy.mockResolvedValue({
+			componentManifest: {
+				v: 1,
+				components: {
+					'combo-box': {
+						id: 'combo-box',
+						name: 'ComboBox',
+						path: 'src/components/ComboBox.tsx',
+						description: 'A combo box component',
+						subcomponents: {
+							Item: {
+								name: 'ComboBoxItem',
+								path: 'src/components/ComboBoxItem.tsx',
+								description: 'Use for individual options.',
+								import: 'import { ComboBoxItem } from "@/components";',
+								reactComponentMeta: {
+									displayName: 'ComboBoxItem',
+									filePath: 'src/components/ComboBoxItem.tsx',
+									description: '',
+									exportName: 'ComboBoxItem',
+									props: {
+										textValue: {
+											name: 'textValue',
+											description: 'Required when children are not plain text.',
+											required: false,
+											defaultValue: null,
+											type: {
+												name: 'string',
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		});
+
+		const request = {
+			jsonrpc: '2.0' as const,
+			id: 1,
+			method: 'tools/call',
+			params: {
+				name: GET_TOOL_NAME,
+				arguments: {
+					id: 'combo-box',
+				},
+			},
+		};
+
+		const mockHttpRequest = new Request('https://example.com/mcp');
+		const response = await server.receive(request, {
+			custom: { request: mockHttpRequest },
+		});
+
+		expect(response.result).toMatchInlineSnapshot(`
+			{
+			  "content": [
+			    {
+			      "text": "# ComboBox
+
+			ID: combo-box
+
+			A combo box component
+
+			## Subcomponents
+
+			### ComboBoxItem
+
+			Use for individual options.
+
+			\`\`\`
+			import { ComboBoxItem } from "@/components";
+			\`\`\`
+
+			#### Props
+
+			\`\`\`
+			export type ComboBoxItemProps = {
+			  /**
+			    Required when children are not plain text.
+			  */
+			  textValue?: string;
+			}
+			\`\`\`",
+			      "type": "text",
+			    },
+			  ],
+			}
+		`);
+	});
+
 	describe('multi-source mode', () => {
 		const sources = [
 			{ id: 'local', title: 'Local' },

packages/mcp/src/types.ts

@@ -122,13 +122,28 @@ export type Doc = v.InferOutput<typeof Doc>;
  */
 export type ComponentDocWithExportName = ComponentDoc & { exportName: string };
 
+export const ComponentSubcomponentManifest = v.object({
+	...BaseManifest.entries,
+	path: v.string(),
+	summary: v.optional(v.string()),
+	import: v.optional(v.string()),
+	// loose schema for react-docgen types
+	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()),
+});
+export type ComponentSubcomponentManifest = v.InferOutput<typeof ComponentSubcomponentManifest>;
+
 export const ComponentManifest = v.object({
 	...BaseManifest.entries,
 	id: v.string(),
 	path: v.string(),
 	summary: v.optional(v.string()),
 	import: v.optional(v.string()),
 	stories: v.optional(v.array(Story)),
+	subcomponents: v.optional(v.record(v.string(), ComponentSubcomponentManifest)),
 	// loose schema for react-docgen types, as they are pretty complex
 	reactDocgen: v.optional(v.any()),
 	// loose schema for react-docgen-typescript types

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

@@ -66,6 +66,79 @@ describe('MarkdownFormatter - formatComponentManifest', () => {
 		});
 	});
 
+	describe('subcomponents section', () => {
+		it('should include subcomponent docs and props before stories', () => {
+			const manifest: ComponentManifest = {
+				id: 'combo-box',
+				name: 'ComboBox',
+				path: 'src/components/ComboBox.tsx',
+				description: 'A combo box component',
+				subcomponents: {
+					Item: {
+						name: 'ComboBoxItem',
+						path: 'src/components/ComboBoxItem.tsx',
+						description: 'Use for individual list items.',
+						import: 'import { ComboBoxItem } from "@/components";',
+						reactComponentMeta: {
+							displayName: 'ComboBoxItem',
+							filePath: 'src/components/ComboBoxItem.tsx',
+							description: '',
+							exportName: 'ComboBoxItem',
+							props: {
+								textValue: {
+									name: 'textValue',
+									description: 'Required when the children are not plain text.',
+									required: false,
+									defaultValue: null,
+									type: {
+										name: 'string',
+									},
+								},
+							},
+						},
+					},
+				},
+				stories: [
+					{
+						name: 'Default',
+						snippet: '<ComboBox />',
+					},
+				],
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			expect(result).toContain('## Subcomponents');
+			expect(result).toContain('### ComboBoxItem');
+			expect(result).toContain('#### Props');
+			expect(result).toContain('export type ComboBoxItemProps = {');
+			expect(result.indexOf('## Subcomponents')).toBeLessThan(result.indexOf('## Stories'));
+		});
+
+		it('should include subcomponent errors when docgen is unavailable', () => {
+			const manifest: ComponentManifest = {
+				id: 'combo-box',
+				name: 'ComboBox',
+				path: 'src/components/ComboBox.tsx',
+				subcomponents: {
+					Item: {
+						name: 'ComboBoxItem',
+						path: 'src/components/ComboBoxItem.tsx',
+						error: {
+							name: 'No component import found',
+							message: 'No component file found for ComboBoxItem.',
+						},
+					},
+				},
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			expect(result).toContain('Error: No component import found');
+			expect(result).toContain('No component file found for ComboBoxItem.');
+		});
+	});
+
 	describe('stories section', () => {
 		it('should include story ID in detailed story output', () => {
 			const manifest: ComponentManifest = {