Hey Bubblers,
With a release of ChatGPT API a few days ago, I wanted to make a plugin which will allow you to easily integrate ChatGPT into your app and incorporate historical and contextual conversations with follow-up questions.
DEMO: https://plugins.erised.io/chatgpt
EDITOR: Erisedioplugins | Bubble Editor
Screenshot:
Plugin description:
Introducing the ChatGPT Integration plugin for Bubble.io – a seamless way to add state-of-the-art chatbot capabilities to your Bubble.io apps. With the ChatGPT Integration plugin, you can quickly integrate conversations powered by ChatGPT, one of the most advanced natural language processing engines available. Simply add the plugin to your app, and start creating custom chat experiences that can understand and respond to complex user input, from help desk support to e-commerce inquiries. With Bubble.io and ChatGPT integration, you can take your app to the next level by adding cutting-edge AI capabilities that your users will love.
Workflow screenshot:
Instructions:
-
Get an API key from OpenAI. Link: OpenAI API
-
Add an input form and set up a workflow.
-
For the first step of the workflow add “Create a new thing” with a field which will format user’s input as JSON.
-
To format user input as JSON add the following text into you input field:
{
“role”: “user”,
“content”: “<USER’S INPUT HERE>”
}
PLEASE NOTE: MAKE SURE TO ADD TWO “FIND & REPLACE” AT THE END OF YOUR EXPRESSION THAT WILL REPLACE QUOTATION MARKS & ESCAPING SLASHES
Screenshots of how to use “Find & Replace”:
Screenshot 1
Screenshot 2
-
Replace <USER’S INPUT HERE> with dynamic data from the input from Step 1. DO NOT REMOVE QUOTATION MARKS.
-
Add “ChatGPT - Prompt ChatGPT” step into your workflow. For the “data” field, add the following expression:
Search for Chats (or another table where you store user’s input as JSON) → each item’s JSON (or a name of the field where you store JSON)
- Add another “Create a new thing” step and in the field where you store user’s JSON add dynamic data from the previous step with the following expression:
Result of ChatGPT - Prompt ChatGPT → choices → last item → message content
PLEASE NOTE: MAKE SURE TO ADD TWO “FIND & REPLACE” AT THE END OF YOUR EXPRESSION THAT WILL REPLACE QUOTATION MARKS & ESCAPING SLASHES
Screenshots of how to use “Find & Replace”:
Screenshot 1
Screenshot 2
- To simply store text response, use the following expression:
Result of ChatGPT - Prompt ChatGPT → choices → first item → message content → trimmed
LINK TO PLUGIN: ChatGPT | OpenAI Integration Plugin | Bubble
SUPPORT: Erised - Contact Us
,
