{"id":48057,"date":"2022-10-04T18:12:10","date_gmt":"2022-10-04T17:12:10","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-1\/?p=48057"},"modified":"2023-01-30T08:18:42","modified_gmt":"2023-01-30T08:18:42","slug":"travel-va-web-sdk-tutorial","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/how-tos\/travel-planing-assistant\/travel-va-web-sdk-tutorial\/","title":{"rendered":"Travel VA: Web SDK Tutorial"},"content":{"rendered":"
\r\n\t
\r\n\t\t
\r\n\t\t\t

This tutorial is an end-to-end walkthrough for setting up and running an instance of the Kore.ai assistants Web SDK which is a collection of libraries that you can use to integrate Kore.ai assistants with your own web applications.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n

<\/div><\/div>\r\n\t
\r\n\t\t
\r\n\t\t\t

Web SDK Tutorial Overview<\/span><\/span><\/h1>\n

In this tutorial, you will install a Kore.ai sample assistant, a test application to host the assistant, and then a JSON Web Token (JWT) generation web service using your local host server to communicate between the assistant on your local server and the Kore.ai XO Platform. The following list describes the general steps you will take to install and configure the Web SDK.<\/p>\n

    \n
  1. Build the assistant to be integrated – <\/strong>For this tutorial, you will install the Travel Planning Sample<\/em> assistant that uses open APIs to get flight and location information, along with weather reports.<\/li>\n
  2. Configure Web\/Mobile Client channel<\/strong> – To use the Travel Planning Sample Virtual Assistant<\/em> with the Web SDK, you must configure the assistant for the Web\/Mobile Client channel.<\/li>\n
  3. Create a new Client App<\/strong> – When you configure the Web\/Mobile Client channel for the Travel Planning Sample Virtual Assistant<\/em>, you must create a client app and select the JWT signing algorithm used to generate the authentication tokens.<\/li>\n
  4. Publish the assistant<\/strong>– After you have configured the Travel Planning Sample Virtual Assistant<\/em>, you must publish the assistant which sends the bot to the Bots Admin for approval.<\/li>\n
  5. Approve and Deploy the assistant<\/strong>– In the Bots Admin Console, the published assistant and tasks must be approved to deploy.<\/li>\n
  6. Download and install Node.js<\/strong> – You will need to install Node.js<\/span> used to host the JWT token generation web service for the Web SDK to communicate between the assistant in the test application and the Kore.ai XO Platform.<\/li>\n
  7. Download and uncompress the test application<\/strong> – \u00a0The test application,\u00a0SDKApp<\/a> is used to simulate your application that will host the Kore.ai assistant as a channel on a web page using your computer local host server.<\/li>\n
  8. Download and uncompress the Kore.ai Web SDK<\/strong> – The Web SDK contains the libraries used to communicate and run the assistant in the test application using the Web\/Mobile Client channel. You will need to configure settings in the index.html<\/span> file for your computer.<\/li>\n
  9. Start your application and view the assistant in a web browser<\/strong> – In a Terminal<\/strong> window, you will start the JWT service, and then view the assistant in a web browser.<\/li>\n<\/ol>\n

    Now let us see detailed step by step implementation.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n

    <\/div><\/div>\r\n\t
    \r\n\t\t
    \r\n\t\t\t

    Installing and Running the Kore.ai Web SDK<\/span><\/span><\/h1>\n

    This section provides detailed steps on how to run a Kore.ai Sample Virtual Assistant using the Web SDK and a test application running on your computer local host server. To get started, you will need to build a assistant to run in the test application, and then configure the assistant to run in the Web\/Mobile Client channel. For this tutorial, we will be installing a sample assistant.<\/em><\/p>\n

      \n
    1. Log in to XO Platform, and click the\u00a0down-arrow<\/strong>\u00a0next to the\u00a0\u00a0+New Bot<\/strong>\u00a0and select\u00a0Install Sample Virtual Assistants.<\/strong><\/li>\n
    2. Hover over\u00a0Travel Planning Sample<\/strong>, and then click Install<\/strong>.<\/li>\n
    3. The Travel Planning Sample installed successfully<\/em> message is displayed and the Sample Virtual Assistant is added to your Bots<\/strong> left-hand navigation menu.<\/li>\n<\/ol>\n

      In this next section, you will define the Web\/Mobile Client channel for the Travel Planning Sample Virtual Assistant by creating a new client app and defining channel settings. See here<\/a> for a detailed explanation of the steps.<\/em><\/p>\n

        \n
      1. On the XO Platform top menu, select the Build<\/strong> tab.<\/li>\n
      2. From the left menu, click Integrations > BotKit<\/strong>.<\/li>\n
      3. In the Select App<\/strong> drop-down list, click Create App<\/strong>.\u00a0The Create Client App<\/strong> dialog is displayed.<\/li>\n
      4. In the Name<\/strong> field,\u00a0enter a name for your app, for example, My SDK Client App<\/span>.<\/li>\n
      5. In the JWT Signing Algorithms<\/strong> section, select HS256<\/strong>\u00a0to generate the authentication tokens.<\/li>\n
      6. Click Next -> Done<\/strong>.<\/li>\n
      7. The Web\/Mobile Client Channel<\/strong> page is displayed with the following JWT credentials, make a note of all these details:\n