feat: add screenshot-story MCP tool

[Larkooo]

Summary

• Adds a screenshot-story MCP tool that renders a Storybook story in a headless browser (Playwright) and returns a PNG screenshot as MCP image content
• Creates a browser-manager utility with lazy singleton browser, concurrent-launch protection, and cleanup guards
• Playwright is an optional peer dependency — the tool is automatically hidden when Playwright is not installed

Test plan

• pnpm build — project builds cleanly
• pnpm vitest --project=@storybook/addon-mcp --run — all 192 tests pass (14 new tests added)
• pnpm typecheck — no type errors
• Manual: start Storybook, use MCP Inspector to call screenshot-story with a story ID and verify a PNG image is returned

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: 53c4e1f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[JReinhold]

Thanks for the PR @Larkooo! Can you tell me about the use case you want to support here? What workflow are you envisioning for this? How is this helping you and/or the agent?

[Larkooo]

Thanks for the PR @Larkooo! Can you tell me about the use case you want to support here? What workflow are you envisioning for this? How is this helping you and/or the agent?

Yes, we're basically trying to automate some workflows that necessitate illustrations of components from our website with agents and found that storybook might be the best way of doing so instead of screenshotting the live website.

Storybook allows us to embed mock values so we were thinking of using it with agents for them to provide mock values of their choosing for a certain situation, and retrieve a screenshot that they can then use. Like for eg. an agent exporting illustrations for various situations and then using them for app thumbnails etc.

[pkg-pr-new]

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

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

commit: 53c4e1f

[JReinhold]

@Larkooo that's a funny use case of this that I haven't heard of before. Have you actually used this workflow in practice successfully, or are you still tinkering with it?

I've triggered a preview release of this branch so you can play around with it.

[Larkooo]

@Larkooo that's a funny use case of this that I haven't heard of before. Have you actually used this workflow in practice successfully, or are you still tinkering with it?

I've triggered a preview release of this branch so you can play around with it.

Yes, well we haven't really used it just yet for any practical reason but I gave it a shot with the preview and it seems to generate those screenshots pretty nicely. Plus the tool is only exposed if playwright is available. That way the agent doesnt need to navigate to storybook with playwright and take the screenshot itself etc.. which on top of that isn't the best since sometimes we want illustrations with specific viewports and only capture the content etc.

I'd like to also experiment with exporting little clips of the agent actually interacting with the storybook components (like clicking and seeing the animation) bit I'm not sure if it is too much

[JReinhold]

Thank you for your input and ideas, much appreciated! However we won't be incorporating this.

A tool like this doesn't align with our plans for the MCP or its capabilities.
Instead, in the near future, we're hoping to expand the Testing tool, with additional information like screenshots and DOM snapshots, which the agent can use to improve its understanding of the stories, and matches our general thinking of the optimal workflows. I would imagine that it also solves your use case.