> For the complete documentation index, see [llms.txt](https://bb-docs.gitbook.io/bubweb-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bb-docs.gitbook.io/bubweb-doc/templates/openai-and-claude/ai-agent-tools-openai-and-claude.md).

# 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 %}

{% hint style="warning" %}
To make the **Base64 File Uploader & Downloader plugin** work, go to ***Data > Option Sets > Styles & Config*** and set the ***App ID*** attribute to your application's ID. ***You can find it in your app editor's URL.***
{% endhint %}

<figure><img src="/files/AuRZ6CSMqWIAqKZXE9wz" alt=""><figcaption></figcaption></figure>

### 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>

{% 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>

{% 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>

**Customer Portal:** <https://dashboard.stripe.com/test/settings/billing/portal>

**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="/files/rRWNp9o68l2eNoO8WMbj" 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="/files/fkop6Gea7h9sDCOImIQJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wgKo0sBxIIaMkKyiFtfe" alt=""><figcaption></figcaption></figure>

### 8. PWA (Optional)

{% content-ref url="/pages/ZItEWg82HiAF3o0anu2P" %}
[PWA](/bubweb-doc/help-guide/getting-started/pwa.md)
{% endcontent-ref %}