Skip to main content

​
Overview

The OpenAI API prefab passes a prompt to the OpenAI API and returns an image response. 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.

​
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.

​
API Key

Enter your API key for the OpenAI API. You can create an API key here.

​
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.OpenAIAPIDalle.#Prompt = self.value
  • 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.

​
Populate Data

To display the OpenAI API’s response to the prompt, you can output the #responseImageURL variable to an image.
⌘I