P(AI)r Programming

Internally at Automattic, someone shared:

For team meetings we often include ice breakers. It’d save a bit of time if we didn’t have to go search for an icebreaker list each time we create a post but instead had an icebreaker generator block. It could work similar to the GIF block where it adds one idea and has a button to create a new one if you don’t like the first one. Could be a nice hack week or GM project!

Then I shared:

Why wait for hack week when you have ChatGPT? 😀

And shared the following screenshot where I asked ChatGPT to write an ice breaker Gutenberg block for me:

Someone then followed up and asked how we might get this fully functional.

So, I figured, why not! 😛 Let’s see how far we can run with this. My goal at this point was two-fold:

1. Leverage ChatGPT as much as possible, assuming I know as little about building blocks as possible.
2. Document everything.

A foundation

If you look at the code that ChatGPT provided in my screenshot above, you’ll notice that quite a few details are missing. Step 2 mentioned “Create a new plugin”, so I started there:

Fleshing out more details

Next I asked some follow questions:

Note on the above interaction: It messed up at first, so I had to ask it to regenerate the answer.

I noticed that there was no mention of a block.json file, so I asked it about that:

I then asked it to help me get started with the CSS files:

To simplify things, I decided that it would probably be easier to just load the questions array in the JS file, so I asked it to transform the function from PHP to JS:

I then manually pasted in all of the other array values.

Local dev

At this point I spun up a local dev environment and pulled all of the pieces together. The UI that ChatGPT produced worked, but it felt a bit heavy handed for my tastes. I made a few updates to the CSS and the icebreaker-block-editor.js file and added translations. I then ran up against something I didn’t know how to do, so I asked ChatGPT:

I love that it proactively suggested an alternative using Font Awesome.

Customization

I then wanted to see if ChatGPT could help with adding a font-size selector:

It wasn’t clear to me where this code was meant to go, so I clarified:

Realizing that this was not what I was looking for, I clarified again:

Finally, I clarified how I might pass this value into the save function:

End result

In the end, here’s what I was able to produce with the help of ChatGPT in about an hour:

You can find the code here: https://github.com/davemart-in/icebreaker-gpt/

Observations

• 80% there – ChatGPT is absolutely amazing at augmenting the work you may already be doing as a developer. It’s admittedly less handy in its current state if you need it to reliably spit out functional code with any sort of accuracy.
• Timing out – If you ask ChatGPT for something complex, it might time out. When this happens, don’t stress. Just ask it to continue on from where it left off.
• One on-going conversation – It’s really cool how ChatGPT can remember context from previous questions and incorporate it into future answers.
• Dive in! – If you haven’t started leveraging ChatGPT to augment you everyday work, you’re missing out!