Building AI-Chatbot App With ChatGPT API In Angular

Here is some sample code to get you started,

Install the @openai package,

npm install openai

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 { }

Create a service for the OpenAI API

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

ng g s openai

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 '';
      });
  }
}

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>

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:''});
      }
    });
  }
}

Now Run the application using the following command,

ng serve

Summary

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