AI Integration

Setup Instructions

1. Obtain Your OpenAI API Key

1. Go to the OpenAI Platform.
2. Sign in with your OpenAI account or create a new one.
3. Navigate to the API Keys section in your account settings.
4. Generate a new API key if you don’t already have one.
5. Copy the API key and store it securely. You will need it to configure your application.

2. Enable the OpenAI Module in NestJS

To enable OpenAI integration in your application, uncomment the appropriate module in the AppModule.

app.module.ts

// other imports
// import { OpenAIModule } from './openai/openai.module'; // Uncomment this line to enable the OpenAI module
 
@Module({
  imports: [
    // other imports
    // OpenAIModule, // Uncomment this line to enable the OpenAI module
  ],
})
export class AppModule {}

1. Locate the line:

   // import { OpenAIModule } from './openai/openai.module';

   and uncomment it.
2. Similarly, uncomment the line:

   // OpenAIModule,

   in the imports array.

3. Configure the OpenAI API Key

1. Add the OpenAI API key to your .env file:

   .env

   OPENAI_API_KEY=your_openai_api_key

4. Use the Prebuilt OpenAI Service in NestJS

Your project includes a ready-to-use OpenAI service and controller in the openai module.

4.1. Service

The OpenAIService handles communication with the OpenAI API and is already set up for generating responses. You can customize the logic in openai.service.ts if needed.

Example usage of OpenAIService:

import { Injectable } from '@nestjs/common';
import { OpenAIService } from './openai.service';
 
@Injectable()
export class MyCustomService {
  constructor(private readonly openAIService: OpenAIService) {}
 
  async askChatGPT(prompt: string): Promise<string> {
    return this.openAIService.generateResponse(prompt);
  }
}

4.2. Controller

The OpenAIController exposes REST endpoints for the front-end. The endpoint /chat accepts a POST request with a prompt and returns the AI's response.

Example endpoint in openai.controller.ts:

import { Controller, Post, Body } from '@nestjs/common';
import { OpenAIService } from './openai.service';
 
@Controller('chat')
export class OpenAIController {
  constructor(private readonly openAIService: OpenAIService) {}
 
  @Post()
  async sendMessage(@Body('prompt') prompt: string): Promise<string> {
    return this.openAIService.generateResponse(prompt);
  }
}

These files are included in the openai module. Once enabled, the functionality will be ready to use.

5. Use the Prebuilt Angular Service for OpenAI Integration

Your project includes a ready-to-use Angular service for interacting with the NestJS API.

5.1. Service

The OpenAIService in Angular is set up to communicate with the /chat endpoint of your NestJS back-end. You can use it directly in your components.

Example usage of OpenAIService:

import { Component } from '@angular/core';
import { OpenAIService } from './openai.service';
 
@Component({
  selector: 'app-chat',
  template: `
    <textarea [(ngModel)]="prompt" placeholder="Enter your message"></textarea>
    <button (click)="sendMessage()">Send</button>
    <div *ngIf="response">
      <h3>Response:</h3>
      <p>{{ response }}</p>
    </div>
  `,
})
export class ChatComponent {
  prompt: string = '';
  response: string = '';
 
  constructor(private readonly openAIService: OpenAIService) {}
 
  sendMessage() {
    this.openAIService.sendMessage(this.prompt).subscribe({
      next: (res) => (this.response = res),
      error: (err) => console.error('Error:', err),
    });
  }
}

You can immediately start using this service in your components or other services.

Ready to Deploy?

You’re all set! OpenAI is now integrated into your application. Make sure the appropriate modules are enabled, and the API key is correctly configured.