How to Integrate ChatGPT in SAP UI5

by | Jan 21, 2023 | AI, ChatGPT, SAP, UI5, UI5 Integrations, UI5 Programs

Introduction

It is not possible to directly integrate ChatGPT using a CDN (Content Delivery Network) as GPT-3 model is not hosted on any public CDN. GPT-3 is a proprietary model owned by OpenAI, and access to it is provided through the OpenAI API, which requires an API key to use.

You can use the OpenAI API in your JavaScript application by making HTTP requests to the API endpoint and using the API key. The OpenAI API provides a prompt endpoint that allows you to send a prompt to GPT-3 and receive a response.

Here’s an example of how you might use the fetch API in JavaScript to send a prompt to GPT-3 and log the response:

const API_KEY = 'YOUR_API_KEY';
const prompt = 'What is the meaning of life?';
fetch(`https://api.openai.com/v1/engines/davinci/completions`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
        prompt,
        max_tokens: 20
    })
}).then(response => response.json())
    .then(data => {
    console.log(data.choices[0].text);
});

How to Integrate ChatGPT in SAP UI5

As shown in below image, we will follow three simple steps to integrate ChatGPT APIs within SAP UI5 App.

How to Integrate ChatGPT in SAP UI5

1. Get API of Open AI

We have already discussed all the steps involved regarding API creation in this article.

2. Create UI5 Project

Use Web IDE or SAP BAS and generate a simple UI5 Application using a generator.

3. Integrate ChatGPT Call

We have create a very simple view with input box, button and a text area to show output as shown in below view:

<mvc:View controllerName="Test.Test.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="Get Answers from ChatGPT">
                    <content>
                        <VBox>
                            <Input id="idInput"/>
                            <Button text="Get Answer" press="onPressGPT"/>
                            <Text id="idText"/>
                        </VBox>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

And on the press of Button, we have written the given code in controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";
    return Controller.extend("Test.Test.controller.Main", {
        onInit: function () {
        },
        onPressGPT: function () {
            var that = this;
            const API_KEY = '';
            var prompt = this.byId("idInput").getValue();
            fetch(`https://api.openai.com/v1/engines/davinci/completions`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${API_KEY}`
                    },
                    body: JSON.stringify({
                        prompt,
                        max_tokens: 2000
                    })
                }).then(response => response.json())
                .then(data => {
                    that.byId("idText").setText(data.choices[0].text);
                });
        }
    });
});

Output

The Output without pressing the button looks like this:

UI5 ChatGPT output view

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.