Skip to Content

Integrate SAP Conversational AI Chatbot into your iOS application

Bring your chatbot to your mobile users with native controls provided by the open-source SAP Conversational AI SDK for iOS.
You will learn
  • How to create a mobile channel for your chatbot in SAP Conversational AI
  • How to create a destination in SAP Mobile Services to proxy requests from your iOS application to your chatbot in SAP Conversational AI
  • How to integrate the open-source SAP Conversational AI SDK for iOS into an existing iOS application generated with the SAP BTP SDK for iOS Assistant
MarcoEidingerMarco EidingerJanuary 5, 2022
Created by
MarcoEidinger
January 5, 2022
Contributors
MarcoEidinger
MarcoEidinger

Prerequisites

  • Step 1

    Sign-in to your bot on https://cai.tools.sap/ and perform the following steps in the Connect tab:

    1. Click the + button.

      Add SAP Conversational AI Mobile SDK channel

      A modal popup opens.

    2. Enter Name and Application ID.

      Add SAP Conversational AI Mobile SDK channel
    3. Click Create, then copy Name and the generated Channel ID and Token to reuse later.

      Add SAP Conversational AI Mobile SDK channel
  • Step 2
    1. Access Tokens through your bot’s Settings.

      “Generate OAuth client”
    2. Click Generate to create the OAuth client Runtime API.

    3. Choose Client Credentials.

      Choose client authentication type
    4. Close the confirmation dialog.

      Confirmation dialog
    5. Copy the generated Auth URL, Client ID and Client Secret to reuse later.

      Generated OAuth client
  • Step 3
    1. Click on Mobile Connectivity in your application definition.

      “Navigate to Mobile Connectivity feature”
    2. Click the + button to start the destination create wizard.

      Create a new destination
    3. In Basic Info enter the required Destination Name and URL.

      Field Value
      Destination Name CAI
      URL https://sapcai-community.sapcai.eu10.hana.ondemand.com/public/api

      Note: Outside of this tutorial, you are free to choose any name for your destination. The URL is different and tenant-specific if you use SAP Conversational AI Enterprise Edition but the suffix /public/api is always needed.

      Click Next.

    4. Click Next on Custom Headers.

    5. Click Next on Annotations.

    6. In Destination Configuration select OAuth2 Client Credentials for SSO mechanism.

      Note: Destination and SSO Mechanism depend on the edition type of SAP Conversational AI as well as the deployment scenario. Read Enterprise Configuration guide to understand when to use other SSO mechanism types.

      Enter the required Token Service URL, Client ID and Client Secret by reusing the information from Step 2.

      Field Value
      SSO Mechanism OAuth2 Client Credentials
      Token Service URL https://sapcai-community.authentication.eu10.hana.ondemand.com/oauth/token
      Client ID Your bot's Client ID (generated in Step 2)
      Client Secret Your bot's Client Secret (generated in Step 2)
      Enter details

      Note: Token Service URL is named Auth URL in SAP Conversational AI.

      Click Next.

    7. Click Finish.

    8. Click Ping to test if the destination can reach its target.

      Ping the target system to verify that destination works

    What is the SSO mechanism used for the destination?

  • Step 4
    1. Open your Xcode project.

    2. In Xcode menu select File > Add Packages… which opens a modal dialog.

    3. Paste the following URL into the search field: https://github.com/SAP/cloud-sdk-ios-cai

      Add Package
    4. Click “Add Package”.

    5. Select Package Product SAPCAI-requiresToEmbedXCFrameworks.

    6. Click “Add Package”.

    Note: You chose Package Product SAPCAI-requiresToEmbedXCFrameworks because your app already embeds SAPCommon and SAPFoundation binary frameworks. You would select package product SAPCAI if you did not already embed binary frameworks from SAP BTP SDK for iOS.

    What are the Package Products offered by SAP Conversational AI SDK for iOS?

  • Step 5

    It is finally time to use APIs from the SAP Conversational AI SDK for iOS. Let’s create a new file named AssistantViewManager.swift.

    Copy & paste the following code into the newly created file.

    Swift
    Copy
    import SAPCAI
    import SAPFoundation
    import SAPFioriFlows
    import SwiftUI
    
    class AssistantViewManager {
    
        static let shared = AssistantViewManager()
    
        var viewModel: MessagingViewModel?
        var dataPublisher: CAIConversation?
    
        func createDemoBotAssistantView() -> UIViewController {
            let serviceConfig = CAIServiceConfig(
                urlSession: OnboardingSessionManager.shared.onboardingSession!.sapURLSession,
                host: OnboardingSessionManager.shared.onboardingSession!.settingsParameters!.backendURL.appendingPathComponent("CAI") // name of your destination created in Step 3
            )
            let caiChannel = CAIChannel(
                id: "Replace with Channel ID from Step 1",
                token: "Replace with Token from Step 1",
                slug: "Replace with Name from Step 1")
    
            self.dataPublisher = CAIConversation(
                config: serviceConfig,
                channel: caiChannel,
                messageDelivery: PollMessageDelivery(channelToken: caiChannel.token, channelId: caiChannel.id, serviceConfig: serviceConfig))
    
            self.viewModel = MessagingViewModel(publisher: dataPublisher!)
    
            return UIHostingController(rootView: AssistantView()
                                    .navigationBarTitle(Text("Chat"), displayMode: .inline)
                                    .environmentObject(viewModel!)
                                    .environmentObject(ThemeManager.shared))
        }
    
        func cleanup() {
            viewModel?.cancelSubscriptions()
            dataPublisher?.resetConversation()
    
            viewModel = nil
            dataPublisher = nil
        }
    }
    

    You created class AssistantViewManager which is accessible as a singleton through its shared property.

    Some explanations about the code:

    • You imported the SAPCAI module because this is the module of the added Swift Package.
    • You imported the SwiftUI framework because you will use SwiftUI view(s) provided by the added Swift Package.
    • You imported SAPFoundation and SAPFioriFlows because you are reusing its classes, especially SAPURLSession which is fully configured to make network requests towards your SAP Mobile Service account once the user onboarded in the app.
    • You initialized CAIServiceConfig so that SAP Conversational SDK for iOS can make network requests to the destination in SAP Mobile Services created in Step 3.
    • You need to replace the initializer parameters of CAIChannel with the actual values from Step 1 !
    • You used AssistantView which is the main reusable SwiftUI component provided by the added Swift Package. The SwiftUI view will render messages of your user’s conversation with your chatbot.
    • You are wrapping AssistantView with UIHostingController to use it in your UIKit-based application.

    Next, in ESPMContainerCollectionsViewController.swift add the following code at the end of function viewDidLoad.

    Swift
    Copy
    self.navigationItem.setRightBarButton(UIBarButtonItem(barButtonSystemItem: .compose, target: self, action: #selector(self.startConversation)), animated: true)
    

    This code adds a right bar button to invoke a function startConversation which you will create now. Add the following functions to class ESPMContainerCollectionsViewController.

    Swift
    Copy
    // MARK: - SAPCAI integration
    
    @objc func startConversation() {
        present(vc: AssistantViewManager.shared.createDemoBotAssistantView())
    }
    
    func present(vc: UIViewController) {
        let mainStoryBoard = UIStoryboard(name: "Main", bundle: nil)
        let rightNavigationController = mainStoryBoard.instantiateViewController(withIdentifier: "RightNavigationController") as! UINavigationController
        rightNavigationController.viewControllers = [vc]
        self.splitViewController?.showDetailViewController(rightNavigationController, sender: nil)
    }
    

    Add the following code at the end of function viewDidAppear(_ animated: Bool).

    Swift
    Copy
    AssistantViewManager.shared.cleanup()
    

    That code ensures that polling of conversation updates will stop once the user navigates away from the AssistantView.

    Which is the reusable SwiftUI view, provided by the SAP Conversational AI SDK for iOS, to render a conversation natively?

  • Step 6

    You are now ready to test your iOS application and initiate a conversation with your chatbot.

    1. In Xcode, press ⌘R to run your application in the iOS simulator.

    2. Touch on the row in the ODataContainers view.

      ODataContainers View
    3. Touch on the right bar button.

      Collections View
    4. Touch the input field on the bottom to open the keyboard.

      Assistant View
    5. Enter a message and touch the send button on the bottom right.

      Assistant View with send button active if there is a message in the input field
    6. Verify that your chatbot responded appropriately.

      Assistant View with a response
Back to top