{"id":1581,"date":"2023-02-21T10:35:12","date_gmt":"2023-02-21T10:35:12","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=1581"},"modified":"2025-09-22T08:56:20","modified_gmt":"2025-09-22T08:56:20","slug":"how-to-use-chatgpt-api-to-create-an-ai-powered-web-application-that-assists-software-engineers-productivity","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-chatgpt-api-to-create-an-ai-powered-web-application-that-assists-software-engineers-productivity\/","title":{"rendered":"How to Use ChatGPT API to Create an AI-Powered Web Application That Assists Software Engineers\u2019 Productivity?"},"content":{"rendered":"Reading Time: <\/span> 7<\/span> minutes<\/span><\/span>\n


<\/p>\n\n\n\n

ChatGPT has taken the world by storm and is now seen as an invaluable companion in both our personal and professional lives. It can help us in a variety of ways, from deciding what to write or say, to selecting the perfect meal, to even coding!<\/p>\n\n\n\n

With ChatGPT, the possibilities are endless. It can aid us in answering fundamental questions like devising a personalized diet plan, crafting professional email responses, executing complex spreadsheet operations, or developing effective business strategies.<\/p>\n\n\n\n

From students and homemakers to coaches, lawyers, marketers, and even software developers, ChatGPT is accessible to everyone! The developers of this technology can also benefit from ChatGPT, as it assists them in their daily work.<\/p>\n\n\n\n

In this blog, we are going to see some use cases of ChatGPT for developers such as yourself. Here we will demonstrate how to create a simple ChatGPT-powered application that enables Software Engineers to generate user stories for their clients\u2019 requests. And why ChatGPT?<\/p>\n\n\n\n

It is because it is one of the largest and most powerful language processing AI models to date, with 175 billion parameters. And why are we looking at generating user stories?<\/p>\n\n\n\n

Because the beginning of success for any Software development project is a perfect user story that includes anything that the user desires to achieve.<\/p>\n\n\n\n

ChatGPT – A Companion to Developers, and Not a Threat<\/h2>\n\n\n\n

The newest trend is generative AI which is the utilization of AI to produce content that would otherwise be a result of the thought process of a human being.<\/p>\n\n\n\n

An example of the application of this is CGI which has been a success in the making of movies such as Avatar: Way of Water. CGI appears as real as if one had taken a video using a camera. Another area of application of generative AI is in art and AI seems to be producing good pieces of art.<\/p>\n\n\n\n

Generative AI is an emerging field that uses machine learning and artificial intelligence to create new and original content such as text, images, videos, and even code.<\/p>\n\n\n\n

While traditional AI is focused on analytical tasks, generative AI algorithms use existing data to generate entirely new and unique content, which can be more efficient and effective than manual creation by humans.<\/p>\n\n\n\n

By leveraging the power of generative AI, businesses, and organizations can create original content at scale, with a level of creativity and variety that would be impossible to achieve manually.<\/p>\n\n\n\n

AI is at the touch of a button waiting for you to tell it exactly what to do. This is going to see improvements in various sectors and the revolution began with the advent of ChatGPT which has taken the internet by storm.<\/p>\n\n\n\n

ChatGPT is not a threat to developer jobs, instead, it is the beginning of a new generation of developers with superpowers.<\/p>\n\n\n\n

In general, developers can use ChatGPT for:<\/p>\n\n\n\n

  1. Code Generation<\/li>
  2. Code Completion<\/li>
  3. Code Review<\/li><\/ol>\n\n\n\n
    1. Code Generation<\/strong><\/li><\/ol>\n\n\n\n

      The complexity of AI has resulted in the growth of the underlying code, prompting organizations to seek more efficient coding methods that save developer time and computational resources. Generative AI has made a significant contribution to coding by converting natural language prompts to code, thereby streamlining the coding process.<\/p>\n\n\n\n

      In addition to making coding more efficient for developers, this process also allows those without formal training or background in coding to enter the coding space. As a result, anyone interested in developing a program can provide natural language commands for these tools to generate relevant code. <\/p>\n\n\n\n

      An illustration of code generation from natural language prompts is provided in the figure below.<\/p>\n\n\n\n

      \"ChatGPT<\/figure>\n\n\n\n
      1. Code Completion<\/strong><\/li><\/ol>\n\n\n\n

        While writing code, developers can use AI-powered tools that provide suggestions for their code, a process known as “code completion.”<\/p>\n\n\n\n

        These tools analyze the code using natural language processing, recommend relevant code snippets and keywords, and fill in incomplete code with full, syntactically accurate language.<\/p>\n\n\n\n

        Generative AI-based tools for code completion are gaining popularity among developers since they reduce the time and effort required to create complex code.<\/p>\n\n\n\n

        According to a study by GitHub Copilot, the use of this tool leads to substantial improvements in developer productivity when evaluated based on three main aspects.<\/p>\n\n\n\n

        \"ChatGPT<\/figure>\n\n\n\n

        Frequently, platforms that aid with code completion provides an add-on that can be incorporated into a developer’s coding workspace, enabling smooth integration of AI technology that generates code within the coding process.<\/p>\n\n\n\n

        1. Code Review<\/strong><\/li><\/ol>\n\n\n\n

          The evaluation of code to identify issues and enhance its effectiveness is equally significant to creating the code itself. Hence, code reviews hold substantial importance in software development, which can be carried out either manually or with the help of supportive software.<\/p>\n\n\n\n

          By leveraging the capabilities of artificial intelligence, software engineers can now avail themselves of more profound insights and work more productively while conducting code reviews.<\/p>\n\n\n\n

          Amazon CodeGuru<\/a> is a generative AI-driven tool designed for code review purposes.<\/p>\n\n\n\n

          \"ChatGPT<\/figure>\n\n\n\n

          Hands-on<\/h2>\n\n\n\n

          Here we will demonstrate how to create a simple ChatGPT-powered application that enables Software Engineers to generate user stories for their client\u2019s requests.<\/p>\n\n\n\n

          Tech Stack<\/h4>\n\n\n\n

          For the tech stack, we are going to use NestJS on the backend and React on the frontend.<\/p>\n\n\n\n

          Prerequisites<\/h4>\n\n\n\n

          First of all, we need to have Node.js at least version 18 installed. You have to also install the Nest CLI<\/strong> using the command npm i -g @nest\/cli<\/strong>. Generate a new project using the command nest new <project_name><\/strong>. Also, generate a new React project using the command npx create-react-app <project_name> –template typescript<\/strong>; this will create a new React application that uses TypeScript.<\/p>\n\n\n\n

          Rest API (NestJS)<\/h4>\n\n\n\n

          The code for this is found at https:\/\/github.com\/workfall\/workfall-chatgpt-be<\/a>. <\/p>\n\n\n\n

          We need a few packages so that we can create the Rest API which consumes the ChatGPT API on the server side and then relays the information back to the client in JSON format.<\/p>\n\n\n\n

          For this, we shall use an unofficial ChatGPT package known as chatgpt<\/strong>. We also need to install the node-fetch<\/strong> package which is a dependency needed by the chatgpt<\/strong> package. <\/p>\n\n\n\n

          package.json:<\/strong><\/p>\n\n\n\n

          \"ChatGPT<\/figure>\n\n\n\n

          We also need to add the @nestjs\/config<\/strong> package to parse the .env<\/strong> file which holds some sensitive information such as API keys and it should never be committed to your repository, always ensure that it is included in the .gitignore<\/strong> file.<\/p>\n\n\n\n

          .env:<\/strong>
          You can get the OPEN AI API KEY on your account at           https:\/\/platform.openai.com\/account\/api-keys<\/a> <\/p>\n\n\n\n

          <\/strong><\/p>\n\n\n\n

          <\/p>\n\n\n\n

          app.module.ts:<\/strong>
          In this file, we have to register the config module which will help with reading the .env<\/strong> file and creating the necessary environment variables that will be used by the Node.js runtime wherever there is a process.env.<VARIABLE><\/strong> in the code.<\/p>\n\n\n\n

          <\/strong><\/p>\n\n\n\n

          <\/p>\n\n\n\n

          app.controller.ts:<\/strong>
          This file hosts all the endpoints with the @Controller()<\/strong> decorator determining the root path. For example, if we had @Controller(\u201cchat\u201d)<\/strong>, all the other routes will be prefixed with \/chat<\/strong> at runtime.<\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          app.service.ts:<\/strong><\/p>\n\n\n\n

          \"ChatGPT<\/figure>\n\n\n\n

          <\/p>\n\n\n\n

          In the above code, we use that manner of importing to prevent any ESM errors that may arise when importing as an ES6 module(It is a wish to have a standard way of doing this).<\/p>\n\n\n\n

          If we test this on an API client, we get the results as shown below:<\/p>\n\n\n\n

          Example 1:<\/strong><\/p>\n\n\n\n

          \"ChatGPT<\/figure>\n\n\n\n

          <\/p>\n\n\n\n

          Example 2:<\/strong><\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          <\/p>\n\n\n\n

          Now that we have the endpoint ready, we can look at the client side.<\/p>\n\n\n\n

          Front end(React)<\/h3>\n\n\n\n

          The code for this is found at https:\/\/github.com\/workfall\/workfall-chatgpt-fe<\/a>. <\/p>\n\n\n\n

          On the front end, we shall create a UI with a simple form that will enable us to consume the backend services. For this illustration, we are not going to use any third-party libraries.<\/p>\n\n\n\n

          Below is a screenshot of what the UI looks like:<\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          Below is a screenshot of what a sample result looks like<\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          App.tsx:<\/strong><\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          App.tsx(2):<\/strong><\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          App.css:<\/strong><\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          App.css(2):<\/strong><\/p>\n\n\n\n

          \"\"\/<\/figure>\n\n\n\n

          Conclusion<\/h2>\n\n\n\n

          In this blog, we looked at one of the ways we can utilize the power of Generative AI using ChatGPT to create AI-powered applications. This is just one of the many ways in which we can use AI to boost certain decision-making that might be affected by human bias. Generative AI is a boost to human creativity and it should be utilized to achieve higher productivity. <\/p>\n\n\n\n

          ChatGPT might just turn out to be a good compliment rather than a competitor as other people may put it. It is time to embrace AI. We will come up with more such use cases in our upcoming blogs.<\/p>\n\n\n\n

          Meanwhile\u2026<\/strong><\/p>\n\n\n\n

          If you are an aspiring React Developer and want to explore more about the above topics, here are a few of our blogs for your reference:<\/p>\n\n\n\n