Do you want to connect ChatGPT to your app?
No problem 
, see how to do it using a low-code editor 
- Register on the OpenAI platform and get API keys
- In the low-code editor, add the following code:
Custom TypeScript
Import section
export const gptModels = [
{
'model':'text-davinci-003',
'description':'Most capable GPT-3 model. Can do any task the other models can do, often with higher quality, longer output and better instruction-following. Also supports inserting completions within text.',
'maxRequest':'4,000 tokens'
},
{
'model':'text-curie-001',
'description':'Very capable, but faster and lower cost than Davinci.',
'maxRequest':'2,048 tokens'
},
{
'model':'text-babbage-001',
'description':'Capable of straightforward tasks, very fast, and lower cost.',
'maxRequest':'2,048 tokens'
},
{
'model':'text-ada-001',
'description':'Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.',
'maxRequest':'2,048 tokens'
}
];
export interface ResponseModel {
id:string;
object: string;
created:number;
model:string;
choices:choice[];
modelUsage:usage;
}
export interface choice {
text:string;
index:number;
logprobs:any;
finish_reason:string;
}
export interface usage {
prompt_tokens:number;
completion_tokens: number;
total_tokens:number;
}
export interface ChatWithBot {
person: string;
response: string;
cssClass:string;
}
Variables
chatConversation: ChatWithBot[]=[];
response!: ResponseModel | undefined;
gptModels = gptModels
promptText = '';
promptText2 = '';
showSpinner = false;
User functions
checkResponse() {
this.promptText = this.promptText2
this.pushChatContent(this.promptText,'You','person');
this.promptText2 = '';
this.invokeGPT();
}
pushChatContent(content:string, person:string, cssClass:string) {
const chatToPush: ChatWithBot = { person:person, response:content, cssClass:cssClass};
this.chatConversation.push(chatToPush);
}
getText(data:string) {
return data.split('\n').filter(f=>f.length>0);
}
async invokeGPT() {
if(this.promptText.length<2)
return;
try{
this.response = undefined;
let configuration = new Configuration({apiKey: 'YOUR_API_KEY'});
let openai = new OpenAIApi(configuration);
let requestData={
model: 'text-davinci-003',//'text-davinci-003',//"text-curie-001",
prompt: this.promptText,//this.generatePrompt(animal),
temperature: 0.95,
max_tokens: 150,
top_p: 1.0,
frequency_penalty: 0.0,
presence_penalty: 0.0,
};
this.showSpinner = true;
let apiResponse = await openai.createCompletion(requestData);
this.response = apiResponse.data as ResponseModel;
this.pushChatContent(this.response.choices[0].text.trim(),'Mr Bot','bot');
this.showSpinner = false;
}catch(error:any) {
this.showSpinner = false;
// Consider adjusting the error handling logic for your use case
if (error.response) {
console.error(error.response.status, error.response.data);
} else {
console.error(`Error with OpenAI API request: ${error.message}`);
}
}
}
Note that you need to replace YOUR_API_KEY with your own API key, which you can get by signing up for a free account at OpenAI.
Content
Header
<ion-header mode="ios">
<ion-toolbar>
<ion-title>ChatGPT</ion-title>
</ion-toolbar>
</ion-header>
Content before
<div class="chat-wrapper">
<div *ngFor="let item of chatConversation">
<ion-card [ngClass]="item.cssClass" mode="ios" [color]="item.cssClass=='bot'?'color45300':'color6792'">
<ion-card-header>
<ion-card-title>{{item.person}}</ion-card-title>
</ion-card-header>
<ion-card-content>
{{getText(item.response)}}
</ion-card-content>
</ion-card>
</div>
<ion-spinner name="dots" *ngIf="showSpinner"></ion-spinner>
</div>
Footer
<ion-footer>
<ion-toolbar>
<ion-item lines="none">
<ion-input type="text" placeholder="Message" autocomplete="on" autocorrect="on" [(ngModel)]="promptText2" (keyup.enter)="checkResponse()"></ion-input>
<ion-button fill="clear" slot="end" (click)="checkResponse()">
<ion-icon icononly name="send-outline"></ion-icon>
</ion-button>
</ion-item>
</ion-toolbar>
</ion-footer>
Done, save and generate the app build