The Dog Ran Quickly: A Simple Madlib With OpenAI Codex

I built this madlib in 30 seconds with OpenAI Codex:

What’s interesting about this madlib is that I didn’t write a single character of code. Instead, I gave Codex plain English instructions and had it write the code for me. Codex exported the code to JSFiddle, where anyone can now read and tinker with it.

This post demonstrates how Codex works and walks through the instructions I gave to Codex to make the madlib. With a tiny bit of imagination, it should be clear how powerful, inspiring, and scary Codex is.

Note: This article includes code, but it’s pretty simple code that even non-programmers should be able to follow intuitively.

What's OpenAI Codex?

It’s a tool that writes code from plain English prompts.

OpenAI’s fancier description:

The Codex model series is a descendant of our base GPT-3 series that's been trained on both natural language and billions of lines of code. It's most capable in Python and proficient in over a dozen languages including JavaScript, Go, Perl, PHP, Ruby, Swift, TypeScript, SQL, and even Shell.

Codex writes computer code using natural language artificial intelligence technology. It works by gathering huge amounts of example code, mathematically identifying patterns in that code, and then generating “intelligent” output based on prompts. To quote OpenAI’s Chief Scientist, Ilya Sutskever, “I want to point out how insane it is that what we are showing to you works at all.”

The Sandbox

The easiest way to play around with Codex is a tool called “Sandbox.” The Codex Sandbox lives inside of OpenAI’s web app.

Here’s how it works:

First, you log into the Sandbox and enter plain English commands where it says “Provide instructions…”

Then you press the green button. Codex uses your instructions to generate code. This is the AI at work. The formatted output shows up in the white box and the code prints out on the right. Each block of generated code includes the instructions as an opening comment:

Notice how OpenAI creates a placeholder NAME for the song and puts it in a span with a “name” ID? Codex intuits that we might wish to repurpose these lyrics for different birthday boys and birthday girls.

Of course, Codex doesn’t always generate production-ready code. You can edit code in the sandbox, delete instructions, or generate new code from new instructions. For more hands-on tinkering with the actual code, Codex sandbox exports directly to JSFiddle. Here’s a Fiddle that Codex exported for the happy birthday example above.

For non-sandbox use, OpenAI provides Codex access via API. I won’t cover that in this post but it allows you to do pretty much anything you could imagine.

Building a Madlib

My inspiration to build a madlib came from something my law/engineering brain is constantly thinking about: structuring speech and writing to make it easier to use and interact with.

I was toying around with how I might use Codex to build and manipulate phrasal templates (aka madlibs). Generating the simplest possible madlib seemed an obvious place to start, so I started there.

(1) I asked Codex to create a madlib:

My instruction:

What Codex created:

What it looked like in the sandbox:

What’s fun about this prompt (“create a madlib”) is that it’s ambiguous. Writing this way is unlike actual coding, which requires deconstructing that command into several mechanical subparts. Here I just blurt out my bottom line.

Codex understands my instruction and responds intelligently. Check out how it does the following:

• It comes up with content for a simple madlib
• It sets the madlib up for interaction by putting every word into a separate span
• It puts a class on each span to identify the type of word (i.e., noun, verb, adverb)
• It wraps the whole thing in a paragraph tag

Now that I have a madlib, I need a way to interact with it.

(2) I asked Codex to create an input field:

My instruction:

What Codex created:

What it looked like in the sandbox:

The “called input” of that instruction was necessary. My developer brain just defaulted to include it. Codex doesn’t seem to mind though. It responds with a reasonable answer.

Right away, I noticed there was no way to submit the word.

(3) I asked Codex to add a submit button:

My instruction:

What Codex created:

What it looked like in the sandbox:

Now the madlib has a way to submit. All that’s left is getting the word where it belongs.

(4) I instructed Codex to replace a word when the user submits it:

My instruction:

What Codex created:

What it looked like in the sandbox:

This code is pretty straightforward. It’s awesome to see Codex doing the tedious work: tracking down variables and class names and building out the function mechanics.

It’s interesting that it sort of misused the noun variable. It works but it’s not correct per se. In hindsight, my instruction is a little ambiguous. "Its contents" doesn't say exactly what "it" is. Codex gets it though. I like how this balances friendliness (it does what I wanted if I was imprecise about articulation) with precision (I could have made it better by being more clear with my instructions).

Now that I know my input works, I want placeholder text as a prompt for the madlib.

(5) I asked Codex to add some placeholder text so the user knows what to type in:

My instruction:

What Codex created:

What it looked like in the sandbox:

In real life, this whole step would play out in a prettier UI. But this rough version is still really valuable because it shows what all the moving parts are doing. Codex implements the mechanics almost flawlessly.

As I test this step, I realize that the input form isn’t clearing after I submit. My last entry lingers there after submission, which makes it hard to tell if the form worked. It also requires the user to take manual action to enter a new word. The cool thing about this is that I feel the product's shortcomings and can fix them immediately without context switching back into codeland. The iteration cycle is pretty wild.

(6) Clear out the input after submission:

My instruction:

What Codex created:

What it looked like in the sandbox:

Codex effortlessly creates another listener to get the job done. It’s amazing how vague I can be with these instructions and still receive a functional piece of code.

I’m excited to test Codex more to see how much these details matter. I’m predicting that with practice, I’ll become more disciplined in how I construct my prompts. I’m sure that better-written prompts will result in better-written code.

Let’s turn back to rapid iteration for one final tweak. After using the madlib a few times in the Codex playground UI, I quickly realize it would be way faster to hit enter instead of hitting “Submit” over and over again.

(7) I asked Codex to wire up the Return key for a mouse-free experience:

My instruction:

What Codex created:

What it looked like in the sandbox:

Success! No need to look up the pesky keyCode for the return key.

Codex creates a keypress event listener, passes it a function that accepts an argument, and includes a conditional statement that checks whether the user pressed the enter key. I don’t need to worry about syntax. Codex has my back.

I ended here to keep things simple. Hopefully you can imagine all the things that you could do from here.

Conclusion - My Personal Takeaways

My primary takeaway from trying out Codex is that I’m stoked. I love being able to come up with random code ideas and have AI generate a ball of clay for me to work with. I also really dig the easy export to JSFiddle so I and others can play with the code in a more hands-on way.

In talking with others about Codex or AI in general, I’m always interested in the range of strong opinions about this technology. The opinions range from “OMG this will change life as we know it,” to “yeah, but writing code is still a human thing,” to “[insert Terminator reference here].”

After demoing the technology quite a bit, my bottom line is that Codex is a useful tool that should be used responsibly and tastefully. Will some bad actors misuse it? Yes (think: misinformation, fraud, and other malicious scripts). Will it produce unwelcome things from time to time? Sure. Could it be dangerous? Certainly.

All these risks are true of many other important tools in our lives. Used well, I think Codex has the potential to help lots of good people do great things. I'm all for anything that makes it easier for anyone in the world to bring their visions to life in accessible ways. I’m not blind to the downsides of AI, but I am a technoptimist when it comes to Codex.

Everyone I’ve talked to about this tool has another similar question: “Can it really generate usable code?” My answer is yeah, it sort of can. If nothing else, Codex creates a starting point for learning and solving problems. Does it accurately solve every programming problem to completion? No, it doesn't. It triggers ideas that can expedite the problem solving process. It creates educational insights that are pretty hard to match.

For example, Codex returned this incorrect-yet-still-useful response for my instruction to “write a fizzbuzz function”:

When I resist looking at Codex through a black and white lens, it’s pretty clear this is a high impact tool. Imagine being able to approach programming tasks by typing a plain English description and getting a sample piece of code to start editing. In other words, Codex can power you through “zero to one” programming problem and let you focus on iteratively improving outputted code.

Finally, I’m really excited about trying Codex for new programming languages. I look forward to seeing how Codex makes it faster to learn different languages. It feels like Codex's command-response speed could make it a complementary tool to, say, Stackoverflow. Sure, with AI, you miss the irreplaceable benefits of SO's community-forward approach and detailed, long-form responses. But you gain a ton of speed, especially iteration speed. I get the sense that I’ll use Codex a lot to expedite my learning in new and unexpected ways.

Please email me if you’ve been building anything cool with Codex. I’d love to check it out.