CLI: Stop running the dev server automatically#34526
CLI: Stop running the dev server automatically#34526Sidnioulz wants to merge 5 commits intoproject/sb-agentic-setupfrom
Conversation
|
View your CI Pipeline Execution ↗ for commit 8d8d4fb
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit 91c0d05
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Pull request overview
This PR changes the init/create-storybook flow to stop launching the dev server by default and adjusts the AI-assisted setup experience (especially in agent mode) by moving compatibility checks into a central service and changing what guidance is shown at the end.
Changes:
- Make
--no-devthe effective default by settingoptions.devtofalseunless explicitly provided. - Add
FeatureCompatibilityService.supportsAIPrepareFeature()and thread AI/test compatibility booleans intoUserPreferencesCommandinstead of doing checks inside the command. - Update finalization messaging to (a) avoid auto-running
sb ai prepareand (b) show AI “next step” instructions viaFinalizationCommand.
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| code/lib/create-storybook/src/services/FeatureCompatibilityService.ts | Adds centralized AI prepare compatibility check helper. |
| code/lib/create-storybook/src/services/FeatureCompatibilityService.test.ts | Unit tests for supportsAIPrepareFeature(). |
| code/lib/create-storybook/src/initiate.ts | Uses centralized feature-support checks; stops auto-running AI prepare; changes when dev server is launched. |
| code/lib/create-storybook/src/commands/UserPreferencesCommand.ts | Accepts precomputed compatibility booleans; adjusts AI prompt copy. |
| code/lib/create-storybook/src/commands/UserPreferencesCommand.test.ts | Updates tests for new options plumbing and helper export. |
| code/lib/create-storybook/src/commands/FinalizationCommand.ts | Adds agent/AI-instructions flags and updates end-of-flow messaging. |
| code/lib/create-storybook/src/commands/FinalizationCommand.test.ts | Adds coverage for new agent/AI-instructions behaviors. |
| code/lib/create-storybook/src/bin/run.ts | Changes default dev behavior to false. |
| code/lib/cli-storybook/src/bin/run.ts | Updates init --dev/--no-dev option descriptions to reflect new default behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
📝 WalkthroughWalkthroughRemoved CI-based defaulting for CLI Changes
Sequence Diagram(s)sequenceDiagram
participant Initiate as initiate()
participant FCS as FeatureCompatibilityService
participant UPC as executeUserPreferences / UserPreferencesCommand
participant FC as executeFinalization / FinalizationCommand
participant Dev as DevServer
Initiate->>FCS: checkFeatureSupport(framework, builder, renderer)
FCS-->>Initiate: {isTestFeatureAvailable, isAiPrepareAvailable}
Initiate->>UPC: executeUserPreferences({isTestFeatureAvailable, isAiPrepareAvailable})
UPC-->>Initiate: {selectedFeatures, newUser}
Initiate->>FC: executeFinalization({agent, isAiPrepareAvailable, showAiInstructions, storybookCommand})
FC-->>Initiate: finalization complete
alt shouldRunDev && !agent
Initiate->>Dev: start dev server (if options.dev set)
Dev-->>Initiate: dev server started
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
✨ Finishing Touches📝 Generate docstrings
Comment |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 185 | 185 | 0 |
| Self size | 76 KB | 76 KB | 🎉 -48 B 🎉 |
| Dependency size | 32.31 MB | 32.26 MB | 🎉 -52 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/angular
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 185 | 185 | 0 |
| Self size | 140 KB | 140 KB | 0 B |
| Dependency size | 30.46 MB | 30.41 MB | 🎉 -52 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 189 | 189 | 0 |
| Self size | 15 KB | 15 KB | 0 B |
| Dependency size | 29.02 MB | 28.97 MB | 🎉 -52 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 534 | 534 | 0 |
| Self size | 650 KB | 650 KB | 0 B |
| Dependency size | 60.30 MB | 60.27 MB | 🎉 -39 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 92 | 93 | 🚨 +1 🚨 |
| Self size | 1.12 MB | 1.12 MB | 0 B |
| Dependency size | 23.30 MB | 23.76 MB | 🚨 +465 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 121 | 122 | 🚨 +1 🚨 |
| Self size | 30 KB | 30 KB | 🎉 -18 B 🎉 |
| Dependency size | 24.37 MB | 24.83 MB | 🚨 +465 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 82 | 83 | 🚨 +1 🚨 |
| Self size | 36 KB | 36 KB | 🎉 -18 B 🎉 |
| Dependency size | 21.08 MB | 21.54 MB | 🚨 +465 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 271 | 272 | 🚨 +1 🚨 |
| Self size | 23 KB | 23 KB | 🚨 +12 B 🚨 |
| Dependency size | 44.90 MB | 44.88 MB | 🎉 -28 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 197 | 197 | 0 |
| Self size | 16 KB | 16 KB | 🚨 +12 B 🚨 |
| Dependency size | 33.57 MB | 33.52 MB | 🎉 -52 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 108 | 108 | 0 |
| Self size | 36 KB | 36 KB | 0 B |
| Dependency size | 43.71 MB | 43.73 MB | 🚨 +11 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 184 | 184 | 0 |
| Self size | 806 KB | 806 KB | 🎉 -218 B 🎉 |
| Dependency size | 68.43 MB | 68.17 MB | 🎉 -261 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 177 | 177 | 0 |
| Self size | 32 KB | 32 KB | 0 B |
| Dependency size | 66.71 MB | 66.68 MB | 🎉 -28 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 51 | 51 | 0 |
| Self size | 1.28 MB | 1.05 MB | 🎉 -233 KB 🎉 |
| Dependency size | 37.08 MB | 37.08 MB | 🎉 -262 B 🎉 |
| Bundle Size Analyzer | node | node |
@storybook/preset-react-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 167 | 168 | 🚨 +1 🚨 |
| Self size | 18 KB | 18 KB | 0 B |
| Dependency size | 31.52 MB | 31.49 MB | 🎉 -28 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 58 | 59 | 🚨 +1 🚨 |
| Self size | 1.44 MB | 1.44 MB | 0 B |
| Dependency size | 13.23 MB | 13.26 MB | 🚨 +25 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
code/lib/create-storybook/src/commands/FinalizationCommand.test.ts (1)
21-203: Consider replacing positional booleans with a tiny test factory for readability.
new FinalizationCommand(undefined, true, false, true)is easy to misread across many tests. A local helper with named options would make intent clearer and reduce setup mistakes.Refactor sketch
+const makeCommand = ({ + logfile, + agent = false, + isAiPrepareAvailable = false, + showAiInstructions = false, +}: { + logfile?: string; + agent?: boolean; + isAiPrepareAvailable?: boolean; + showAiInstructions?: boolean; +} = {}) => + new FinalizationCommand(logfile, agent, isAiPrepareAvailable, showAiInstructions); - -command = new FinalizationCommand(undefined, false, false, false); +command = makeCommand(); -const bothCommand = new FinalizationCommand(undefined, true, true, true); +const bothCommand = makeCommand({ agent: true, isAiPrepareAvailable: true, showAiInstructions: true });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/lib/create-storybook/src/commands/FinalizationCommand.test.ts` around lines 21 - 203, Tests use hard-to-read positional booleans when instantiating FinalizationCommand (e.g., new FinalizationCommand(undefined, true, false, true)); create a small test factory like makeFinalizationCommand({ agent?, showAiInstructions?, aiPrepareSupported? }) that returns new FinalizationCommand(undefined, agent, showAiInstructions, aiPrepareSupported) and replace all direct constructor calls in FinalizationCommand.test.ts with calls to the factory (use named options for each test), keeping existing mocks and assertions unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/lib/create-storybook/src/commands/FinalizationCommand.test.ts`:
- Around line 114-246: Tests in FinalizationCommand.test.ts repeatedly call
vi.mocked(find.up).mockReturnValue(...) inside individual it blocks; move these
inline mock implementations into the file's beforeEach so test setup is
centralized and follows the guideline. Update the beforeEach to set
vi.mocked(find.up).mockReturnValue(...) to the common default, and for tests
that need a different return override, either reset and re-mock inside that test
(using vi.mocked(find.up).mockReturnValueOnce(...)) or use per-test helper
functions; ensure references to FinalizationCommand and executeFinalization
tests still work after centralizing the mock.
---
Nitpick comments:
In `@code/lib/create-storybook/src/commands/FinalizationCommand.test.ts`:
- Around line 21-203: Tests use hard-to-read positional booleans when
instantiating FinalizationCommand (e.g., new FinalizationCommand(undefined,
true, false, true)); create a small test factory like makeFinalizationCommand({
agent?, showAiInstructions?, aiPrepareSupported? }) that returns new
FinalizationCommand(undefined, agent, showAiInstructions, aiPrepareSupported)
and replace all direct constructor calls in FinalizationCommand.test.ts with
calls to the factory (use named options for each test), keeping existing mocks
and assertions unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f8c7d583-de33-43b6-b838-09c3fb4a980c
📒 Files selected for processing (1)
code/lib/create-storybook/src/commands/FinalizationCommand.test.ts
| return prompt.confirm({ | ||
| message: dedent`Would you like to improve your Storybook setup with AI? | ||
| We will install dependencies and give you a prompt to set up a Storybook that follows best practices, with content tailored to your project.`, | ||
| }); |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/lib/create-storybook/src/commands/UserPreferencesCommand.ts`:
- Around line 221-236: The promptAiSetup method currently auto-enables AI when
skipPrompt is true and emits telemetry even when no prompt was shown; change the
skipPrompt branch to default useAi to false (do not opt-in by default) and move
the telemetryService.trackAiPromptNudge call so it only runs after an explicit
user confirmation (i.e., when skipPrompt is false and useAi is true). Update
references in promptAiSetup and ensure telemetryService.trackAiPromptNudge({
skipPrompt }) is only invoked after an interactive confirmation to avoid
recording an ai-prompt-nudge for non-interactive runs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d72964f4-70ec-41f5-a79b-aa905bd819a7
📒 Files selected for processing (5)
code/core/src/telemetry/types.tscode/lib/create-storybook/src/commands/UserPreferencesCommand.test.tscode/lib/create-storybook/src/commands/UserPreferencesCommand.tscode/lib/create-storybook/src/services/TelemetryService.test.tscode/lib/create-storybook/src/services/TelemetryService.ts
✅ Files skipped from review due to trivial changes (2)
- code/core/src/telemetry/types.ts
- code/lib/create-storybook/src/services/TelemetryService.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- code/lib/create-storybook/src/commands/UserPreferencesCommand.test.ts
| /** Prompt user about AI-assisted Storybook setup */ | ||
| private async promptAiSetup(skipPrompt: boolean): Promise<boolean> { | ||
| let useAi: boolean; | ||
|
|
||
| /** Validate test feature compatibility and prompt user if issues found */ | ||
| private async isTestFeatureAvailable( | ||
| framework: SupportedFramework | null, | ||
| builder: SupportedBuilder | ||
| ): Promise<boolean> { | ||
| const result = await this.featureService.validateTestFeatureCompatibility( | ||
| framework, | ||
| builder, | ||
| process.cwd() | ||
| ); | ||
| if (skipPrompt) { | ||
| useAi = true; | ||
| } else { | ||
| useAi = await prompt.confirm({ | ||
| message: dedent`Would you like to improve your Storybook setup with AI? | ||
| We will install dependencies and give you a prompt to set up a Storybook that follows best practices, with content tailored to your project.`, | ||
| }); | ||
| } | ||
|
|
||
| if (useAi) { | ||
| await this.telemetryService.trackAiPromptNudge({ skipPrompt }); | ||
| } |
There was a problem hiding this comment.
Don't auto-enable AI when prompts are skipped.
Lines 225-236 currently treat every non-interactive/--yes init as an implicit AI opt-in, so compatible projects can pick up Feature.AI and Feature.TEST even though the user never asked for them. It also records ai-prompt-nudge when no prompt was shown. Default the skipped-prompt path to false, and only emit the telemetry event after an explicit confirmation.
Suggested fix
/** Prompt user about AI-assisted Storybook setup */
private async promptAiSetup(skipPrompt: boolean): Promise<boolean> {
- let useAi: boolean;
-
if (skipPrompt) {
- useAi = true;
- } else {
- useAi = await prompt.confirm({
- message: dedent`Would you like to improve your Storybook setup with AI?
- We will install dependencies and give you a prompt to set up a Storybook that follows best practices, with content tailored to your project.`,
- });
+ return false;
}
+ const useAi = await prompt.confirm({
+ message: dedent`Would you like to improve your Storybook setup with AI?
+ We will install dependencies and give you a prompt to set up a Storybook that follows best practices, with content tailored to your project.`,
+ });
+
if (useAi) {
- await this.telemetryService.trackAiPromptNudge({ skipPrompt });
+ await this.telemetryService.trackAiPromptNudge({ skipPrompt: false });
}
return useAi;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /** Prompt user about AI-assisted Storybook setup */ | |
| private async promptAiSetup(skipPrompt: boolean): Promise<boolean> { | |
| let useAi: boolean; | |
| /** Validate test feature compatibility and prompt user if issues found */ | |
| private async isTestFeatureAvailable( | |
| framework: SupportedFramework | null, | |
| builder: SupportedBuilder | |
| ): Promise<boolean> { | |
| const result = await this.featureService.validateTestFeatureCompatibility( | |
| framework, | |
| builder, | |
| process.cwd() | |
| ); | |
| if (skipPrompt) { | |
| useAi = true; | |
| } else { | |
| useAi = await prompt.confirm({ | |
| message: dedent`Would you like to improve your Storybook setup with AI? | |
| We will install dependencies and give you a prompt to set up a Storybook that follows best practices, with content tailored to your project.`, | |
| }); | |
| } | |
| if (useAi) { | |
| await this.telemetryService.trackAiPromptNudge({ skipPrompt }); | |
| } | |
| /** Prompt user about AI-assisted Storybook setup */ | |
| private async promptAiSetup(skipPrompt: boolean): Promise<boolean> { | |
| if (skipPrompt) { | |
| return false; | |
| } | |
| const useAi = await prompt.confirm({ | |
| message: dedent`Would you like to improve your Storybook setup with AI? | |
| We will install dependencies and give you a prompt to set up a Storybook that follows best practices, with content tailored to your project.`, | |
| }); | |
| if (useAi) { | |
| await this.telemetryService.trackAiPromptNudge({ skipPrompt: false }); | |
| } | |
| return useAi; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/create-storybook/src/commands/UserPreferencesCommand.ts` around
lines 221 - 236, The promptAiSetup method currently auto-enables AI when
skipPrompt is true and emits telemetry even when no prompt was shown; change the
skipPrompt branch to default useAi to false (do not opt-in by default) and move
the telemetryService.trackAiPromptNudge call so it only runs after an explicit
user confirmation (i.e., when skipPrompt is false and useAi is true). Update
references in promptAiSetup and ensure telemetryService.trackAiPromptNudge({
skipPrompt }) is only invoked after an interactive confirmation to avoid
recording an ai-prompt-nudge for non-interactive runs.
There was a problem hiding this comment.
The telemetry event distinguishes explicit and implicit approval (we track skipPrompt in the event context) so I'm gonna brush off that specific concern. If we don't record auto-enabling, we don't correct the correct percentage of exposure to AI features in the userbase.
Regarding auto-enabling AI when --yes is passed, isn't that in line with what we do for other features?
Regarding auto-enabling AI when running as an agent, this was the case in the initial code, as I understand it. Would you also agree to auto-enable in that case @yannbf?
| message: dedent`Would you like to improve your Storybook setup with AI? | ||
| We will install dependencies and give you a prompt to set up a Storybook that follows best practices, with content tailored to your project.`, |
There was a problem hiding this comment.
Here we want to iterate on copy, e.g. "Would you like to install AI features (MCP, skills, prompt suggestions)?"
This will make the placement of the question make more sense and will fit with Yann's skills PR.
| export class FinalizationCommand { | ||
| constructor(private logfile: string | boolean | undefined) {} | ||
| constructor( | ||
| private logfile: string | boolean | undefined, |
There was a problem hiding this comment.
I'd say this should become an object, else it's hard to understand code like new FinalizationCommand(logFilePath, false, false, false)
There was a problem hiding this comment.
Yeah it's about time. I kept it that way because class constructors confuse the hell out of me, that was lazy of me.
| ...params | ||
| }: ExecuteFinalizationParams & { logfile: string | boolean | undefined }) => { | ||
| return new FinalizationCommand(logfile).execute(params); | ||
| }: ExecuteFinalizationParams & { |
There was a problem hiding this comment.
I think you can collapse stuff down to pass down less flags here, like showAgentFollowUp which would tell whether to show "run sb ai prepare", and showAiInstructions for the "paste this prompt" part. So showAgentFollowUp is evaluated higher up and this could simplify things a little
yannbf
left a comment
There was a problem hiding this comment.
LGTM apart from minor comments
What I did
--no-devthe new default: no more dev serversb ai prepareas a followupsb ai preparein agent mode (please challenge this!)ai preparepreconditions to the feature compatibility serviceChecklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
node ./path-to-storybook/code/lib/create-storybook/dist/bin/index.jsnode ./path-to-storybook/code/lib/create-storybook/dist/bin/index.js --devDocumentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Bug Fixes
Improvements