Skip to content

Conversation

@JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Oct 29, 2025

This PR adds a GET handler to /mcp in @storybook/addon-mcp that shows the addon is successfully running. When component manifests exists, it automatically redirects to human readable component manifests. See storybookjs/storybook#32882

Recording of the experience of visiting /mcp now:

mcp-het.mp4

It also updates the manifest format to account for errors and missing snippets. See storybookjs/storybook#32855

Copilot AI review requested due to automatic review settings October 29, 2025 21:57
@changeset-bot
Copy link

changeset-bot bot commented Oct 29, 2025

🦋 Changeset detected

Latest commit: 51eea40

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

This PR includes changesets to release 1 package
Name Type
@storybook/addon-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

@codecov
Copy link

codecov bot commented Oct 29, 2025

Bundle Report

Changes will increase total bundle size by 3.74kB (11.03%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name Size Change
@storybook/mcp-esm 20.0kB 692 bytes (3.58%) ⬆️
@storybook/addon-mcp-esm 17.62kB 3.04kB (20.89%) ⬆️⚠️

Affected Assets, Files, and Routes:

view changes for bundle: @storybook/addon-mcp-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
preset.js 3.04kB 17.62kB 20.89% ⚠️

Files in preset.js:

  • ./src/types.ts → Total Size: 614 bytes

  • ./src/preset.ts → Total Size: 3.19kB

  • ./src/mcp-handler.ts → Total Size: 3.74kB

  • ./src/tools/is-manifest-available.ts → Total Size: 359 bytes

view changes for bundle: @storybook/mcp-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
index.js 90 bytes 13.22kB 0.69%
index.d.ts 602 bytes 6.78kB 9.75% ⚠️

Files in index.js:

  • ./src/utils/format-manifest.ts → Total Size: 2.71kB

  • ./src/types.ts → Total Size: 738 bytes

@codecov
Copy link

codecov bot commented Oct 29, 2025

Codecov Report

❌ Patch coverage is 27.50000% with 29 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.91%. Comparing base (3191cd4) to head (51eea40).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
packages/addon-mcp/src/preset.ts 0.00% 26 Missing ⚠️
packages/mcp/src/utils/format-manifest.ts 0.00% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main      #50      +/-   ##
==========================================
- Coverage   84.50%   81.91%   -2.59%     
==========================================
  Files          14       15       +1     
  Lines         813      846      +33     
  Branches      157      159       +2     
==========================================
+ Hits          687      693       +6     
- Misses        118      145      +27     
  Partials        8        8              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 29, 2025

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

commit: 51eea40

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR updates the component manifest format to include a required path field, adds an optional error field, makes several fields truly optional (switching from exactOptional to optional), and introduces a GET handler for the /mcp endpoint that serves an HTML page with conditional redirection to the component manifest viewer.

Key changes:

  • Required path field added to ComponentManifest schema and all test fixtures
  • Changed from v.exactOptional() to v.optional() for various manifest fields
  • Added optional error field to BaseManifest for error reporting
  • Made Example.snippet optional and added guard to skip examples without snippets
  • Introduced GET handler for /mcp that serves HTML to browsers and plain text to API clients
  • Extracted isManifestAvailable utility function for reusability

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
packages/mcp/src/types.ts Updated schema to add required path field, optional error field, and changed exactOptional to optional
packages/mcp/src/utils/format-manifest.ts Added guard to skip examples without snippets
packages/mcp/src/utils/format-manifest.test.ts Added path field to all test fixtures
packages/mcp/src/utils/get-manifest.test.ts Added path field to test fixtures and improved formatting
packages/mcp/fixtures/*.fixture.json Added path field to all component fixtures
packages/addon-mcp/src/tools/is-manifest-available.ts Extracted utility function for checking manifest availability
packages/addon-mcp/src/preset.ts Changed to async function, added GET handler for /mcp with HTML response and conditional redirect
packages/addon-mcp/src/mcp-handler.ts Refactored to use extracted isManifestAvailable utility
packages/addon-mcp/CHANGELOG.md Added changelog entries for versions 0.0.1-0.0.5
CHANGELOG.md Removed duplicate changelog content (moved to package-specific file)
.changeset/*.md Added changesets for manifest format update and GET handler addition

Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I imagine we'll want to redesign this but this is a great first iteration.

Longer term I worry that people might not know what the component manifest is and so it might be better to have a list of toolsets and statuses, rather than a redirect:

Dev [description] [disabled]
Docs [description] [view manifest]

@JReinhold
Copy link
Contributor Author

Longer term I worry that people might not know what the component manifest is and so it might be better to have a list of toolsets and statuses, rather than a redirect:

Dev [description] [disabled]
Docs [description] [view manifest]

Yeah I can see how that makes sense. I'd want to avoid duplication between this page and the documentation (to avoid getting them out of sync), so we should try and link out to the docs on the matter as much as possible.

@JReinhold JReinhold merged commit 0334d29 into main Oct 30, 2025
12 of 14 checks passed
@JReinhold JReinhold deleted the get-handler branch October 30, 2025 09:45
@github-actions github-actions bot mentioned this pull request Oct 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants