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

  4. Hey, thank you for the project it's really cool. I have a question please how to connect this with a directline secret whitout passing with Q&A Maker. thank you

    1. Good to know that you find the project interesting :). As for the question is to bypass the QnA Maker, we cannot as the KB and service is provided by the QnA Maker. Not sure if I have answered your query. Please let me know if I have misunderstood your query.

    2. Actually I want to connect the bot with a directline service without using th e Q&A maker !

  5. I have a QnA Maker multi-turn knowledge base set up, where I provide the user with clickable options versus just typing random text in the box. I have found several of these types of projects on Github but none of them seem to work with the conversational multi-turn QnA Maker template. Thoughts?

    1. What error are you getting, Can you look into the browser logs and network logs if you are getting anything there. I have checked the application with multi-turn KB and it works just fine.

  6. Hello thank you for the project it's good but I have a question please how replace connection with a directline secret whitout passing with Q&A Maker. thank you


Post a Comment

Popular posts from this blog

Sorting in Typescript (Simple Arrays & Array of Objects)

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

SharePoint Framework (SPFx) Tab Control (react)