Build a Custom Chat Bot with SharePoint Framework

This article will review the steps to build a SharePoint Framework (SpFx) custom web part with DirectLine integration. With this application extension, your users can interface with your Bot directly in SharePoint. Since it is built on Azure Bot Channels and DirectLine, it can be easily connected with AtBot.

This webpart leverages several tools from Microsoft:

From AtBot:
“AtBot is a bot-as-a-service platform that allows you to build complex chatbots without writing any code. AtBot provides answers to everyday questions and can automate business processes easily”

To learn more about AtBot please visit the AtBot website (https://atbot.io/) and documentation at https://admin.atbot.io/Docs.

You will need some background with Office 365, Azure and the SharePoint Framework. If you are new to this I recommend following tutorial documentation for SpFx before getting started.

Some actions in this article will require administrative privileges to Office 365 and Azure. If you’re like me you may not have administrative access to your company’s Office 365/Azure subscriptions. The good news is, you can get free trials for everything:

To build and deploy SpFx webparts requires some development environment set up. These steps are reviewed in detail at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant.

Make sure to follow steps for Setting up your Office 365 Tenant and Set up your Development Environment. If you are new to SpFx it wouldn’t be a bad idea to run through the tutorial to build your first hello world web part.

This jumpstart worksheet is what I used to get familiar with the basics. Office 365 and Azure Subscription administrative access is a prerequisite. The jumpstart worksheet contains information on how to start a free trial with AtBot.

This article assumes you have followed the prerequisite steps above already including having administrative access to Office 365, Azure and SharePoint Online.

In order for the SpFx app to communicate with Azure, a Direct Line Channel must be created through Azure.

Navigate to your Bot Channel Registration blade in azure and select “Channels” from the menu. Select Direct Line Channel under “add a featured channel”

Once the channel is created, navigate into it using the edit link and copy one of the secret keys. This will be used later during debugging and deployment.

Clone the source code for the SpFx DirectLine App and install NPM dependencies. If you are having trouble here please read through the guidance from Microsoft on how to set up your development environment for SpFx:https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant

To debug the application extension, execute the gulp command to host a local web server:

Next, open any SharePoint 365 site collection and paste the debug query string below to the end of the URL. You will be prompted from SharePoint if you would like to allow debug scripts. Answering allow will load the SharePoint page with the DirectLine Bot Extension (screenshot below).

Paste the query string above to the end of the URL for a SharePoint Online site collection to load the DirectLine extension for debugging

Important Replace the DirectLineSecret setting in the query string with the secret you copied from Azure in the DirectLine Channel step above. The title should also be replaced with a the Bot title (although this is cosmetic and the bot should still load).

After accepting the prompt you should see the chat bubble appear on the page.

A prerequisite for deployment is to have an App Catalog site collection for SharePoint. Detailed guidance to create an app catalog is published by Microsoft here: https://docs.microsoft.com/en-us/sharepoint/use-app-catalog?redirectSourcePath=%252fen-us%252farticle%252fuse-the-app-catalog-to-make-custom-business-apps-available-for-your-sharepoint-online-environment-0b6ab336-8b83-423f-a06b-bcc52861cba0

Navigate to ./sharepoint/assets/elements.xml and update this file with your bot’s name and DirectLine Secret (copied above).

To install the DirectLine Bot Extension to your SharePoint environment, first package the solution:

Once these commands are complete, a .pkg file will be added to a ./sharepoint/solution folder. From here, drag and drop the .pkg file into the app catalog.

Once the app has been deployed to the SharePoint App Catalog, it is ready to be deployed to a site collection.

Navigate to Site Contents and click on “New” -> “App”. The App Should now appear for selection in the next window.

The SharePoint Framework enables an organization to add customizations to SharePoint online through modern client-side development platforms. For Bots, SpFx gives full control over the user experience such as look and feel, or where/how the Bot should appear. Using AtBot makes Bot development easier by offering a no-code approach and integrations with Azure services like QnA Makerand Microsoft Flow.

For questions about this article or other SpFx/Azure/Bot/AI topics please don’t hesitate to reach out to me or one of my colleagues at Withum.