Angular is a frontend framework that
allows you to build web applications, and you can use it to make HTTP requests
to external APIs, including the ChatGPT API.
To call the ChatGPT API from Angular,
you would typically use Angular's built-in HttpClient module to send HTTP
requests to the API endpoint. Here's a basic example of how you might do this:
First, make sure you have Angular CLI
installed. If not, you can install it using npm:
npminstall-g @angular/cli
Create a new Angular project:
ngnewmy-chatgpt-app
Navigate to your project directory:
cdmy-chatgpt-app
Generate a new service to handle API calls:
nggenerateservicechatgpt
In your service file (chatgpt.service.ts), import HttpClient and inject it into your service constructor:
import { Injectable } from'@angular/core';
import { HttpClient } from'@angular/common/http';
import { Observable } from'rxjs';
@Injectable({
providedIn:'root'
})
exportclassChatGptService {
privateapiUrl='https://api.openai.com/v1/chat/completions'; // Example API endpoint
constructor(privatehttp:HttpClient) { }
getChatResponse(prompt:string):Observable<any> {
constheaders= {
'Content-Type':'application/json',
'Authorization':'Bearer YOUR_API_KEY'// Replace YOUR_API_KEY with your actual API key
Replace 'https://api.openai.com/v1/chat/completions' with the actual URL of the ChatGPT API endpoint you want to call. Replace 'YOUR_API_KEY' with your actual ChatGPT API key. Now, you can use this service in your Angular components to make API calls. For example, in your component file (app.component.ts), you can inject the ChatGptService and call the getChatResponse method:
Now ChatGPT is available in Azure Open AI service as well, it is introduced and announced by Microsoft on 9th march 2023.
Now developers and the business team will be able to integrate the Open AI’s ChatGPT modes into their cloud applications, which enables communication in other apps and services.
Now the business team can use ChatGPT to customize the queries as per the customer feedback and can help in applications to send automated emails and so many others.
As per Microsoft's announcement Azure OpenAI, users now can start to access the preview of ChatGPT today, with the pricing set of $0.002 for the 1,000 tokens, now the billing for all the ChatGPT service starts on March 13th as part of the Azure OpenAI.
Developers need to apply for special access, as the Azure OpenAI Services requires registration and it is currently only available for Microsoft-managed customers and partners.
With the help of Azure OpenAI Service, more than 1,000 customers are applying the advanced AI model, including the Dall-E 2, GPT-3.5, Codex, and many other large language models to innovate in new ways, now the developers use OpenAI’s ChatGPT in the enhancement of PowerBI, MicrosoftTeams, GitHub, etc.
Now all the big and small levels of organizations are using the Azure OpenAI Services to achieve their business value, Microsoft also working internally to combine the large language models with the OpenAI and the AI-optimized infrastructure of Azure to introduce new experiences across the customer and products ex.
GitHub Copilot leverages AI models in the Azure OpenAI Service to give benefits to developers to enhance the code with its AI pair programmer.
Microsoft Teams Premium includes the intelligent recap and the AI-generated chapters to help the teams, individuals, and organizations become more productive.
Microsoft Viva Sales is the new AI-powered seller experience that offers suggested email content and data-driven insights to help the sales teams to focus on selling products to customers.
Microsoft Bing introduced the AI-powered chat option to enhance the consumer's search experience.
above are just a few examples of how Microsoft openAI is helping organizations to transform in AI models.
So in the future, AI will definitely change the way of work, and also improve the organization's growth with Open A.
Below are a couple of the Links given by Microsoft through that we can start working with Azure OpenAI services.
Login to your OpenAI account and click on profile (personal, right-hand side) and click on view API
Once you click on View API Keys, you will ‘Create a new secret key, once you click on it an API key will generate in the Popup window, and you can copy it for using it in the application.
Now open visual studio 2022 and create an Asp.net Core web API project like below
Give additional information as per your requirement.
Once the project is created, now go to the NuGet package manager and add the OpenAI package like below
Now right-click on the Controller folder and add a new controller Called OpenAI and write the below code in it
Now create a service file with the below command, here service name is ‘OpenAI’
Ng g s openAI
And write the below code in the openAI.service.ts file
import{HttpClient}from'@angular/common/http';import{Injectable}from'@angular/core';import{Observable}from'rxjs';
@Injectable({
providedIn:'root'})exportclassOpenAIService{constructor(private http:HttpClient){}getData(input: string):Observable< any >{returnthis.http.get('https://localhost:7285/api/OpenAI/GetData?input='+ input,{
responseType:'text'});}}
JavaScript
In the above the Url path is ‘'https://localhost:7285’, you need to replace the port, which you are looking at locally, once you run your .Net Core application.
Now add this service reference in the app.model.ts file in the provider array and apart from it we need to add the FormsModule and HttpClientModule like below
Now when you will run your angular 15 application, you will see UI like below
Here, now you can write your query and click on the getResult button, you will see the output below
The output will be like below
This is the way we can integrate the OpenAI with our angular application.
Below is the video, on how we can integrate OpenAI with our angular application practically,