Dear all,
I implemented this AI chatbot functionality in SAPUI5 apps with SAP CAP backend and AI core API.
I thought of sharing my knowledge with you all. I took references from multiple blogs to complete this functionality, I will list all those blogs in the references section below and thank you for all the authors of those blogs.
Steps involved to implement this functionality,
Create a destination in SAP BTP pointing your AI API.Configure this destination in SAP CAP backend service and UI level.Define action in the CAP service and call the destination to read data from SAP AI API.Use this action from CAP service in UI5 app and integrate CAP service API and UI5 app.
Create a destination in SAP BTP pointing your AI API:
Name: URL: <AI_API_URL>/v2 # Eg. https://api.ai….ml.hana.ondemand.com/v2 <- Note the suffix /v2 is very important here
Authentication: OAuth2ClientCredentials
Client ID: <CLIENT_ID> -> you can get it from SAP AI core instance service key
Client Secret: <CLIENT_SECRET> -> you can get it from AI core instance service key
Token Service Url: <TOKEN_URL>/oauth/token -> append this to Token URL
## Additional Properties
HTML5.DynamicDestination: true
URL.headers.AI-Resource-Group: default -> Just add key and value in properties even you do not have drop down values.
URL.headers.Content-Type: application/json -> Just add key and value in properties even you do not have drop down values.
2. Configure this destination in SAP CAP backend service and UI level:
Backend Cap service -> package.json
“cds”: {
“requires”: {
“AI_ASSISTANT”: {
“kind”: “rest”,
“[hybrid]”: {
“credentials”: {
“destination”: “AI_ASSISTANT”, -> Destination name here
“path”: “/inference/deployments/<deployment ID here>”
}
},
“[production]”: {
“credentials”: {
“destination”: “AI_ASSISTANT”,
“path”: “/inference/deployments/<deployment ID here>”
}
}
}
},
}
Note: You can get Deployment Id from AI launchpad.
UI5 app level- > xs-app.json
Add a new route,
{
“source”: “^/api/(.*)$”,
“target”: “/inference/deployments/<deployment ID here>/$1”,
“authenticationType”: “xsuaa”,
“destination”: “AI_ASSISTANT”
}
3. Define action in the CAP service and call the destination to read data from SAP AI API:
We will define action in CAP backend service to call the AI API through destination.
db/schema.cds:
type AIChatBotResponse {
text : String;
}
srv/service.cds:
service DemoService {
action getAIResponse(query : String) returns AIChatBotResponse;
}
srv/service.js file:
this.on(“getAIResponse”, async (request: Request) => {
const { query } = request.data;
const aiDestination = await cds.connect.to(“AI_ASSISTANT”);
const aiChatBotResponse = await aiDestination.send(‘POST’,’/v2/predict’, { query: query })
//return aiChatBotResponse;
return { text: aiChatBotResponse.response };
})
Note: import above defined type from schema.cds into service definition cds file.
4. Use this action from CAP service in UI5 app and integrate CAP service API and UI5 app:
For UI part you can take dialog and display chat dialog on click of a AI chat bot button.
UI code controller js/ts file:
onSubmitQuery: function (oEvent) {
let oInput = oEvent.getSource();
let sQuery = oInput.getValue();
oInput.setValue(“”);
// Add User query to the model
this.aList = this.ChatbotJSONModel.getProperty(“/list”);
if (!this.aList) {
this.aList = [];
}
let oJsonObj = {
text: sQuery,
type: “query”,
};
this.aList.push(oJsonObj);
this.ChatbotJSONModel.setProperty(“/list”, this.aList);
this.aList = this.ChatbotJSONModel.getProperty(“/list”);
let oPayLoad = {};
oPayLoad.query = sQuery
let oDataModel = this.getView()?.getModel();
const that = this;
return new Promise((resolve, reject) => {
oDataModel.callFunction(“/getAIResponse”, {
method: “POST”,
urlParameters: oPayLoad,
success: function (oDataReceived) {
if (oDataReceived) {
if (oDataReceived && oDataReceived.getAIResponse) {
let aiResponse = oDataReceived.getAIResponse;
let oJsonObj = {
text: aiResponse.text,
type: “response”,
};
that.aList.push(oJsonObj);
that.ChatbotJSONModel.setProperty(“/list”, that.aList);
resolve(aiResponse);
}
}
},
error: function (oErrorReceived) {
reject(oErrorReceived);
}
});
});
}
UI screenshot:
Best Regards,
Venkatesh.
Dear all,I implemented this AI chatbot functionality in SAPUI5 apps with SAP CAP backend and AI core API.I thought of sharing my knowledge with you all. I took references from multiple blogs to complete this functionality, I will list all those blogs in the references section below and thank you for all the authors of those blogs.Steps involved to implement this functionality,Create a destination in SAP BTP pointing your AI API.Configure this destination in SAP CAP backend service and UI level.Define action in the CAP service and call the destination to read data from SAP AI API.Use this action from CAP service in UI5 app and integrate CAP service API and UI5 app. Create a destination in SAP BTP pointing your AI API:Name: URL: <AI_API_URL>/v2 # Eg. https://api.ai….ml.hana.ondemand.com/v2 <- Note the suffix /v2 is very important hereAuthentication: OAuth2ClientCredentialsClient ID: <CLIENT_ID> -> you can get it from SAP AI core instance service keyClient Secret: <CLIENT_SECRET> -> you can get it from AI core instance service keyToken Service Url: <TOKEN_URL>/oauth/token -> append this to Token URL## Additional PropertiesHTML5.DynamicDestination: trueURL.headers.AI-Resource-Group: default -> Just add key and value in properties even you do not have drop down values.URL.headers.Content-Type: application/json -> Just add key and value in properties even you do not have drop down values. 2. Configure this destination in SAP CAP backend service and UI level: Backend Cap service -> package.json “cds”: {
“requires”: {
“AI_ASSISTANT”: {
“kind”: “rest”,
“[hybrid]”: {
“credentials”: {
“destination”: “AI_ASSISTANT”, -> Destination name here
“path”: “/inference/deployments/<deployment ID here>”
}
},
“[production]”: {
“credentials”: {
“destination”: “AI_ASSISTANT”,
“path”: “/inference/deployments/<deployment ID here>”
}
}
}
},
}Note: You can get Deployment Id from AI launchpad.UI5 app level- > xs-app.jsonAdd a new route,{
“source”: “^/api/(.*)$”,
“target”: “/inference/deployments/<deployment ID here>/$1”,
“authenticationType”: “xsuaa”,
“destination”: “AI_ASSISTANT”
} 3. Define action in the CAP service and call the destination to read data from SAP AI API: We will define action in CAP backend service to call the AI API through destination. db/schema.cds:type AIChatBotResponse {
text : String;
} srv/service.cds:service DemoService {
action getAIResponse(query : String) returns AIChatBotResponse;
}srv/service.js file: this.on(“getAIResponse”, async (request: Request) => {
const { query } = request.data;
const aiDestination = await cds.connect.to(“AI_ASSISTANT”);
const aiChatBotResponse = await aiDestination.send(‘POST’,’/v2/predict’, { query: query })
//return aiChatBotResponse;
return { text: aiChatBotResponse.response };
}) Note: import above defined type from schema.cds into service definition cds file.4. Use this action from CAP service in UI5 app and integrate CAP service API and UI5 app:For UI part you can take dialog and display chat dialog on click of a AI chat bot button.UI code controller js/ts file:onSubmitQuery: function (oEvent) {
let oInput = oEvent.getSource();
let sQuery = oInput.getValue();
oInput.setValue(“”);
// Add User query to the model
this.aList = this.ChatbotJSONModel.getProperty(“/list”);
if (!this.aList) {
this.aList = [];
}
let oJsonObj = {
text: sQuery,
type: “query”,
};
this.aList.push(oJsonObj);
this.ChatbotJSONModel.setProperty(“/list”, this.aList);
this.aList = this.ChatbotJSONModel.getProperty(“/list”);
let oPayLoad = {};
oPayLoad.query = sQuery
let oDataModel = this.getView()?.getModel();
const that = this;
return new Promise((resolve, reject) => {
oDataModel.callFunction(“/getAIResponse”, {
method: “POST”,
urlParameters: oPayLoad,
success: function (oDataReceived) {
if (oDataReceived) {
if (oDataReceived && oDataReceived.getAIResponse) {
let aiResponse = oDataReceived.getAIResponse;
let oJsonObj = {
text: aiResponse.text,
type: “response”,
};
that.aList.push(oJsonObj);
that.ChatbotJSONModel.setProperty(“/list”, that.aList);
resolve(aiResponse);
}
}
},
error: function (oErrorReceived) {
reject(oErrorReceived);
}
});
});
}UI screenshot:References:https://community.sap.com/t5/technology-blogs-by-members/a-chatgpt-like-chat-app-built-with-modern-sap-technologies-cap-sapui5-part/ba-p/13549057https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579https://community.sap.com/t5/technology-blogs-by-members/custom-chatbot-widget-in-sapui5-using-expression-binding/ba-p/13867135https://github.com/SAP-samples/azure-openai-aicore-cap-api/blob/main/documentation/02-cap-api/01-prepare-cap-deployment.mdBest Regards,Venkatesh. Read More Technology Blogs by Members articles
#SAP
#SAPTechnologyblog
