How To Integrate GPT Functions With Bubble (Complete Guide)

How to’s AI

29th of June, 2025

GPT functions transform your chatbot from a simple conversational interface into a powerful virtual assistant that can interact with external services. By connecting your ChatGPT model to APIs like Gmail or your own custom services, you can create smarter chatbots that can leverage powerful external databases and tools.

In this comprehensive guide, we’ll build a ChatGPT bot that fetches book information from the Google Books API based on your conversation, demonstrating how to implement GPT functions in your Bubble application.

What are GPT Functions?

GPT functions allow your chatbot to make API calls with parameters extracted from your conversation. Think of it as giving ChatGPT the ability to:

  • Send emails through Gmail when you ask it to
  • Fetch real-time data from external services
  • Perform actions in other applications

In this guide, we’ll connect our GPT model to the Google Books service. After having a conversation with our model, it should then be able to recommend specific books using data retrieved from Google Books.

1. Set Up Your API Infrastructure

Configure OpenAI API Connection

First, you’ll need to set up the OpenAI API in Bubble:

  1. Install the API Connector plugin from the Bubble plugin store
  2. Add a new API called OpenAI
  3. Set authentication to Private key in header
  4. Add your API key: Bearer YOUR_OPENAI_API_KEY
    • You can find your API key by heading to your OpenAI dashboard > API keys > Create a new secret key
  5. Add a shared header:
    • Key: Content-Type
    • Value: application/json

Create the Functions-Enabled Completions Call

Now create a specialized API call that supports functions:

  1. In the API Connector, add a new call named completions_functions
  2. Set method to POST
  3. Set endpoint: https://api.openai.com/v1/chat/completions
  4. Configure as Action (not Data)

2. Structure Your Function Schema

Understanding the Function Format

Functions require specific formatting in your API call. Here’s the basic structure to use for defining our function to retrieve the user’s specified book.

{

  "tools": [{

    "type": "function",

    "function": {

      "name": "get_book_image_and_description",

      "description": "Called when the user wants book information",

      "parameters": {

        "type": "object",

        "properties": {

          "name": {"type": "string", "description": "Name of the book"},

          "info": {"type": "string", "description": "Book description"}

        },

        "required": ["name", "info"]

      }

    }

  }]

}

The response after sending a call with the function described above will contain a tool_calls list containing information about what functions were called and what arguments were used.

use gpt functions in Bubble to call external tools

Set Up Dynamic Fields

In your API call body, make these fields dynamic:

  1. Add <history> before the messages array for conversation history
  2. Make the GPT role dynamic: <gpt_content>
  3. Make the user content dynamic: <user_content>

Configure Function Parameters

For our Google Books example, you’ll need:

  • name: The book title extracted from the conversation
  • info: A generated description based on context

Subscribe to Building with Bubble Newsletter

3. Set Up Google Books API

Enable Google Books API

  1. Go to Google Cloud Console
  2. Create a new project
  3. Search for Google Books API and enable it
  4. Create credentials and get your API key

gpt functions can be used to call the Google Books API through chat

Create Google Books API Call in Bubble

  1. Add another API in the API Connector called Google
  2. Add a call named get_book
  3. Set the following endpoint: https://www.googleapis.com/books/v1/volumes?q=[book_name]&key=YOUR_API_KEY
  4. Click Initialize call to receive an initial response.
  5. Replace spaces with + signs using find/replace operator

4. Build the Chat Interface

Database Structure

Create a Message data type with fields:

  • content (text) – The message text
  • json (text) – Stores message in JSON format
  • user (User) – Empty for AI messages
  • image (image) – For book covers

UI Components

Build your chat interface with:

  • Repeating group displaying messages
  • Conditional visibility for user vs AI messages
  • Multiline input for user messages
  • Send button to trigger workflows

sample chat interface for gpt function calling

5. Create the Core Workflows

Main Message Workflow

When the send button is clicked:

Step 1: Create User Message

Create new Message:

  • content = Multiline Input’s value
  • json = Format as JSON with user role. Set the content field as the value from the multiline input element. 
  • user = Current User

Step 2: API Call – Completions with Functions

Make another API call with the following values:

  • history = All previous messages’ JSON
  • gpt_content = Last AI message
  • user_content = Multiline Input’s value

Step 3: API Call Response

Make another message with the following values:

  • content = set to the result of the previous step’s message content
  • json = Format as JSON with user role. Set the content field as the value from the multiline input element. 
  • user = set to blank

At this point, we’ll now have a chat interface set up with memory functionality.

chat interface with memory functionality

Function Execution Workflow

When a function is called:

Steps 4 and 5: Extract Parameters

We’ll use the Read JSON plugin’s action “Read JSON and get value by key”.

JSON = Step 2’s results tool_calls:function:arguments:last_item

Key = “name” (for book title)

Next, we’ll create a similar step where:

Key = “info” (for book description)

Step 6: Call Google Books API

Next, we’ll use the get_book call to make an actual call to the Google Books API

For the book_name parameter, we’ll use the extracted name from Step 4.

Step 7: Create Response Message

Create new Message:

  • content = Extracted info parameter
  • image = Google Books API result’s thumbnail
  • user = Empty (AI message)

Step 8: Reset input field

We’ll just need to add a reset action to clear out the input after sending:

To do this, we’ll choose the action “Reset relevant inputs”.

Conditional Logic

Lastly, we’ll also need to add some conditional logic to our workflow.

  • When our message does not require a function call, we don’t want to call the Google Books API anymore.
    • We can check this by looking at the result of step 2. If the number of characters in the tool_call’s list is not 0, only then should we proceed with Steps 4 onwards.
  • On the other hand, we also want to handle the reverse case. If no functions are detected, we’ll proceed with adding a message in step 3 of our workflow.

Once you’ve finalized this workflow, you can test your app and try using the chatbot to retrieve book information.

gpt functions in Bubble to call external functions

Conclusion

GPT functions open up endless possibilities for creating intelligent, action-oriented chatbots in Bubble. By following this guide, you’ve learned how to create a chatbot that can intelligently interact with external APIs based on natural conversation.

If you’re interested in using other APIs in your Bubble app, you can read our guide on how to use ChatGPT to connect any API with Bubble.io!

Want to start your own Bubble app, check out our complete beginner’s guide crash course! If you want to try out integrating AI into your existing Bubble app,  you’ll learn everything you need to know with our Bubble x OpenAI course.

Get the Bubble Crash Course for FREE

Related blog posts

How to Build a Flashcard Generator in Bubble.io

By using no-code and AI, we can create a tool that creates flashcards from any study material in seconds! In this guide, we'll walk you through how to build a flashcard generator application using both Bubble.io and OpenAI's API.

Creating A Custom OpenAI Chatbot With No-Code Using Bubble

Read through this guide to learn how to create a custom OpenAI chatbot with Bubble. By setting up fine-tuned AI models, you can provide accurate, tailored responses to your users' questions about your specific product.

How to: add text generation to a Bubble app with OpenAI (Completions API)

In this tutorial, you’ll learn everything there is to know about integrating OpenAI’s Completions API with your Bubble app.

AI Image Generation In Bubble With OpenAI’s DALL-E 3 (Complete Guide)

In this guide, you’ll learn how to integrate OpenAI’s DALL-E 3 model with Bubble to generate AI-powered images.

This website uses cookies. For more information, please see Cookie Terms of Use. Read more.