Generate stories automatically for your components
and Joe Vaughan
Last month, one of our community members launched an AI-powered tool for Storybook, and it completely blew up!
Today, I’m here to share how you can harness AI in your Storybook project, by building a GPT that writes stories for your components automatically. And it’ll take 10 minutes or less. This accelerates the process of writing stories and gets you to testing and developing infinitely faster.
What you'll need
You'll need a ChatGPT Plus account to build custom GPTs. If you have one, navigate to the GPTs homepage and select 'Create a GPT'. Give your new GPT a name and description, then head to the Instructions section.
Instruct your GPT
In the Instructions section, add the prompt below. This is a modified version of a GPT prompt initially created by Kaelig Deloumeau-Prigent, principal engineer at Netlify!
Take it for a test drive
To see how the GPT works, we’ll take the template button.tsx component that comes with Storybook:
Copy and paste your code into your new GPT. Then, watch what happens next.
0:00 /1:29 1×
Et voila! The GPT produced five different stories that we can now use inside Storybook!
Help us take this further
Congratulations on becoming the proud owner of a new GPT! You’re now able to write stories for your components in one click!
If you don't use React, we encourage you to experiment with editing the instructions we’ve provided to see what you can make. If you create a prompt that works for other frameworks, share it with us via GitHub Discussions or social media.