Integrating ChatGPT into a Local Browser-Based Web Page: Enhancing Conversational Experience with AI

I will showcase my simple project of integrating ChatGPT as a chat page on a local computer that is run by a browser.

As a tech enthusiast, I have always been interested in exploring the potential of artificial intelligence and its applications in various fields. I have been following OpenAI and using Davinci and Ada before ChatGPT was buplicly known. With the advancements in natural language processing, I decided to integrate one of the most powerful language models – ChatGPT – into a chat app that can be accessed locally through a browser.

The primary aim of this example was to create a web page that can provide users with an interactive and engaging conversation experience, while leveraging the power of ChatGPT to generate intelligent and contextually relevant responses.

To achieve this, I used JavaScript to develop a web-based chat app that is run by a browser. The frontend is designed using HTML, CSS, and JavaScript.

Overall, this simple project was a great learning experience for me, and it helped me gain a deeper understanding of natural language processing and web development principles. Integrating this functionality to Salesforce, I hope to showcase my ability to design and build Lightning Web Components that leverage the latest technologies and provide real-world value to users.

function sendUserInput() {
     const userInput = document.getElementById("user-input").value;
     const chatContainer = document.getElementById("chat-container");

     // Add user input bubble
     const userBubble = document.createElement("div");
     userBubble.className = "chat-bubble chat-bubble-user";
     const userMessage = document.createElement("p");
     userMessage.textContent = userInput;

     var myHeaders = new Headers();
     myHeaders.append("Content-Type", "application/json");
     myHeaders.append("Accept", "application/json");
     myHeaders.append("Authorization", "**** API HERE ****");

     var raw = JSON.stringify({
         "model": "gpt-3.5-turbo",
         "messages": [{
             "role": "user",
             "content": userInput

     var requestOptions = {
         method: 'POST',
         headers: myHeaders,
         body: raw,
         redirect: 'follow'

     fetch("", requestOptions)
         .then(response => response.json())
         .then(result => {
             // Add ChatGPT response bubble
             const gptBubble = document.createElement("div");
             gptBubble.className = "chat-bubble chat-bubble-gpt";
             const gptMessage = document.createElement("p");
             gptMessage.textContent = result.choices[0].message.content;

         .catch(error => console.log('error', error));