{"id":8758,"date":"2024-09-23T09:16:37","date_gmt":"2024-09-23T09:16:37","guid":{"rendered":"https:\/\/metaschool.so\/articles\/?p=8758"},"modified":"2024-12-13T04:16:25","modified_gmt":"2024-12-13T04:16:25","slug":"build-a-code-review-assistant-using-ai","status":"publish","type":"post","link":"https:\/\/metaschool.so\/articles\/build-a-code-review-assistant-using-ai\/","title":{"rendered":"How to Build a Code Review Assistant Using AI \u2014 A Comprehensive Guide"},"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-a-code-review-assistant-using-ai\/#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-a-code-review-assistant-using-ai\/#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-a-code-review-assistant-using-ai\/#Creating_the_Web_Interface\" title=\"Creating the Web Interface\">Creating the 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-a-code-review-assistant-using-ai\/#Running_the_Application\" title=\"Running the Application\">Running the 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-a-code-review-assistant-using-ai\/#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-a-code-review-assistant-using-ai\/#FAQs\" title=\"FAQs\">FAQs<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>Imagine this: your code sails through manual review, gets deployed to production, and suddenly\u2014everything starts breaking. Debugging reveals issues that went unnoticed, leaving you wondering, <em>What went wrong?<\/em> Despite the best efforts of manual reviews, subtle errors and overlooked nuances can still sneak through, jeopardizing the stability of your application.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"498\" height=\"358\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/Spongebob-Panicking-GIF-Spongebob-Panicking-Panic-Discover-Share-GIFs.gif\" alt=\"Spongebob Gif\" class=\"wp-image-8801\" style=\"width:483px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Even if you are an expert, trying to manually debug a code is not an easy feat. Wouldn\u2019t it be great if you had an intelligent assistant that could catch issues before they escalate or worse <strong>\u2014<\/strong> go to production, unnoticed?<\/p>\n\n\n\n<p>Well, guess what, today is your lucky day! We are going to build a code review assistant using the OpenAI\u2019s GPT-4 model. Our assistant will analyze the provided code, highlight code that can potentially cause errors, and even provide suggestions for improving code based on coding standards. <\/p>\n\n\n\n<p>By the end of this guide, you will have a functional web-based code-reviewing tool that can assist you in reviewing and improving your code. Let\u2019s dive in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-f-8-f-8-f-2-color has-text-color\"><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 class=\"has-f-8-f-8-f-2-color has-text-color\">Before we start developing our application, we need to set up an environment that is suitable for AI integration and web application development. We\u2019re going to use <a href=\"https:\/\/flask.palletsprojects.com\/en\/stable\/\" target=\"_blank\" rel=\"noopener\">Flask<\/a> for our web framework, Python as a background programming language, and HTML to build our frontend. Of course, we\u2019ll be using OpenAI\u2019s API to power the brain of our code review assistant.<\/p>\n\n\n\n<p><strong>But First, What is Flask?<\/strong><\/p>\n\n\n\n<p>Imagine you\u2019re constructing a resort. Python is your trusty toolbox filled with all the advanced tools you need, but to build something functional, you also need a solid foundation. That\u2019s where Flask steps in\u2014it\u2019s like the blueprint that helps you quickly construct a simple yet sturdy structure. In our case, it\u2019s the framework that allows us to build a small app with ease.<\/p>\n\n\n\n<p>Flask is a lightweight web framework designed to let you get things done without the hassle of dealing with heavy external dependencies. It gives you just what you need\u2014no more, no less\u2014so you can focus on building your application efficiently.<\/p>\n\n\n\n<p>Now, let\u2019s gather our tools and get started by installing Python and Flask!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Install Python and Flask<\/h3>\n\n\n\n<p>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 our 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><\/code><\/pre><\/div>\n\n\n\n<p>If you see a version number just pops up, 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.<\/p>\n\n\n\n<p>Once it is sorted, now open your terminal and create a new project directory 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=\"mkdir code-review-assistant\ncd code-review-assistant\" 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\">mkdir code<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">review<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">assistant<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">cd code<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">review<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">assistant<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Next, we\u2019ll create a virtual environment to manage our project dependencies. Think 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 venv\nsource venv\/bin\/activate  # For Windows: venv\\Scripts\\activate\" 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\">python <\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">m venv venv<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">source venv<\/span><span style=\"color: #F92672\">\/<\/span><span style=\"color: #66D9EF\">bin<\/span><span style=\"color: #F92672\">\/<\/span><span style=\"color: #F8F8F2\">activate  <\/span><span style=\"color: #88846F\"># For Windows: venv\\Scripts\\activate<\/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 flask openai\" 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\">flask<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">openai<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Get Your OpenAI API key<\/h3>\n\n\n\n<p>Now let&#8217;s bring the brain of our system \u2014the OpenAI API. To use OpenAI\u2019s API, we\u2019ll need to signup 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. We\u2019 ll use this key later in our code.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1082\" style=\"aspect-ratio: 1920 \/ 1082;\" width=\"1920\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/signup_openai-ezgif.com-cut-online-video-cutter.com_-1.mp4\"><\/video><\/figure>\n\n\n\n<p>If you face any difficulty in during the signup and API key generation follow this <a href=\"https:\/\/metaschool.so\/articles\/openai-api-key\/\">guide to use OpenAI API<\/a>. Now that we have the API key, let&#8217;s see how we can utilize it in the next 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>As we have access to our brand new API key, its time to setup our backend so our code review assistant can chat with our GPT model. This initialization process will allow our code reviewing assistant to send requests to the GPT model. We will setup a backend script to handle requests from the front end and interact with the AI model. We\u2019ll also configure API key and use environment variables to ensure API key is not exposed and easily manageable inside our application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the Backend Script<\/h3>\n\n\n\n<p>In our project folder, create a new Python file called app.py. We can create it using 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=\"# For Mac user\ntouch app.py\n\n# For Windows user\necho. &gt; app.py  # Using command prompt\nNew-Item -Path app.py -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: #88846F\"># For Mac user<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">touch<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">app.py<\/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\">app.py<\/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\">app.py<\/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>This file will serve as the brain of our operations. Open <code>app.py<\/code> and add 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=\"import os\nimport openai\nfrom flask import Flask, request, jsonify\n\napp = Flask(__name__)\n\n# Load OpenAI API key from environment variables\nopenai.api_key = os.getenv(&quot;OPENAI_API_KEY&quot;)\n\n@app.route(&quot;\/review&quot;, methods=[&quot;POST&quot;])\ndef review_code():\n    # Get the code submitted from the frontend\n    code = request.json.get(&quot;code&quot;)\n\n    if not code:\n        return jsonify({&quot;error&quot;: &quot;No code provided&quot;}), 400\n\n    # Request GPT-4 to review the provided code\n    response = openai.Completion.create(\n        model=&quot;text-davinci-003&quot;,\n        prompt=f&quot;Review the following code and suggest improvements:\\n\\n{code}&quot;,\n        max_tokens=500,\n        temperature=0.7\n    )\n\n    feedback = response.choices[0].text.strip()\n\n    return jsonify({&quot;feedback&quot;: feedback})\n\nif __name__ == &quot;__main__&quot;:\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\">import<\/span><span style=\"color: #F8F8F2\"> os<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> openai<\/span><\/span>\n<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, request, jsonify<\/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: #88846F\"># Load OpenAI API key from environment variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">openai.api_key <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> os.getenv(<\/span><span style=\"color: #E6DB74\">&quot;OPENAI_API_KEY&quot;<\/span><span style=\"color: #F8F8F2\">)<\/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\">&quot;\/review&quot;<\/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\">&quot;POST&quot;<\/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\">review_code<\/span><span style=\"color: #F8F8F2\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\"># Get the code submitted from the frontend<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    code <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> request.json.get(<\/span><span style=\"color: #E6DB74\">&quot;code&quot;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">not<\/span><span style=\"color: #F8F8F2\"> code:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> jsonify({<\/span><span style=\"color: #E6DB74\">&quot;error&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E6DB74\">&quot;No code provided&quot;<\/span><span style=\"color: #F8F8F2\">}), <\/span><span style=\"color: #AE81FF\">400<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\"># Request GPT-4 to review the provided code<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    response <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> openai.Completion.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;text-davinci-003&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #FD971F; font-style: italic\">prompt<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #66D9EF; font-style: italic\">f<\/span><span style=\"color: #E6DB74\">&quot;Review the following code and suggest improvements:<\/span><span style=\"color: #AE81FF\">\\n\\n{<\/span><span style=\"color: #F8F8F2\">code<\/span><span style=\"color: #AE81FF\">}<\/span><span style=\"color: #E6DB74\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/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\">500<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #FD971F; font-style: italic\">temperature<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #AE81FF\">0.7<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    )<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    feedback <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> response.choices[<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">].text.strip()<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> jsonify({<\/span><span style=\"color: #E6DB74\">&quot;feedback&quot;<\/span><span style=\"color: #F8F8F2\">: feedback})<\/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\">&quot;__main__&quot;<\/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>To keep our application secure, it&#8217;s crucial to manage it properly as we\u2019ll do in the coming section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configure API key and Environment Variables<\/h3>\n\n\n\n<p>We need to ensure the API key remains secured throughout the process. To securely use our API, we can set it as an environment variable. We need to create a <code>.env<\/code> file in our project directory by using the following command:<\/p>\n\n\n\n<p>echo &#8220;OPENAI_API_KEY=your-openai-api-key&#8221; &gt; .env<\/p>\n\n\n\n<p>To ensure our application can read this API key. We can use python-dotenv to manage this process 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 python-dotenv\" 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\">python-dotenv<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Next, modify the <code>app.py<\/code> to load our environment variables from the <code>.env<\/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=\"from dotenv import load_dotenv\n\n# Load environment variables\nload_dotenv()\" 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\"> dotenv <\/span><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> load_dotenv<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Load environment variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">load_dotenv()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This activity will ensure our API will remain secure while allowing the application to interact with OpenAI\u2019s API.<\/p>\n\n\n\n<p>As the backend part of our application is complete, let&#8217;s shift our focus to creating the frontend part of our application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_the_Web_Interface\"><\/span>Creating the Web Interface<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s create a simple interface so any user can submit their code for review and receive AI powered feedback.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creation of HTML File<\/h3>\n\n\n\n<p>Inside our project folder, create a new folder named <code>templates<\/code>. Inside this new folder, create an HTML file named <code>index.html<\/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=\"mkdir templates\ntouch templates\/index.html\" 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: #A6E22E\">touch<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">templates\/index.html<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>In <code>index.html<\/code>, add the following code to create a simple user interface.<\/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;title&gt;Code Review Assistant&lt;\/title&gt;\n    \n        body {\n            font-family: Arial, sans-serif;\n            padding: 20px;\n            background-color: #f4f4f9;\n        }\n        .container {\n            max-width: 800px;\n            margin: 0 auto;\n        }\n        textarea {\n            width: 100%;\n            height: 200px;\n            margin-bottom: 20px;\n            padding: 10px;\n            border: 1px solid #ccc;\n        }\n        button {\n            padding: 10px 20px;\n            background-color: #007bff;\n            color: white;\n            border: none;\n            cursor: pointer;\n        }\n        .feedback {\n            margin-top: 20px;\n            background-color: #f8f9fa;\n            padding: 20px;\n            border: 1px solid #ccc;\n        }\n    \n    &lt;div class=&quot;container&quot;&gt;\n        &lt;h1&gt;AI Code Review Assistant&lt;\/h1&gt;\n        &lt;textarea id=&quot;code-input&quot;&gt;&lt;\/textarea&gt;\n        &lt;button&gt;Submit for Review&lt;\/button&gt;\n        &lt;div id=&quot;feedback&quot; class=&quot;feedback&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n        function submitCode() {\n            const code = document.getElementById('code-input').value;\n            fetch('\/review', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json',\n                },\n                body: JSON.stringify({ code }),\n            })\n            .then(response =&gt; response.json())\n            .then(data =&gt; {\n                document.getElementById('feedback').innerText = data.feedback;\n            })\n            .catch((error) =&gt; {\n                console.error('Error:', error);\n            });\n        }\" 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\">title<\/span><span style=\"color: #F8F8F2\">&gt;Code Review Assistant&lt;\/<\/span><span style=\"color: #F92672\">title<\/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\">        body {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            font-family: Arial, sans-serif;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            padding: 20px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            background-color: #f4f4f9;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        .container {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            max-width: 800px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            margin: 0 auto;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        textarea {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            width: 100%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            height: 200px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            margin-bottom: 20px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            padding: 10px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border: 1px solid #ccc;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        button {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            padding: 10px 20px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            background-color: #007bff;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            color: white;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border: none;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            cursor: pointer;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        .feedback {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            margin-top: 20px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            background-color: #f8f9fa;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            padding: 20px;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border: 1px solid #ccc;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/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\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;container&quot;<\/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;AI Code Review Assistant&lt;\/<\/span><span style=\"color: #F92672\">h1<\/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\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;code-input&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">textarea<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">button<\/span><span style=\"color: #F8F8F2\">&gt;Submit for Review&lt;\/<\/span><span style=\"color: #F92672\">button<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;feedback&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;feedback&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        function submitCode() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            const code = document.getElementById(&#39;code-input&#39;).value;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            fetch(&#39;\/review&#39;, {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                method: &#39;POST&#39;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                headers: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                    &#39;Content-Type&#39;: &#39;application\/json&#39;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                body: JSON.stringify({ code }),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            .then(response =&gt; response.json())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            .then(data =&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                document.getElementById(&#39;feedback&#39;).innerText = data.feedback;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            .catch((error) =&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                console.error(&#39;Error:&#39;, error);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Link the Frontend to the Backend<\/h3>\n\n\n\n<p>To connect the dots, add the following code to the <code>app.py<\/code> file to serve this HTML page when the root URL is accessed.<\/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=\"@app.route(&quot;\/&quot;)\ndef index():\n    return render_template(&quot;index.html&quot;)\" 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\">@app.route<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&quot;\/&quot;<\/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\">    <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> render_template(<\/span><span style=\"color: #E6DB74\">&quot;index.html&quot;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>It will render <code>index.html<\/code> as the homepage of our application, allowing users to interact with AI code reviewers. With everything now set up, let&#8217;s test our application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Running_the_Application\"><\/span>Running the Application<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>It&#8217;s finally time to run our application and see our AI code review assistant in action. Start the 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 on <code>http:\/\/127.0.0.1:5000\/<\/code>. We can open this link to observe our web interface. We\u2019ll see a text area where we can paste our code. Once we click the \u201cSubmit for Review\u201d button, the AI will analyze the code and provide feedback under the button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1143\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/code_review-ezgif.com-optimize.gif\" alt=\"\" class=\"wp-image-11019\"\/><\/figure>\n<\/div>\n\n\n<p>Congratulations! You\u2019ve successfully built a simple yet powerful AI-driven code review assistant using OpenAI\u2019s GPT-4 model. This tool empowers developers to input their code, receive instant feedback, and make meaningful improvements based on intelligent suggestions, paving the way for enhanced productivity and better code quality.<\/p>\n\n\n\n<p>While this version is a foundational implementation, it holds immense potential for growth. Imagine extending its capabilities by integrating version control systems like GitHub, enabling collaborative reviews, or even enhancing it to identify and complete missing logic within the code. The possibilities are limitless, and this project is just the beginning.<\/p>\n\n\n\n<p>By embracing AI as our trusted code review partner, we can streamline development, reduce errors, and elevate our coding experience with minimal effort. The future of smarter, more efficient coding starts here\u2014so keep building, innovating, and coding!<\/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-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-1727082928604\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I customize the feedback provided by the AI in the code review assistant?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, you can customize the assistant&#8217;s behavior by modifying the prompts and system messages to tailor the feedback based on your specific requirements and coding standards.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727082949066\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I set up the OpenAI API for my project?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To set up the OpenAI API, you need to create an account on OpenAI, obtain your API key, and install the OpenAI Python package in your development environment.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727082971561\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is a code review assistant and how does it work?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>A code review assistant uses AI to analyze code submissions, providing feedback on style, functionality, and potential bugs to improve code quality.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":20,"featured_media":11105,"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":[115,363,366,367,365],"class_list":["post-8758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artificial-intelligence","tag-ai","tag-artificial-intelligence","tag-chat-gpt","tag-gpt","tag-openai"],"_links":{"self":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8758","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=8758"}],"version-history":[{"count":28,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8758\/revisions"}],"predecessor-version":[{"id":11268,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8758\/revisions\/11268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media\/11105"}],"wp:attachment":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media?parent=8758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/categories?post=8758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/tags?post=8758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}