{"id":8863,"date":"2024-10-01T06:33:52","date_gmt":"2024-10-01T06:33:52","guid":{"rendered":"https:\/\/metaschool.so\/articles\/?p=8863"},"modified":"2024-12-24T13:00:16","modified_gmt":"2024-12-24T13:00:16","slug":"build-ai-powered-customer-support-chatbot","status":"publish","type":"post","link":"https:\/\/metaschool.so\/articles\/build-ai-powered-customer-support-chatbot\/","title":{"rendered":"How to Build a Customer Support Chatbot with GPT-4"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_56_1 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/metaschool.so\/articles\/build-ai-powered-customer-support-chatbot\/#Setting_up_the_Development_Environment\" title=\"Setting up the Development Environment\">Setting up the Development Environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/metaschool.so\/articles\/build-ai-powered-customer-support-chatbot\/#Initialize_the_OpenAI_API\" title=\"Initialize the OpenAI API\">Initialize the OpenAI API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/metaschool.so\/articles\/build-ai-powered-customer-support-chatbot\/#Creation_of_a_web_interface\" title=\"Creation of a web interface\">Creation of a web interface<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/metaschool.so\/articles\/build-ai-powered-customer-support-chatbot\/#Running_our_application\" title=\"Running our application\">Running our application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/metaschool.so\/articles\/build-ai-powered-customer-support-chatbot\/#Explore_more_on_Metaschool\" title=\"Explore more on Metaschool\">Explore more on Metaschool<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/metaschool.so\/articles\/build-ai-powered-customer-support-chatbot\/#FAQs\" title=\"FAQs\">FAQs<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>AI-powered customer support chatbots are getting popular among businesses these days. The growth of any business is directly related to its customers. Happy customers repeat business, provide referrals, and ultimately, act as catalysts of growth. As any business expands, managing customer requests can become a challenge if not handled efficiently. This is where AI-powered chatbots came into existence.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/HAUxypcipk4AvnHdp0\/giphy.gif\" alt=\"\" style=\"width:512px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Imagine it&#8217;s a busy afternoon at your store, when suddenly inquiries from your store&#8217;s customer service portal start pouring in: &#8220;How can I return this item?&#8221; &#8220;Has my order been shipped?&#8221; &#8220;Could you provide the size guide for this product?&#8221; Handling these repetitive questions manually can really become an overwhelming task.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/media1.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExangzZ2xvdTZkYWl3aDRkaXU2NjJtaW1tbHpnNjRobTAxY3lveGVrOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/l41lWxHsfzg6nOAjS\/giphy.webp\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p>This is where chatbots become invaluable. Not only can they efficiently manage routine queries, but they also allow you and your support team to focus on more complex issues. Implementing chatbots can lead to significant cost savings; for instance, having chatbots handle customer service requests can perhaps even eliminate the need to have a support team.<\/p>\n\n\n\n<p>Moreover, customers appreciate the prompt assistance that chatbots provide. A survey revealed that 74% of customers prefer using chatbots to address simple questions, valuing immediate responses over waiting for a human agent. By integrating a chatbot into your customer support system, you enhance customer satisfaction and boost operational efficiency. It&#8217;s a strategic move that allows you to manage customer interactions seamlessly, even during peak times, ensuring you can enjoy that cup of coffee without interruptions.<\/p>\n\n\n\n<p>Let&#8217;s embark on creating an AI-powered customer support chatbot using OpenAI&#8217;s GPT-4 model to streamline your services and keep your customers happy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_up_the_Development_Environment\"><\/span>Setting up the Development Environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let&#8217;s get started by setting up a space to build our project. For building our chatbot we\u2019ll be using Python programming language, due to its simplicity for handling APIs. Firstly we need to ensure Python is installed on our system. Use the terminal to check if it is already installed by running the following command on your terminal.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"python --version      \" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">python<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">--version<\/span><span style=\"color: #F8F8F2\">      <\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>If you see a version number, congrats, you\u2019re good to go. If it\u2019s not installed, don\u2019t panic, head over to <a href=\"https:\/\/www.python.org\/\" target=\"_blank\" rel=\"noopener\">python.org<\/a> and download it on your system. I\u2019ll wait. Got it? Cool.<\/p>\n\n\n\n<p>Now, let&#8217;s get a few more things sorted, Ensure that you have access to the following items:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual Studio or VSCode<\/strong> (Or any other text editor that you\u2019re comfortable with.)<\/li>\n\n\n\n<li><strong>Terminal or Command Prompt<\/strong><\/li>\n\n\n\n<li><strong>Basic understanding of Python<\/strong> <\/li>\n<\/ul>\n\n\n\n<p>Next, we\u2019ll create a virtual environment to manage our project dependencies. Think of a virtual environment as a safe place for all the code we\u2019re going to write. It is nice and isolated from the rest of your system. Run the following command to create a virtual environment.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"python -m venv chatbot_env\n\n# Activate the virtual environment\nsource chatbot_env\/bin\/activate  # For Mac\/Linux users\nchatbot_env\\\\Scripts\\\\activate  # For Windows users\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">python<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-m<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">venv<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">chatbot_env<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Activate the virtual environment<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">source<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">chatbot_env\/bin\/activate<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># For Mac\/Linux users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">chatbot_env\\\\Scripts\\\\activate<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># For Windows users<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now let\u2019s install Flask and OpenAI, the backbone of our system as follows:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"pip install openai flask\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">pip<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">install<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">openai<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">flask<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Flask<\/strong> will be our lightweight web framework to create the web interface, and <strong>OpenAI<\/strong> is, well, for the AI magic! Let&#8217;s set up the OpenAI\u2019s API to power our system in the coming section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Initialize_the_OpenAI_API\"><\/span>Initialize the OpenAI API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now let&#8217;s bring the brain of our system \u2014 The OpenAI API. To use OpenAI\u2019s API, we\u2019ll need to sign up over the <a href=\"https:\/\/auth.openai.com\/authorize?issuer=auth0.openai.com&amp;client_id=DRivsnm2Mu42T3KOpqdtwB3NYviHYzwD&amp;audience=https%3A%2F%2Fapi.openai.com%2Fv1&amp;redirect_uri=https%3A%2F%2Fplatform.openai.com%2Fauth%2Fcallback&amp;device_id=79f0c5cc-7af3-44c6-92af-a27fb1360484&amp;screen_hint=signup&amp;max_age=0&amp;scope=openid+profile+email+offline_access&amp;response_type=code&amp;response_mode=query&amp;state=TFRnMWxoVDNaUzRYTHNjT1lCRG41aXhaSDVVSzRZdkNJLUwyZFZOa3pTbA%3D%3D&amp;nonce=UH5yeXZyZGZpaktGbXVTcEVuR0EubWNuRzQ4WDh3cW4yTUk3ZjNESk9WZQ%3D%3D&amp;code_challenge=dmp6f15OrXFYmTbE8i5zJUHzaMmlp1lVKXSirfX43GU&amp;code_challenge_method=S256&amp;auth0Client=eyJuYW1lIjoiYXV0aDAtc3BhLWpzIiwidmVyc2lvbiI6IjEuMjEuMCJ9&amp;flow=control\" target=\"_blank\" rel=\"noopener\">OpenAl platform<\/a> and create an account. After signing in, move towards the API keys section and generate a new key. Keep this key safe because it&#8217;s your golden ticket to access the GPT models.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1082\" style=\"aspect-ratio: 1920 \/ 1082;\" width=\"1920\" autoplay loop muted src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/signup_openai-ezgif.com-cut-online-video-cutter.com_-1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>If you face any difficulty during the signup and API key generation follow this <a href=\"https:\/\/metaschool.so\/articles\/openai-api-key\/\">guide to use OpenAI API<\/a> to learn more about OpenAI API\u2019s.<\/p>\n\n\n\n<p>Now that you\u2019ve set up the OpenAI\u2019s API, it\u2019s time to get to the fun part of setting the backend of our app. Let\u2019s dive right in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the backend script<\/h3>\n\n\n\n<p>In our project directory, Create a file named as <a href=\"http:\/\/app.py\" target=\"_blank\" rel=\"noopener\"><code>app.py<\/code><\/a>. All the magic happens in this file \u2014 It&#8217;s kind of like a chef\u2019s kitchen but for code!\ud83e\uddd1\u200d\ud83c\udf73\u00a0. We\u2019ll start by initializing OpenAI\u2019s API in this file. This is super fun, this little step will serve as the brainpower behind our customer support chatbot. Paste the following code into <code>app.py<\/code> the file:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import openai\n\napp = Flask(__name__)\n\nopenai.api_key = 'your-api-key-here'\n\ndef generate_response(prompt):\n    response = openai.ChatCompletion.create(\n        model=&quot;gpt-4&quot;,  \n        messages=[{&quot;role&quot;: &quot;user&quot;, &quot;content&quot;: prompt}],\n        max_tokens=150\n    )\n    return response['choices'][0]['message']['content'].strip()\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> openai<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">app <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> Flask(__name__)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">openai.api_key <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;your-api-key-here&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">def<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">generate_response<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">prompt<\/span><span style=\"color: #F8F8F2\">):<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    response <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> openai.ChatCompletion.create(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #FD971F; font-style: italic\">model<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">&quot;gpt-4&quot;<\/span><span style=\"color: #F8F8F2\">,  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #FD971F; font-style: italic\">messages<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\">[{<\/span><span style=\"color: #E6DB74\">&quot;role&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E6DB74\">&quot;user&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&quot;content&quot;<\/span><span style=\"color: #F8F8F2\">: prompt}],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #FD971F; font-style: italic\">max_tokens<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #AE81FF\">150<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> response[<\/span><span style=\"color: #E6DB74\">&#39;choices&#39;<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #E6DB74\">&#39;message&#39;<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #E6DB74\">&#39;content&#39;<\/span><span style=\"color: #F8F8F2\">].strip()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Here, we\u2019re using the <code>generate_response<\/code> function to send a user\u2019s query(prompt) to the OpenAl\u2019s API. The API returns a beautifully crafted response and it will be sent back to the user. Remember to replace <code>'your-api-key-here'<\/code> with your API key generated in the previous section.<\/p>\n\n\n\n<p>With that, we ensure the brain of our customer support chatbot is working. It feels like you\u2019re creating your virtual assistant, isn\u2019t it?\ud83d\udc68\u200d\ud83d\udcbb<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creation_of_a_web_interface\"><\/span>Creation of a web interface<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that we have set up the brain behind our chatbot, it&#8217;s time to build an interface where customers can actually interact with our chatbot. We\u2019ll use Flask, a web framework that supports us when we just want to get things done without the headache of external dependencies. In <code>app.py<\/code>, add the the following code:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"from flask import Flask, render_template, request\n\napp = Flask(__name__)\n\n@app.route('\/', methods=['GET', 'POST'])\ndef index():\n    chatbot_response = None\n    if request.method == 'POST':\n        user_input = request.form['user_input']\n        chatbot_response = generate_response(user_input)  # Generate chatbot response\n    return render_template('index.html', chatbot_response=chatbot_response)\n\nif __name__ == '__main__':\n    app.run(debug=True)\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F92672\">from<\/span><span style=\"color: #F8F8F2\"> flask <\/span><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> Flask, render_template, request<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">app <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> Flask(__name__)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">@app.route<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;\/&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FD971F; font-style: italic\">methods<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\">[<\/span><span style=\"color: #E6DB74\">&#39;GET&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&#39;POST&#39;<\/span><span style=\"color: #F8F8F2\">])<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">def<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">index<\/span><span style=\"color: #F8F8F2\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    chatbot_response <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">None<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> request.method <\/span><span style=\"color: #F92672\">==<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;POST&#39;<\/span><span style=\"color: #F8F8F2\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        user_input <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> request.form[<\/span><span style=\"color: #E6DB74\">&#39;user_input&#39;<\/span><span style=\"color: #F8F8F2\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        chatbot_response <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> generate_response(user_input)  <\/span><span style=\"color: #88846F\"># Generate chatbot response<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> render_template(<\/span><span style=\"color: #E6DB74\">&#39;index.html&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FD971F; font-style: italic\">chatbot_response<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\">chatbot_response)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> __name__ <\/span><span style=\"color: #F92672\">==<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;__main__&#39;<\/span><span style=\"color: #F8F8F2\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    app.run(<\/span><span style=\"color: #FD971F; font-style: italic\">debug<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #AE81FF\">True<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now we are done with the backend part of the web interface, let\u2019s build the face of our chatbot. Create a folder named templates and inside it create a file index.html by using the following commands:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"mkdir templates\ncd templates\n\n# For Mac\/Linux users\ntouch index.html   \n\n# For Windows user\necho. &gt; index.html  # Using command prompt\nNew-Item -Path index.html -ItemType File # Using PowerShell \" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">mkdir<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">templates<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">cd<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">templates<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># For Mac\/Linux users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">touch<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">index.html<\/span><span style=\"color: #F8F8F2\">   <\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># For Windows user<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">echo<\/span><span style=\"color: #F8F8F2\">. <\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">index.html<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># Using command prompt<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">New-Item<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-Path<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">index.html<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-ItemType<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">File<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #88846F\"># Using PowerShell <\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now paste the following code inside the <code>index.html<\/code> file:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;AI Customer Support Chatbot&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Welcome to the AI-Powered Customer Support Chatbot&lt;\/h1&gt;\n    \n    &lt;form method=&quot;POST&quot; action=&quot;\/&quot;&gt;\n        &lt;textarea name=&quot;user_input&quot; rows=&quot;5&quot; cols=&quot;40&quot; placeholder=&quot;Type your message...&quot;&gt;&lt;\/textarea&gt;&lt;br&gt;\n        &lt;input type=&quot;submit&quot; value=&quot;Send&quot;&gt;\n    &lt;\/form&gt;\n\n    &lt;!-- Display the chatbot response if available --&gt;\n    {% if chatbot_response %}\n        &lt;h2&gt;Chatbot's Response:&lt;\/h2&gt;\n        &lt;p&gt;{{ chatbot_response }}&lt;\/p&gt;\n    {% endif %}\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;!<\/span><span style=\"color: #F92672\">DOCTYPE<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">lang<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;en&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">charset<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;UTF-8&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">name<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;viewport&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">content<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;AI Customer Support Chatbot&lt;\/<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">h1<\/span><span style=\"color: #F8F8F2\">&gt;Welcome to the AI-Powered Customer Support Chatbot&lt;\/<\/span><span style=\"color: #F92672\">h1<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">form<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">method<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;POST&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">action<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;\/&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">textarea<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">name<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;user_input&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">rows<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;5&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">cols<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;40&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">placeholder<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;Type your message...&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">textarea<\/span><span style=\"color: #F8F8F2\">&gt;&lt;<\/span><span style=\"color: #F92672\">br<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">input<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">type<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;submit&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">value<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;Send&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">form<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\">&lt;!-- Display the chatbot response if available --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    {% if chatbot_response %}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">h2<\/span><span style=\"color: #F8F8F2\">&gt;Chatbot&#39;s Response:&lt;\/<\/span><span style=\"color: #F92672\">h2<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">p<\/span><span style=\"color: #F8F8F2\">&gt;{{ chatbot_response }}&lt;\/<\/span><span style=\"color: #F92672\">p<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    {% endif %}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This will launch an interface where users can type their questions and get their queries answered.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Running_our_application\"><\/span>Running our application<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now it&#8217;s time to run our application and utilize our AI-powered customer support chatbot in action.<\/p>\n\n\n\n<p>Start our Flask development server by running the following command:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"python app.py\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">python<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">app.py<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>It will start the server and launch the app at <a href=\"http:\/\/127.0.0.1:5000\/\" target=\"_blank\"><code>http:\/\/127.0.0.1:5000\/<\/code><\/a>. We\u2019ll see an interface of our customer support chatbot. Type in your query and it will be answered in no time, thanks to the power of OpenAI!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1200\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/Customer_support-_chatbot.gif\" alt=\"AI-Powered Customer Support Chatbot\" class=\"wp-image-8868\"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> If you ran into any bugs during the production, don\u2019t panic! Debugging is a part of development journey, and it will make you better as a builder.\ud83d\udcaa<\/p>\n<\/blockquote>\n\n\n\n<p>Congratulations! You\u2019ve built a simple but powerful AI-powered customer support chatbot. We have used the OpenAI GPT-4 model to accomplish this AI-powered customer support chatbot. It allows developers to input their code, receive feedback, and make instant improvements based on the provided suggestions.<\/p>\n\n\n\n<p>Look at you, you have just built a powerful customer support chatbot from scratch! This landmark can help you streamline your customer service and also polish your coding skills during this journey.<\/p>\n\n\n\n<p>You can customize this customer support chatbot as per the requirements of your business, you can tweak the response settings or add multiple features like saving the user&#8217;s history to understand their requirements. The possibilities with this chatbot are endless, and your journey is just getting started. Keep coding and enjoy your newly found chatbot superpowers! \ud83d\ude80<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Explore_more_on_Metaschool\"><\/span>Explore more on Metaschool<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you found building an AI-powered code review assistant helpful, you might be interested in exploring more hands-on projects to expand your skills. Check out our other courses on <a href=\"https:\/\/metaschool.so\/courses\/\">Metaschool<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/metaschool.so\/courses\/build-ai-dating-coach-app\"><strong>Build an AI Dating Coach Using NextJS and OpenAI<\/strong>:<\/a> Ever thought about creating an app that provides personalized dating advice? This course guides you through building a dating coach app that uses OpenAI&#8217;s API and NextJS to deliver insightful advice to users.<\/li>\n\n\n\n<li><a href=\"https:\/\/metaschool.so\/courses\/build-a-yebot-with-openai-api\"><strong>Build a YeBot with OpenAI API<\/strong><\/a>: Learn how to create a sophisticated chatbot using OpenAI\u2019s powerful API, perfect for enhancing your understanding of AI-driven applications.<\/li>\n\n\n\n<li><a href=\"https:\/\/metaschool.so\/courses\/build-a-code-translator-using-nextjs-and-openai-api\"><strong>Build a Code Translator Using NextJS and OpenAI API<\/strong><\/a>: Dive into building a code translation tool using NextJS and OpenAI, a great way to apply your knowledge in a practical and innovative way.<\/li>\n<\/ul>\n\n\n\n<p>Explore these courses and more to continue your journey in AI on the Metaschool platform!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1727158467309\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is the benefit of using an AI-powered chatbot for customer support?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>AI chatbots can handle multiple queries simultaneously, provide 24\/7 support, and reduce response times, improving customer satisfaction and freeing up human agents for more complex tasks.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727158559313\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Do I need advanced coding skills to build a customer support chatbot with OpenAI?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No, basic knowledge of Python and API integration is sufficient. This article walks you through the entire process step-by-step, making it beginner-friendly.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727158586071\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I customize the chatbot\u2019s responses to match my business\u2019s tone and style?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes! You can tailor the prompts to OpenAI to reflect your business\u2019s tone, style, and branding, ensuring the chatbot aligns with your customer service voice. Through prompt engineering, you can guide the chatbot to respond in specific ways. For more advanced customization, you could also fine-tune an AI model using data from your business, allowing the chatbot to understand your unique tone, language, and preferred responses, creating a more personalized customer experience.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":20,"featured_media":11108,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[344],"tags":[40,367,193],"class_list":["post-8863","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artificial-intelligence","tag-development","tag-gpt","tag-models"],"_links":{"self":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/comments?post=8863"}],"version-history":[{"count":18,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8863\/revisions"}],"predecessor-version":[{"id":11510,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8863\/revisions\/11510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media\/11108"}],"wp:attachment":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media?parent=8863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/categories?post=8863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/tags?post=8863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}