Storybook Genie is a command line interface tool that can be used to convert files that contain React components into Storybook stories.

• Select preferred GPT model (OpenAI or Ollama)
• Use local Ollama models (no API key required)
• File selection input
• JS beautify
• Use custom story template
• Change default path
• A small number of dependencies

To install the storybook-genie package, run the following command:

npm install storybook-genie

You can use either OpenAI or Ollama as your AI backend.

Set your OpenAI API key as an environment variable. You can do this by adding the following line to your .env file, or by setting it directly in your terminal:

For Unix-based systems:

export OPENAI_API_KEY=$YOUR_API_KEY

For Windows systems:

set OPENAI_API_KEY=$YOUR_API_KEY

No API key is required, but you must have the Ollama server running locally and at least one model pulled (e.g., llama3, mistral, etc.).

Start Ollama:

ollama serve

Pull a model (example):

ollama pull llama3

A default AI-backend provider, a default model and a default path can be set in storybook-genie.config.json file, just create one in the root of the project and add the following code:

{
  "defaultProvider": "OpenAI",
  "defaultModel": "gpt-4",
  "defaultPath": "./components"
}

A default story template can be set in storybook-genie.template.js/ts file, just create one in the root of the project.

To use Storybook Genie, run the following command:

npx storybook-genie

You will be prompted to select which API to use (OpenAI or Ollama), then select the model, and then select the files.

Clone the repository:

git clone https://github.com/eduardconstantin/storybook-genie.git

Install dependencies:

npm install

Input your OPENAI API key in the .env file, you can get your API key here:

OPENAI_API_KEY=$YOUR_API_KEY

Run the CLI:

npm run start

You will be prompted to select a file and then press enter. The generator will create a ".story.js" file in the same folder.

I welcome feedback and contributions from other developers, which can help improve the quality of the code and the application overall.

In order to create an issue or a pull request with your changes, please read our contribution guidelines, and thank you for being involved!

For a full list of all authors and contributors, see the contributors page.

This project is licensed under the MIT License - see the LICENSE file for details.