# OpenAI Services ChatGPT Integration Blocks

## Overview

An artificial intelligence research and deployment company,[ OpenAI](https://openai.com/) focuses on the creation of safe, artificial, general intelligence. Their latest AI model, called ChatGPT, has the ability to interact with a user in a conversational tone. 

When prompted, it composes responses relevant to the topic requested. Thunkable creators can utilize this model in their own apps and tap into the power of AI and natural language generation. 

{% hint style="info" %}
OpenAI no longer provides Free Trial credits. An OpenAI paid account is required to make API calls. Please see [OpenAI pricing](https://openai.com/pricing#language-models). 
{% endhint %}

### Create an OpenAI account and generate a secret API key

To use the OpenAI ChatGPT model in your Thunkable app, you need to generate a personal Open AI API key. To do this:

1. Navigate to <https://openai.com/api/>&#x20;
2. Click **Sign Up**.
3. On the Overview page, click your avatar to show the menu and select **View API Keys**.
4. Select **Create new secret key**.
5. Copy the secret key that is provided in the popup window. You will need to paste this into your Thunkable project.&#x20;

{% hint style="warning" %}
You will only be able to see your OpenAI API key once. You will not be able to copy it after the initial modal closes.
{% endhint %}

### OpenAI Integration Setup in Thunkable

To setup the OpenAI integration in Thunkable:&#x20;

1. Navigate to your project’s Blocks tab.
2. Scroll to the bottom of the blocks panel on the left side to access the Advanced section.
3. Click the expand chevron to show the Advanced components.
4. Click the plus icon next to `Open AI Services`.
5. Your “Open AI Services” component will appear under the Open AI Services (Beta) drawer. Click the gear icon next to the component's name to access its properties dialog.
6. Paste your Open Secret API Key in the text box under APIKey (currently set to ‘default’).
7. Click Submit.

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FuyW5mKco6BH1iiL51l8e%2Fadvanced.png?alt=media&#x26;token=ea122cff-75c5-4d7f-acad-dcdbf579c4bf" alt=""><figcaption></figcaption></figure>

## Properties

Once you have added at least one Open API component to your app, you will be able to view all of your Open API components under the Open`APIs` drawer in the Advanced section of the Blocks tab.

To edit the properties of an Open API component, click on the ⚙ icon next to the component's name to bring up the properties dialog. You will be able to change the properties and click Done to save your changes, or click Delete to delete the component.

### API Key

<table><thead><tr><th>Property</th><th width="374.33333333333326">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>API Key</td><td>Your person API for making requests to the OpenAI API (default key used if this field is left blank)</td><td>Text</td></tr></tbody></table>

### Request Settings

Request Settings are passed as a [list](https://docs.thunkable.com/blocks/blocks/lists) of [Objects](https://docs.thunkable.com/blocks/blocks/objects), or key-value pairs. In this modal, you can pass the property name and property value in their own fields.

See what kind of settings you can pass in OpenAI's [Making Requests](https://platform.openai.com/docs/api-reference/making-requests) documentation.

<table><thead><tr><th>Property</th><th width="374.33333333333326">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>Property</td><td>Name of the property you are assigning a value to in your API request</td><td>Text</td></tr><tr><td>Value</td><td>Value of the property you are specifying in your API request</td><td>Text</td></tr></tbody></table>

## Blocks

### Functions

#### Call Text Completion

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FIjA4jrWSlF2ZYLJpRH9u%2Fopenaitextblock.png?alt=media&#x26;token=0b8065a9-607b-4122-b062-713e310d905d" alt=""><figcaption></figcaption></figure>

Make a call to [OpenAI's Completion model](https://platform.openai.com/docs/api-reference/completions)

<table><thead><tr><th width="163">Input Name</th><th width="342">Description</th><th width="125">Data Type</th><th width="225">Required?</th></tr></thead><tbody><tr><td>Prompt</td><td>Text prompt for OpenAI to generate text around</td><td>Text</td><td>Yes</td></tr></tbody></table>

| Output Name | Description                                                             | Data Type                                 |
| ----------- | ----------------------------------------------------------------------- | ----------------------------------------- |
| response    | Generated Text from OpenAI API                                          | Text                                      |
| error       | If an error is encountered while making the API call, returns the error | Text if an error is returned; else `null` |

#### Call Image Generation

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F7ze3utOwoqtsoFNYP5M6%2Fopenaiimageblock.png?alt=media&#x26;token=7d1b09d7-d7a3-4b58-86c5-73e77ee039ff" alt=""><figcaption></figcaption></figure>

Make a call to [OpenAI's Create Image model](https://platform.openai.com/docs/api-reference/images/create)

<table><thead><tr><th width="143">Input Name</th><th width="342">Description</th><th width="125">Data Type</th><th width="225">Required?</th></tr></thead><tbody><tr><td>Prompt</td><td>Text prompt for OpenAI to generate image </td><td>Text</td><td>Yes</td></tr></tbody></table>

<table><thead><tr><th width="185.99999999999997">Output Name</th><th>Description</th><th>Data Type</th></tr></thead><tbody><tr><td>response</td><td>Generated Image from OpenAI API</td><td>Image</td></tr><tr><td>error</td><td>If an error is encountered while making the API call, returns the error</td><td>Text if an error is returned; else <code>null</code></td></tr></tbody></table>

#### Call Text with Image

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F3vgfoWxkTGspPdfzZINu%2Fimage%20-%202025-01-31T212303.615.png?alt=media&#x26;token=574e320b-17b4-4e82-b60f-9f56e3c6e86f" alt=""><figcaption></figcaption></figure>

Make a call to [OpenAI's Vision model](https://platform.openai.com/docs/guides/vision)

<table><thead><tr><th width="163">Input Name</th><th width="342">Description</th><th width="125">Data Type</th><th width="225">Required?</th></tr></thead><tbody><tr><td>Prompt</td><td>Text prompt for OpenAI to generate text around</td><td>Text</td><td>No</td></tr><tr><td>Image</td><td>Image URL or Image base64 type</td><td>Image</td><td>Yes</td></tr></tbody></table>

<table><thead><tr><th width="185.99999999999997">Output Name</th><th>Description</th><th>Data Type</th></tr></thead><tbody><tr><td>response</td><td>Generated Text from OpenAI API</td><td>Text</td></tr><tr><td>error</td><td>If an error is encountered while making the API call, returns the error</td><td>Text if an error is returned; else <code>null</code></td></tr></tbody></table>

#### Call Text to Speech

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FQgtKhbW9M37CNYx1j9GY%2Ftext%20to%20speech%20ai.jpg?alt=media&#x26;token=6a812f2c-5d8a-4470-8208-0ca013f2504b" alt="" width="522"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FbOQYemGhhoGi5DPtwliV%2Ftext%20to%20speech%20open%20ai.jpg?alt=media&#x26;token=1d4ba807-c79c-43a0-8158-24cba73a69e1" alt="" width="563"><figcaption></figcaption></figure></div>

Make a call to [OpenAI's Text to speech model](https://platform.openai.com/docs/guides/text-to-speech)

<table><thead><tr><th width="163">Input Name</th><th width="342">Description</th><th width="125">Data Type</th><th width="225">Required?</th></tr></thead><tbody><tr><td>Prompt</td><td>Text prompt for OpenAI to generate speech</td><td>Text</td><td>Yes</td></tr><tr><td>Voice name</td><td>The voice that will speak the output</td><td>Text</td><td>Yes</td></tr></tbody></table>

<table><thead><tr><th width="185.99999999999997">Output Name</th><th>Description</th><th>Data Type</th></tr></thead><tbody><tr><td>error</td><td>If an error is encountered while making the API call, returns the error</td><td>Text if an error is returned; else <code>null</code></td></tr></tbody></table>

### Properties

#### Set API Key

Set the API Key being used to make calls to the OpenAI API in your app. It is not required to use this block if you have set the OpenAI API in the properties dialog.

#### Get API Key

Get the API Key being used to make calls to the OpenAI API in your app

#### Set API Request Settings

Use [lists](https://docs.thunkable.com/blocks/blocks/lists) and [Objects](https://docs.thunkable.com/blocks/blocks/objects) blocks to set the [Request Settings](#request-settings) of your call to the OpenAI API

#### Get API Request Settings

Get the [Request Settings](#request-settings) of your call to the OpenAI API

Your Request Settings will be returned as a [list](https://docs.thunkable.com/blocks/blocks/lists) of [Objects](https://docs.thunkable.com/blocks/blocks/objects)

## Create a Thunkable Project Using the OpenAI Integration

### Design Tab: Design the App’s User Interface

To utilize the OpenAI ChatGPT integration, your Thunkable project will need a minimum of:

* One text input
* One label
* Two buttons
* One image component

Below is a sample minimum viable product design:

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FPZfxRhauT57kgPwtE0S4%2FScreenshot%202023-01-06%20at%202.39.41%20PM.png?alt=media&#x26;token=5f1698bd-0ff2-41d4-82c0-526966b26e2a" alt=""><figcaption></figcaption></figure>

\
To use the OpenAI integration to display text and an image from a query, recreate the following block combination.

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F85tcJ49bj4oroqadDFJ3%2Fopenaidemov.png?alt=media&#x26;token=a0493ec0-a3ad-4df2-b2b6-d5b933131920" alt=""><figcaption></figcaption></figure>

Users of this app enter a prompt into the text input.&#x20;

The app calls the OpenAI API and populates the label and image components when the 'Text' or 'Image' button is clicked.&#x20;

The label component shows the text output from the OpenAI model. The image component shows the image output from the OpenAI model.&#x20;

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FAAxjhcYHbs3NI1MalWLX%2FScreenshot_2023-01-03-15-55-59-63_9dc5dd0bd3f5e5332cf0ed1172f4b46e.jpg?alt=media&#x26;token=10b6f2ac-e244-418d-ad04-64b9c524b110" alt="" width="375"><figcaption></figcaption></figure></div>

### Troubleshooting

If you are getting `undefined` or errors in your response from OpenAI calls, try the following.

* Check that your [OpenAI secret key is configured](#openai-integration-setup-in-thunkable).
* Ensure your OpenAI account has paid credits or auto-recharge set. OpenAI no longer offers Free Trial credits. See [OpenAI billing](https://help.openai.com/en/collections/3943089-account-login-and-billing).
* Check that your prompt is correctly set before being sent to OpenAI.

Adding error handling to your OpenAI blocks can better help troubleshoot issues.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FxecLUXEV3rFzOHD1vD99%2FScreen%20Shot%202024-04-17%20at%202.08.21%20PM.png?alt=media&#x26;token=8e594db3-0cd7-4a2b-b873-03968b884315" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}