Adding the storybook mcp agent so that copilot can effectively work with our storybook docs by jonrohan · Pull Request #7704 · primer/react

jonrohan · 2026-03-25T21:49:34Z

This PR adds an agent that checks if Storybook is running on port 6006, starts it from the workspace root (npm start) in the background if not, waits for it to be ready, then calls the primer-storybook MCP tools to look up component docs, stories, and live previews.

Example prompts to try:

/storybook What props does the Button component accept?
/storybook Show me the stories for ActionMenu
/storybook I'm writing a story for Dialog — what imports and patterns do I use?
/storybook Preview all variants of the Banner component

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

changeset-bot · 2026-03-25T21:49:43Z

⚠️ No Changeset found

Latest commit: 283b1f4

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

github-actions · 2026-03-25T21:49:48Z

Uh oh! @jonrohan, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

Images should have meaningful alternative text (alt text) at line 10

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

Copilot

Pull request overview

This PR updates the repo’s Storybook setup to support the Storybook MCP add-on/server so Copilot can query component docs/stories and generate previews via an MCP endpoint exposed by the local Storybook dev server.

Changes:

Bump Storybook (and related addons/lint plugin) to ^10.3.3 across workspaces and root.
Enable the MCP addon in Storybook config and expose it via a VS Code MCP server entry pointing at http://localhost:6006/mcp.
Add a Copilot “storybook” skill doc and update Copilot instructions to reference it.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/styled-react/package.json	Updates `@storybook/react-vite` to match the newer Storybook version.
packages/react/package.json	Adds `--no-open` to Storybook dev script; bumps Storybook packages; adds `@storybook/addon-mcp`.
packages/react/.storybook/preview.jsx	Updates viewport parameter configuration key (`viewports` → `options`).
packages/react/.storybook/main.ts	Registers `@storybook/addon-mcp` and enables `features.componentsManifest`.
package.json	Bumps root `storybook` and `eslint-plugin-storybook` versions.
package-lock.json	Captures dependency graph updates from the Storybook + MCP add-on upgrade.
.vscode/mcp.json	Adds `primer-storybook` MCP HTTP server pointing at the local Storybook `/mcp` endpoint.
.github/skills/storybook/SKILL.md	Adds Copilot skill instructions for starting Storybook and using the MCP tools.
.github/copilot-instructions.md	Points Copilot to the new Storybook skill doc for MCP usage guidance.

Copilot · 2026-03-25T21:53:57Z

.github/skills/storybook/SKILL.md

+- **Always** call `list-all-documentation` before `get-documentation` — never guess or derive an ID from a component name. Only use `id` values returned by this list.
+- **Never invent props or variants** not present in the documentation. Only use properties explicitly documented or shown in example stories — do not assume properties based on naming conventions or patterns from other libraries. If a property isn't documented, report it as not found and check back with the user.
+- Before writing or editing stories, always call `get-storybook-story-instructions` — treat its output as the source of truth.
+- Check your work by running `run-story-tests`.


run-story-tests doesn’t appear to be a runnable command or documented script in this repo (a full-text search only finds it here). This will send users down a dead end; please replace it with an actual verification command used in this repo (e.g. the Playwright Storybook-based checks documented in contributor-docs/testing.md) or remove this bullet if there isn’t a supported local command.

Suggested change

- Check your work by running `run-story-tests`.

- Check your work by running Storybook E2E tests from the repo root (with Storybook running): `script/test-e2e --grep @vrt` for visual regression and `script/test-e2e --grep @avt` for accessibility.

primer · 2026-03-25T21:54:11Z