Create your own ChatGPT with Nuxt 3 and OpenAI API

With the combination of Nuxt 3, the latest version of the popular Vue.js framework, and the OpenAI API, developers can create fascinating conversational interfaces like ChatGPT clones.

In this tutorial, we'll guide you through the process of building a simple ChatGPT clone using Nuxt 3 and the OpenAI API. By the end, you'll have a fully functional chatbot that can generate human-like responses based on user input.

Prerequisites:

Before we dive into the implementation, make sure you have the following prerequisites met:

1. Node.js installed on your machine.
2. Your preferred text editor. Mine is VSCode.
3. An OpenAI API key, which you can obtain from the OpenAI website.
4. Basic knowledge of Vue 3 and Nuxt 3. Familiarity with JavaScript and TypeScript is also beneficial.

Setting Up the Project

Let's start by creating a new Nuxt 3 project and adding the necessary modules to it:

1. Open your terminal or command prompt.
2. Run the following command to create a new Nuxt 3 project:

npx nuxi@latest init project-name

Replace project-name with your desired name; for example, we'll use chatgpt-clone.

3. After the project setup is complete, navigate into the newly created project directory:

cd chatgpt-clone

Utilizing the Nuxt ChatGPT Module

To simplify the integration of ChatGPT capabilities into our Nuxt 3 application, we'll leverage the nuxt-chatgpt module. It provides easy access to chat and chatCompletion methods through the useChatGpt() composable.

Follow the steps below to install and configure it:

1. Install the nuxt-chatgpt module using npm or yarn:

npm install nuxt-chatgpt

or

yarn add nuxt-chatgpt

2. Now, open the nuxt.config.ts file in the root of your project and add the nuxt-chatgpt module to the modules section:

// nuxt.config.ts

export default {
  // ...
  modules: [
    // ...
    "nuxt-chatgpt",
  ],

  chatgpt: {
    apiKey: process.env.OPENAI_API_KEY,
  },
  // ...
};

Create .env file in the root project directory. Add the OPENAI_API_KEY variable and paste the api key obtained from OpenAI.

// .env
OPENAI_API_KEY=<paste api key here>

Creating the Chat UI

With the nuxt-chatgpt module installed and configured, it's time to create a simple form that allows users to interact with the ChatGPT clone. We'll also display the list of chat inputs from the user and the responses from the chatbot. But before we proceed, let's first install the Tailwind CSS module for styling.

npm install @nuxtjs/tailwindcss

or

yarn add @nuxtjs/tailwindcss

Then, add the module inside the nuxt.config.ts

// nuxt.config.ts

export default {
  // ...
  modules: [
    // ...
    "nuxt-chatgpt",
    "@nuxtjs/tailwindcss",
  ],

  chatgpt: {
    apiKey: process.env.OPENAI_API_KEY,
  },
  // ...
};

1. Remove all the code from the the app.vue file, add the following content:

<template>
  <div class="flex flex-col w-full max-w-md py-24 mx-auto">
    <div class="flex flex-col flex-grow">
      <div
        v-for="(item, index) in chatHistory"
        :key="index"
        class="flex flex-col"
      >
        <div
          v-if="item.userMessage"
          class="max-w-sm p-2 bg-blue-500 text-white py-4"
        >
          {{ item.userMessage }}
        </div>
        <div
          v-if="item.aiResponse"
          class="max-w-sm p-2 bg-gray-200 py-5 border-l-2 border border-l-blue-500"
        >
          {{ item.aiResponse }}
        </div>
      </div>
    </div>

    <div class="flex items-end">
      <!-- Changed flex class to 'items-end' -->
      <input v-model="message" class="flex-grow p-2 rounded-l-lg" />
      <button
        @click="sendMessage"
        class="p-2 rounded-r-lg bg-blue-500 text-white"
      >
        Send
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  const { chat } = useChatgpt();

  interface ChatItem {
    userMessage: string;
    aiResponse: string;
  }

  const message = ref("");
  const chatHistory = ref<ChatItem[]>([]);

  async function sendMessage() {
    const newItem: ChatItem = {
      userMessage: message.value,
      aiResponse: "",
    };
    chatHistory.value.push(newItem);

    const response = await chat(message.value, "");
    newItem.aiResponse = response;

    message.value = "";
  }
</script>

<style scoped>
  .stretch {
    width: 100%;
  }
</style>

Explaining the Code

The code creates a simple chat interface that allows users to type messages, send them, and receive AI responses. The conversation history is displayed with styling using Tailwind CSS classes. The nuxt-chatgpt module is used to interact with the ChatGPT clone for generating AI responses.

Conclusion

In this article, we've explored how to create a simple ChatGPT clone using Nuxt 3 and the OpenAI API. By following these steps, you can unlock the potential of natural language processing and allow your users to interact with an AI-powered chatbot. Feel free to expand and customize the implementation to suit your specific use case and requirements. Happy coding!