Giter Site home page Giter Site logo

githubuniverseworkshops / my-universe-copilot Goto Github PK

View Code? Open in Web Editor NEW
13.0 18.0 3.0 4.12 MB

๐ŸŽ“ Source code and instructions for the workshop "Build and deploy your own copilot with GitHub Copilot"

Home Page: https://github.com/githubuniverseworkshops/workshop-build-deploy-your-own-copilot

JavaScript 100.00%
ai azure chatbots github-copilot github-universe-2023-workshop

my-universe-copilot's Introduction

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.

๐Ÿ’ก Play around with different prompts and see how it affects the accuracy of the GitHub Copilot suggestions. E.g. Copilot CLI offers a ๐Ÿ“ 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

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

โณ ~2min

  • Click Use this template ๐Ÿ‘‰ 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

โณ ~3min

  • In the newly created repo, click Code ๐Ÿ‘‰ Codespaces ๐Ÿ‘‰ [ellipsis menu] ๐Ÿ‘‰ New with options ๐Ÿ‘‰ Ensure that Dev container configuration is set to Default project configuration ๐Ÿ‘‰ 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

โณ ~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

โณ ~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

โณ ~5min

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

โณ ~5min

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

โณ ~1min

Cheatsheet
Command
az group create --name "Universe2023CopilotRG" --location "westus"
Expected output
{
  "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG",
  "location": "westus",
  "managedBy": null,
  "name": "Universe2023CopilotRG",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": null,
  "type": "Microsoft.Resources/resourceGroups"
}

3. Create an Azure Identity Resource

โณ ~1min

Important

The following output data from this command will be needed later:

  • clientId
  • tenantId
Cheatsheet
Command
az identity create --resource-group "Universe2023CopilotRG" --name "Universe2023CopilotId"
Expected output
{
  "clientId": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
  "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourcegroups/Universe2023CopilotRG/providers/Microsoft.ManagedIdentity/userAssignedIdentities/Universe2023CopilotId",
  "location": "westus",
  "name": "Universe2023CopilotId",
  "principalId": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
  "resourceGroup": "Universe2023CopilotRG",
  "systemData": null,
  "tags": {},
  "tenantId": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
  "type": "Microsoft.ManagedIdentity/userAssignedIdentities"
}

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".

โณ ~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
Cheatsheet
Command
az deployment group create --resource-group "Universe2023CopilotRG" --template-file ./templates/template-appService.json --parameters ./templates/parameters-template-appService.json
Expected output
{
  "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG/providers/Microsoft.Resources/deployments/template-appService",
  "location": null,
  "name": "template-appService",
  "properties": {
    "correlationId": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
    "debugSetting": null,
    "dependencies": [
      {
        "dependsOn": [
          {
            "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG/providers/Microsoft.Web/serverfarms/Universe2023CopilotASP",
            "resourceGroup": "Universe2023CopilotRG",
            "resourceName": "Universe2023CopilotASP",
            "resourceType": "Microsoft.Web/serverfarms"
          }
        ],
        "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG/providers/Microsoft.Web/sites/StebjeUniverse2023CopilotAS",
        "resourceGroup": "Universe2023CopilotRG",
        "resourceName": "StebjeUniverse2023CopilotAS",
        "resourceType": "Microsoft.Web/sites"
      }
    ],
    "duration": "PT36.4806494S",
    "error": null,
    "mode": "Incremental",
    "onErrorDeployment": null,
    "outputResources": [
      {
        "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG/providers/Microsoft.Web/serverfarms/Universe2023CopilotASP",
        "resourceGroup": "Universe2023CopilotRG"
      },
      {
        "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG/providers/Microsoft.Web/sites/StebjeUniverse2023CopilotAS",
        "resourceGroup": "Universe2023CopilotRG"
      }
    ],
    "outputs": null,
    "parameters": {
      "appId": {
        "type": "String",
        "value": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
      },
      "appSecret": {
        "type": "String",
        "value": ""
      },
      "appServiceName": {
        "type": "String",
        "value": "StebjeUniverse2023CopilotAS"
      },
      "appType": {
        "type": "String",
        "value": "UserAssignedMSI"
      },
      "existingAppServicePlanLocation": {
        "type": "String",
        "value": ""
      },
      "existingAppServicePlanName": {
        "type": "String",
        "value": ""
      },
      "newAppServicePlanLocation": {
        "type": "String",
        "value": "westus"
      },
      "newAppServicePlanName": {
        "type": "String",
        "value": "Universe2023CopilotASP"
      },
      "newAppServicePlanSku": {
        "type": "Object",
        "value": {
          "capacity": 1,
          "family": "S",
          "name": "S1",
          "size": "S1",
          "tier": "Standard"
        }
      },
      "tenantId": {
        "type": "String",
        "value": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
      },
      "umsiName": {
        "type": "String",
        "value": "Universe2023CopilotId"
      },
      "umsiResourceGroupName": {
        "type": "String",
        "value": "Universe2023CopilotRG"
      }
    },
    "parametersLink": null,
    "providers": [
      {
        "id": null,
        "namespace": "Microsoft.Web",
        "providerAuthorizationConsentState": null,
        "registrationPolicy": null,
        "registrationState": null,
        "resourceTypes": [
          {
            "aliases": null,
            "apiProfiles": null,
            "apiVersions": null,
            "capabilities": null,
            "defaultApiVersion": null,
            "locationMappings": null,
            "locations": [
              "westus"
            ],
            "properties": null,
            "resourceType": "serverfarms",
            "zoneMappings": null
          },
          {
            "aliases": null,
            "apiProfiles": null,
            "apiVersions": null,
            "capabilities": null,
            "defaultApiVersion": null,
            "locationMappings": null,
            "locations": [
              "westus"
            ],
            "properties": null,
            "resourceType": "sites",
            "zoneMappings": null
          }
        ]
      }
    ],
    "provisioningState": "Succeeded",
    "templateHash": "xxxx",
    "templateLink": null,
    "timestamp": "2023-10-19T17:55:24.012856+00:00",
    "validatedResources": null
  },
  "resourceGroup": "Universe2023CopilotRG",
  "tags": null,
  "type": "Microsoft.Resources/deployments"
}

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".

โณ ~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
Cheatsheet
Command
az deployment group create --resource-group "Universe2023CopilotRG" --template-file ./templates/template-botResource.json --parameters ./templates/parameters-template-botResource.json
Expected output
{
  "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG/providers/Microsoft.Resources/deployments/template-botResource",
  "location": null,
  "name": "template-botResource",
  "properties": {
    "correlationId": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
    "debugSetting": null,
    "dependencies": [],
    "duration": "PT7.9925706S",
    "error": null,
    "mode": "Incremental",
    "onErrorDeployment": null,
    "outputResources": [
      {
        "id": "/subscriptions/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/resourceGroups/Universe2023CopilotRG/providers/Microsoft.BotService/botServices/StebjeUniverse2023CopilotBot",
        "resourceGroup": "Universe2023CopilotRG"
      }
    ],
    "outputs": null,
    "parameters": {
      "appId": {
        "type": "String",
        "value": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
      },
      "appType": {
        "type": "String",
        "value": "UserAssignedMSI"
      },
      "azureBotId": {
        "type": "String",
        "value": "StebjeUniverse2023CopilotBot"
      },
      "azureBotRegion": {
        "type": "String",
        "value": "global"
      },
      "azureBotSku": {
        "type": "String",
        "value": "F0"
      },
      "botEndpoint": {
        "type": "String",
        "value": "https://StebjeUniverse2023CopilotAS.azurewebsites.net/api/messages"
      },
      "tenantId": {
        "type": "String",
        "value": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
      },
      "umsiName": {
        "type": "String",
        "value": "Universe2023CopilotId"
      },
      "umsiResourceGroupName": {
        "type": "String",
        "value": "Universe2023CopilotRG"
      }
    },
    "parametersLink": null,
    "providers": [
      {
        "id": null,
        "namespace": "Microsoft.BotService",
        "providerAuthorizationConsentState": null,
        "registrationPolicy": null,
        "registrationState": null,
        "resourceTypes": [
          {
            "aliases": null,
            "apiProfiles": null,
            "apiVersions": null,
            "capabilities": null,
            "defaultApiVersion": null,
            "locationMappings": null,
            "locations": [
              "global"
            ],
            "properties": null,
            "resourceType": "botServices",
            "zoneMappings": null
          }
        ]
      }
    ],
    "provisioningState": "Succeeded",
    "templateHash": "xxxxxxx",
    "templateLink": null,
    "timestamp": "2023-10-19T18:07:03.391786+00:00",
    "validatedResources": null
  },
  "resourceGroup": "Universe2023CopilotRG",
  "tags": null,
  "type": "Microsoft.Resources/deployments"
}

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

โณ ~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)
Cheatsheet
Command
cp .env.sample .env
.env file content
MicrosoftAppType=UserAssignedMSI
MicrosoftAppId="<IdentityResource_ClientId>"
MicrosoftAppPassword=
MicrosoftAppTenantId="<IdentityResource_TenantId>"
OpenApiKey=

Build & Deployment

1. Prepare project files for deployment

โณ ~3min

Important

  • Install npm dependencies
  • Build web.config file for Azure Bot
  • Compress all the content of the repository to a new .zip file
Cheatsheet
Command
npm install
az bot prepare-deploy --lang JavaScript --code-dir "."
zip -r MyUniverse2023Bot.zip .

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

โณ ~5min

Cheatsheet
Command
az webapp deployment source config-zip --resource-group "Universe2023CopilotRG" --name <appServiceName> --src "./MyUniverse2023Bot.zip"
Expected output
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
{
  "active": true,
  "author": "N/A",
  "author_email": "N/A",
  "complete": true,
  "deployer": "ZipDeploy",
  "end_time": "2023-10-19T18:32:35.3674841Z",
  "id": "xxxxxxx",
  "is_readonly": true,
  "is_temp": false,
  "last_success_end_time": "2023-10-19T18:32:35.3674841Z",
  "log_url": "https://stebjeuniverse2023copilotas.scm.azurewebsites.net/api/deployments/latest/log",
  "message": "Created via a push deployment",
  "progress": "",
  "provisioningState": "Succeeded",
  "received_time": "2023-10-19T18:30:26.6594544Z",
  "site_name": "StebjeUniverse2023CopilotAS",
  "start_time": "2023-10-19T18:30:26.8157076Z",
  "status": 4,
  "status_text": "",
  "url": "https://stebjeuniverse2023copilotas.scm.azurewebsites.net/api/deployments/latest"
}

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

โณ ~2min

Cheatsheet
Command
az webapp config appsettings set --resource-group "Universe2023CopilotRG" --name <appServiceName> --settings WEBSITE_NODE_DEFAULT_VERSION=18.12.1
Expected output
[
  {
    "name": "WEBSITE_NODE_DEFAULT_VERSION",
    "slotSetting": false,
    "value": "18.12.1"
  },
  {
    "name": "MicrosoftAppType",
    "slotSetting": false,
    "value": "UserAssignedMSI"
  },
  {
    "name": "MicrosoftAppId",
    "slotSetting": false,
    "value": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
  },
  {
    "name": "MicrosoftAppPassword",
    "slotSetting": false,
    "value": ""
  },
  {
    "name": "MicrosoftAppTenantId",
    "slotSetting": false,
    "value": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
  }
]

Testing

1. Test your bot using the Azure Web Chat

โณ ~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

โณ ~5min

Cheatsheet
Command
az group delete --name "Universe2023CopilotRG"
Expected output
<blank>

2. List current Codespaces and delete the correct one

โณ ~2min

Note

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

Cheatsheet
Command
gh codespace list
gh codespace delete --repo <user/repo>
Expected output
NAME                               DISPLAY NAME      REPOSITORY                    BRANCH  STATE     CREATED AT
ubiquitous-cod-9ww4jv5796fxj       ubiquitous cod    stebje/my-universe-copilot2   main    Shutdown  9d
1 codespace(s) deleted successfully

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 ๐Ÿ˜‰

my-universe-copilot's People

Contributors

stebje avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

my-universe-copilot's Issues

Prerequisites for the Build and Deploy Your Own GitHub Copilot 2023 Universe Workshop

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.