Blog Series
Integrating AI with SAPUI5 Fiori Apps: Part 1 – ConceptIntegrating AI with SAPUI5 Fiori Apps: Part 2 – Building a Text SummarizerIntegrating AI with SAPUI5 Fiori Apps: Part 3 – Building an AI Chatbot Assistant
In the previous blogs in the series, I explained the steps to integrate SAPUI5 Fiori Apps with LLM via Destinations and discussed a case of implementing a simple application – Text Summarizer.
Like the previous blog, I’m structuring this as a short walkthrough of building a slightly advanced use case of building an AI Chatbot Assistant with a conversational UI. The implementation is lean, implemented only on the client side with the entire conversation history retained within the web client, and gets reset once reloaded.
You can find the reference implementation here – GitHub – anselm94/blog-sap-fiori-genaihub-llm-integration
Screengrab of AI Chatbot Assistant built in SAPUI5
To build this, I reused the same implementation from the Text Summarizer blog and added a new tab to switch between the two sections, hence reusing the logic for the most part.
There are two major differences between the Chatbot Assistant compared to the Text Summarizer implementation:
Since LLMs don’t remember your previous conversations, all the messages through the entire conversation history should be sent with every LLM request, to maintain the context.The Conversational UI is not available as an SAPUI5 control, I built this layout – containing altering User and AI messages with an Input control to enter your messages, using SAPUI5’s FlexBox control with a bit of CSS styling.
The code is available under the open-source Apache license here –GitHub – anselm94/blog-sap-fiori-genaihub-llm-integration . Please feel free to modify it according to your needs.
If you have questions or feedback, please feel free to add a comment below. I’m all ears! ?
Blog SeriesIntegrating AI with SAPUI5 Fiori Apps: Part 1 – ConceptIntegrating AI with SAPUI5 Fiori Apps: Part 2 – Building a Text SummarizerIntegrating AI with SAPUI5 Fiori Apps: Part 3 – Building an AI Chatbot AssistantIn the previous blogs in the series, I explained the steps to integrate SAPUI5 Fiori Apps with LLM via Destinations and discussed a case of implementing a simple application – Text Summarizer.Like the previous blog, I’m structuring this as a short walkthrough of building a slightly advanced use case of building an AI Chatbot Assistant with a conversational UI. The implementation is lean, implemented only on the client side with the entire conversation history retained within the web client, and gets reset once reloaded.You can find the reference implementation here – GitHub – anselm94/blog-sap-fiori-genaihub-llm-integration Screengrab of AI Chatbot Assistant built in SAPUI5To build this, I reused the same implementation from the Text Summarizer blog and added a new tab to switch between the two sections, hence reusing the logic for the most part. There are two major differences between the Chatbot Assistant compared to the Text Summarizer implementation:Since LLMs don’t remember your previous conversations, all the messages through the entire conversation history should be sent with every LLM request, to maintain the context.The Conversational UI is not available as an SAPUI5 control, I built this layout – containing altering User and AI messages with an Input control to enter your messages, using SAPUI5’s FlexBox control with a bit of CSS styling.The code is available under the open-source Apache license here -GitHub – anselm94/blog-sap-fiori-genaihub-llm-integration . Please feel free to modify it according to your needs.If you have questions or feedback, please feel free to add a comment below. I’m all ears! ? Read More Technology Blogs by SAP articles
#SAP
#SAPTechnologyblog
+ There are no comments
Add yours