--- title: Building an AI chatbot description: Learn how to build the simplest AI-powered chatbot in APIANT using the Automation Chat Widget and OpenAI integration — from configuring triggers, chat responses, and vector stores to embedding the chatbot on your web page. --- [Skip to content](https://help.apiant.com/building-an-ai-chatbot#main-content) English Show submenu for translations ![apiant-logo-forum.png\]](https://help.apiant.com/hs-fs/hubfs/apiant-logo-forum.png?height=40&name=apiant-logo-forum.png) Open main navigation Close main navigation - English Show submenu for translations - Go to apiant.com Go to apiant.com Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Help Center](https://help.apiant.com/?hsLang=en) 2. [AutomationEditor](https://help.apiant.com/automationeditor?hsLang=en) 3. [Building Automations](https://help.apiant.com/automationeditor?hsLang=en#building-automations) # Building an AI chatbot ## Learn how to build the simplest AI-powered chatbot in APIANT using the Automation Chat Widget and OpenAI integration — from configuring triggers, chat responses, and vector stores to embedding the chatbot on your web page. This is the simplest AI-powered chatbot automation: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/eAiNy4nS-8SRnepblbFlp_image.png?format=webp)   Each time someone enters a chat message, the trigger fires, the AI model generates a response, and the response is sent back to the chat widget. Follow the instructions below to build the simplest possible AI chatbot. #### Chat Message Trigger Begin by adding a trigger and select System Utility: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/RJbINjRTLMwbTUIlhgC1u_image.png?format=webp)   Then choose Automation Chat Widget: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/5WFb39rN1LMQbXesrg_fv_image.png?format=webp)   Then choose the "new chat message (instant)" trigger: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/LUw9ZlVMNosMSpLcigyYd_image.png?format=webp)   The widget settings appears, which allow customization of the widget's appearance. ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/Ki1u_KiWrgbLR14e32fYG_image.png?format=webp)   The default settings result in a widget like this: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/vMxx290ZnloDm4Xa6n27l_image.png?format=webp)   Here is an example of a customized widget: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/9WGE8piZaDl3tC8bFiFSV_image.png?format=webp)       To test edits made to the widget's appearance, save the automation and click its play icon from the dashboard: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/MQV0cHadiYpFDIFvHqCQy_image.png?format=webp)   The widget will load in a separate web page. Then you can make edits to the widget's appearance settings, save the automation, and reload the test page to view your edits. Be sure to scroll all the way down the settings, where the widget's embed code appears: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/CXH6I_0Vyq6Gr3vIHbCE6_image.png?format=webp)   Use the copy icon shown above to copy the widget embed code to place the widget in your web page. #### **AI Model Action** The brain of the chatbot is the AI model that responds to the chat widget user's prompts. Start by adding an action and choose to add an app: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/MRizksXhaxuZQ9kxfuvSS_image.png?format=webp)   Select "OpenAI Agent". You will need an OpenAI API key from [https://platform.openai.com/api-keys](https://platform.openai.com/api-keys) to connect to their API, if you have not connected already. ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/MUkfmTOGmAvZcsX_phrGI_image.png?format=webp)   Select the "send agent a message" action: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/D9-95ytrNjoLp9-hmD5zB_image.png?format=webp)   The settings will appear: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/pqbZ0fAQ_FOujGbXM8Zh5_image.png?format=webp)   Let's walk through all of these settings: ### Vector Store The AI model can utilize information found in files uploaded to a vector store. To do that, first go to your OpenAI dashboard and open the Vector Storage page at [https://platform.openai.com/storage/vector\_stores](https://platform.openai.com/storage/vector_stores). Then create a new vector store and upload files into it. Once the vector store has been created, it will then be selectable from the dropdown. ### Enable Web Search The AI model can optionally be allowed to make web searches to help it generate responses. ### Model OpenAI has many AI models with varied performance and intelligence. In general, faster models have worse intelligence. You can review their models at [https://platform.openai.com/docs/models](https://platform.openai.com/docs/models). ### Output Formatting Instructions These inform the AI model on how to format its output. The default instructions are suitable for use with the chat widget, where all output is done as HTML. ### Conversation UUID This identifies the conversation thread with a single chat widget user. When the widget first loads in a web page, a random conversation uuid is generated. Then that uuid is sent with all subsequent chat messages the user sends. Map the conversation uuid to the same field output by the new chat message instant trigger. ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/pX4NwQyYxdkZOkeehNfD6_image.png?format=webp)   This OpenAI action utilizes the Conversation UUID to keep the conversation history with the AI model. This results in the AI model knowing the back-and-forth conversation history with the chat widget user. ### Model Instructions Provide instructions on how the model is to behave. This is where you define the conversational tone, the chatbot's purpose, and place guardrails on what the model should avoid doing. ### Model Instructions This is the input message to the model. For the chatbot, map the message emitted from the new chat message instant trigger. ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/owikVq-0s0aHU7dNGU8n0_image.png?format=webp)   #### **Chat Response Action** To send the AI model's response back to the chat widget, start by adding an action and select "system utility": ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/FfAtc54r918hHw9DtnPv0_image.png?format=webp)   Then select Automation Chat Widget: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/A_q9-D4MaaOdxXbh60aOt_image.png?format=webp)   Finally, select the "send chat response" action: ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/8DCM4FtMv29lcztfujP_c_image.png?format=webp)   As with the AI model action, map the Conversation UUID field to the output from the new chat message instant trigger. Then map the message field to the response from the AI model. ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/NEYnHNvyHJwldEUOmh2KF_image.png?format=webp)   That's it! You now have an AI-powered chatbot widget you can place on your web page. ![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/KkyK5oApNDjCp2l_hFMdM_image.png?format=webp)   Continue reading the following sections to learn how to build tool and goal automations to extend the functionality of chatbots. - [ZoomConnect](https://help.apiant.com/zoomconnect?hsLang=en) - [ShopConnect](https://help.apiant.com/shopconnect?hsLang=en) - [AppConnect](https://help.apiant.com/appconnect?hsLang=en#main-content) - [AppConnectPrebuiltConnectors](https://help.apiant.com/appconnect?hsLang=en#appconnectprebuiltconnectors) - [CalendarConnect](https://help.apiant.com/calendarconnect?hsLang=en) - [CRMConnect](https://help.apiant.com/crmconnect?hsLang=en#main-content) - [Mindbody to HubSpot](https://help.apiant.com/crmconnect?hsLang=en#mindbody-to-hubspot) - [Cliniko to HubSpot](https://help.apiant.com/crmconnect?hsLang=en#cliniko-to-hubspot) - [Cliniko to ActiveCampaign](https://help.apiant.com/crmconnect?hsLang=en#cliniko-to-activecampaign) - [DonorPerfect to HubSpot](https://help.apiant.com/crmconnect?hsLang=en#donorperfect-to-hubspot) - [DonorPerfect to ActiveCampaign](https://help.apiant.com/crmconnect?hsLang=en#donorperfect-to-activecampaign) - [Mindbody to ActiveCampaign](https://help.apiant.com/crmconnect?hsLang=en#mindbody-to-activecampaign) - [MailConnect](https://help.apiant.com/mailconnect?hsLang=en) - [AutomationEditor](https://help.apiant.com/automationeditor?hsLang=en#main-content) - [KeyConcepts](https://help.apiant.com/automationeditor?hsLang=en#keyconcepts) - [AccountManagement](https://help.apiant.com/automationeditor?hsLang=en#accountmanagement) - [ManagingAutomations](https://help.apiant.com/automationeditor?hsLang=en#managingautomations) - [App Connections](https://help.apiant.com/automationeditor?hsLang=en#app-connections) - [Building Automations](https://help.apiant.com/automationeditor?hsLang=en#building-automations) - [APIANTforBuilders](https://help.apiant.com/apiantforbuilders?hsLang=en) - [APIANTInline](https://help.apiant.com/apiantinline?hsLang=en) - [WhatisAPIANT?](https://help.apiant.com/whatisapiant?hsLang=en) - [ContactAPIANTsupport](https://help.apiant.com/contactapiantsupport?hsLang=en) [![APIANT](https://help.apiant.com/hubfs/APIANT_LOGO-2.svg "APIANT")](http://apiant.com) apiant.com Help Center Copyright © 2026, APIANT