- \n
- Visual Studio Code<\/a><\/li>\n
- Teams Toolkit extension for Visual Studio Code<\/a><\/li>\n
- GitHub Copilot extension for Visual Studio Code<\/a> (Start with the free trial)<\/li>\n<\/ul>\n
Get started<\/h2>\n
Sample app in Codespaces<\/h3>\n
Go to this documentation link <\/a> and open the sample in GitHub Codespaces.<\/p>\n
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<\/strong> button in the documentation and create a new codespace.<\/p>\n
![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-1.png\")
<\/p>\nYour 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\u2019t worry about this scenario – we are going to make it more useful to search for products instead of the npm packages data.<\/p>\n
Tool to run the Teams app<\/h3>\n
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\u2019ll need a Microsoft 365 account where you have permission to install new apps. If you don’t have one, you\u2019ll need to create a test tenant.<\/p>\n
Select the Teams icon on the extension bar and go to Accounts<\/strong> and sign into Microsoft 365 using your developer tenant account (see steps
![](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-2.png\")
and ![](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-3.png\")
). if you don\u2019t have one, get one by selecting Create a Microsoft 365 test tenant<\/strong>:<\/p>\n![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-4.png\")
<\/p>\nRun the sample<\/h3>\n
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<\/strong> to start debugging and running the app locally.<\/p>\n
![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/a-screenshot-of-a-computer-description-automatica.png\")
<\/p>\nThe 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<\/strong> button.<\/p>\n
![\"A](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-6.png\")
<\/p>\nIf 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.<\/p>\n
![\"A](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/a-screenshot-of-a-computer-description-automatica-1.png\")
<\/p>\nCurrently, 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.<\/p>\n
![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-8.gif\")
<\/p>\nAI pair programming<\/h3>\n
Now comes the exciting part \u2013 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.<\/p>\n
In the Extension pane as show in
![](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-9.png\")
, type copilot in the search box as shown in ![](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-10.png\")
. Select GitHub Copilot.<\/strong><\/p>\n![\"Cropped](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/word-image-14900-11.png\")
<\/p>\nLet’s jump straight into refactoring the code! Go to the file teamsBot.js<\/em> and locate the function handleTeamsMessagingExtensionQuery<\/strong>.<\/p>\n
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.<\/p>\n
To do this, go ahead and create a new file named products.js<\/em>, where we’ll store and export our mock product data to be used in the service. Once the file is ready, let\u2019s 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.<\/p>\n
AI pair programmer writes code for you line by line. You\u2019ll just need to keep tabbing to add the prompted code until it is complete.<\/p>\n
Prompt:<\/strong> \/\/ create a const array of products with length 3 and properties: id, name, description<\/span><\/p>\n
Output: <\/strong><\/p>\n
https:\/\/gist.github.com\/rabwill\/9fc7bbda83c77decead232f95a37ab02<\/p>\n
Next write a prompt to export the array.<\/p>\n
- Teams Toolkit extension for Visual Studio Code<\/a><\/li>\n
![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/08\/Products-ME-1.gif\")
<\/a><\/p>\n