Creating Chat App with AI Model

OpenAI Model

I. Creating a chat application using the OpenAI API with ES6

Step 1 : Set Up Your Project

1. Create a Project Directory: Open your terminal and run the following commands to create a new directory and navigate into it:

// bash
mkdir openai-chat-app
cd openai-chat-app

1. Initialize the Project: Initialize a new Node.js project by running: This will create a package.json file to manage your project dependencies.

// Bash
npm init -y

1. Enable ES6 Modules: Open the package.json file and add the following line to enable ES6 module syntax:

// package.json
{
   "type": "module"
}

Step 2: Install Dependencies

1. Install OpenAI SDK: Use npm to install the OpenAI SDK:

// bash
npm install openai dotenv readline

1. Create and export an API key to Environment Variables: Create a .env file in your project root and add your OpenAI API key:

• pre-setting of OPENAI-API_KEY to system variable (You have to open OpenAI API account beforehand to generate your_api_key) : https://platform.openai.com/api-keys

• Close and reopen your command prompt or PowerShell window for the changes to take effect.

Windows

// setting system environment variable
setx OPENAI_API_KEY "your openai api key values"

Mac

Linux

To ensure that the environment variable has been set correctly, you can execute the following command in your terminal.

// at terminal
echo $OPENAI_API_KEY

Save the File `.env`

// .env
OPENAI_API_KEY=your_openai_api_key_here

Step 3: Create the Chat Application

1. Create Main JavaScript File: Create a file named index.mjs using VS code in your project directory: open VS code and create a file "index.mjs"

// bash
code .  

1. Set Up Code in index.mjs: Open index.mjs and add the following code:

// javascript - index.mjs  version 1

import { config } from 'dotenv';
import OpenAI from 'openai';
import readline from 'readline';

// Load environment variables from .env file
config();

// Initialize OpenAI with API key
const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
});

// Create an interface for user input/output
const userInterface = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

// Function to handle chat completion
const chatCompletion = async (input) => {
    const response = await openai.chat.completions.create({
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: input }],
    });
    return response.choices[0].message.content;
};

// Prompt user for input and handle responses
userInterface.on('line', async (input) => {
    if (input.trim() === 'exit') {
        console.log('Exiting chat...');
        userInterface.close();
        return;
    }

    try {
        const reply = await chatCompletion(input);
        console.log(`AI: ${reply}`);
    } catch (error) {
        console.error('Error:', error);
    }
    
    userInterface.prompt();
});

console.log('Chat with AI (type "exit" to quit):');
userInterface.prompt();

Step 4: Run Your Application

1. Run Your Chat Application: In your terminal, execute the following command to start the application:

// Some code
node index.mjs

Result

1. Interact with the Chatbot: You can now type messages into the terminal, and the AI will respond based on your inputs. Type exit to close the application.

Explanation of Key Components

• Environment Configuration: The dotenv package loads environment variables from a .env file, keeping sensitive information like API keys secure.

• OpenAI SDK: The openai package is used to interact with OpenAI's API, specifically for generating chat completions.

• Readline Interface: The readline module allows for easy interaction via the command line, enabling users to input text and receive responses dynamically.

• Check Node.js Version: Ensure you are using a compatible version of Node.js that supports ES6 modules and dotenv.

Challenge for API Security

Task: Loading check for API Key &

• Modify the version 1 code by adding a function to read OPENAI_API_KEY from .env or throw an error: Change AI model gpt-3.5-turbo to gpt-4o-mini

  //javascript
  import { config } from "dotenv";
  import OpenAI from "openai";
  import readline from "readline";
  
  // Load environment variables from .env file
  config();
  
  // Function to read the OPENAI_API_KEY from .env or throw an error
  function getOpenAIKey() {
    const apiKey = process.env.OPENAI_API_KEY;
    //console.log(apiKey);
    if (!apiKey) {
      throw new Error("OPENAI_API_KEY is not defined in the .env file.");
    }
    return apiKey;
  }
  
  // Get the API key using the function, handling potential errors
  try {
    const apiKey = getOpenAIKey();
  
    // Initialize OpenAI with API key
    const openai = new OpenAI({
      apiKey: apiKey,
    });
  
    // ... rest of your code (user interface, chat completion logic)
    // Create an interface for user input/output
    const userInterface = readline.createInterface({
      input: process.stdin,
      output: process.stdout,
    });
  
    // Function to handle chat completion
    const chatCompletion = async (input) => {
      const response = await openai.chat.completions.create({
        model: "gpt-4o-mini",
        messages: [{ role: "user", content: input }],
      });
      return response.choices[0].message.content;
    };
  
    // Prompt user for input and handle responses
    userInterface.on("line", async (input) => {
      if (input.trim() === "exit") {
        console.log("Exiting chat...");
        userInterface.close();
        return;
      }
  
      try {
        const reply = await chatCompletion(input);
        console.log(`AI: ${reply}`);
      } catch (error) {
        console.error("Error:", error);
      }
  
      userInterface.prompt();
    });
  
    console.log('Chat with AI (type "exit" to quit):');
    userInterface.prompt();
  } catch (error) {
    console.error(error.message); // Log the specific error related to the API key
    process.exit(1); // Exit with a non-zero code to indicate an error
  }

• Handling Rate Limits in Code: To manage rate limits effectively within your application, consider implementing a retry mechanism with exponential backoff:

// Some code
const chatCompletion = async (input) => {
    let attempts = 0;
    const maxAttempts = 5;

    while (attempts < maxAttempts) {
        try {
            const response = await openai.chat.completions.create({
                model: 'gpt-4o-mini',
                messages: [{ role: 'user', content: input }],
            });
            return response.choices[0].message.content;
        } catch (error) {
            if (error.code === 'insufficient_quota' || error.status === 429) {
                console.log('Quota exceeded or rate limit hit. Retrying...');
                attempts++;
                // Wait before retrying
                await new Promise(resolve => setTimeout(resolve, Math.pow(2, attempts) * 1000)); // Exponential backoff
            } else {
                console.error('Error:', error);
                break; // Break on other errors
            }
        }
    }
    throw new Error('Max attempts reached');
};

II. Creating a chat application using the Claude Anthropic API with ES6

Go through steps described in I. Creating a chat application using the OpenAI API with ES6. As in the previous step , create an account Claude AI to generate and get the ANTHROPIC_API_KEY .

https://www.anthropic.com/claude

Step 3: Create the Chat Application: create a file named index.mjs using VS code in your project directory: open VS code and create a file "index.mjs"

// index.mjs

import * as dotenv from "dotenv";
dotenv.config();
const apiKey = process.env.ANTHROPIC_API_KEY;
//console.log(apiKey);
import Anthropic from "@anthropic-ai/sdk";

const anthropic = new Anthropic({
  apiKey: apiKey,
  dangerouslyAllowBrowser: true,
});

const msg = await anthropic.messages.create({
  model: "claude-3-5-haiku-20241022", // Or claude-instant-1, or another valid model
  max_tokens: 1000,
  temperature: 0,
  system: "Respond only with short poems.",
  messages: [
    {
      role: "user",
      content: [
        {
          type: "text",
          text: "Why is the ocean salty?",
        },
      ],
    },
  ],
});
console.log(msg);

Result