Storybook GPT

Storybook GPT is an open-source web tool that converts React components into Storybook stories using the OpenAI API.

What is Storybook GPT?

Storybook GPT is a web application built with Next.js 13 that takes a React component as input and produces a Storybook story file as output. It runs locally and sends component code to the OpenAI API to generate the story. The project is developed by Eduard Constantin and released under the MIT License.

The technology stack is visible in the source: Next.js 13 with App Router support for server components, streaming, and layouts; TypeScript for type safety; and TailwindCSS for styling.

Key Features

Storybook GPT offers a minimal feature set focused on fast story generation, with a modern React stack underneath.

• Dark mode — a built-in dark theme toggle for comfortable use at night.
• Copy to clipboard — one-click copying of the generated Storybook story output.
• OpenAI API integration — the app accepts your own OpenAI API key and uses it to generate stories.
• Next.js 13 — built on the App Router with support for server components, streaming, and layouts.
• TypeScript — fully typed source code for maintainability.
• TailwindCSS — utility-first styling for a responsive UI.

Who is it for?

Storybook GPT is aimed at developers already using Storybook who want to automate part of the story-writing process.

• React developers — quickly generate Storybook stories for their components without writing them by hand.
• UI library maintainers — create starter stories for every component in a design system.
• Storybook users — add new stories to existing projects by pasting component code.

What can you do with Storybook GPT?

The main workflow is straightforward: paste a component, get a story.

• Generate a story from any React component — paste the component code into the input field and receive a Storybook story in seconds.
• Prototype component documentation — use the generated story as a starting point for a component's docs page.
• Learn Storybook patterns — see how a well-formed story is structured from the AI-generated output.

How does Storybook GPT work?

To use it, clone the repository, run npm install, then add your OpenAI API key to the .env file as the OPENAI_API_KEY variable. Start the app with npm run dev and open http://localhost:3000. Paste your React component into the input and click "generate story" — the result appears in a few seconds.

Pricing

Storybook GPT is open source and free to use under the MIT License. You must supply your own OpenAI API key, so actual usage costs come from OpenAI's API pricing.

FAQ

What does Storybook GPT do?

Storybook GPT converts a React component into a Storybook story using the OpenAI API. You paste in component code, and it returns a story file you can copy into your Storybook project.

Do I need an OpenAI API key?

Yes. The app requires you to set an OpenAI API key in a local .env file for the generation to work.

How do I install and run Storybook GPT?

Clone the repo, run npm install, create a .env file with your OPENAI_API_KEY, then run npm run dev and open localhost:3000.

Is Storybook GPT free?

Yes, the project is MIT-licensed. The only cost is the OpenAI API usage from your own key.

What technologies does it use?

Next.js 13, React, TypeScript, and TailwindCSS, with the OpenAI API for story generation.