Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions

Introduction

In this article, we’re learning basic information about Extension Development, Microsoft Chat Bot Integration in Extensions, and Enabling Web Chat for your DevOps organization. It’s an idea to adopt the BOT services in all environments to automate your organizational processes in a single application.

Prerequisites

1. Azure DevOps Login
2. Visual Studio Code or any code editor
3. Microsoft Chat Bot - Web App Bot – Azure PaaS services
4. Node.js
5. Visual Studio Marketplace Management Portal to publish your extension. 

Now first create a Web App Bot in Azure portal, go to this link and login with your valid credentials. 

It redirects to your Azure portal, here we require Resource Group, Web App Bot, App Service, Application insights, and app service plan for bot usage, so create a new resource group by clicking on Add Menu item shown in the below screenshot.

Select your valid subscription for a new resource group, valid resource group name and region to publish all your resources in selected data center locations to protect your applications and data from datacenter failures.

Once validation is passed, click on the Create button as shown in the below screenshot.

Now our resource group was created, so it's time to create our resources by clicking on the ‘Add’ button as shown in the below screenshot.

Now Select ‘AI + Machine learning’ option and click on Web App Bot as shown in the below screenshot.

Now fill Bot Handle (name of your chat bot), Valid Subscription, Resource group, Location, Pricing Tier, App Name (Bot End Point), Bot Template = C#, application insights for Log information about your chat bot end point, and click on create button. Follow the below two screenshots to create a  new web app bot step by step.

Now Azure PaaS services are created and listed in the below screenshot.

Type

Notes

Web App Bot: It’s a Bot channel to enable your channels and linking your bot end point

Web App: Bot end point to publish your bot engine code

Application Insights: Log information about your bot responses.

App Service Plan: Plan details of your app

Now click on Web App Bot to test your bot by using ‘Test in Web Chat’ option as shown in the below screenshot.

We can achieve  this activity in two ways i.e., from Web App or Direct Line. At present I’m using Web chat, now click on ‘Edit’ option to get iframe details with security key details.

Now click on show button for your web chat secret key and scroll down for iframe code to place it in your html file.

Now it’s time to create extension project. Open Visual Studio code and type the below commands in power shell terminal to create extension project resources.

My Code	Commands in other tools	Notes
PS C:\Users\vegit> cd D:\	Cd D:\	Changing directory to my ‘D’ drive
PS D:\> md NewBotinExtension	md NewBotinExtension	In my ‘D’ drive, I’m creating new folder with name of ‘NewBotinExtension’ for my project files.
PS D:\> cd NewBotinExtension	cd NewBotinExtension	Now change to my Project folder. i.e., ‘NewBotinExtension’.
PS D:\NewBotinExtension> node -v	node -v	To check your node.js version installed in your machine.
PS D:\NewBotinExtension> npm install -g tfx-cli	npm install -g tfx-cli	Command utility for interacting with Microsoft Team Foundation Server and Azure DevOps Services (formerly VSTS). It is cross platform and supported on Windows, OS X, and Linux.
PS D:\NewBotinExtension> npm init -y	npm init -y	npm init is there when you are installing the project very first time. Here ‘-y’ is for ‘-Yes’
PS D:\NewBotinExtension> npm install vss-web-extension-sdk –save	npm install vss-web-extension-sdk –save	For your vss-web-extension sdk’s to your project.

PS C:\Users\vegit> cd D:\

PS D:\> md NewBotinExtension

PS D:\> cd NewBotinExtension

PS D:\NewBotinExtension> node -v

PS D:\NewBotinExtension> npm install -g tfx-cli

PS D:\NewBotinExtension> npm init -y

PS D:\NewBotinExtension> npm install vss-web-extension-sdk –save

Now our code is ready and next process is to generate VSIX extension file to publish package in Visual studio Market place. Follow the below URL to register or enable your accounts. This activity is to get Publisher ID and replace manifest file.

URL: https://aka.ms/vsmarketplace-manage

If it's your  first time using visual studio marketplace publisher, please note out your publisher ID (Eg: My Publisher ID: VegiManiteja). So replace your publisher id in the manifest file (vss-extension.json file) as shown in the below code.

Required Attributes for Manifest File

Property	Description	Required Notes
manifestVersion	A number corresponding to the version of the manifest format	This should be 1.
Id	Extension identifiers	This is a string that must be unique among extensions from the same publisher. It must start with an alphabetic or numeric character and contain 'A' through 'Z', 'a' through 'z', '0' through '9', and '-' (hyphen). Example: sample-extension.
Version	A string specifying the version of an extension.	Should be in the format major.minor.patch, for example 0.1.2 or 1.0.0. You can also add a fourth number for the following format: 0.1.2.3
name	A short, human-readable name of the extension. Limited to 200 characters.	Example: "My Bot in Extension".
publisher	The identifier of the publisher.	This identifier must match the identifier the extension is published under with your visual studio marketplace. i.e., Publisher ID
categories	Array of strings representing the categories your extension belongs to. At least one category must be provided and there is no limit to how many categories you may include.	Valid values: Azure Repos, Azure Boards, Azure Pipelines, Azure Test Plans, and Azure Artifacts

Before

Now, it’s time to create VSIX file with below command syntax using VS Code, PowerShell, Command Prompt or Developer Command Prompt. At this time, VS Code terminal is using that  to run the TFX tool's packaging command from my extension directory.

D:\NewBotinExtension>tfx extension create

After

Now visual studio extension was created and now we switch to visual studio marketplace publisher to publish our extension (.vsix file).

Click on ‘Azure DevOps’ option to upload your .VSIX file.

Click or Drag and Drop your extension.VSIX file.  Once your file iss uploaded click on ‘Upload’ button as shown in the below screenshot.

 

Now our extension has uploaded and it shows a success symbol in Version column as shown in the below screenshot.

Now click on ‘ …’ symbol for extension options and click on ‘View Extension’ for your extension details.

Now your extension details will be visible as shown in the below screenshot.

Now it’s time give your extension access to your organization. Now click ‘…’ symbol and click on ‘Share/Unshare’ options as shown in the below screenshot.

Now Click on ‘+ Organization’ option to add your Azure DevOps Organization details as shown in the below screenshot.

Now switch to your dev.azure.com and select your organization as shown in the below screen shot. Click on ‘Organization settings’ options to enable your extension.

Now Click on ‘Extensions’ options and go to ‘Shared’ option and click on ‘Install’ button. Make sure this extension will be available only to your current organization.

Select your Azure DevOps Organization from dropdown shown in the below screenshot and click on ‘Install’ button.

Now our new extension was enabled as shown in the below screenshot.

 

Now Click on ‘My AI Bot’ option in Repos option, you can give any name for your extension and make sure there is scope to develop extension for Boards, Repose, Pipelines, Test Plans & Artifacts.

 

Now we can achieve this new idea to adopt Microsoft AI chat bots on our extensions like Azure DevOps, Visual Studio SDK, Visual Studio Code etc.

...Happy Chatting with AI Bots