Generating Poetry with OpenAI's DALL-E and GPT APIs in Retool

Christina Zhu
Christina Zhu
Developer Advocate @ Retool

Dec 22, 2022

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.

A Retool app that uses OpenAI's ChatGPT and DALL-E APIs to write some quatrain poetry.
A Retool app that uses OpenAI's ChatGPT and DALL-E APIs to write some quatrain poetry.

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:

Read along to see how it's done!

Getting your OpenAI API keys

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.

Setting up your OpenAI resource in Retool

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.

Create a new resource in Retool with the REST API.
Create a new resource in Retool with the REST API.

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>

Example setup for your OpenAI API in Retool
Example setup for your OpenAI API in Retool

Perfect! Now we're all ready to hook this up into Retool and actually start making some API calls to our OpenAI resource.

Using the OpenAI API in Retool apps with queries

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.

Create a new text input. This is where we will input what we want ChatGPT to query.
Create a new text input. This is where we will input what we want ChatGPT to query.
Create a new text input. This is where we will input what we want ChatGPT to query.
Create a new text input. This is where we will input what we want ChatGPT to query.

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.

An example of how to generate some poems with OpenAI GPT-3.
An example of how to generate some poems with OpenAI GPT-3.

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!

Displaying results in your Retool app

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:

Dynamically generating the text we just got to show up in our Retool app.
Dynamically generating the text we just got to show up in our Retool app.

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.

Robots and rhymes

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.

All 12 Days of Retool posts

Reader

Christina Zhu
Christina Zhu
Developer Advocate @ Retool
Hi! I'm a Developer Advocate at Retool. I love building cool things and drinking way too much coffee. Dark chocolate is better than milk chocolate.
Dec 22, 2022
Copied