Instructions for Bubble app creation

Here are instructions for specializing a generalized AI towards a specific application by deploying your own app. We created these step-by-step instructions for creating a public-facing app specifically with the intention of showing you how to integrate a generative AI output into a public-facing service.

Although we are showing the steps to perform this specifically in Bubble.io, many of the methodologies you learn here are transferable to other no-code platforms and app development practices in general. The skillset is also expandable for creating a wide variety of applications far outside the scope of what you will build by strictly following these instructions. Although we are going through one specific application here, with small modifications you can integrate all kinds of open AI models and all kinds of tasks into the functioning of your app. For inspiration, check out open community platforms for AI app development here:

You will need an account on Bubble and OpenAI platform to complete this process.

But,

you will not need a paid plan on Bubble unless you intend to publish this app on the public web and showcase it via a website link, and you will not need a paid plan on OpenAI unless you go through so many iterations that you exhaust their free trial credits.

Create an account in:

1. Log into your account on OpenAI Beta.

2. Click on your profile name in the top-right corner. The screenshot says “Handshake Consulting”, but yours should have your profile name in that area.

3. A menu will pop up. Among the menu items, choose the one which says “View API Keys”.

4.. In the window with API keys, click on the button which says “Create new secret key”

5. In the window that pops up , click on the green ‘copy’ button with two squares on it.

6.Paste this API key to a word document or some other text repository. DO NOT SHARE this key with anyone.

1. Log into your Bubble account.

2.Insert any name you want for your app in the “Name your app” tab. This name will be publicly visible and be part of your app's web address. The respective web address will be visible next to your name.

3. Once you chose your name and respective web address, click on the dark blue “Create app” button.

4.Bubble will ask you if you want the basic or paid version. To set up the app, you do not need to pay for anything. However, if you would like to make your app public, or if you want to improve the visual experience, you will need to create a paid account.

5.You will be given an option to change the browser address for your app. If you are satisfied with the name provided, click “Next step.”

6. You will be given an option to change the font of your text. If you are satisfied with the name provided, click “Next step.”

7. You will be given a chance to change the color layout of your app for aesthetic purposes. If you are satisfied with the name provided, click “Next step.”

8. The next window will offer a range of plugins. To connect OpenAI Beta to your app, you will need to install the plugin “API Connector”. Click on “Install Now” on the button referencing the “API Connector” plugin. Once the plugin in installed, click “Get started building” button.

9. Click on the “Page: Index” title in the utmost top-left corner.

10. In the drop-down menu which pops-up, click on the option “Add a new page…”

11. Give the page an arbitrary name in the window which pops up and click the dark blue “Create” button.

1. Back on the design page, select the “Group” element on the list of items to your left, located under the “Containers” section.

2. Hold the left mouse button down on the white canvas and drag out a box. Make the box stretch from the left of the canvas to the right, and about half way down to the bottom of the screen.

3. Exit out of the window which pops up when you let go of the mouse button.

4. Next, scroll down the list of elements until you see the element “Input” under the section “Input forms”.

5. Draw a smaller box within the group container by holding the left mouse button on the canvas. Make it wide enough for users to be able to write a couple lines of text inside it. Make sure there is room left within the group you created earlier under the input element.

6. In the window that pops up, click on the box next to the “Placeholder” menu item. Give the element a name which will let the user know that this is where they write their prompts on the content they want the AI to generate. We chose the name “Input…”. Once you did that, exit out of that menu window.

7. Once you are done setting up the input, scroll back up the element menu until you see the element “Text” in the “Visual elements” section. Click on the “Text” element.

8. Under of the group you created originally, draw out a box for the text element by holding the left mouse button and dragging it on the canvas. Make sure the box is thick enough to fit at least five lines of text. Better yet, make it stretch all the way to the bottom of the screen.

9. In the menu window that appears, click on the box that says “...edit me…” under the “Appearance” tab. Give the text element a name. Any name will do. We choose the name “response”, because this is where the response of the AI text generator will output to. Exit out of that window once you’re done.

10. Once you are done setting up your text element, go back to the element menu and select the “Button” element within the “Visual elements” section.

11. Draw out a button between “Input” and “Response” elements within the group you created earlier. You can make it any size you find reasonable.

12. Click on the box under the “Appearance” tab which says “...edit me…”. Give the button the name “Generate”. Exit out of that menu item once you are done.

Upon completing these steps, you should arrive at a window which looks something like this:

Note: These are instructions for generating content with OpenAI’s older models, like Da Vinci 003. See “Adding new features” section for instructions on how to connect with the newest chat models offered by OpenAI.

1. Click on the “Plugins” tab on the far left side of the window.

2. In your list of plugins you should see API connector plugin. (If you don’t see it, click on “Add Plugin” option in the top-right corner and click “Install” next to API connector plugin). Click on the button “Add another API” within the API connector plugin window.

3. In the window next to heading “API Name” write OpenAI.

4. Next click “Add a shared header”.

5. In the options that appeared, write “Authorization” next to the “Key” option and write “Bearer” next to the “Value” option. Important: these are case sensitive inputs. Make sure to write with proper capitalization.

6. In the “Value” option where you wrote “Bearer”, add a space and then enter the API key you have saved earlier

The “Value” option should look something like this:

7. Click again on the button “Add a shared header”.

8. In the options that appeared, write “Content-Type” in the “Key” window and “application/json” in the “Value” window. Important: these are case sensitive inputs. Make sure to write with proper capitalization.

9. Once you have completed filling all the information, scroll down through the options until you see a button titled “Add another call”. Click on that button.

10. In the options that appeared, click on the option next to the title “Use as”. In the drop-down menu which appears, select “Action”.

11. Now click on the menu under “Name” which says “GET”, and from the drop-down menu click on the option “POST”.

12. In the fill-in space to the right of “POST” write down the following text:

https://api.openai.com/v1/completions

Note: This address is called an end point, and it is specified in the manual of the provider. In case of OpenAI, the end point address can be found here: https://platform.openai.com/docs/guides/gpt

***Keep this window open for the next step

1. Go back to OpenAI Beta website and go to the tab “Playground.”

2. Click on the drop-down menu where it says “Chat”. We will be selecting an older completion model for this app. This has the benefits of being cheaper to generate content. Different models also have different strengths and weaknesses, so it is good to know how to pick any of them.

3. Click on the option “Complete” from the drop-down menu.

4. Specify a prompt - In the main window of the playground write the prompt on which your AI app will deploy. This is what will make your AI app unique and specialized. The prompt will be hidden from the user. What they will see is just the input box and the generate button. By creating a hidden prompt, such as “write a poem about <input>” you will create a specialized AI, in this example an AI generating poems. Other examples could be “Write a recipe with the ingredient <input>” or “Write a forecast on the subject of <input>”. The section <input> is where the user’s input written into the input box of the app will appear.

Note: The name <input> for the variable is not arbitrary. It is the variable you specified in Step 4.6.

5. Adjust the Model parameters located to your right to your liking. The parameters mean:

6. Test your prompt: Once you are done setting up all the parameters, run the model a few times while writing test prompts in place of the <input> line. For example, “Write a poem about dogs”. Make sure the outputs are sensible. Tweak the parameters on the right until you are happy with the outputs.

7. Click on the “View code” button on the top right corner.

8. Click on the word “python” and then select “json” from the drop-down menu which appears. (If that space already says “json”, leave it as is)

9. Copy the content in the black box by clicking the “Copy” button.

10. Go back to Bubble >>> Plugins >>> API Connector, where you finished Step 5. Scroll to the bottom of the options menu, where you were filling out the content for adding another call. Under the heading “Body (JSON object, use <> for dynamic values)” paste the text you copied from OpenAI Beta.

11. If there is a checkmark marked next to the word “Private”, make sure to UNcheck this option.

12. Now click on the button “Initialize call”

It will take a couple seconds for it to connect. If you get an error message, you can try to troubleshoot it by looking up what the error means on Google.

Note: If you have used up all your free trial tokens on OpenAI Beta, you will get an error message at this stage of the process. If this is the case, you will have to set up a billing process with OpenAI.

1. Click on the “Workflow” page tab.

2. In the window that appears, click on the button “Click here to add an action…”.

3. In the window that appears, select “Plugins”, and in the side menu which appears after clicking “Plugins” select “Open AI - API Call”.

4. A new gray window will appear when you have completed the last step. In that window, click on the fill-in space to the right of the title “(body) input”.

5. Click on the blue button which appears, titled “Insert dynamic data.”

6. A dropdown menu will appear. From that menu, select “Input <name which you gave the input box at the top of the app in Step 4.6.>”. In our example, the name we gave was “input…” so here we will select (somewhat confusingly) “Input input…”.

7. In the pop-up window which follows, select the option “value”.

8. The gray window should look like this once you are done. If everything matches, exit out of the gray window.

9. Go back to the design page by clicking “Design” on the far left.

10. Double-click on the “Response” tab.

11. In the window that appears, click on the circled “i” button in the top-right corner.

12. In the side-menu, click on “Add a new custom state”.

Note: This state is important because it is what gets updated when you trigger a change with the button. In this case, we will change the state of the text box once our AI model generates content which we want to show up in this box.

13. In the window that appears, to the right of the title “State name”, write “response_gpt”.

Note: Any name would do, as long as you remember what name you gave it in later steps.

14. Click on the space to the right of “State type”, and select the option “Text”.

15. Click on the button “Create”.

16. Now in the same gray window for the response text, click on the area where it says “Response”. Delete the word “Response”.

17. Now click on the option “Insert dynamic data” which appears next to the window where you just deleted “Response”. If the option does not appear, click on the gray box under “Appearance” where the word “Response” was written earlier.

18. From the drop-down menu that appears, click on the item “Text”. The words “Text A” should appear in the area where the word “Response” used to be.

19. In the next drop-down menu which follows, select the option “s response_gpt”. (Or whatever name you gave the state in Step 7.13)

20. Exit out of that window and switch back over to the “Workflow” page.

21. Click on the button which says “Click here to add an action…”

22. From the drop-down menu, select “Element action” and then “Set state”.

23. In the gray window that will appear, click on the menu to the right of the heading “Element” and select “Text A”.

24. Click on the menu to the right of the title “Custom state”. Then select the “response_gpt” state option which you specified in Step 7.15. (Or whatever name you gave in the that step)

25. Next, click on the menu to the right of the title “Value” and select the option “Result of Step 1 (Open AI - API Call).

26. In the drop-down menu which appears afterwards, select “‘s choices”.

27. In the drop-down menu which appears afterwards, select “:first item”.

28. In the drop-down menu which appears afterwards, select “text”.

Congratulations! You have created an AI app!

To see how the viewer will experience the app, click on the “Preview” button in the top-right corner.

Click on the “Generate” button you have created earlier and see if a text following the prompt you specified will appear.