Storybook Connect
Intro
Storybook Connect is a JetBrains IDE plugin built by Callstack together with JetBrains (the WebStorm team) and Storybook. On November 2, 2026 it was announced as available across JetBrains IDEs — WebStorm, IntelliJ IDEA, PhpStorm and others (WebStorm 2026.1+ required).
It makes Storybook a first-class part of the IDE: a dedicated tool window to browse every story, one-click jumps from a story to its component, starting/stopping the Storybook server from the IDE, and two-way selection sync with the browser preview. Crucially it ships agent-ready Storybook skills and a CLI that find components missing stories and generate new ones from their TypeScript props.
Explain
Key features
| Feature | Details |
|---|---|
| Story tree | Searchable list of every story; click through to the component source |
| Server controls | Start/stop Storybook inside the IDE and view console logs |
| Two-way sync | Selecting a story in the Storybook browser makes the IDE follow it |
| Setup & upgrades | Guides installation when Storybook is missing and upgrades when outdated |
| AI skills | author-storybook-jetbrains (official story-writing guidance) and discover-storybook-jetbrains (drives the CLI to audit coverage and generate missing stories) |
| BYOK | Bring your own key for compatible AI providers |
Design approach
- Deterministic steps vs. AI judgment — a CLI handles repeatable work (finding components without stories, scaffolding files); the AI assistant only steps in where component context matters, and writes only after the developer approves.
- Generated stories follow Component Story Format (CSF), covering variants, naming/structure, mocking and interaction tests.
- Works with React, Vue and Angular on macOS, Windows, WSL and Linux.
- Integrates with JetBrains Air, the IDE's built-in agentic development layer.
Background
WebStorm's previous Storybook support was buried inside the React Buddy plugin. Callstack built the MVP in 25 working days with AI-assisted development; a WebStorm engineer then integrated it, and it ships as a new plugin alongside WebStorm 2026.3.
Usage
Getting started
- Install — use WebStorm 2026.1+ (or another JetBrains IDE), then Settings → Plugins → Marketplace → search Storybook Connect.
- Set up — open a front-end project (React / Vue / Angular / Next.js…), go to View → Tool Windows → Storybook Connect and click Set Up Storybook.
- Enable AI — make sure the bundled JetBrains Air plugin is enabled; Storybook Connect installs its two Storybook skills into the project.
- Fill coverage gaps — ask the AI assistant to analyze missing stories, approve the plan, and it generates CSF stories plus interaction tests; or drive the Storybook Connect CLI from the built-in terminal.
- Day to day — browse and search stories in the tool window with two-way sync to the browser preview.
Docs: jetbrains.com/help/webstorm/storybook-connect.html; background: Callstack's case study.