ChatGPT is an AI chatbot developed by OpenAI. Its initial released was in November 2022 and since then, it helped a lot of people answering their questions, giving procedures, writing, summarization, translation, conversatoin and much more. It offers a very wide of range of datasets and it's consider to be the best overall AI chatbot by other sources.

On this blog, our is aim to integrate it to our Vue.JS application send a question request and get a response from the actual OpenAI endpoint. From this, you'll have a basic idea how would you use it for your future projects or include it to your next app feature.

1. Make sure you already installed Node.js

2. Installed Visual Studio Code or other text editor or IDE.

In case you're using other ways to install Vue.js, you can skip this one otherwise, create a Vue.JS template using Vite

1.1 In this example, I'm using Vite.js to scaffold our vite project and choose the Vue.js template. npm create vite@latest

2.1 npm i openai

Make sure you register and login first on the OpenAI platform website in order to access your account and generate your own keys.

3.1 Once you login your account, go to this link or on the right menu, under your account, choose the "View API Keys"

3.2 Create a secret key.

On my sample, I'm using the Vue.JS with Composition API project template. For this demo, I'm overwriting the App.vue file.

4.1 Import the package below.

        import { Configuration, OpenAIApi } from "openai";
      

4.2 Create a configuration and attach it to OpenAIApi instance

        // Create configuration
const config = new Configuration({
  apiKey: "YOUR_API_KEY",
});

// Add the config to OpenAIAPi instance
const openAi = new OpenAIApi(config);
      

4.3 Create the function that makes a request to the OpenAI API endpoint

        const question = ref<string>("")
const answer = ref<string>("");

const askQuestion = async () => {
  if (question.value) {
    const prompt = `${question.value} and return a response in the following parsable JSON format: {
      "answer": "answer"
    }`;

    try {
      const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: prompt,
        max_tokens: 2048
      });

      answer.value = JSON.parse(response.data.choices[0].text).answer;
    } catch (err) {
      console.error(err);
    }
  }
};
      

• model : ID of the model to use. You can use the List models API to see all of the available models, or see the Model overview for descriptions of them.
• prompt : The prompt(s) to generate completions for, encoded as a string, array of strings, array of tokens, or array of token arrays. (Source)
• max_tokens : The maximum number of tokens to generate in the completion. (Source)

To learn more about the other request parameters available, you can visit this Link

4.4 Create a basic template

        <template>
  <div>
    <input v-model="question" />
    <button @click="askQuestion()">Ask ChatGPT a question</button>
    <p v-show="answer">{{ answer }}</p>
  </div>
</template>
      

Here's the complete source code: