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.

Microsoft

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.

Resource groups

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.

Create a resource group

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

Validation passed

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.

Add

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

Web app bot

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.

Fill details

Click on create button

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
    AXRG bot adoption

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

Test in web chat

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.

Channels

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.

Click on done

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.

VS code

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

Create publisher

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

Extension

Before

Botinextension

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

Mybot

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.

Azure

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.

Upload

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

Manage publisher and extension

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

View

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

Get it free

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.

Share or unshare

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

Vegit

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.

Organization

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.

Install

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

Select an Azure

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

My AI Bot

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.

Repos

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


Similar Articles