Welcome to the final installment of our 12 Days of Retool series! Yesterday, we learned to embed YouTube videos featuring amazing FIFA games in a Retool-powered video player. Today, we will be using the OpenAI DALL-E and ChatGPT language APIs to have a robot write us 12 lines of poetry. We will also demonstrate how to connect these REST APIs to your Retool instance to dynamically generate images to accompany the poems.
Specifically, we'll be asking the OpenAI GPT-3 model DaVinci to write us some quatrains. A quatrain is a stanza of poetry that is 4 lines long and has a rhyme scheme. The screenshot below shows our new robot poet in action.
You can access the AI Poetry app here or download the JSON for the app here to import into your own Retool instance. To re-create this hack yourself, you'll need to learn:
- How to use the OpenAI ChatGPT API and the OpenAI DALL-E API
- How to hook your API keys up to Retool with Resources
- How to build a Retool application that uses your OpenAI resource
Read along to see how it's done!
Log in or sign up for an OpenAI account and navigate to your API keys page. Click "Create New Secret Key" in order to create your OpenAI API key. Make sure you keep this key secure and copy it immediately! It can't be accessed again once the window is closed and a new key will be required.
Luckily, setting up your API calls to OpenAI is a breeze in Retool. Open your Retool app and create a new resource - the one we will be using will be called a REST API resource, which can be used for all REST APIs.
In order to generate both text and images, you will need to create two REST API resources. The only difference between the two will be the base URLs. Feel free to name it whatever you wish, but make sure you fill out the fields as specified, and that you replace <YOUR_SECRET_KEY_HERE>
with the secret key that you obtained from the last step:
Field Value Base URL (Text/GPT-3) https://api.openai.com/v1/completions
Base URL (Image/DALL-E) https://api.openai.com/v1/images/generations
Content-Type application/json
Authorization Bearer <YOUR_SECRET_KEY_HERE>
Perfect! Now we're all ready to hook this up into Retool and actually start making some API calls to our OpenAI resource.
Once you have created a new Retool App, the first step is to set up a small text input component from the Retool component library, so we can specify what we want our request query to generate.
At the bottom left of your Retool app under Code, you'll want to add a new Resource Query. We will be editing our query fields in order to make calls to our OpenAI API.
To make calls to the OpenAI API, you will need to add a new Resource Query under Code in the bottom left of your Retool app. In this example, we will be using a POST
request, which allows us to include data in the Body
field of the query. The model we use in the example above is the text-davinci-003
which is the most capable and flexible text model, though you can choose from other text models offered by OpenAI based on your specific needs.
Field Value Note model text-davinci-003
The name of the OpenAI model prompt Three short quatrains
about {{textInput1.value}}
Our prompt to OpenAI on what to create.
It uses the {{textInput1.value}}
to dynamically fetch the text
input component's value
to pass to the API. temperature 0.5
A value from 0
to 0.9
-
the higher it is, the more "risky"
ChatGPT will be in its response. max-tokens 250
The amount of "text" or "tokens" you
want to use. 250
is usually enough
for 3 quatrains. Smaller queries
usually don't need this many.
Once you have completed the query, you can run it by clicking on Run
on the top right of the query box. If the request is successful, it will generate a poem or image!
Now that the query is working, you can display the results in your Retool app by creating a new Text
component from the Retool library and specifying the value
field as shown, which is the text that GPT-3 has generated for us:
You can follow the same steps for creating images via the DALL-E API as well, by creating a new query using the Image API resource and completing the prompt
fields, similar to above. The only difference is that you will use an Image
Retool component instead of a Text
component.
Together, we demonstrated how to use the OpenAI DALL-E and GPT language APIs within Retool to generate some pretty neat poetry and images. We also covered the steps for connecting REST APIs via Retool resources, so you can easily incorporate unique AI-generated content into your Retool app. While the capabilities of AI-generated poetry may still be limited, hopefully, this tutorial has provided an opportunity to experiment with some of the coolest AI APIs available today.
Thanks for tuning in to our 12 Days of Retool series! If you would like to explore more hacks, check out the full list of posts in the series below.
- Day 1: A parser for an abstract syntax tree
- Day 2: Two tuple hacks
- Day 3: Three equal signs
- Day 4: Four CRUD operations
- Day 5: Five Sidebar Wins
- Day 6: Six Commands in a Palette
- Day 7: Seven Big Fish Swimming
- Day 8: Eight Bits of Gaming
- Day 9: Nine Star Wars Movies
- Day 10: Ten Retool Videos
- Day 11: Eleven Best FIFA World Cup Games
- Day 12: Twelve Lines of AI Poetry
Reader