Building Storybook Connect for JetBrains Twice as Fast With AI

Storybook lets developers build and test UI components in isolation. As projects add more features, keeping Storybook stories up to date for every component becomes harder. Some components end up with few stories or none at all, and creating or maintaining them means repeating much of the same boilerplate.

The experience inside WebStorm added a second obstacle. Its existing Storybook support was dated, hard to find, and buried inside the React Buddy plugin. Storybook had no dedicated, first-class place in the IDE and developers often found themselves jumping between the code editor and Storybook's browser UI.

JetBrains wanted Storybook to become a discoverable, first-class part of WebStorm, with AI taking over the repetitive story work. A complete solution had to address both the IDE experience and the repeated work behind story creation. If we got it right, we could reduce context switching for product developers and increase their output by using a single tool instead of jumping between the two windows.

We built Storybook Connect as a dedicated WebStorm plugin. Its searchable tree shows every story in the project. Developers can jump from a story to the component behind it in one click, start or stop the Storybook server from the IDE, and keep the browser preview and plugin in sync.

Beyond the original brief, the team also connected selection changes in Storybook back to WebStorm. The plugin now follows whichever story a developer selects in Storybook.

Giving AI a deterministic route to story creation

We connected Storybook skills to WebStorm's built-in AI Assistant and built a command-line tool for the repeatable parts of story creation. The assistant searches an existing codebase for components without stories, reads their TypeScript props, proposes a plan, and generates the stories after the developer approves it.

The command-line tool deterministically finds components missing stories and scaffolds the files. The AI Assistant drives it through a Storybook skill, which supplies context where judgment is needed. Generated stories follow Storybook guidance for Component Story Format syntax, relevant component variants, naming and structure, mocking, and interaction tests for interactive components.

This split keeps discovery and scaffolding consistent across runs while allowing the AI to interpret each component's context.

Making Storybook easier to adopt across projects and platforms

We extended the plugin to cover Storybook setup, upgrades, and the full release-one support matrix. It guides developers through installation when Storybook is missing and through upgrades when a project uses an outdated version. React, Vue, and Angular teams can use the same workflow across macOS, Windows, Windows Subsystem for Linux, and Linux.

We delivered the fixed scope within the planned five weeks with one senior engineer, one QA engineer, and one Storybook core maintainer. AI-assisted development accelerated the Kotlin implementation throughout the project.

The delivery team estimates that completing the planned scope without AI would have taken at least twice as long. In 25 working days, we delivered the full scope and added synchronized story selection, so WebStorm follows any story a developer selects in Storybook. After testing the plugin, JetBrains merged it into its product.

WebStorm now has a dedicated Storybook workspace with setup and upgrade guidance, story navigation, server controls, synchronized previews, and AI-assisted story generation backed by deterministic tooling. The plugin covers React, Vue, and Angular across macOS, Windows, Windows Subsystem for Linux, and Linux.