UniverseCopilot

Intro

This repository template contains the source code for the chatbot application, in addition to a step-by-step guide on how to deploy it to Azure.

Please see the main workshop repository githubuniverseworkshops/workshop-build-deploy-your-own-copilot for additional resources and learning material.

[!NOTE] This repo is intended to give an introduction to various GitHub Copilot features, such as Copilot Chat and Copilot CLI. Hence the step-by-step guides below contain the general description of what needs to be done, and Copilot Chat and/or Copilot CLI can support you in generating the necessary commands.

Each step (where applicable) also contains a Cheatsheet which can be used to validate the Copilot suggestion(s) against the correct command.

:bulb: Play around with different prompts and see how it affects the accuracy of the GitHub Copilot suggestions. E.g. Copilot CLI offers a :memo: Revise query option that can be used to refine the suggestion without writing the whole prompt anew.

Features of the chatbot

• Give a greeting when entering the chat
• List markdown files in any public GitHub.com repository as selectable options
• Create an AI-generated summary of the selected markdown file, e.g. a README.md

Overview

• This chatbot source code is based on the Microsoft Bot Framework SDK
• The OpenAI API is used for generating text summaries
• The bot is intended for deployment to Azure

Preparation

The VSCode Codespaces image (.devcontainer/devcontainer.json) has been configured with the following tooling;

• GitHub Copilot (VSCode extension)
• Azure CLI v1.2.1

[!WARNING] Some of the resources used in this workshop might incur additional charges. Please see the main workshop repository githubuniverseworkshops/workshop-build-deploy-your-own-copilot for links to the relevant billing information.

1. Create a new repository from this template

:hourglass_flowing_sand: ~2min

• Click Use this template :point_right: Create a new repository
• Set owner to your personal GitHub user
• Give it a name
• Set visibility to Private
• Click Create repository

2. Create a Codespace using the provided template

:hourglass_flowing_sand: ~3min

• In the newly created repo, click Code :point_right: Codespaces :point_right: [ellipsis menu] :point_right: New with options :point_right: Ensure that Dev container configuration is set to Default project configuration :point_right: Create codespace
• ❗If you're having problems launching the Codespace then you can also clone the repo and continue from here in your IDE
  • There is no need to push changes back to the repo during the workshop

git clone https://github.com/<YOUR_NAME_SPACE>/<YOUR_REPO_NAME>.git
cd <YOUR_REPO_NAME>

3. Configure additional tooling

:hourglass_flowing_sand: ~3min

• Install GitHub Copilot CLI

npm i -g @githubnext/github-copilot-cli

eval "$(github-copilot-cli alias -- "$0")"

• 💡 The command below is necessary if you have not already authorized GitHub Copilot CLI

github-copilot-cli auth

• Verify that Copilot CLI is functioning by asking it a question

?? Which version of node is installed

• Expected output

 ──────────────────── Command ────────────────────

node --version

 ────────────────── Explanation ──────────────────

○ node is the Node.js runtime.
  ◆ --version specifies that we want to print the version of the runtime.

❯ ✅ Run this command
  📝 Revise query
  ❌ Cancel

  This will execute the suggested command in your shell.
  Are you sure? (y/N)

🕛  Hold on, executing commmand...
v20.8.0

4. Authenticate with Azure

:hourglass_flowing_sand: ~2min

• The Azure CLI is pre-installed on the Codespace

az login --use-device-code

• Run the command below to show the list of subscriptions tied to the logged in account

az account list

• Set the desired subscription

az account set --subscription "<subscription_id_OR_name>"

5. (Optional) Create OpenAI API key

:hourglass_flowing_sand: ~5min

• Sign in to your Open AI account
• If you don't have an account, create one here
• Create an API key
  • :bulb: Make sure that you have available an Credit balance for API consumption

Development

[!IMPORTANT] The steps below will require parameter values to be set. Where possible, the following default values have been used in the Cheatsheet commands and in configuration files:

• Universe2023CopilotRG (Azure resource group name)
• westus (location)
• Universe2023CopilotId (Azure Identity resource name)
• Universe2023CopilotASP (Azure App Service Plan name)

If you wish to use different values then keep track of them in order to ensure they are consistently used where needed.

Some values are part of a global namespace and can therefore not be defaulted, for these values only placeholders are provided in the Cheatsheet and configuration files:

• <appServiceName> (Azure App Service name)
• <botName> (Azure Bot resource name/handle)

1. See how much you can learn about the source code and framework(s) with the help of Copilot

:hourglass_flowing_sand: ~5min

2. Create an Azure resource group in the West US region

:hourglass_flowing_sand: ~1min

3. Create an Azure Identity Resource

:hourglass_flowing_sand: ~1min

[!IMPORTANT] The following output data from this command will be needed later:

• clientId
• tenantId

4. Create an Azure App Service resource in the resource group. The ARM template is located in "./templates/template-appService.json" and the input parameters are in "./templates/parameters-template-appService.json".

:hourglass_flowing_sand: ~5min

[!IMPORTANT] Update the following parameters inside ./templates/parameters-template-appService.json:

• appServiceName.value - a globally unique name, e.g. <yourGitHubHandle>Universe2023CopilotAS
• appId.value - the clientId of the identity resource created earlier
• UMSIName.value - the name of the identity resource created earlier
• UMSIResourceGroupName.value - the resourceGroup of the identity resource created earlier
• tenantId.value - the tenantId of the identity resource created earlier

5. Create an Azure Bot resource in the resource group. The ARM template is located in "./templates/template-botResource.json" and the input parameters are in "./templates/parameters-template-botResource.json".

:hourglass_flowing_sand: ~5min

[!IMPORTANT] Update the following parameters inside ./templates/parameters-template-botResource.json:

• azureBotId.value - a globally unique name, e.g. <yourGitHubHandle>Universe2023CopilotBot
• botEndpoint.value - the messaging endpoint for your bot; https://<appServiceName>.azurewebsites.net/api/messages
• appId.value - the clientId of the identity resource created earlier
• UMSIName.value - the name of the identity resource created earlier
• UMSIResourceGroupName.value - the resourceGroup of the identity resource created earlier
• tenantId.value - the tenantId of the identity resource created earlier

6. Update the configuration variables (.env) for the Azure bot

:hourglass_flowing_sand: ~2min

[!IMPORTANT] Update the following values inside .env:

• MicrosoftAppId - the clientId of the identity resource created earlier
• MicrosoftAppTenantId - the tenantId of the identity resource created earlier
• OpenApiKey - your OpenAI API key (if available)

Build & Deployment

1. Prepare project files for deployment

:hourglass_flowing_sand: ~3min

[!IMPORTANT]

• Install npm dependencies
• Build web.config file for Azure Bot
• Compress all the content of the repository to a new .zip file

2. Deploy the Azure Bot as a web app using the zip file as source

:hourglass_flowing_sand: ~5min

3. Update the node version of the Azure Web App to v18.12.1

:hourglass_flowing_sand: ~2min

Testing

1. Test your bot using the Azure Web Chat

:hourglass_flowing_sand: ~5min

• Navigate to Azure --> Bot services --> (your Bot) --> Test in Web Chat
• Ensure that the bot is responding to messages as expected

Clean-up

1. Terminate all resources created within the Azure resource group

:hourglass_flowing_sand: ~5min

2. List current Codespaces and delete the correct one

:hourglass_flowing_sand: ~2min

[!NOTE] Did you know? You can ask for GitHub-specific suggestions in the Copilot CLI by using the gh? prefix.

Troubleshooting

• Please refer to the Microsoft Docs for troubleshooting specific services in scope for this workshop
• Alternatively, let Copilot Chat have a go at the error message :wink: