SPFx Chat Bot - using SharePoint Framework Extension

 Hi Friends,

Today I have created an SPFx chatbot using the SharePoint Framework extension. This is a small simple to configure bot. It consumes the QnAMaker API to retrieve the answers for the asked questions.

SPFx Chat Bot - using SharePoint Framework Extension

The code can be found here

Features !!

  • Easy to configure with little configurations
  • Compatible with the prompts
  • Displays the formatted text as done in the knowledgebase
  • Can filter on single metadata value as well as multi values
  • Option to select the operator for the filter values
  • Its an SPFx extension, so can be deployed at a site collection level or the tenant level
SPFx Chat Bot - using SharePoint Framework Extension

Configuration Needed.

  • Login to the QnAMaker.ai
  • Create the knowledgebase (follow steps here )
  • Got to the settings 
  • follow the markers below to retrieve the configuration
SPFx Chat Bot - using SharePoint Framework Extension

To get the source code click here

Working Demo

SharePoint Framework chatbot using SPFx Extension

Steps for deployment

There are 2 ways how you can deploy

  • Deploying package directly
To deploy the package directly follow the below steps
  • Go to the release page on Github by clicking here
  • Download the .sppkg file from the latest release
  • Deploy the file in App Catalogue
  • When deployed successfully navigate to  Site Contents --> Tenant Wise Extensions
  • Look for the entry "ChatBot" 
  • Edit the item and fill in the Component Properties

  • Deploying via building the codebase
To deploy the package via build
  • Make a clone of the repository
  • Navigate to the folder sharepoint > assets
  • Update the properties in both ClientSiteInstance.xml & elements.xml file
  • Execute the below commands
    • npm install
    • npm bundle --ship
    • npm package-solution --ship
  • Navigate to the folder sharepoint > solution
  • you'll find the spfxqnabot.sppkg file
  • Follow the Steps mentioned in "Deploying package directly"

You can also check out my video on youtube

Happy Coding...!!
#MicrosoftSharePoint #SharePointWidgets


  1. when i upload app It shows that I have a err " invaild sharepoint app package error hexadecimal value line 7 postion 68"

    1. Hi, can you please send me the screenshot of the error on sumit.kanchan04@gmail.com

    2. Hi, issue has been fixed, please take the latest code/sppkg file from GitHub.

      Sumit Kanchan

  2. This comment has been removed by a blog administrator.

  3. Could you explain step by step because I have a problem with uploading the application pls


Post a Comment

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

Checking user permission in SharePoint Framework (SPFx) webpart

SharePoint Image Gallery