Creating your own Ai Assistant - Core Backend walkthrough

We r watching the growth in web applications seemlessly with time.The evolution interms of UI's strucuture is changing ultimately.The innovative components are being built everyday in huge count.The world ,from generating things from scratch has changed.

What we r doing today is , for example in java to use any datastructure like Stacks,LinkedLists etc. we import the package and call the function to our respective object as an initialization,and we use that in our program.

This shows ,using the builtin approaches just by importing it's respective package,inorder to work with our logical changes ,improvements and goes on..by avoiding redundant use of code every single time.

Here, in the same way,we see the world evolving interms of AI like ai assistants,chatbots ,capilots etc ,.helping us in real time search engines ,making search experiences more robust and flexible in ecommerce websites, and ai assistance on specified topics and Key role is being played by ChatGpt's the LLM's being developed with their next versions, helping us to improve prompting much more flexible in generating ai images, and videos either.

Underneath the hood ,do u think every application creates their own LLM to work along with their website.No,right?

I think u got me now!So,we will try to know the process of integrating the existing models to work within our own project.This not only saves our time but also it is robust and more flexible to generate instant responses as the request we send to the application directly to the model through the api key to get response back to our browser.

So, as we got the basic understanding on what we are trying to create let's dive in further..!

Creating openai instance

Go to openai.com and visit the api platform.

As,openai acts as a bridge between user specific application and the LLM's.In simple terms if u created a ui like chatgpt locally and u cant to develop it's functionality work like real time chatgpt we install the openai packages to work with its methods which connects to the LLM's to get instant responses.

Let's understand it simply by start implementing.

• open ur code editor and create a folder "openai-testing" just in case to test it's functionality and understand code.
  Ensure that ur having node installed in ur system.

• now create ur package manager inorder to install and manage dependencies. npm init -y

• after this install open ai package npm i openai
  u'll see the nodemoudlues folder in ur current directory.

• to securely access the api create .env file and attach ur api key which u created from ur openai website.
  Note:It provides the api key but it is not free to get the prompts.make sure u check on this.!
  

//.env file
OPENAI_API_KEY=ur openai secret api key

• To make 1st api request create a file index.js to write the code to get communicated with openai LLM to get the result to the particular prompt.

• go through the documentation and follow along

• to work with environment variables install package npm i dotenv

** u r good to go.**

run node index.js

and see the response in ur console as we are outputting the result to console.

To generate the image
replace the code index.js file with

import OpenAI from 'openai';
import dotenv from 'dotenv';

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

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

async function generateImage() {
  try {
    const response = await openai.images.generate({
      prompt: 'A cute baby sea otter',
      n: 1, // Number of images to generate
      size: '512x512', // Size of the image
    });

    console.log(response.data[0].url);
  } catch (error) {
    console.error('Error generating image:', error.message);
  }
}

generateImage();

i got this in console

now when i click on the link what i got is mindblowing.

it's cute.!😍

let's walkthrough the code step by step

1.first we imported the packages to work with our code

import OpenAI from "openai";
import dotenv from 'dotenv';
dotenv.config();

2.accessing api key from env file ,if no key returning error messg

const apiKey = process.env.OPENAI_API_KEY;
if (!apiKey) {
  throw new Error('The OPENAI_API_KEY environment variable is missing or empty.');
}

3.initializing new OpenAi instance with respect to the api key

const openai = new OpenAI({
  apiKey: apiKey,
});

4.creating an object that specifies the prompt to a particular model guiding it generate specified result.

const completion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
        { role: "system", content: "You are a helpful assistant." },
        {
            role: "user",
            content: "Write a haiku about recursion in programming.",
        },
    ],
    store: true,
});

from above when u click on openai. then u get lot of options like this

this helps us to select what type of content we wish to generate by selecting it as a request

5.and finally we generating the result in to the console.

inorder to integrate to the ui we have to know the basic knowledge of how it actually works.
This is just for understanding basic workflow.Stay tuned ,to deep dive along with me to work with ui integration aswell, if u like this walkthrough reach out in the form of reactions and comments.I'd love to see this.Thank You guys !Happy Developing.