Storygen AI is a Visual Studio Code extension that generates Storybook stories for your React components using OpenAI. Open a component, run the command, and a matching <Component>.stories.jsx file will be created next to it with sensible variants based on detected props.
Features
Generates JSX Storybook stories for any .jsx or .tsx component.
Detects prop names automatically using Babel parsing to create multiple variants.
Command palette entry: 🪄 Generate Storybook Story (AI).
Optional auto-run when saving files inside a .storybook directory.
In-memory caching prevents duplicate API calls when regenerating the same component.
Prerequisites
VS Code 1.105.0 or newer (matches the engines.vscode requirement).
An OpenAI API key with access to gpt-4o-mini (or compatible) models.
A React project (JS or TS) where you want stories generated. Storybook is optional but recommended.
Installation
Install from the VS Code Marketplace (coming soon) or sideload the packaged .vsix:
code --install-extension storygen-ai-0.0.1.vsix
or Command Palette → Extensions: Install from VSIX...
Reload VS Code when prompted.
Initial Setup
Open VS Code settings (GUI or settings.json).
Search for Storygen AI and paste your OpenAI key into Open AI Key.
Prefer storing the key here; it is scoped to VS Code’s secrets storage.
Alternatively, set an OPENAI_API_KEY environment variable before launching VS Code.
(Optional) Place your Storybook files inside a .storybook folder if you want stories to auto-generate when saving and if that folder actually exists in the workspace. The extension only auto-triggers for files saved within <workspace>/.storybook. Outside of that folder you can run the command manually.
Usage
Open any React component file (.jsx/.tsx).
Run 🪄 Generate Storybook Story (AI) from the Command Palette, or bind it to a custom hotkey.
The extension sends the component source and extracted props to OpenAI and writes <Component>.stories.jsx next to the component. Review/edit the result and commit it to your repo.
If the file lives inside .storybook, the command also runs automatically whenever you save the component, making it easy to keep stories up to date.
If the key is missing or invalid you’ll see a VS Code notification. Update the key in Settings and run the command again.
Developing / Running From Source
Clone the repository and run npm install.
Press F5 inside VS Code to launch an “Extension Development Host”.
In the new window, configure the OpenAI key through Settings as described above and test against a sample React project.
Troubleshooting
Missing API key: Ensure the storygen-ai.openAiKey setting or the OPENAI_API_KEY environment variable is defined.
Unsupported file type: Only .jsx and .tsx files trigger story generation.
API errors: Check your OpenAI usage limits and network connectivity.
Enjoy crafting stories! Contributions and feedback are welcome. Send ideas via issues or PRs.
