This project is a chatbox application built using Nuxt 3 powered by OpenAI Text completion endpoint.

You can select different personality of your AI friend that you want to chat. It will then emulate normal conversation between friends. The default AI friend will respond in Japanese. You can use this app to practice chatting with a Japanese person!

このチャットボックスアプリは、Nuxt 3を使用して開発され、OpenAIのテキスト完成エンドポイントによって動作します。将来的には、AIの個性を選択することが可能になるかもしれません。現在は、デフォルトで日本語で応答します。このアプリを使用することで、日本語のチャットスキルを練習することができます。

Japanese description generated by ChatGPT (^ ‿ ^)

There are no Filipino voice available from Speech Synthesis api so the play button is removed.

By writing a descriptive introduction in your prompt, it is possible to create different personality of your AI chat friend. Depending on the availability, the reply will be spoken using Web Speech API.

Moving forward, my main objective is to be able to transcribed speech into text (using Whisper), send it to an AI endpoint (for now Completion endpoint, maybe ChatGPT in the future), get the result and translate it to text to speech (using Web Speech API), making a proper Voice Chatbox app. But that is just one application. You can probably stick a similar app into an actual device, say a robot dog or cat, thus giving them the ability to converse to their owners. Imagine a talking cat! lol

This is purely a personal coding exercise to get to know Nuxt 3.

I moved friend list and config to json file for convenience. Please check /assets/friends-list.json. You can now add more friends, modify prompts and tweak voice settings.

{
"friends": [
        { 
            "id": "JPN1",
            "name": "Japanese (日本語)",
            "prompt": "Chat with AI Friend where your AI Friend respond in cheerful, young lady, Japanese.\n\n",
            "voice": "Google 日本語",
            "pitch": 1.1,
            "rate": 1.0,
            "mute": false
        },
        ...
]
}

Use this speech api test page to check your desired voice settings.

If you do not want the reply message to be spoken after receiving but want to play it later, set the property mute to true. If you do not wish a friend to have voice/speech function at all, just remove the property voice.

I also added NUXT_PUBLIC_APP_NOVOICE in the environment variable to globally disable voice/speech function if you want.

NUXT_PUBLIC_APP_NOVOICE=false

Using the latest version of Nuxt

$ npx nuxi init <project-name>

Check the installation guide for more info.

To install OpenAI node module

$ npm install openai

You will need an actual API Key to use it so register for an account at OpenAI.

Make sure to store your API Key in safe manner, preventing it from exposing to the client side. As for this project, the actual API Key will be stored at .env file which is not included in the repository.

.env file

NUXT_API_KEY=my-openai-api-key-sample

Then we will only be calling the openai's completion endpoint from our own server api endpoint.

/server/api/chat.js file

import { Configuration, OpenAIApi } from "openai";

const config = useRuntimeConfig();

const configuration = new Configuration({
    apiKey: config.apiKey,
});

const openai = new OpenAIApi(configuration);

export default defineEventHandler(async (event) => {

    const completion = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: "You: Hello!\nFriend: How are you?\nYou: Good morning!\nFriend:",
        temperature: 0.5,
        max_tokens: 60,
        top_p: 1,
        frequency_penalty: 0.5,
        presence_penalty: 0,
        stop=["You:"]
    });

    return {
        text: completion.data.choices[0].text,
    }

})

The max_tokens value plus the token count of the prompt should not exceed 2048 (or 4096 for newest models).

In the application, I set my own ceiling much lower (1800 tokens, 1 token = 4 chars). If the total token count exceed this number, I removed a number of old messages. Since the conversation is already too long, removing previous messages will probably not impact the current flow of conversation.

Clone the repository and install the dependencies

$ git clone https://github.com/supershaneski/openai-chatfriend.git myproject

$ cd myproject

$ npm install

Create .env file in the root directory and supply your own OpenAI API Key

.env file

NUXT_API_KEY=my-openai-api-key-sample

Then run the app

$ npm run dev

Open your browser to http://localhost:5000/ to load the application page.

Look at the Nuxt 3 documentation to learn more.

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.