DragAndDropCode.com
Talk to Ella Baker
Create a more sophisticated chat app which includes sample questions
In this tutorial, you'll learn to build a chat with AI app which allows you to talk to the social justice heroine Ella Baker
Talk to Ella Baker Chat App
Text Version
The app displays sample questions for the user to help initiate the dialogue when the user isn't sure what to ask. The questions are generated by OpenAI and displayed on the blue buttons-- try clicking on one of them.
The app also generates and displays followup questions after each question, replacing the text on the blue buttons.
The code uses variables for the name (Ella Baker) and her description (from Wikipedia). This makes it easy to customize the app for different people.
Prompt for OpenAI
The code builds the questions for Ella in the following manner:
Please answer from the perspective of [name].
Here is some context for this person: [description]
Here is the question:
[user question from text_input]
Variables are defined for the name and description:
name: Ella Baker
description: Ella Josephine Baker (December 13, 1903 – December 13, 1986) was an African-American civil rights and human rights activist. She was a largely behind-the-scenes organizer whose career spanned...
Here are the blocks for asking a question:
The app defines variables for "name" and "description". To do this, drag out an "initialize app variable" block from the "Variables" folder.
These variables are then used to build the OpenAI prompt.
The code to ask a question is also in a function "askQuestion". Functions allow you to give a name to a sequence of blocks, and then call those blocks with just the name. You define a function by dragging out a "to" block from the "Functions" folder, giving it a name, and placing blocks in it. Once you do that, you've created a new block! It shows up in the "Functions" folder.
This app asks a question both when the user chooses a sample question, and when the user types a question and clicks "Ask". The event handlers show "call" the function "askQuestion".
The prompt for generating sample questions is a bit more complicated. The prompt is in the following format:
Please provide some sample questions concerning and addressed to [name].
Address this person as 'you' in the sample questions. Here is some context for this person: [description]
Make the sample questions about the person and: [context]
Please provide three sample questions as text separated by the delimiter %% and with no text above or below. Limit each sample question to seven words.
The code to generate the samples is in a function "genSamplePrompts" with an input parameter "context". It builds the OpenAI prompt using the "context" along with the variables "name" and "description".
The prompt asks OpenAI to return text with each of the sample items separated by the delimiter %% (those instructions are in the bottom red block, and the same as given above).
When the response comes back, the app uses the "make list from text" block to turn the response text into a list, then it puts the first item on one button, and the second item on the other.