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 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 the Azure portal, go to this link, and log in with your valid credentials.

It redirects to your Azure portal, here we require a 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 data center failures.

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

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

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

Now fill in Bot Handle (name of your chatbot), Valid Subscription, Resource group, Location, Pricing Tier, App Name (Bot End Point), Bot Template = C#, application insights for Log information about your chatbot endpoint, 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 link your bot endpoint
• Web App: Bot endpoint 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 the ‘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 the ‘Edit’ option to get iframe details with security key details.

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

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

My Code	Commands in other tools	Notes
PS C:\Users\vegit> cd D:\	Cd D:\	Changing the directory to my ‘D’ drive
PS D:\> md NewBotinExtension	md NewBotinExtension	In my ‘D’ drive, I'm creating a new folder with the 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 on 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 the 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 the next process is to generate a VSIX extension file to publish the package in the Visual Studio Marketplace. Follow the below URL to register or enable your accounts. This activity is to get the Publisher ID and replace the 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
manifest version	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	An 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 a VSIX file with the below command syntax using VS Code, PowerShell, Command Prompt, or Developer Command Prompt. At this time, the 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 has been created and we have switched to the Visual Studio marketplace publisher to publish our extension (.vsix file).

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

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

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

Now click on the ‘ …’ 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 to give your extension access to your organization. Now click the ‘…’ symbol and click on the ‘Share/Unshare’ options as shown in the below screenshot.

Now Click on the ‘+ 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 below screenshot. Click on the ‘Organization settings’ options to enable your extension.

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

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

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

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

Now we can achieve this new idea by adopting Microsoft AI chatbots on our extensions like Azure DevOps, Visual Studio SDK, Visual Studio Code, etc.

Happy Chatting with AI Bots