Building AI-Chatbot App With ChatGPT API In Angular

Introduction

In this article, I will explain How to implement AI-Chatbot App with ChatGPT API in Angular. Furthermore, in this article, I will explain how to use OpenAPI in angular. I am also creating a demo project for better understanding.

Shot about Chat GPT

Chat GPT (Generative Pre-Training) is an unsupervised language model developed by Microsoft for conversational AI agents. The model is trained on large amounts of conversational data and can be used to generate natural language answers to users’ questions. Chat GPT is based on transformer models and is pre-trained on numerous publicly available conversational and non-conversational datasets. In addition, it is trained on internal proprietary data to improve its accuracy. Once trained, the model can generate context-sensitive responses specific to the user’s input. Chat GPT is intended to be used in everyday conversational settings and can be further tailored to applications such as customer support and virtual assistant conversations.

Prerequisites

• Angular 13
• HTML/Bootstrap

For this article, I have created an Angular project using Angular 13. To create an Angular project, we need to follow the following steps:

Step 1

I have created a project using the following command in the Command Prompt.

ng new chatBOT

JavaScript

Copy

Step 2

Open a project in Visual Studio Code using the following commands.

cd chatBOT
code.

JavaScript

Copy

Step 3

We need to install ngx bootstrap in our project using the following command in the terminal.

npm install --save bootstrap

JavaScript

Copy

Step 4

After installing bootstrap, we should import bootstrap in style.css.

@import '~bootstrap/dist/css/bootstrap.min.css';

JavaScript

Copy

To implement Chat GPT in Angular, you can follow the following steps,

1. Install the necessary dependencies: You will need to install the @openai/api package, which is the official OpenAI API package for JavaScript/TypeScript.
2. Create an OpenAI API key: You must sign up for the OpenAI GPT-3 API and get an API key.
3. Set up the OpenAI API in your Angular project: In your app.module.ts file, you can import the HttpClientModule and include it in the imports array.
4. Create a service for the OpenAI API: Create a new service file, for example openai.service.ts, where you can define a function that calls the OpenAI API with your API key and the text you want to generate.
5. Call the OpenAI API from your Angular component: In your Angular component file, import the openai.service.ts file and call the function defined in that file with the text you want to generate.
6. Display the generated text: You can display the generated text on the HTML template of your Angular component using string interpolation or property binding.

Here is some sample code to get you started,

Install the @openai package,

npm install openai

JavaScript

Copy

Sign up for the OpenAI GPT-3 API and get an API key.

Set up the OpenAI API in your app.module.ts file,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

JavaScript

Copy

Create a service for the OpenAI API

Create OpenAI Service in the Service folder using the following command.

ng g s openai

JavaScript

Copy

import { Injectable } from '@angular/core';
import { Configuration, OpenAIApi } from 'openai';

@Injectable({
  providedIn: 'root'
})
export class OpenaiService {
  private openai: OpenAIApi;
  configuration = new Configuration({
    apiKey: "Your-Key-Here",
  });

  constructor() {
    this.openai = new OpenAIApi(this.configuration);
  }

  generateText(prompt: string):Promise<string | undefined>{
   return this.openai.createCompletion({
        model: "text-davinci-003",
        prompt: prompt,
        max_tokens: 256
      }).then(response => {
        return response.data.choices[0].text;
      }).catch(error=>{
        return '';
      });
  }
}

JavaScript

Copy

Call the OpenAI API from your Angular component:

App.Component.html

<div style="margin: 30px;">
  <h1 style="text-align: center;">Chat GPT Example</h1>
  <div class="card"  *ngFor="let data of textList">
    <div class="card-header">
      <div class="input-group mb-3" >
        <input type="text" [(ngModel)]="data.text" class="form-control" placeholder="Add Your Text Here">
        <div class="input-group-append">
          <button type="button" (click)="generateText(data)" class="btn btn-primary">Generate</button>
        </div>
      </div>
    </div>
    <div class="card-body">
      <p class="card-text">{{data.response}}</p>
    </div>
  </div>
</div>

JavaScript

Copy

App.Component.ts

import { Component } from '@angular/core';
import { OpenaiService } from './openai.service';

export class textResponse{
  sno:number=1;
  text:string='';
  response:any='';
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  textList:textResponse[]=[{sno:1,text:'',response:''}];

  constructor(private openaiService: OpenaiService) {}

  generateText(data:textResponse) {
    this.openaiService.generateText(data.text).then(text => {
      data.response = text;
      if(this.textList.length===data.sno){
        this.textList.push({sno:1,text:'',response:''});
      }
    });
  }
}

JavaScript

Copy

Now Run the application using the following command,

ng serve

JavaScript

Copy

Summary

This is a basic example, but you can customize the OpenAI API parameters to suit your needs.