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.
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
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
To get the source code click here
Working Demo
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"
- 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
- 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
#MicrosoftSharePoint #SharePointWidgets
when i upload app It shows that I have a err " invaild sharepoint app package error hexadecimal value line 7 postion 68"
ReplyDeleteHi, can you please send me the screenshot of the error on sumit.kanchan04@gmail.com
DeleteHi, issue has been fixed, please take the latest code/sppkg file from GitHub.
DeleteThanks,
Sumit Kanchan
This comment has been removed by a blog administrator.
ReplyDeleteCould you explain step by step because I have a problem with uploading the application pls
ReplyDeleteSuperb 🙂
ReplyDeleteHey, 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
ReplyDeleteGood 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.
DeleteActually I want to connect the bot with a directline service without using th e Q&A maker !
Delete