Build your own web development assistant using OpenAI API - Part 2

In the first part of this tutorial, you learned how to set up GPTScript and we built a web developer assistant with a simple frontend that showed us the source code, and a preview of the result. If you haven't read it yet, you can find it here: https://www.acorn.io/resources/tutorials/build-your-own-web-development-assistant-using-open-ai-api.

In this part, we are going to rebuild the script quite a bit and use the new chat functionality that now comes with GPTScript.

We are not going to have a frontend for this part, so everything will now happen in the command line. The result will still be a usable HTML file, but the way it's created will be a little bit different.

By using the new chat functionality, the web developer assistant will feel a little bit more natural as it will always keep asking us what more it should do.

Implementing the chat functionality

Anyways, let's open up the GPTScript in an editor, and change the code to look like this:

tools: sys.read, sys.write, sys.download
description: A coding assistant for building websites.
chat: true

You are a professional web developer and designer. You are going to be an assistant to the user.
When this chat is started, ask what the user wants to build.
When you're given a command, open up `index.html`, analyze it, and modify it.

Let's go through the code.

1. We include a few tools that we need for accessing the HTML template file, and we also include the sys.download to make it possible for the script to download images to our computer.
2. We set a simple description for the script.
3. chat: true is a new option. This essentially just assures that the script is indeed using the chat functionality.

The rest of the code is very similar to the one we had in part 1. Since it's just natural English, it should be pretty straight forward. Feel free to do modifications to this if you think there is anything that could be done better or in a different way.

Running the script

In the previous part, we run the GPTScript from the frontend. In this part, we are going to run the script from the command line.

Go to the folder where you have the script, and run the following command:

gptscript assistant.gpt

You should now be prompted with a question similar to "What do you want to build today?" or similar. If you have the index.html from the last part, you can open up this in a browser and see what you want to change. Then just say something like "Can you change the background of the menu to purple?". Watch the chat bot do its work, and refresh the browser afterwards.

If you haven't got the code from the previous part, you can say something like "I want to build a simple website for a lawyer company. The company is called Steins Abogadas.". This will then generate a simple HTML file. Open up this in a browser when the script is finished and see the result. You can now start giving the assistant more commands to change whatever you want.

Including images

In the previous part of this tutorial, we had support for images. Let's reimplement that into this script as well. The complete script should look like this:

tools: sys.read, sys.write, sys.download, image-illustrator
description: A coding assistant for building websites.
chat: true

You are a professional web developer and designer. You are going to be an assistant to the user.
When this chat is started, ask what the user wants to build.
If you're asked to generate or insert an image, call the image-illustrator.
When you're given a command, open up `index.html`, analyze it, and modify it.

---
name: image-illustrator
tools: github.com/gptscript-ai/image-generation, sys.download, sys.write
description: Based on a command, this generates an image
args: command: The command to base the image on. 

You are a graphic designer, help the user and do the following steps in order:

1) Come up with a prompt for generating an image based on the command. 
2) Based on the prompt, come up with a filename ending with .png
3) Get the URL and download it at in this folder, and rename it to the ${filename}.
4) Return the name of the file.

I will now go through the changes.

1. I added a new tool in the list called "image-illustrator". This is the tool we're building now.
2. I added one more command in the script to make sure that when the user asks for an image, we are going to call the image-illustrator.

Below the main script, we create a new tool called "image-illustrator".

We give the script some commands to follow. Again, it's just plain English, so hopefully it makes sense. Essentially, we are just telling the script that based on the command the users gives, it should find an appropriate file name. When that is done, it will download the image and rename it.

The returned name will be inserted to the website.

Creating a new site

Let's say that we already have created something, but now we want to start from scratch again. Run a command similar to this:

can you clean up the index.html and start a new page for me? I want to create a landing page for a new company specializing in sled tours with dogs.

This will remove everything from the index.html, and start all over again. For me, the result became like this:

Great!

Okay, we now know that our chat bot is capable of building a simple website. Let's see what more we can make it do for us. For example, we can make the page mobile responsive, add more elements to the menu, ask it to add icons to parts of the page, generate images to use, etc.

Adding content

We can try to give this command and see what happens:

can you add a new section to the page where you list of three blog posts related to the page?

If you now go to the browser and see, there should be a brand new section at the bottom of the page with 3 blog post listed.

Summary

With the new chat functionality in place, the web developer assistant will work much faster and the results can also be better.

There isn't really any limitations for what this script / chat bot can do as a web developer. It should now be able to write HTML, CSS, and JavaScript.