Skip to content

feat(storybook): add storybook-webmcp addon for AI agents #1116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JBWatenbergScality merged 4 commits into from
May 26, 2026
Merged

feat(storybook): add storybook-webmcp addon for AI agents #1116

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3987e27
feat(storybook): add @jbwatenbergscality/storybook-webmcp addon
JBWatenbergScality May 25, 2026
e1e822f
ci: pass NODE_AUTH_TOKEN so npm ci can fetch storybook-webmcp from GHPR
JBWatenbergScality May 25, 2026
8efc869
ci: pass NODE_AUTH_TOKEN to npm ci in deploy + post-release workflows
JBWatenbergScality May 26, 2026
7ae3673
fix(ci): avoid leaking GITHUB_TOKEN to npmjs in post-release publish-npm
JBWatenbergScality May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .github/workflows/github-pages.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ jobs:
with:
node-version: 24
- run: npm ci
env:
# storybook-webmcp is hosted on GitHub Packages (npm.pkg.github.com).
# Even public GHPR packages require an auth token.
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Configure git credentials
run: git config --global url."https://x-access-token:${{ github.token }}@github.com/".insteadOf "https://github.com/"
- run: npm run storybook:deploy
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/post-release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,5 +66,9 @@ jobs:
node-version: "24"
registry-url: "https://registry.npmjs.org"
- run: npm ci
env:
# storybook-webmcp is hosted on GitHub Packages (npm.pkg.github.com).
# Even public GHPR packages require an auth token.
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

@claude claude Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

setup-node with registry-url: "https://registry.npmjs.org" writes //registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN} to ~/.npmrc. Setting NODE_AUTH_TOKEN to GITHUB_TOKEN here means the GitHub token is sent to registry.npmjs.org during npm ci — credential leakage to a third-party service.

The other three workflows don't use registry-url, so they're fine.

To avoid the collision, inject GHPR auth directly instead of through NODE_AUTH_TOKEN:

Suggested change
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
env:
# storybook-webmcp is hosted on GitHub Packages (npm.pkg.github.com).
# Even public GHPR packages require an auth token.
# Use a separate step to avoid NODE_AUTH_TOKEN collision with setup-node's npmjs auth.
- run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc
- run: npm ci

This keeps GHPR auth out of the NODE_AUTH_TOKEN channel that setup-node reserves for npmjs, and also means the _authToken=${NODE_AUTH_TOKEN} line in the project .npmrc can be dropped (reducing the local-dev setup burden flagged in the PR description).

@JBWatenbergScality JBWatenbergScality May 26, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Good catch — fixed in 7ae3673.

Switched post-release.yml's npm ci step to write the GHPR auth line directly to ~/.npmrc (your exact suggested pattern) so the GitHub token never goes through NODE_AUTH_TOKEN where setup-node's npmjs auth line could pick it up.

I kept the other three workflows (storybook-build, tests, github-pages) on the NODE_AUTH_TOKEN env pattern since none of them call setup-node with registry-url, so the leak path doesn't exist there. Happy to unify all four onto the echo pattern if you'd prefer consistency over minimal-diff.

- run: npm run build
- run: npm publish
4 changes: 4 additions & 0 deletions .github/workflows/storybook-build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ jobs:
with:
node-version: 24
- run: npm ci
env:
# storybook-webmcp is hosted on GitHub Packages (npm.pkg.github.com).
# Even public GHPR packages require an auth token.
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: npm run build-storybook
env:
STORYBOOK_DISABLE_TELEMETRY: 1
4 changes: 4 additions & 0 deletions .github/workflows/tests.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,9 @@ jobs:
with:
node-version: 24
- run: npm ci
env:
# storybook-webmcp is hosted on GitHub Packages (npm.pkg.github.com).
# Even public GHPR packages require an auth token.
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: npm run test
- run: npm run lint
7 changes: 7 additions & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
legacy-peer-deps=true

# storybook-webmcp lives on GitHub Packages. Even for public packages,
# the GHPR npm registry requires a token with read:packages scope.
# Local dev: export NODE_AUTH_TOKEN=$(gh auth token)
# CI: pass NODE_AUTH_TOKEN via secrets (e.g. ${{ secrets.GITHUB_TOKEN }}).
@jbwatenbergscality:registry=https://npm.pkg.github.com

@claude claude Bot May 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

post-release.yml also runs npm ci (line 68, publish-npm job) without NODE_AUTH_TOKEN. That job uses setup-node with registry-url: "https://registry.npmjs.org", which may overwrite this .npmrc (404 from npmjs.org) or leave it in place without a valid GHPR token (401). Either way, the publish workflow breaks after merge.

Combined with github-pages.yml (already flagged), that's two workflows still missing the fix.

//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

@claude claude Bot May 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All three CI workflows (storybook-build.yml, tests.yaml, github-pages.yml) run npm ci but none set NODE_AUTH_TOKEN. Since .npmrc now routes @jbwatenbergscality to GitHub Packages with token auth, npm ci will fail with a 401 when resolving the addon — breaking every CI job, not just the Storybook build.

Each workflow needs something like:

- run: npm ci
  env:
    NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

1 change: 1 addition & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const config: StorybookConfig = {
},
},
},
'@jbwatenbergscality/storybook-webmcp',
],
framework: {
name: '@storybook/react-webpack5',
Expand Down
118 changes: 118 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@chromatic-com/storybook": "^5.1.2",
"@jbwatenbergscality/storybook-webmcp": "^0.1.1",
Comment thread
JBWatenbergScality marked this conversation as resolved.
"@storybook/addon-docs": "10.3.5",
"@storybook/addon-webpack5-compiler-swc": "^4.0.3",
"@storybook/react-webpack5": "10.3.5",
Expand Down
Loading