Integrating OpenAI's API in Bubble - Setup, Authentication, Dynamic Requests
Table of Contents
- Introduction to OpenAI and Their API Capabilities
- Authenticating with OpenAI's API
- Sending Dynamic Data in a POST Request
- Parsing Returned Text Data
- Conclusion and Next Steps
Introduction to OpenAI and Their Powerful API Capabilities
OpenAI is a leading artificial intelligence (AI) company at the forefront of creating advanced AI systems. Their API provides access to powerful AI models like GPT-3 for natural language processing and Codex for translating text to code.
The OpenAI API opens up an exciting world of possibilities. By making API calls, you can leverage these cutting-edge AI algorithms to generate human-like text, answer questions, summarize content and more. The creative potential is vast.
Before diving into the technical details, it's important to first understand OpenAI's AI models and see examples of what their API can do. This context will help frame the purpose and value of the API as we explore actually using it.
Overview of OpenAI's Groundbreaking AI Models
OpenAI's crown jewel is GPT-3, their most advanced AI system for natural language processing. GPT-3 can generate remarkably human-like text, understanding context and nuanced language at an unprecedented level. The possibilities span from creating stories and poetry to automating business writing and customer support. Codex is their AI system focused on coding. It can translate natural language prompts into working code in over a dozen programming languages. This makes it fast and simple to generate code, saving developers substantial time and effort. DALL-E 2 is OpenAI's latest AI system that creates realistic images and art from text descriptions. Simply describe what you want to see, and DALL-E 2 will generate unique images that match the description. These are just some of the amazing AI models that OpenAI provides access to through their API. Each model opens up new ways to integrate advanced intelligence into apps and workflows.
Understanding Example API Requests
To understand OpenAI's API capabilities, it helps to look at example requests. These snippets demonstrate what you can build by leveraging the AI models. For instance, here is an API request to GPT-3 for summarizing some text:
Prompt: Please provide a one sentence summary of the following passage: "The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct."
Response: The Eiffel Tower was the world's tallest structure for 41 years until 1930.
This concise summary shows how GPT-3 can distill key information from longer content. There are countless ways businesses could leverage this for saving time and effort. Other examples show how Codex can generate full code based on natural language, how DALL-E 2 can create images, and more. Studying these really highlights what you can build on top of OpenAI's incredible technology. Now let's dive into actually accessing these capabilities by sending API requests.
Authenticating with the OpenAI API
Like most web APIs, OpenAI uses API keys to authenticate clients and authorize access. All requests must include a valid API key to get a response.
API keys uniquely identify the developer or app calling the API. This allows OpenAI to monitor usage, prevent abuse, and maintain quality of service for legitimate applications.
Apps should never expose API keys publicly. Treat your OpenAI API keys like passwords. If leaked, they could be used to consume your usage quota or access billing details.
Adding the Required Authorization Header
The OpenAI documentation outlines the exact way to pass your API key: via an Authorization header with your key prefixed by the word "Bearer". Here is an example cURL request with the header added:
curl https://api.openai.com/v1/engines/davinci/completions \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer YOUR_API_KEY'
This bearer token approach is a very standard way for APIs to implement authentication. When inspecting example cURL snippets from other APIs, watch for authorization headers prefixed with "Bearer" as a clue for how you will authenticate.
Alternate Authentication Methods
While the bearer token header is the primary method, OpenAI docs also show an alternate way to authenticate with HTTP basic auth. Here is what that looks like in cURL:
curl https://api.openai.com/v1/engines/davinci/completions \
-u sk-YOUR_API_KEY:
The key is passed after the -u flag instead of via a header. So there is some flexibility in exactly how keys get passed during authentication. Just follow what the documentation outlines for whichever API you integrate with going forward. Being able to interpret example cURL requests makes parsing docs much easier.
Sending Dynamic Data in a POST Request Body
Now that we know how to authenticate to the OpenAI API, let's focus on an example request that uses dynamic data.
We will build out an integration that generates custom interview questions using GPT-3. This involves sending text prompts in the request body and getting back intelligent responses.
First, we hardcode all parts of the request to validate we get a proper response. Then we tweak the body data to use dynamic values from user inputs. This is a great way to start testing real API integrations.
Making the Prompt Field Dynamic
By studying example POST requests that send json data, we see that GPT-3 expects a top-level "prompt" field for the text we want to analyze or process. Initially we hardcode a sample prompt to generate interview questions:
json{ "prompt": "Create a list of 8 questions for my interview with a science fiction author" }
This works fine initially. But now let's make it more flexible for real usage. We update the json body to reference dynamic Bubble values instead of hardcoding:
json{ "prompt": "Create a list of {{Number of Questions}} questions for my interview with a {{Profession}}" }
Now we can let users configure the number of questions to generate along with the type of interview subject. The AI responses stay contextual for whatever options they pick!
Allowing User Input for Custom Prompts
We exposed some customization by making aspects of the base prompt dynamic. But the format is still rather restrictive. What if users want to provide their own custom prompt wording? We can do that by using a Bubble text input that feeds directly into the json body POSTed to OpenAI. Add a text input field called "Custom Prompt" to gather a user defined prompt string, unescaped. Then map it into the json:
json{ "prompt": "{{Custom Prompt}}" }
Now end users can enter any type of prompt to tap into the full power and flexibility of the GPT-3 model through OpenAI! The integration is complete.
Parsing Returned API Data
With our OpenAI integration sending requests and getting AI generated text back, we likely need to parse the raw json response before presenting it properly in our app UI.
The response body contains a top level "choices" array. Within that, the AI generated text is stuffed into a single "text" field. This poses two main challenges:
-
Separating the single block of text into distinct parts
-
Displaying those parts nicely in repeating Bubble interface elements
Splitting a Text Response into Multiple Texts
Looking closely at the structure of the text response, we see GPT-3 separates distinct lines using a special "\n" newline character sequence. We can leverage Bubble's split by function to break on that delimiter into an array of lines:
{{Get Interview Questions API Call.Choices.First item.Text split by "\n"}}
This evaluates to a clean list of text lines representing each individual interview question!
Displaying Questions in a Repeating Bubble Group
Now that we have split lines, displaying them is easy with a repeating group. We set the datasource to:
{{Get Interview Questions API Call.Choices.First item.Text split by "\n" items from number 3}}
This skips the first blank lines and displays real content. So each child group renders an interview question fetched from OpenAI! Parsing json and displaying external API data becomes much easier once you learn little tricks like split by and repeating groups. What you can build on top of AI models like GPT-3 is only limited by your imagination.
Conclusion and Next Steps with the OpenAI API
That wraps our journey from discovering OpenAI's incredible AI capabilities through actually accessing them via API requests for a sample interview app integration.
The key takeaways are:
-
OpenAI provides access to unbelievably advanced AI through an easy to use API
-
Carefully inspect example cURL requests when interpreting documentation
-
Use Postman to quickly test requests and responses
-
Start by hard coding all parts of a request before making any part dynamic
-
Helper functions like split by and repeating groups are fantastic for parsing and displaying external API data
We only scratched the surface of what GPT-3 and other OpenAI models can empower you to build. This should give you a solid foundation for unlocking their potential and enhancing your apps with AI superpowers!
FAQ
Q: What is the OpenAI API and what can it do?
A: The OpenAI API provides access to various AI models like GPT-3 that can perform natural language tasks like generating text, answering questions, summarizing passages etc.
Q: How do I authenticate with the OpenAI API in Bubble?
A: You authenticate by adding an Authorization header with the value 'Bearer {your_api_key}' where {your_api_key} is your secret OpenAI API key.
Q: How can I send dynamic data to the OpenAI API from Bubble?
A: Use angle brackets like
Q: The OpenAI API returned text that needs parsing. What can I do?
A: Use Bubble's split by function to divide text by newlines or other separators into multiple text values.
Q: Can I import OpenAI example cURL requests easily?
A: Yes, paste cURL requests in Bubble's API Connector import to auto-generate endpoints, headers etc and save time.
Q: What concepts are covered regarding API requests in this article?
A: Main concepts covered are authentication, dynamic requests, parsing responses, importing cURL - focus on core ideas vs specifics.
Q: What can GPT-3 be used for via the OpenAI API?
A: GPT-3 excels at generating human-like text for a vast range of use cases like chatbots, content creation, text summarization, classification & more.
Q: What other capabilities does OpenAI offer besides GPT-3?
A: OpenAI offers image generation via DALL-E models, AI code generation via Codex, and more cutting-edge AI research.
Q: What languages and frameworks can I use OpenAI with?
A: Client libraries allow easy integration with OpenAI models in Python, Node.js, Java, JS, Ruby, C#, Go and more.
Q: What are some real-world applications of OpenAI's models?
A: ChatGPT for conversational AI, image generation, automated coding, search relevance improvements via text optimization and more.