​

Creating a Storybook Story

Devin has access to a built-in browser and can take screenshots of its projects and applications. For this tutorial, we’re working with a simple Next.js based open source dashboard. Devin will help us take some of the existing Components in our application and add them to our Storybook workshop. If you haven’t heard of it before, Storybook is an open source frontend ‘workshop’ to help you visualize, categorize, and test your frontend UI components in a centralized place.

​

Initial Prompt

Our prompt for this session is fairly simple, as we expect Devin to do some of its own background research for the relevant context on Storybook and our application itself.

​

Installing and Running Storybook

Devin starts by examining our application’s Card component for context and then installs and runs the storybook package in its workspace. One of Devin’s powerful capabilities is that it can install, configure, and run applications itself and respond to the outputs in its built-in Shell. Devin puts together a Storybook config file and then runs the application. Running storybook in this case gives us some build errors.

​

Debugging

We can also see, in Devin’s browser, that the build error we encountered when running storybook also resulted in a frontend error when Devin tried to load the Card component. When you’re dealing with Devin sessions that touch frontend tasks, it can be very handy to be able to step back through what Devin ‘saw’ in its Browser at each stage of the development process:

​

Implementing the Card Story

Devin now moves on to fixing the errors so that our Card story component renders correctly in Storybook. After a small amount of iteration, Devin gets the app to build correctly and sends us a screenshot of the correct Storybook output in our session. Asking Devin to send specific screenshots as it works can help you verify what is going on and rendering in your application’s UI.

When we compare Devin’s implementation of Storybook and specifically the Card story, versus what the core application has, there’s a few improvements Devin made over the open source implementation. Notably, Devin added some additional examples of the Card component with more detailed documentation and demonstrations in its story. It also added some configuration support to Storybook for light/dark themes.

We’d encourage you to try out some of your own frontend-oriented tasks with Devin, whether it is helping your team have a better inventory of Components in a tool like Storybook or even testing UI/UX flows in its built in Browser. Request access to our Teams plan today to try it yourself.