Blog Post

Startups at Microsoft
2 MIN READ

How To Set Up the Microsoft Chatbot Template and Azure OpenAI Service Plugin for Bubble

Christopher_Tearpak's avatar
Jun 16, 2023



1. From your Bubble application that was created by the Microsoft Azure OpenAI Service Chatbot Template, click the "Plugins" button.

Screenshot of: From your Bubble application that was created by the Microsoft Azure Open AI Service Chatbot Template, click the "Plugins" button.

2. If you have multiple plugins, select the "Azure OpenAI Service Plugin" from the list to display the configuration settings for the plugin.

Screenshot of: 2 If you have multiple plugins, select the "Azure Open AI Service Plugin" from the list to display the configuration settings for the plugin.

3. In another browser tab/window navigate to https://portal.azure.com. Log in if necessary, using an account that has the Azure OpenAI Service set up and a model deployed. For instructions on how to do this, please see the guide at: https://aka.ms/setup-gpt-aoai

4. Click the "Search resources, services, and docs (G+/)" search box.

Screenshot of: Click the "Search resources, services, and docs (G+/)" search box.

5. Type "openai."

6. Click "Azure OpenAI."

Screenshot of: Click "Azure OpenAI."

7. Select the resource that you wish to use with the plugin.

Screenshot of: Select the resource that you wish to use with the plugin.

8. Click "Keys and Endpoint."

Screenshot of: Click "Keys and Endpoint."

9. Click the "copy to clipboard" button for Key 1.

Screenshot of: Click the "copy to clipboard" button for Key 1.

10. Switch to your Bubble plugin setup and paste the key into the "api-key (shared headers)" and "api-key (shared headers) - dev" text boxes.

Screenshot of: Switch to your Bubble plugin setup and paste the key into the "api-key (shared headers)" and "api-key (shared headers) -  dev" text boxes.

11. Switch back to your Azure OpenAI Service "Keys and Endpoints" tab. Click the "copy to clipboard" button for Endpoint.

Screenshot of: Switch back to your Azure Open AI Service "Keys and Endpoints" tab.  Click the "copy to clipboard" button for Endpoint.

12. Switch to your Bubble plugin setup and paste the endpoint into the "endpoint (path)" and "endpoint (path) - dev" text boxes.

Screenshot of: Switch to your Bubble plugin setup and paste the endpoint into the "endpoint (path)" and "endpoint (path) - dev" text boxes.

13. Switch back to your Azure OpenAI Service tab, and click "Model Deployments."

Screenshot of: Switch back to your Azure Open AI Service tab, and click "Model Deployments."

14. Click the "Manage Deployments" button to go to Azure OpenAI Studio.

Screenshot of: Click the "Manage Deployments" button to go to Azure OpenAI Studio.

15. If necessary, select the directory and subscription, then the resource used in the previous steps. Then, click "Deployments" from the Management group.

Screenshot of: If necessary, select the directory and subscription, then the resource used in the previous steps. Then, click "Deployments" from the Management group

16. Copy the name of your desired deployment to the clipboard.

Screenshot of: Copy the name of your desired deployment to the clipboard.

17. Switch to your Bubble plugin setup and paste the deployment name into the "deployment-id(path)" and "deployment-id(path) - dev" text boxes.

Screenshot of: Switch to your Bubble plugin setup and paste the deployment name into the "deployment-id(path)" and "deployment-id(path) -  dev" text boxes.

18. Click "Preview" to preview the application.

Screenshot of: Click "Preview" to preview the application.

19. Test your new chatbot out! When you are done, feel free to look at the workflows to see how the plugin works with the application and interacts with the APIs. You should also remove the documentation from the top of the page and style to your preferences. You've created a no-code chatbot!

Screenshot of: Test your new chatbot out!  When you are done, feel free to look at the workflows to see how the plugin works with the application and interacts with the APIs. You should also remove the documentation from the top of the page and style to your preferences. You've created a no-code chatbot!



Updated Jun 16, 2023
Version 2.0
  • gradylam's avatar
    gradylam
    Copper Contributor

    Is there a way to build an assistant to set the behavior of this plugin's chatbot?  We use it for a children-friendly website. So, we need to set some constraints.

  • davidgeier's avatar
    davidgeier
    Copper Contributor

    Good Morning,

     

    I have done everything as described, but if I test the chat, I just receive general Azure open AI answers in the chat window, not my related model capabilities ( in my case real estate chatbot and 2 documents).

     

    Could you please help me why this is not showing my model ? 

  • Following this 10/28/2023... its not complete. I'm getting 404 errors after setup. This work instrection doesn't explain how to setup/interaction with the plug-in which would be helpful. 

  • anmol1615's avatar
    anmol1615
    Copper Contributor

    step no 19 is not working properly please help me out in 19 step, after selecting preview it is showing "The page is higher than your real design as the debugger is visible and displays a white area. It will be back to normal when the debugger is off". i had tried also after disable the dubugging