Storybook GPT

What I built

A web application that coverts React components into Storybook stories using OpenAI API.

Category Submission

Wacky Wildcards

App Link

https://storybook-gpt.vercel.app

Screenshots

Description

Storybook GPT is a web application that can be used to convert React components into Storybook stories. It is using OpenAI API to convert the components and it is built with NextJS 13, the React framework for the web that supports server components, streaming, and layouts. It also uses TypeScript for type safety and TailwindCSS for styling. With Storybook GPT, you can easily create and share interactive UI components for your projects.

Link to Source Code

https://github.com/eduardconstantin/storybook-gpt

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

I started to see more and more applications that use the OpenAI API and I wanted to try it out. One of these apps is this one made by Kate.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

Fired up a Github Codespace (with the lowest specs) and started to develop right away by installing NextJS 13 with TailwindCSS. Design was made in Figma. I learned a few things along the way, like creating a codespace is not hard at all and is way more convenient to start one than cloning the project locally. I learned how to use the OpenAI API and the new app router from NextJS. Besides all of this I also came with a few more ideas applications that can use the OpenAI API.

Additional Resources/Info

In order to use the application the user need to add their OpenAI API. They can get one from here by creating an account.