https://github.com/nicholasgriffintn/storybook-ai

Investigation into using AI inside of Storybook to describe components
https://github.com/nicholasgriffintn/storybook-ai

Last synced: about 1 month ago
JSON representation

Investigation into using AI inside of Storybook to describe components

• Host: GitHub
• URL: https://github.com/nicholasgriffintn/storybook-ai
• Owner: nicholasgriffintn
• Created: 2024-04-07T17:42:43.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-07T21:17:02.000Z (7 months ago)
• Last Synced: 2024-04-22T05:10:37.411Z (7 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/storybook-ai
• Size: 132 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Storybook AI

Storybook AI is an addon that can be used with Storybook to provide a way to generate stories from your React components and ask questions about them, right from Storybook.

At the moment, this is enitrely for investigational purposes and is not intended to be used in production, please do not use this without the expectation of issues.

Alongside that, this is a personal project and is only shared for the purpose of code sharing and learning, please don't expect any support or updates.

Also, to note: One of the biggest issues with this package is that it will leak your API key to the client, so please be careful with that.

## Installation

Install the package:

```sh

pnpm add -D storybook-ai

```

Then, register it as an addon in `.storybook/main.js`.

```js

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)

import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {

  // ...rest of config

  addons: [

    '@storybook/addon-essentials'

    'storybook-ai', // 👈 register the addon here

  ],

};

export default config;

```

Then in your `.storybook/preview.js` file, add the following:

```js

const parameters = {

  ... // other parameters

  ai: {

    provider: 'openai',

    apiKey: process.env.OPENAI_API_KEY,

  },

};

```