Use Builder's AI tools and Visual Editor to update the components within your Storybook component repository.
- Using Builder Projects, connect your Storybook repository to enable component editing through AI and the Visual Editor.
- Create pull requests for your changes, integrating into your team's existing workflow.
To connect your Storybook repository to Builder:
- On your Projects page, click the Connect Repo button.
- Choose your Storybook repository.
- Optionally change the project name. Then, choose the Storybook options from the Framework Preset dropdown.
- Update settings for your Project as needed, then click Next.
- Answer Yes to the question about using a custom design system.
- Choose This Repository when asked about the location of your design system.
- Optionally include notes on how to use your design system. Then click Create Project.
Builder will create your Project for you over the next few minutes. Once completed, your component Storybook will be accessible and editable within Builder's Visual Editor.
Use Builder's AI or Visual Editor to customize existing components or create new components, just like you would for any other Project. Once complete, Create a pull request.
The video below demonstrates the creation of a new Login component, driven entirely by Builder's AI. The new component fits the design of other components in the same Storybook.
For guided instruction, watch Builder's very own Tony Bricca give a demonstration.
0:00 Okay, so I'm gonna show you how to get this particular storybook into your own repo and then use it with Infusion.
0:08 Uh, so here, I'm on the Mantine, I'm gonna go to their GitHub. And quick reference, here's my GitHub, I don't have it in here right now, and we're gonna add it.
0:20 And then that way I can work with it, with Infusion. So now here, I'm in Mantine, and what I'm gonna do is go up here to Fork.
0:31 So what this means is just, like, copy it to my repository, so now I can use it. And now it's completely separate.
0:39 And so I'm gonna go ahead and copy this, which is called Mantine. And we'll create that Fork. Alright, now, That's gonna go ahead and copy that.
0:52 And then I'll go over here to my Fusion Dashboard 2, so we can show that. Uhh, okay. So now we see it, it's on my profile.
1:02 If I refresh this, it will pop up. Great, now we have it. Now I can use it to do it in Fusion.
1:10 So, in Fusion, now I, I can go to connect repo. And we're just gonna search for that repository. And now we're gonna connect it.
1:24 And then for this, let me just double check. Yep, it's a storybook. So we'll go ahead and select storybook. Next.
1:36 So this will, this is the design system. I'm just gonna create project because I don't know the full design system and where everything lies, but I can always update this later too.
1:49 Cool. So now it's gonna spin up here. It will take a little bit to put together a storybook because it's, it's a big application.
1:57 So just give it a little bit, get a cup of coffee, a snack. And then you'll be ready to go to make updates to your storybook.
2:05 Okay.
Learn more about connecting your respository to Builder. Or, visit Best practices to learn more about the best ways to leverage Builder's AI and Visual Editor.