Storybook Story Generator

Automatically generate Storybook stories for React components using OpenAI's GPT models.

Features

• Scans a directory for React components
• Generates Storybook stories using OpenAI's GPT models
• Supports TypeScript
• Highly customizable configuration
• Flexible import statements

Installation

npm install storybook-story-generator

Usage

1. Create a script to run the story generator (e.g., generate-stories.ts):

const { generateStories, defaultConfig } = require("storybook-story-generator");

const customConfig = {
  ...defaultConfig,
  openaiAPIKey: "YOUR_OPENAI_API_KEY", // we recommend using an environment variable here
  componentDirectory: "./src/components",
  outputDirectory: "./src/stories",
  componentImportPath: "../components",
  importStatements: [
    ...defaultConfig.importStatements,
    "import 'app/css/style.css';",
  ],
};

generateStories(customConfig)
  .then(() => console.log("Story generation complete"))
  .catch((error: Error) => console.error("Error in story generation:", error));

2. Run the script:

ts-node generate-stories.ts

Configuration

You can customize various aspects of the story generation process. Here are the available configuration options:

Option	Type	Description	Default
openaiApiKey	string	Your OpenAI API key	undefined
openaiModel	string	The OpenAI model to use	'gpt-4-1106-preview'
temperature	number	Creativity of the AI (0-1)	0.7
componentDirectory	string	Directory containing your React components	'./components'
outputDirectory	string	Directory where stories will be generated	'./stories'
storyFileExtension	string	File extension for generated stories	'.stories.tsx'
promptTemplate	string	Template for the story generation prompt	(see defaultConfig)
importStatements	string[]	Array of import statements to include	(see defaultConfig)
componentImportPath	string	Path to import components from	'../components'

Customizing the Prompt

You can customize the prompt sent to the OpenAI model by modifying the promptTemplate in your configuration. Use placeholders like {componentName}, {fileName}, and {componentContent} which will be replaced with actual values during generation.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

License

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

Acknowledgments

• OpenAI for providing the GPT models
• Storybook community for inspiration