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 all 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
5 changes: 5 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 @@ -65,6 +65,11 @@ jobs:
with:
node-version: "24"
registry-url: "https://registry.npmjs.org"
# GHPR auth for @jbwatenbergscality/storybook-webmcp. Written directly to
# ~/.npmrc instead of via NODE_AUTH_TOKEN to avoid leaking the GitHub
# token to registry.npmjs.org through setup-node's npmjs auth line
# (//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}).
- run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc

@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.

The echo to ~/.npmrc is shadowed by the project .npmrc, which already declares //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}. npm resolves project .npmrc over user ~/.npmrc for the same registry-scoped key, so the hardcoded token written here is never used. Since NODE_AUTH_TOKEN is not set in this job, npm resolves it to empty string and npm ci will 401 on GHPR.

Two ways to fix: (a) set NODE_AUTH_TOKEN as env on npm ci here too (same credential-leak risk the comment explains), or (b) remove the //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN} line from the project .npmrc entirely and have every CI workflow inject auth via echo >> ~/.npmrc instead.

- run: npm ci
- 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