AI pair programming: Build a product inventory app with GitHub Copilot and Teams Toolkit

Rabia Williams

August 8th, 20230 2

Let’s dive into how AI pair programming can help you build your first application for Microsoft Teams specifically designed for a product inventory scenario. We will build a Teams app that allows users to insert business data into a Teams conversation. This is called a search message extension. We won’t be starting from the ground up; instead, we’ll leverage an existing sample app and repurpose it to become our very own “product inventory app.”

Tools you’ll need

Visual Studio Code
Teams Toolkit extension for Visual Studio Code
GitHub Copilot extension for Visual Studio Code (Start with the free trial)

Get started

Sample app in Codespaces

Go to this documentation link and open the sample in GitHub Codespaces.

First, we will open an existing sample project which will form the base of our product inventory app. For that, select the Open in GitHub Codespaces button in the documentation and create a new codespace.

Your codespace will be set up with a pre-loaded app that already has the “Message Extension” capability, enabling you to search npm packages and insert one into a Teams conversation. Don’t worry about this scenario – we are going to make it more useful to search for products instead of the npm packages data.

Tool to run the Teams app

Now for Teams Toolkit, a tool to help you run this app without worrying too much about the plumping that goes on behind the scenes. You’ll need a Microsoft 365 account where you have permission to install new apps. If you don’t have one, you’ll need to create a test tenant.

Select the Teams icon on the extension bar and go to Accounts and sign into Microsoft 365 using your developer tenant account (see steps and ). if you don’t have one, get one by selecting Create a Microsoft 365 test tenant:

Run the sample

Before we proceed with updating the code, it is essential to understand the app’s existing functionality. Select the button next to ‘local’ under Environments to start debugging and running the app locally.

The app will open up a browser tab which has an instance of Teams in a web browser with an install dialog as shown below. Add the app to your teams by selecting Add button.

If for some reason the browser did not open with an install dialog, manually load it using the link highlighted below, which you will find in the Output pane.

Currently, our app is designed to search through the npm packages registry, fetching relevant information and displaying it in a card format. This serves as the base of our app’s functionality. However, we’ll be making a significant update by replacing this npm package search with a product inventory service. The new functionality will allow us to manage and showcase products for our inventory app.

AI pair programming

Now comes the exciting part – the AI pair programming! First, let’s go ahead and install GitHub Copilot extension in VS Code which is our AI-based tool to help write code for our app to transform into a product inventory app.

In the Extension pane as show in , type copilot in the search box as shown in . Select GitHub Copilot.

Let’s jump straight into refactoring the code! Go to the file teamsBot.js and locate the function handleTeamsMessagingExtensionQuery.

In this function, the code fetches data from the npm packages API, which we need to replace with our own custom service that we’ll be writing. Before we dive into that, let’s begin by creating our mock product data.

To do this, go ahead and create a new file named products.js, where we’ll store and export our mock product data to be used in the service. Once the file is ready, let’s get our AI programmer to write mock data for us. For this demo, we are only asking for three products; you can go ahead and ask for ten if you need a longer list of products.

AI pair programmer writes code for you line by line. You’ll just need to keep tabbing to add the prompted code until it is complete.

Prompt: // create a const array of products with length 3 and properties: id, name, description

Output:

Next write a prompt to export the array.

Prompt: // export the products array

Output: module.exports = products;

Finished products.js file will appear the same as what is seen below:

Now it’s time to create the service. Head over to your project’s index.js file, and let’s get started.

To begin, import the necessary products module into the index.js file.

Prompt: // import products from products.js file

Output:

Next, we’ll use this module to set up and handle the service for our product inventory app. Let’s take this step before moving on to the next stage of the implementation.

Prompt: // create an asynchoronous API service to return product searching the products array by name, not case sensitive and includes string

Output:

Next, it’s time to integrate the API for products instead of the npm call. Go to the teamsBot.js file and locate the function handleTeamsMessagingExtensionQuery.

In this function, you’ll find the axios.get call that we need to replace. Comment out the axios.get call and instead write a prompt to fetch data from the newly written API service to get products. This refactoring will enable our app to interact with the products API.

Prompt: // get response to get product based on name from querystring using the product API

Output:

Tidy up the response code below to create the rich card. Unlike the npm API, which returns data.object or object.package, we don’t have such properties in our product service. So, let’s remove the additional properties to ensure the card is generated correctly and avoid any potential errors.

Cleaned handleTeamsMessagingExtensionQuery function looks like this:

Let’s run the app

Now, let’s return to the Teams conversation and give the search-based message extension another go. Type in “pro” and you should see the products showing up. Select and embed the card into the conversation.