[SAP GenAI + SAP Build App]Building a chatbot (Part 2)

In the previous blog, we discussed SAP GenAI and created an API. We also tested the API and received a successful response. Today, let’s dive deeper into SAP Build Apps.

I. SAP Build App

Using Boosters to activate SAP Build Apps and other necessary components.

1. Check services

2. Create Destination

🔖 Note:

URL: This is the API endpoint from SAP GenAI.

Client ID & Client Secret: These are retrieved from the service key created when setting up the AI Core service.

BuildApps.ApiType: rest

BuildApps.Enabled: true

HTML5.DynamicDestination: true

URL.headers.AI-Resource-Group: chatbot

URL.headers.Content-Type: application/json

3. Login SAP Build App

4. Create project

III. Design Home Page

1. Add Integration

2. Add path

Path: /chat/completions?modelVersion=latest&modelName=gpt-4o-mini&api-version=2024–10–21

Method: POST

3. Test run

4. Variables

• App variables

• Page variables

5. Create a new page

6. Add logic

7. Save and preview

III. Design Chatbot page

1. User Interface

2. Chat history

Repeat with the app variable:

3. Icon

With formula: {set: “fiori”, name: IF(repeated.current.role == “user”, “question-mark”, “accept”)}

4. Title

With formula: IF(repeated.current.role == “user”, “You”, “Chatbot”)

5. Text

With formula: IF(repeated.current.role == “user”, REPLACE_ALL(repeated.current.content, “You are an SAP assistant. Please do not respond to any questions that are not related to the SAP system. If I ask any such questions, respond by saying you don’t know. “, “”), repeated.current.content)

6. Input

Binding with the page varible:

7. Send button

With logic:

IV. Implement logic of sending event

1. Set app variable

With formula: WITH_ITEM(appVars.Chathistory, { role: “user”, content: “You are an SAP assistant. Please do not respond to any questions that are not related to the SAP system. If I ask any such questions, respond by saying you don’t know. “ + pageVars.input })

2. Create record

Binding with integration source: Chatbot

With formula: { messages: appVars.Chathistory }

3. Set app variable

Binding with App variable: Chathistory

With formula: WITH_ITEM(appVars.Chathistory, { role: outputs[“Create record”].response.choices[0].message.role, content: outputs[“Create record”].response.choices[0].message.content })

4. Error handling

Binding with Alert

5. Set page variable

Binding with page variable and has a blank value.

V. Preview

1. Save and preview

2. Choose application

3. See the video below

Great! We have built a simple chatbot application using SAP GenAI and SAP Build Apps. Of course, you can design this app to be even more beautiful and professional than mine! 😄 In the next blog, I will talk about deployment: How can we deploy an application to SAP Build Work Zone (SAP BWZ)?

Let’s stay tuned.

That’s all I wanted to share in this blog. Please let me know your thoughts. If you have any questions, feel free to contact me via:

Phone: +84367584082 Email: vothedung91@gmail.com

I’m Vietnamese, nice to meet you all. Goodbye, and see you soon!