Creating a Component Chart with GPT-4

Goal of this blog:

1. Explaining how I used ChatGPT to visualize SPA component structure.
2. Encouraging other devs to also create visual explanations of component structure.

Introduction

Recently, diving into existing projects has given me an appreciation for well-structured component structures. There are many ways to make component structures more understandable, such as making logical choices about which sections should be separate components, clear naming and the Single Responsibility Principle (SRP).

Imperfect world, imperfect component structure.

If adhered to, such standards can make applications pretty understandable on their own. However, as our applications get bigger, structurally sound component hierarchies can become hard to grasp quickly. We also have to account for reality not being perfect. Sometimes our component structures end up being less clear than we intended, for all kinds of reasons. Examples include lack of time, last-minute modifications, communication issues, etc.

Using AI to explain our components

We may try, but cannot make the world perfect. Therefore, we cannot always have perfectly structured components. Something we can always do is explain our code to coworkers, and to our future selves. I recently discovered an easy way to do this using GPT-4. For the README of an SPA built with Vue, I asked ChatGPT-4 to generate a visual representation of my component structure. It is brilliantly simple to do, and doesn't take much time.

Together, let's see how easy it is to prompt ChatGPT to make such a chart, for an imaginary online application. My best friend GPT-4 suggested a bookstore, so let's go with that.

First prompt, explaining the task:

Prompt:
Hi chatGPT, make a visual ASCII representation of my Vue SPA component structure.
I am going to ask you to continuously edit the chart. Please start with the top level components below App.vue. There should be: Navbar.vue, HomePage.vue, BooksPage.vue, and ShoppingCartPage.vue

Output:

App.vue
│
├── Navbar.vue
│
├── HomePage.vue
│
├── BooksPage.vue
│
└── ShoppingCartPage.vue

Fleshing out subsections:

Prompt:
Under NavBar, can you add SearchBar and UserMenu? UserMenu has two children, UserProfileLink and ShoppingCartLink

Output:

App.vue
│
├── Navbar.vue
│   ├── SearchBar
│   └── UserMenu
│       ├── UserProfileLink
│       └── ShoppingCartLink
│
├── HomePage.vue
│
├── BooksPage.vue
│
└── ShoppingCartPage.vue

Prompt:
Don't forget to add .vue after every component for consistency!
Now for HomePage, add a FeaturedBooks and GenreList and Footer

Output:

App.vue
│
├── Navbar.vue
│   ├── SearchBar.vue
│   └── UserMenu.vue
│       ├── UserProfileLink.vue
│       └── ShoppingCartLink.vue
│
├── HomePage.vue
│   ├── FeaturedBooks.vue
│   ├── GenreList.vue
│   └── Footer.vue
│
├── BooksPage.vue
│
└── ShoppingCartPage.vue

Let's add some explanations:

Prompt:
Thanks, now let's work on BooksPage, it has BooksFilter and BooksList with a child of BookItem
Add comments after BooksList explaining that it makes an API call to fetch books based on genre, and after BookItem explaining each can be added to the shopping cart, keep the comments bullet point style and concise.

Output:

App.vue
│
├── Navbar.vue
│   ├── SearchBar.vue
│   └── UserMenu.vue
│       ├── UserProfileLink.vue
│       └── ShoppingCartLink.vue
│
├── HomePage.vue
│   ├── FeaturedBooks.vue
│   ├── GenreList.vue
│   └── Footer.vue
│
├── BooksPage.vue
│   ├── BooksFilter.vue
│   └── BooksList.vue
│       └── BookItem.vue
│           • Each item can be added to the shopping cart
│       • Makes an API call to fetch books based on genre  <- This is not clean!
│
└── ShoppingCartPage.vue

Not even GPT-4 is perfect...

Prompt:
I don't really like how the comment for BooksList appears under BookItem.

Output:

App.vue
│
├── Navbar.vue
│   ├── SearchBar.vue
│   └── UserMenu.vue
│       ├── UserProfileLink.vue
│       └── ShoppingCartLink.vue
│
├── HomePage.vue
│   ├── FeaturedBooks.vue
│   ├── GenreList.vue
│   └── Footer.vue
│
├── BooksPage.vue
│   ├── BooksFilter.vue
│   └── BooksList.vue
│       • Makes an API call to fetch books based on genre  <- Much better!
│       └── BookItem.vue
│           • Each item can be added to the shopping cart
│
└── ShoppingCartPage.vue

For completeness' sake:

Prompt:
Make up whatever you like to finish ShoppingCartPage

Output:

App.vue
│
├── Navbar.vue
│   ├── SearchBar.vue
│   └── UserMenu.vue
│       ├── UserProfileLink.vue
│       └── ShoppingCartLink.vue
│
├── HomePage.vue
│   ├── FeaturedBooks.vue
│   ├── GenreList.vue
│   └── Footer.vue
│
├── BooksPage.vue
│   ├── BooksFilter.vue
│   └── BooksList.vue
│       • Makes an API call to fetch books based on genre
│       └── BookItem.vue
│           • Each item can be added to the shopping cart
│
└── ShoppingCartPage.vue
    ├── CartItemsList.vue
    ├── CartSummary.vue
    ├── CheckoutButton.vue
    └── PromoCodeInput.vue

Wrap-up

I guess I could go on, but I think it's clear how easy it is. Now all we have to do is copy the content into a codeblock in our README files. Personally, I would love to find this on the readme page of every existing project that I work on, so I will continue to put them in myself!