DEV Community

Eduard Constantin
Eduard Constantin

Posted on

3

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

Application

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more