Creating A Web From Zero With GPT-3 and ChatGPT

Hey 👋,

Like many others I have been experimenting a lot with GPT (and ChatGPT) recently and yesterday GPT-4 was announced.

I felt inspired by the demo they presented and decided to give it a try.

I thought that using the “old” GPT-3.5 would be a nice idea so I had a baseline to compare with.

Deciding the project was easy since I had this idea in my mind for a while.

Project

A simple web page that teaches about a different random WordPress function every day.

Why?

A little over a year ago I joined Automattic and I have been willing to step up my knowledge about WordPress functions.

Result?

The end result is already online at Random WordPress Function (Note: temporary domain).

Keep reading if you want to know more about the process. Or you can jump directly to the conclusions.

Setup

First, I was determined to use GPT-3.5 so I went to the OpenAI playground and set it up. I chose the “Chat” mode (on the right sidebar), the "gpt-3.5-turbo" model and increased the “Maximum length”.

Then I added a “System Prompt” similar to what the demo used for GPT-4:

You are an AI programming assistant.

- Follow the user's requirements carefully and as strict as possible.
- First think on step by step and describe your plan. You can use pseudocode.
- Output the code in a single code block per file.
- Minimize any other prose.

Next I added as “User Prompt” something along the lines:

I want to create a web page that display a random WordPress function every day.
Feel free to use any framework or technology available to make it faster.
Display information like the function signature, a description and some usage examples.

The conversation

I will now do a recollection of how the process was from the top of my head.

⚠️ WARNING: I did not compile the actual prompts because I didn’t plan to write about this, so bear with me it might be a little difficult to digest.

First response

The first response was a more or less detailed plan and steps on how I could face the task.

My next response was making it clear that I expected the AI to do the actual coding. And that was enough for it to deliver a basic mock-up.

Quickly it became evident that I was on the good path.

First version: Static

The first version was something very similar (visually) to what you see in the final version.

It decided to use Bulma (which I never heard of, by the way) and displayed the basic information I wanted: function name, description and a list of examples.

In this first version the content was hardcoded (think of a couple of static HTML and CSS) and I asked to make it easier to add and change new functions.

Second version: Surprisingly good

The next version extracted the function information to a separate json file and added a bunch of examples to it. It also converted the HTML file to a PHP file and loaded a function randomly from the json file.

That was good progress, but I what I wanted was to have a random function every day (not on every request).

I explained the confusion and got it fixed. Now the random function was based on the current date.

$selectedFunction = $functions[hexdec(substr(md5($date), 0, 15)) % count($functions)];

Et voilà!

Third version: Not-so-new design

I decided to push it a little bit further in terms of design, so I asked to make it visually more appealing (since it was black text over white background).

The response? Exactly the same… or not?. After testing the new CSS and seeing literally zero changes I realised that the CSS file was never referenced in the PHP file.

This is the first change I made manually, and suddenly the page was looking much better (exactly the same as you see in Random WordPress Function).

I thought on calling it a day and leaving this as a simple success - but I didn’t.

Forth version: APIs, please

I decided to hint in how keeping a large manual json file was not a good idea. And it immediately came back with the suggestion on using a WordPress.org API that lists all the available functions.

It not only suggested the API but directly did the changes to integrate against it.

I was surprised, it was too good to be true. Right? And in fact it was. The API did not even exist.

I informed that the suggested API was returning a 404, and this time it came back with the suggestion of a new API: WPSeek. Again, it not only informed about the API (real API this time) but also made the changes to use it instead of the JSON file.

I refreshed the page without much hope and… error the endpoint did not exist.

This is the second time I decided to intervene (after referencing the css file in the third version). I went to the API documentation and quickly saw that it was using a slightly wrong path. I can’t confirm but it looked like if it was using an outdated version of the API (already deprecated).

I did some manual adjustments to point to the correct paths. Refreshed, and… working!

Fifth version: Make GPT-3 use GPT-3

Now I had a working webpage with everything except one piece of the puzzle: I was missing the usage examples. Which, honestly, I think is the most important part of this.

I checked the WPSeek documentation and also thought about asking GPT-3 to make a code that scraped the official WordPress documentation. But then I got the idea!

💡 Let’s integrate with the GPT-3.5 API and let’s craft a prompt that generates usage examples for a given WordPress function.

As you can imagine, I asked for that to GPT-3 and it came back with an integration using the Completions API from Open AI.

I tested the code and … it was not working. The issue? Very similar to the previous API integration. The paths were not completely correct and some structures on the request either.

BUT based on the boilerplate that the AI generated it was very easy to get it working.

I refreshed and, again, it worked!

To be honest I had some back and forth with the exact prompt for what I wanted GPT-3 to generate. In order to finetune the exact prompt I used ChatGPT and iterated ther until I got a prompt that generated the results I expected. I finally settled on this prompt below, which works perfectly for my case.

$prompt = "Behave like an AI programming assistant specialised in WordPress and PHP.

Write three usage examples for the '$function_name' WordPress function.

Important notes (do not skip any of these instructions):
- Generate between one and three examples. One minimum, three maximum.
- The examples must each be enclosed in a markdown code block (between ``` and ```).
- Include at the top of the snippet a comment with a sentence describing the example.
- The examples must show the basic usage and also the way to solve common pitfalls.
- Remember that the main goal is to show a good example of usage for WordPress' function '$function_name'.
- Increase the variety of the examples, do not repeat the same idea more than once.";

Final additions: cache and some warnings

Now I had everything in place. But I added some extra details manually:

Conclusions

Here you have a list of my own conclusions after this experiment:

Did you like this? Please let me know by clicking the below like button!