Overview
The OpenAI API prefab passes a prompt to the OpenAI API and returns a response. The prompt can be generated in various ways (like speech or input text field) and the response can be displayed in various ways, like a text element.
Important Note About Using API Keys in Play
If you are using any sensitive API keys in your Fetch nodes, these keys are exposed and can be seen by users of your prototypes and apps.
For prototypes, make sure you have your App Clip's password protected and that you are sending to trusted sources.
For Export to Xcode, we recommend you store your keys server side using services like Firebase Cloud Functions, Supabase Edge Functions, or AWS Lambda for secure request handling.
Prefab Controls
Fetch Onload
Choose if the Fetch API should occur immediately when the page loads.
Prompt
Enter a prompt for the OpenAI API to respond to. To update this prompt based on a user's input, read the Get API Data section below.
API Key
Enter your API key for the OpenAI API. You can create an API key here.
Model
Set the GPT model that the prefab will use.
Role
Set the GPT's role, purpose, and/or demeanor. By default, this will be "You are a helpful assistant."
Remember Context
Choose if the GPT should remember the context from previous messages.
API Loading
Add actions to fire while the API loads.
API Response
Add actions to fire when the API responds (loads successfully).
API Error
Add actions to fire if the API fails to load.
Spinner
Select a target to indicate that the API is loading, typically an Activity Indicator.
Get API Data
To dynamically prompt the OpenAI API, you can update the prefab's prompt variable through user interaction.
Textfield Input
To set the prompt based on what a user types into a text field, set the prompt variable to the value of the textfield:
Page.OpenAIAPI.#Prompt = self.value
Break the expression down
Break the expression down
Variable Expression:
Page—The location of the prefab
OpenAIAPI—The prefab name
#Prompt—The prefab variable
Value Expression:
self—The object the interaction is on
value—The textfield property for the value of the textfield
Trigger this interaction when the user is finished typing, so the API only responds to the full prompt.
Speech Input
To set the prompt based on what a user says, using a Speech trigger, set the prompt variable to the output of the Speech trigger:
Page.OpenAIAPI.#Prompt = self.Speech.output
Break the expression down
Break the expression down
Variable Expression:
Page—The location of the prefab
OpenAIAPI—The prefab name
#Prompt—The prefab variable
Value Expression:
self—The object the interaction is on; The object the Speech trigger is on
Speech—The Speech trigger
output—The Speech trigger property for the written output
Trigger this interaction when the user is finished speaking—and the Speech trigger is stopped—so the API only responds to the full prompt.
Populate Data
To display the OpenAI API's response to the prompt, you can output the #responseText variable to a text element. This Set Text action should be placed on the API Response section on the prefab.
Resources