---
description: >-
  This article will explore how to set up the initial configurations of the AI
  Agent Tools: OpenAI & Claude template.
---

# AI Agent Tools: OpenAI & Claude

{% hint style="warning" %}
It is recommended to regularly check the status of Bubble, OpenAI, and Anthropic (Claude) to ensure the proper functioning of all template resources, as well as to add credits to OpenAI and Anthropic accounts.



**Bubble Status:** [**https://status.bubble.io/**](https://status.bubble.io/)\
**OpenAI Status:** [**https://status.openai.com/**](https://status.openai.com/)\
**Anthropic Status:** [**https://status.anthropic.com/**](https://status.anthropic.com/)



**OpenAI Billing:** [**https://platform.openai.com/settings/organization/billing/overview**](https://platform.openai.com/settings/organization/billing/overview)\
**Anthropic Billing:** [**https://console.anthropic.com/settings/billing**](https://console.anthropic.com/settings/billing)
{% endhint %}

{% hint style="success" %}
**Test Users**\
\
**Admin**\
email: john-doe@mailto.plus

pass: 12345678\
\
**User**\
email: charlie@mailto.plus

pass: 12345678
{% endhint %}

### 1. Installing the Template & Disabling the Demo Version

{% embed url="https://www.youtube.com/watch?v=_2rjAeDTYug" %}

{% hint style="warning" %}
To disable demo mode, go to _**Data > Option Sets > Styles & Config**_ and set the _**Demo Mode**_ attribute to **"no".**
{% endhint %}

### 2. Setting up OpenAI API

{% embed url="https://youtu.be/22t8spqm-po?si=-jmRdmhrRGgGJyfq" %}

**Generate API Key:** [https://platform.openai.com/settings/organization/api-keys](https://platform.openai.com/settings/organization/api-keys)

{% hint style="warning" %}
**Authorization:** Bearer \[API KEY HERE]

**Content-Type:** application/json
{% endhint %}

### 3. Setting up Claude API

{% embed url="https://youtu.be/OTvob4vBmtM?si=DP4gOY1t0qk7Q1SF" %}

**Generate API Key:** [https://console.anthropic.com/settings/keys](https://console.anthropic.com/settings/keys)

{% hint style="warning" %}
**x-api-key:** \[API KEY HERE]

**anthropic-version:** 2023-06-01

**content-type:** application/json
{% endhint %}

### 4. Setting up Stripe

{% embed url="https://youtu.be/GBXYF8ZWGuU?si=2K4yw3gikiMZ6P_i" %}

{% hint style="warning" %}
**Content-Type:** application/x-www-form-urlencoded
{% endhint %}

**Testing Stripe Connect:** [https://docs.stripe.com/connect/testing](https://docs.stripe.com/connect/testing)

**Customer Portal:** [https://dashboard.stripe.com/test/settings/billing/portal](https://dashboard.stripe.com/test/settings/billing/portal)

**Developers:** [https://dashboard.stripe.com/test/developers](https://dashboard.stripe.com/test/developers)

### 5. Deploy to Live

{% embed url="https://youtu.be/mXHF2ott4r0?si=nnDzJxQRgAC0Frz2" %}

### 6. Copying the database

Copy Development data into the Live database.

{% embed url="https://manual.bubble.io/help-guides/maintaining-an-application/database-maintenance/copying-the-database" %}

### 7. Styles (Optional)

#### Choose a color palette for your app if you want to customize it

{% embed url="https://manual.bubble.io/help-guides/design/styling/color-variables" %}

#### Configure the colors for each chart type

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FTIOfxoAKFIZ2MbuNBHn0%2FNew_Color_Chart.png?alt=media&#x26;token=c2fc7bcb-27fd-4c0c-99e4-83df475490dd" alt=""><figcaption></figcaption></figure>

#### Set up contact information, social media, the login page banner, disable the template's trial version, and make other adjustments.

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FgJJn53LZ6Zd4SD4mZCkI%2FNew_Styles_Config.png?alt=media&#x26;token=8d487902-3d8b-4c50-99ee-e46487549ed4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FsxVoiFr6jNBCzY9FkBV3%2FNew_Styles_Config_Modify.png?alt=media&#x26;token=752032a3-b607-4df6-bc40-e50972f9247e" alt=""><figcaption></figcaption></figure>

### 8. PWA (Optional)

{% content-ref url="../../help-guide/getting-started/pwa" %}
[pwa](../../help-guide/getting-started/pwa)
{% endcontent-ref %}

