Create your own Protopage widgets with AI
We’re now in the age of AI, which means you only need to know plain English in order to be a programmer.
In this tutorial, we’ll show you how to create your own widget that lets you convert between Celsius and Fahrenheit.
Here is the end result:
To create this, we first signed up for Claude.ai. You can also use other AI services such as ChatGPT.
Then, we gave the AI the following instructions:
“create an html page that does C to F conversion, make it compact, do not use any libraries, give it a transparent background, include a cartoon image of a thermometer, and put it all in one self-contained html file”
The most important part is that we asked it to provide a “self-contained html file” and to “not use any libraries”. This means that the result can easily be copied and pasted into a “Web widget code” widget on your Protopage.
Here is what the AI generated:
AI can be unpredictable, and so if you don’t get exactly what you’re looking for, you can simply ask the AI to keep making changes until it looks the way you want it to.
For example, you may need to ask the AI to use a different thermometer image, to vertically align the text-entry boxes, to change the background color to white, or to use smaller or larger text sizes. You will probably need to spend several minutes experimenting.
After it looks good inside the AI web page, copy the HTML it generates to your computer’s clipboard. Then, click the Add Widgets menu at the top of your Protopage, and choose Web widget code.
After dragging this widget to your page, click edit on your Web widget code widget, and paste in the HTML provided by the AI. Give the widget a title, save it, and you’re done!
Note that due to browser security limitations, it’s normally not possible for you to paste in HTML which contains code that communicates with a third-party web site. For example, it would not be possible to ask it to connect to BBC News and show you the latest headlines.
However, there are lots of types of self-contained widgets you can create that don’t need to communicate externally. Ideas include displaying a countdown to a future date, an animation, or even a simple game like Tic Tac Toe.
