Wire up reactDocgen parsing to component documentation tool

[Copilot]

This PR integrates the reactDocgen parsing functionality (added in #37) into the @storybook/mcp package architecture, enabling the get-component-documentation tool to display React component prop information in a structured XML format.

What changed

Type System

Added an optional reactDocgen field to the ComponentManifest valibot schema to accept raw react-docgen output from Storybook's component analysis.

XML Formatting

Enhanced formatComponentManifest() to generate a <props> section when reactDocgen is present:

<props>
  <prop>
    <prop_name>variant</prop_name>
    <prop_type>"primary" | "secondary"</prop_type>
    <prop_required>false</prop_required>
    <prop_default>"primary"</prop_default>
    <prop_description>
      Button style variant
    </prop_description>
  </prop>
</props>

The formatting includes all optional fields (type, required, default, description) only when they have defined values, providing AI agents with rich component prop metadata.

Testing

• Added 5 unit tests in format-manifest.test.ts covering various scenarios (full props, minimal props, missing reactDocgen)
• Added 1 integration test in get-component-documentation.test.ts verifying end-to-end flow
• Increased test count from 61 to 67 tests, all passing
• Maintained >91% overall coverage, 100% on format-manifest.ts

Documentation

Updated Copilot instructions with a comprehensive "Component Manifest and ReactDocgen Support" section explaining:

• How reactDocgen data flows through the system
• Type serialization examples (unions, functions, objects, arrays, generics)
• XML output format
• When optional fields are included

Why this matters

This enhancement allows AI agents using the MCP server to access detailed React component prop information, including TypeScript types, default values, required status, and descriptions. This makes it significantly easier for agents to understand component APIs and generate correct usage examples.

Verification

• ✅ All 67 tests passing
• ✅ >91% statement coverage
• ✅ Builds successfully
• ✅ Type checking passes
• ✅ Code review: No issues
• ✅ Security scan: No vulnerabilities

Original prompt

This branch - described in PR #37 - adds support for parsing the reactDocgen property of a component manifest.
Now we need to wire it up to the rest of the architecture in the @storybook/mcp package.
the get-component-documentation tool should include the parsed props too in the result, with their optional fields.

remember unit tests, test coverage, updating valibot validations, the xml formatting and updating Copilot instructions.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: fc83cd1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@storybook/addon-mcp	Patch
@storybook/mcp	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

npm i https://pkg.pr.new/@storybook/addon-mcp@38

npm i https://pkg.pr.new/@storybook/mcp@38

commit: fc83cd1

[Copilot]

Pull Request Overview

This PR integrates reactDocgen parsing functionality into the @storybook/mcp package, enabling the get-component-documentation tool to display React component prop information in a structured XML format. The changes wire up the previously added parsing utilities to the component documentation workflow, making prop metadata accessible to AI agents.

Key changes:

• Added reactDocgen field to ComponentManifest schema for accepting react-docgen output
• Enhanced XML formatting to include <props> sections with detailed prop metadata
• Added comprehensive test coverage (6 new tests) verifying the integration

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/mcp/src/utils/parse-react-docgen.ts	Consolidated import statements for react-docgen types
packages/mcp/src/utils/format-manifest.ts	Added logic to parse and format reactDocgen data into XML props section
packages/mcp/src/utils/format-manifest.test.ts	Added 5 unit tests covering various prop formatting scenarios
packages/mcp/src/types.ts	Updated ComponentManifest schema to include optional reactDocgen field
packages/mcp/src/tools/get-component-documentation.test.ts	Added integration test verifying end-to-end reactDocgen flow
packages/mcp/fixtures/*.json	Updated fixture data to use react-docgen format instead of JSON schema
packages/addon-mcp/package.json	Bumped version and specified minimum Storybook version
packages/addon-mcp/README.md	Enhanced documentation with component documentation tools section
packages/addon-mcp/CHANGELOG.md	Added changelog entry for version 0.0.9
README.md	Updated testing documentation and added debugging instructions
.github/instructions/mcp.instructions.md	Added comprehensive ReactDocgen support documentation

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.