Skip to content

Improve preview-stories consistency #176

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
JReinhold merged 5 commits into from
Feb 26, 2026
Merged

Improve preview-stories consistency #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8afbb72
improve preview stories tool description to make agents output the UR…
JReinhold Feb 26, 2026
cee56cc
update storybook
JReinhold Feb 26, 2026
9180065
update task readmes
JReinhold Feb 26, 2026
574b956
Merge branch 'id-story-input' of https://github.com/storybookjs/mcp i…
JReinhold Feb 26, 2026
316dfd4
Merge branch 'main' into fix-non-apps-preview
JReinhold Feb 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
5 changes: 5 additions & 0 deletions .changeset/quiet-planes-wave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@storybook/addon-mcp': patch
---

Improve `preview-stories` tool description to make agent behavior more consistent.
144 changes: 72 additions & 72 deletions apps/internal-storybook/pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions apps/internal-storybook/tests/mcp-endpoint.e2e.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,8 @@ describe('MCP Endpoint E2E Tests', () => {
"resourceUri": "ui://preview-stories/preview.html",
},
},
"description": "Use this tool to preview one or more stories, rendering them as an MCP App using the UI Resource or returning the raw URL for users to visit.",
"description": "Use this tool to get one or more Storybook preview URLs.
Always include each returned preview URL in your final user-facing response so users can open them directly.",
"inputSchema": {
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
Expand Down Expand Up @@ -220,6 +221,7 @@ describe('MCP Endpoint E2E Tests', () => {
"type": "string",
},
"previewUrl": {
"description": "Direct URL to open the story preview. Always include this URL in the final user-facing response so users can open it directly.",
"type": "string",
},
"title": {
Expand Down Expand Up @@ -335,7 +337,7 @@ describe('MCP Endpoint E2E Tests', () => {
],
"type": "object",
},
"title": "Preview stories",
"title": "Get story preview URLs",
},
{
"description": "Get comprehensive instructions for writing, testing, and fixing Storybook stories (.stories.tsx, .stories.ts, .stories.jsx, .stories.js, .stories.svelte, .stories.vue files).
Expand Down
98 changes: 49 additions & 49 deletions eval/pnpm-lock.yaml
View file
Open in desktop

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

14 changes: 8 additions & 6 deletions eval/tasks/914-preview-story-by-path/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,18 @@ Asks the agent to inspect story file imports first, then preview `Primary` and `

## Quality Signal

| Metric | Weight |
| ---------------------------------------------------- | ------ |
| MCP tools coverage (`preview-stories` called) | 10 % |
| Preview input strategy (path + exportName preferred) | 60 % |
| Avoid unnecessary docs fetches for button | 30 % |
| Metric | Weight |
| ------------------------------------------------------ | ------ |
| Preview input strategy (path + exportName preferred) | 50 % |
| Avoid `get-documentation` calls for Button identifiers | 10 % |
| Final response includes both preview URLs | 40 % |

## Expected MCP Tools

- `preview-stories` (at least 1 call)

For strategy quality credit, at least one preview invocation should pass `stories` using `absoluteStoryPath` + `exportName` and should not rely exclusively on `storyId`.

For docs-avoidance quality credit, the agent should not call `get-documentation` with `id: "button"` in this task.
For docs-avoidance quality credit, the agent should not call `get-documentation` with any Button-like ID (for example, `button` or `example-button`).

For final-response quality credit, the final assistant response should include preview URLs for both `example-button--primary` and `example-button--secondary`.
Loading
Loading