From 971ab059ef55f430585e529b6fdee9371e080ccc Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:40:28 +0000 Subject: [PATCH 01/32] feat: Add intro for bonus lesson --- .github/steps/3b-copilot-agent-mode.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .github/steps/3b-copilot-agent-mode.md diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md new file mode 100644 index 0000000..eebc83e --- /dev/null +++ b/.github/steps/3b-copilot-agent-mode.md @@ -0,0 +1,13 @@ +### :keyboard: Bonus Activity - Preview of GitHub Copilot Agent Mode + +Nice! You found this hidden bonus level! 🎮 👾 + +If you have been keeping an eye on Github, you may have heard about **Agent** mode. +It's a public preview feature for GitHub Copilot. + +But... it's only for _Insiders_! 😎🤫 + +But... good news. Anyone can access the Insiders version if they know the tricks. Yay! 🧐🎉 + +> [!IMPORTANT] +> This activity is optional and ungraded. From af472abd8944304d17f2d3495ae4c229e5701650 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:41:01 +0000 Subject: [PATCH 02/32] feat: Add steps to switch to insiders mode --- .github/steps/3b-copilot-agent-mode.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index eebc83e..463c463 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -11,3 +11,24 @@ But... good news. Anyone can access the Insiders version if they know the tricks > [!IMPORTANT] > This activity is optional and ungraded. + +### :keyboard: Activity: Test out Copilot Agent mode! 🧑‍🚀 + +> [!IMPORTANT] +> Copilot Agent mode is only available when using the insiders version of VS Code and the pre-release version of the GitHub Copilot extension. + +1. If needed, use the below steps to switch your VS Code and Copilot extension to the **Insiders** version. + + 1. Ensure you are in a browser-based instance of VS Code (your Codespace). + + > **Tip:** This allows switching to **Insiders** mode without installing another version on your local computer. + + 1. In the bottom left, click the **Manage** icon and select the **Switch to Insiders Version...** option. + + image + + 1. In the left navigation, select the **Extensions** tab. + Find the **GitHub Copilot** entry, click the **Manage** icon, and select **Switch to Pre-Release Version**. + + image + From 300f9b9fbb42b06d69198ff4aa5aff857769c3a5 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:41:53 +0000 Subject: [PATCH 03/32] feat: Add steps to switch to agent mode --- .github/steps/3b-copilot-agent-mode.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 463c463..27c864b 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -32,3 +32,7 @@ But... good news. Anyone can access the Insiders version if they know the tricks image +1. Open the **Copilot Edits** side panel. Use the new dropdown menu to switch to **Agent** mode. + + image + From 6d094475f43f9746719ed5e2eefa38b9ce243483 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:42:30 +0000 Subject: [PATCH 04/32] feat: Add prompt to add delete icons on participants --- .github/steps/3b-copilot-agent-mode.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 27c864b..4881684 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -36,3 +36,15 @@ But... good news. Anyone can access the Insiders version if they know the tricks image +1. Time for a test! Let's ask Copilot to add functionality for removing participants. + + ```Prompt + #codebase Please add a delete icon next to each participant and hide the bullet points. + When clicked, it will unregister that participant from the activity. + ``` + + - If you try this prompt in **Edit** mode, you will find that the changes to the frontend and backend were made in a theoretical way. Although no syntax or runtime errors occurred, the changes were not compatible and didn't achieve the goal. + - In **Agent** mode, Copilot reviewed its own work and refined it to ensure all changes were error free and coordinated together. + +1. When Copilot is finished, restart the debugger and inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback. + From 58ff19cf9e84866ee4908619d1cb83f3a18b6f03 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:42:54 +0000 Subject: [PATCH 05/32] feat: Add prompt to fix bug when adding participants --- .github/steps/3b-copilot-agent-mode.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 4881684..c4014d3 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -48,3 +48,16 @@ But... good news. Anyone can access the Insiders version if they know the tricks 1. When Copilot is finished, restart the debugger and inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback. +1. Ask Copilot to fix a registration bug. + + ```Prompt + #codebase I've noticed there seems to be a bug. + When a participant is registered, the page must be refreshed to see the change on the activity. + ``` + + - If you try this prompt in **Edit** mode, it may or may not work. + +1. When Copilot is finished, inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback. + +1. That's your preview for now. We hope it was fun and please check back soon on the [Skills page](https://skills.github.com) for a dedicated exercise to explore even more of Agent Mode! 🧑‍🚀 🚀 + From 9d8192f34085d5902b88b035d6a167dae3cfba87 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:43:37 +0000 Subject: [PATCH 06/32] feat: Add second activity intro --- .github/steps/3b-copilot-agent-mode.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index c4014d3..4c97534 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -61,3 +61,11 @@ But... good news. Anyone can access the Insiders version if they know the tricks 1. That's your preview for now. We hope it was fun and please check back soon on the [Skills page](https://skills.github.com) for a dedicated exercise to explore even more of Agent Mode! 🧑‍🚀 🚀 +### :keyboard: Activity: Test out Copilot Agent mode, _again_! 🧑‍🚀🚀 + +Just for fun, let's try something even more difficult and see what happens! + +> [!IMPORTANT] +> The below request asks much more of Copilot. +> As such is more open-ended and may not work everytime. + From 8e0cd58f40aa85365767abcafd06064b734fcddc Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:43:48 +0000 Subject: [PATCH 07/32] feat: Add prompt to install mongodb --- .github/steps/3b-copilot-agent-mode.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 4c97534..2dd0461 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -69,3 +69,14 @@ Just for fun, let's try something even more difficult and see what happens! > The below request asks much more of Copilot. > As such is more open-ended and may not work everytime. +1. Ask Copilot to install a local database service. + + ```prompt + Please install a local mongodb server for development reasons. + Afterward, run a command that lists the collections to verify the service is active and working. + Do not modify our program yet. + ``` + + - We purposly made the default development environment not ready for installing a local MongoDB server. + - You will see Copilot make mistakes, analyze the error messages, and ask to run various extra commands to make the environment suitable. Nice! + From dfa999dadc2aa2d2ef18bbefa88f27f56d451d66 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:44:07 +0000 Subject: [PATCH 08/32] feat: Add prompt to modify the app to use mongodb --- .github/steps/3b-copilot-agent-mode.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 2dd0461..5b7e6b4 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -80,3 +80,11 @@ Just for fun, let's try something even more difficult and see what happens! - We purposly made the default development environment not ready for installing a local MongoDB server. - You will see Copilot make mistakes, analyze the error messages, and ask to run various extra commands to make the environment suitable. Nice! +2. Ask Copilot to change our app to use the database service. 🤯 + + ```prompt + #codebase I don't like that we are storing the data in memory. + Let's switch to using mongodb. + For now use the local development instance. + Please prepopulate the database with the existing hardcoded json activities, keeping the the activity name as the key. + ``` From 48fff1a68252eedc24ef917ef78120fd3741597d Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:44:20 +0000 Subject: [PATCH 09/32] docs: Add description of agent mode --- .github/steps/3b-copilot-agent-mode.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 5b7e6b4..44a6767 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -12,6 +12,17 @@ But... good news. Anyone can access the Insiders version if they know the tricks > [!IMPORTANT] > This activity is optional and ungraded. +### What is "Agent" Mode? + +**Agent** mode enhances Copilot by automatically providing it feedback, typically the types of feedback you would provide after reviewing Copilot's suggested edits. + +**Agent** mode gives Copilot a feedback loop, enabling it to inspect its own results for issues, bugs, inconsistency, etc. in the code and even the terminal! This allows it to automatically revise its work in many situations. Similarly this means **Agent** mode can +typically handle more complex and multi-step tasks. + +That's just a brief intro and there is much more to learn, but that's for a dedicated future exercise. (hint) + +Now, let's give **Agent** mode a try! 👩‍🚀 + ### :keyboard: Activity: Test out Copilot Agent mode! 🧑‍🚀 > [!IMPORTANT] From 82fb1a6512950bfd2d5d76ca140f16e1c5f8068b Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 21:44:51 +0000 Subject: [PATCH 10/32] chore: Move finish message to end --- .github/steps/3b-copilot-agent-mode.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 44a6767..9490889 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -70,8 +70,6 @@ Now, let's give **Agent** mode a try! 👩‍🚀 1. When Copilot is finished, inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback. -1. That's your preview for now. We hope it was fun and please check back soon on the [Skills page](https://skills.github.com) for a dedicated exercise to explore even more of Agent Mode! 🧑‍🚀 🚀 - ### :keyboard: Activity: Test out Copilot Agent mode, _again_! 🧑‍🚀🚀 Just for fun, let's try something even more difficult and see what happens! @@ -91,7 +89,7 @@ Just for fun, let's try something even more difficult and see what happens! - We purposly made the default development environment not ready for installing a local MongoDB server. - You will see Copilot make mistakes, analyze the error messages, and ask to run various extra commands to make the environment suitable. Nice! -2. Ask Copilot to change our app to use the database service. 🤯 +1. Ask Copilot to change our app to use the database service. 🤯 ```prompt #codebase I don't like that we are storing the data in memory. @@ -99,3 +97,5 @@ Just for fun, let's try something even more difficult and see what happens! For now use the local development instance. Please prepopulate the database with the existing hardcoded json activities, keeping the the activity name as the key. ``` + +1. That's your preview for now. We hope it was fun and please check back soon on the [Skills page](https://skills.github.com) for a dedicated exercise to explore even more of Agent Mode! 🧑‍🚀 🚀 From 8053e92c0a69e96e049ea5f371940744b47848eb Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:03:43 +0000 Subject: [PATCH 11/32] feat: Add workflow to trigger bonus lesson --- .github/workflows/3b-copilot-agent-mode.yml | 85 +++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 .github/workflows/3b-copilot-agent-mode.yml diff --git a/.github/workflows/3b-copilot-agent-mode.yml b/.github/workflows/3b-copilot-agent-mode.yml new file mode 100644 index 0000000..1303ed5 --- /dev/null +++ b/.github/workflows/3b-copilot-agent-mode.yml @@ -0,0 +1,85 @@ +name: Step 3b # Copilot Agent Mode + +on: + issue_comment: + types: [created] + +permissions: + contents: read + actions: write + issues: write + +env: + # Keywords required in the issue comment to allow this workflow to run + REQUIRED_ISSUE_COMMENT_KEYWORDS: "@professortocat,Agent" + STEP_3B_FILE: ".github/steps/3b-copilot-agent-mode.md" + +jobs: + required_issue_comment_keywords: + name: Check issue comment text for required keywords + runs-on: ubuntu-latest + + steps: + - name: Stop early if missing the expected keywords, case insensitive + shell: bash + run: | + required_keywords=(${REQUIRED_ISSUE_COMMENT_KEYWORDS//,/ }) + comment_body_lower=$(echo "$COMMENT_BODY" | tr '[:upper:]' '[:lower:]') + for keyword in "${required_keywords[@]}"; do + keyword_lower=$(echo "$keyword" | tr '[:upper:]' '[:lower:]') + if [[ ! "$comment_body_lower" =~ $keyword_lower ]]; then + exit 1 + fi + done + env: + COMMENT_BODY: ${{ github.event.comment.body }} + + find_exercise: + if: false + name: Find exercise by issue title + runs-on: ubuntu-latest + + outputs: + issue-url: ${{ steps.get-issue-url.outputs.ISSUE_URL }} + + steps: + - id: get-issue-url + run: | + # Get the issue url from the event or search for it. + if [ -n "${{ github.event.issue }}" ]; then + issue_url="${{ github.event.issue.html_url }}" + else + issue_url=$(gh issue list --repo $REPO --search "in:title Exercise:" --json url,title --jq '.[].url') + fi + + # Save to output + echo "ISSUE_URL=$issue_url" >> $GITHUB_OUTPUT + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + REPO: ${{ github.repository }} + + post_step_3b_content: + if: true + name: Post step 3b content + # needs: [find_exercise] + runs-on: ubuntu-latest + env: + # ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} + ISSUE_URL: "https://github.com/chriswblake/playground/issues/32" + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Create comment - add step content + run: | + gh issue comment "$ISSUE_URL" \ + --body-file "$STEP_3B_FILE" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Disable current workflow + run: | + gh workflow disable "Step 3b" + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} From 126d5cf81a42bad70c92ad61e2ddbffd9a552c57 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:04:15 +0000 Subject: [PATCH 12/32] feat: Modify step 3 to clarify bullet points are desired --- .github/steps/3-copilot-edits.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md index 78ceb2d..74d9661 100644 --- a/.github/steps/3-copilot-edits.md +++ b/.github/steps/3-copilot-edits.md @@ -40,8 +40,8 @@ In our previous steps, we used features of Copilot that require more hands-on gu > **Prompt** > > ```prompt - > Hey Copilot, can you please edit the area where activities are - > listed on the website to show what participants are already signed up for that activity. + > Hey Copilot, can you please edit the activity cards to add a participants section. + > It will show what participants that are already signed up for that activity as a bulleted list. > ``` - An extra icon has appeared next to the file names and open editor windows indicating they have suggested edits. From dac7cb005040dafdad93373a7813441a74e1ceed Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:04:43 +0000 Subject: [PATCH 13/32] feat: Add hint about bonus level to step 3 --- .github/steps/3-copilot-edits.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md index 74d9661..0cadc9d 100644 --- a/.github/steps/3-copilot-edits.md +++ b/.github/steps/3-copilot-edits.md @@ -93,3 +93,11 @@ If you don't get feedback, here are some things to check: - If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. + +
+Bonus content? 🧐
+ +> [!TIP] +> Try adding an issue comment asking @professortocat about Copilot Agent mode. 😉 + +
From aa79844bbdcbd15d672119b1a12d1f8481e38b6a Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:05:25 +0000 Subject: [PATCH 14/32] feat: Modify 2 workflow 2 to enable the bonus content --- .github/workflows/2-first-introduction.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/2-first-introduction.yml b/.github/workflows/2-first-introduction.yml index 901c1c1..45d2f6c 100644 --- a/.github/workflows/2-first-introduction.yml +++ b/.github/workflows/2-first-introduction.yml @@ -165,5 +165,6 @@ jobs: run: | gh workflow disable "Step 2" gh workflow enable "Step 3" + gh workflow enable "Step 3b" env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} From 688864677b8b950ef71a964c25f05829655c985d Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:06:11 +0000 Subject: [PATCH 15/32] fix: cleanup from dev work --- .github/workflows/3b-copilot-agent-mode.yml | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/.github/workflows/3b-copilot-agent-mode.yml b/.github/workflows/3b-copilot-agent-mode.yml index 1303ed5..ada25c5 100644 --- a/.github/workflows/3b-copilot-agent-mode.yml +++ b/.github/workflows/3b-copilot-agent-mode.yml @@ -35,7 +35,6 @@ jobs: COMMENT_BODY: ${{ github.event.comment.body }} find_exercise: - if: false name: Find exercise by issue title runs-on: ubuntu-latest @@ -59,13 +58,11 @@ jobs: REPO: ${{ github.repository }} post_step_3b_content: - if: true name: Post step 3b content - # needs: [find_exercise] + needs: [find_exercise] runs-on: ubuntu-latest env: - # ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} - ISSUE_URL: "https://github.com/chriswblake/playground/issues/32" + ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} steps: - name: Checkout From a6dd60b843f664c7f151946c025f02f9918fafd9 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:16:44 +0000 Subject: [PATCH 16/32] docs: Add note about insiders changing daily. --- .github/steps/3b-copilot-agent-mode.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 9490889..26ff9b9 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -11,6 +11,7 @@ But... good news. Anyone can access the Insiders version if they know the tricks > [!IMPORTANT] > This activity is optional and ungraded. +> Since the Insiders version is updated daily, please expect to see differences. ### What is "Agent" Mode? From 6eca8e8189f6549a96904786d65aff0c43c4a676 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:17:00 +0000 Subject: [PATCH 17/32] docs: Add styling to prompts. --- .github/steps/3b-copilot-agent-mode.md | 46 +++++++++++++++----------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 26ff9b9..e99ac35 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -50,10 +50,12 @@ Now, let's give **Agent** mode a try! 👩‍🚀 1. Time for a test! Let's ask Copilot to add functionality for removing participants. - ```Prompt - #codebase Please add a delete icon next to each participant and hide the bullet points. - When clicked, it will unregister that participant from the activity. - ``` + > **Prompt** + > + > ```prompt + > #codebase Please add a delete icon next to each participant and hide the bullet points. + > When clicked, it will unregister that participant from the activity. + > ``` - If you try this prompt in **Edit** mode, you will find that the changes to the frontend and backend were made in a theoretical way. Although no syntax or runtime errors occurred, the changes were not compatible and didn't achieve the goal. - In **Agent** mode, Copilot reviewed its own work and refined it to ensure all changes were error free and coordinated together. @@ -62,10 +64,12 @@ Now, let's give **Agent** mode a try! 👩‍🚀 1. Ask Copilot to fix a registration bug. - ```Prompt - #codebase I've noticed there seems to be a bug. - When a participant is registered, the page must be refreshed to see the change on the activity. - ``` + > **Prompt** + > + > ```prompt + > #codebase I've noticed there seems to be a bug. + > When a participant is registered, the page must be refreshed to see the change on the activity. + > ``` - If you try this prompt in **Edit** mode, it may or may not work. @@ -81,22 +85,26 @@ Just for fun, let's try something even more difficult and see what happens! 1. Ask Copilot to install a local database service. - ```prompt - Please install a local mongodb server for development reasons. - Afterward, run a command that lists the collections to verify the service is active and working. - Do not modify our program yet. - ``` + > **Prompt** + > + > ```prompt + > Please install a local mongodb server for development reasons. + > Afterward, run a command that lists the collections to verify the service is active and working. + > Do not modify our program yet. + > ``` - We purposly made the default development environment not ready for installing a local MongoDB server. - You will see Copilot make mistakes, analyze the error messages, and ask to run various extra commands to make the environment suitable. Nice! 1. Ask Copilot to change our app to use the database service. 🤯 - ```prompt - #codebase I don't like that we are storing the data in memory. - Let's switch to using mongodb. - For now use the local development instance. - Please prepopulate the database with the existing hardcoded json activities, keeping the the activity name as the key. - ``` + > **Prompt** + > + > ```prompt + > #codebase I don't like that we are storing the data in memory. + > Let's switch to using mongodb. + > For now use the local development instance. + > Please prepopulate the database with the existing hardcoded json activities, keeping the the activity name as the key. + > ``` 1. That's your preview for now. We hope it was fun and please check back soon on the [Skills page](https://skills.github.com) for a dedicated exercise to explore even more of Agent Mode! 🧑‍🚀 🚀 From 1651b10a8876d5be8ca17f1f119ab04266ff82db Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Fri, 21 Mar 2025 22:40:55 +0000 Subject: [PATCH 18/32] fix: alert format doesn't work inside expanding details --- .github/steps/3-copilot-edits.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md index 0cadc9d..3ff7497 100644 --- a/.github/steps/3-copilot-edits.md +++ b/.github/steps/3-copilot-edits.md @@ -97,7 +97,6 @@ If you don't get feedback, here are some things to check:
Bonus content? 🧐
-> [!TIP] -> Try adding an issue comment asking @professortocat about Copilot Agent mode. 😉 +> **Insider Tip:** Try adding an issue comment asking @professortocat about Copilot Agent mode. 😉
From e6a907652798e87f797b85e42835c7682273e73d Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Mon, 24 Mar 2025 12:44:33 -0500 Subject: [PATCH 19/32] fix: Require keywords for workflow to run Co-authored-by: Aleksander Fidelus <63016446+FidelusAleksander@users.noreply.github.com> --- .github/workflows/3b-copilot-agent-mode.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/3b-copilot-agent-mode.yml b/.github/workflows/3b-copilot-agent-mode.yml index ada25c5..a6fd34f 100644 --- a/.github/workflows/3b-copilot-agent-mode.yml +++ b/.github/workflows/3b-copilot-agent-mode.yml @@ -59,7 +59,7 @@ jobs: post_step_3b_content: name: Post step 3b content - needs: [find_exercise] + needs: [find_exercise, required_issue_comment_keywords] runs-on: ubuntu-latest env: ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }} From 37faaaadff87e15d24254a37efffc4edb915478a Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Mon, 24 Mar 2025 23:46:53 +0000 Subject: [PATCH 20/32] fix: Clarify need for both insiders version of vs code and pre-release version of extension. --- .github/steps/3b-copilot-agent-mode.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index e99ac35..02f2bee 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -27,9 +27,9 @@ Now, let's give **Agent** mode a try! 👩‍🚀 ### :keyboard: Activity: Test out Copilot Agent mode! 🧑‍🚀 > [!IMPORTANT] -> Copilot Agent mode is only available when using the insiders version of VS Code and the pre-release version of the GitHub Copilot extension. +> Copilot Agent mode is only available when using both the insiders version of VS Code and the pre-release version of the GitHub Copilot extension. -1. If needed, use the below steps to switch your VS Code and Copilot extension to the **Insiders** version. +1. If needed, use the below steps to switch your VS Code to the **Insiders** version and your Copilot extension to the **Pre-release** version. **Note:** While they are temporarily mixed you will may receive error messages about incompatability. 1. Ensure you are in a browser-based instance of VS Code (your Codespace). @@ -44,7 +44,10 @@ Now, let's give **Agent** mode a try! 👩‍🚀 image -1. Open the **Copilot Edits** side panel. Use the new dropdown menu to switch to **Agent** mode. + A greeen tag will be added in the top left to indicate the pre-release version. + + image + image From 5ab770c44e7522beacf6e0d49a83a99e3359a277 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Mon, 24 Mar 2025 23:47:06 +0000 Subject: [PATCH 21/32] chore: Update agent mode screenshot --- .github/steps/3b-copilot-agent-mode.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 02f2bee..991864e 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -48,8 +48,9 @@ Now, let's give **Agent** mode a try! 👩‍🚀 image +1. Open the **Copilot** side panel and use the dropdown menu to switch to **Agent** mode. - image + image 1. Time for a test! Let's ask Copilot to add functionality for removing participants. From 8b00dae0f1b36cae46107057df56d3555be0ede6 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Mon, 24 Mar 2025 23:47:35 +0000 Subject: [PATCH 22/32] fix: Clarify breaking change nature of preview features. --- .github/steps/3b-copilot-agent-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 991864e..967ec7a 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -11,7 +11,7 @@ But... good news. Anyone can access the Insiders version if they know the tricks > [!IMPORTANT] > This activity is optional and ungraded. -> Since the Insiders version is updated daily, please expect to see differences. +> Since the Insiders version is updated daily, please expect to see differences or have breaking changes. ### What is "Agent" Mode? From 7636d7f2b2b8dbed80d910945bfb119ba3880dcc Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Mon, 24 Mar 2025 23:48:49 +0000 Subject: [PATCH 23/32] fix: typo --- .github/steps/3b-copilot-agent-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 967ec7a..5d1070a 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -108,7 +108,7 @@ Just for fun, let's try something even more difficult and see what happens! > #codebase I don't like that we are storing the data in memory. > Let's switch to using mongodb. > For now use the local development instance. - > Please prepopulate the database with the existing hardcoded json activities, keeping the the activity name as the key. + > Please prepopulate the database with the existing hardcoded json activities, keeping the activity name as the key. > ``` 1. That's your preview for now. We hope it was fun and please check back soon on the [Skills page](https://skills.github.com) for a dedicated exercise to explore even more of Agent Mode! 🧑‍🚀 🚀 From 999a6341f9fa4dea4be15ced1a05b53c30b4ed1a Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 00:40:37 +0000 Subject: [PATCH 24/32] fix: Ensure copilot to update the styling css. --- .github/steps/3-copilot-edits.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md index 3ff7497..68044d9 100644 --- a/.github/steps/3-copilot-edits.md +++ b/.github/steps/3-copilot-edits.md @@ -42,6 +42,7 @@ In our previous steps, we used features of Copilot that require more hands-on gu > ```prompt > Hey Copilot, can you please edit the activity cards to add a participants section. > It will show what participants that are already signed up for that activity as a bulleted list. + > Remember to make it pretty! > ``` - An extra icon has appeared next to the file names and open editor windows indicating they have suggested edits. From e9669502935c222d3962dc7b78d47e2e872e4bfa Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 00:41:35 +0000 Subject: [PATCH 25/32] chore: Move insiders instructions into own activity area --- .github/steps/3b-copilot-agent-mode.md | 27 +++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 5d1070a..5b6ffb6 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -24,30 +24,31 @@ That's just a brief intro and there is much more to learn, but that's for a dedi Now, let's give **Agent** mode a try! 👩‍🚀 -### :keyboard: Activity: Test out Copilot Agent mode! 🧑‍🚀 +### :keyboard: Activity: Switch to Insiders Mode -> [!IMPORTANT] -> Copilot Agent mode is only available when using both the insiders version of VS Code and the pre-release version of the GitHub Copilot extension. +If you are not familiar with the Insiders program, please use the below steps to switch your VS Code to the **Insiders** version and your Copilot extension to the **Pre-release** version. -1. If needed, use the below steps to switch your VS Code to the **Insiders** version and your Copilot extension to the **Pre-release** version. **Note:** While they are temporarily mixed you will may receive error messages about incompatability. +> [!NOTE] +> While switching you will may likely receive an error messages about extension incompatability. This will be resolved after both versions are changed. - 1. Ensure you are in a browser-based instance of VS Code (your Codespace). +1. Ensure you are in a browser-based instance of VS Code (your Codespace). - > **Tip:** This allows switching to **Insiders** mode without installing another version on your local computer. + > **Tip:** This allows switching to **Insiders** mode without installing another version on your local computer. - 1. In the bottom left, click the **Manage** icon and select the **Switch to Insiders Version...** option. +1. In the bottom left, click the **Manage** icon and select the **Switch to Insiders Version...** option. - image + image - 1. In the left navigation, select the **Extensions** tab. - Find the **GitHub Copilot** entry, click the **Manage** icon, and select **Switch to Pre-Release Version**. +1. In the left navigation, select the **Extensions** tab. + Find the **GitHub Copilot** entry, click the **Manage** icon, and select **Switch to Pre-Release Version**. - image + image - A greeen tag will be added in the top left to indicate the pre-release version. + A greeen tag will be added in the top left to indicate the pre-release version. - image + image +### :keyboard: Activity: Test out Copilot Agent mode! 🧑‍🚀 1. Open the **Copilot** side panel and use the dropdown menu to switch to **Agent** mode. image From 1ba1ecbe652cdec89b4636b9203a7c5036df4592 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 00:42:00 +0000 Subject: [PATCH 26/32] feat: Add some intro text to the activity --- .github/steps/3b-copilot-agent-mode.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 5b6ffb6..0059e7a 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -49,6 +49,11 @@ If you are not familiar with the Insiders program, please use the below steps to image ### :keyboard: Activity: Test out Copilot Agent mode! 🧑‍🚀 + +Let's experiment with some more open-ended requests that will add more functionality to our web application. Remember, AI assistants often produce different results, even if the same prompt is provided. If you don't get the desired results, you can try other models or provided followup feedback to refine the results. + +1. Ensure you using **both** the insiders version of VS Code and the pre-release version of the GitHub Copilot extension. + 1. Open the **Copilot** side panel and use the dropdown menu to switch to **Agent** mode. image From c3157a5315d6b7f24574263afec3ddf5c4b00d15 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 00:42:27 +0000 Subject: [PATCH 27/32] fix: update screenshot --- .github/steps/3b-copilot-agent-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 0059e7a..55b4e97 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -56,7 +56,7 @@ Let's experiment with some more open-ended requests that will add more functiona 1. Open the **Copilot** side panel and use the dropdown menu to switch to **Agent** mode. - image + image 1. Time for a test! Let's ask Copilot to add functionality for removing participants. From 17d8fde291f51082b3b9df077332747c4a67736b Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 00:43:06 +0000 Subject: [PATCH 28/32] chore: Wording tweaks --- .github/steps/3b-copilot-agent-mode.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 55b4e97..5ad309b 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -58,7 +58,7 @@ Let's experiment with some more open-ended requests that will add more functiona image -1. Time for a test! Let's ask Copilot to add functionality for removing participants. +1. Time for our test! Let's ask Copilot to add functionality for removing participants. > **Prompt** > @@ -67,10 +67,10 @@ Let's experiment with some more open-ended requests that will add more functiona > When clicked, it will unregister that participant from the activity. > ``` - - If you try this prompt in **Edit** mode, you will find that the changes to the frontend and backend were made in a theoretical way. Although no syntax or runtime errors occurred, the changes were not compatible and didn't achieve the goal. + - If you try this prompt in **Edit** mode, you will propbably find that the changes to the frontend and backend were made in a theoretical way. Although no syntax or runtime errors occurred, the changes were not compatible and didn't achieve the goal. - In **Agent** mode, Copilot reviewed its own work and refined it to ensure all changes were error free and coordinated together. -1. When Copilot is finished, restart the debugger and inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback. +1. When Copilot is finished, restart the debugger and inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback to refined the results. 1. Ask Copilot to fix a registration bug. @@ -87,11 +87,12 @@ Let's experiment with some more open-ended requests that will add more functiona ### :keyboard: Activity: Test out Copilot Agent mode, _again_! 🧑‍🚀🚀 -Just for fun, let's try something even more difficult and see what happens! +Just for fun, let's try something even more difficult and open-ended to see what happens! + +> [!TIP] +> In our experiments, we got working results most of the time, but not every time. +> You might try other models or pausing to provide Copilot feedback. -> [!IMPORTANT] -> The below request asks much more of Copilot. -> As such is more open-ended and may not work everytime. 1. Ask Copilot to install a local database service. From 45f65038b591d7dfad944045bd92df21eafbbcc2 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 00:43:18 +0000 Subject: [PATCH 29/32] feat: Add step to suggest trying another model --- .github/steps/3b-copilot-agent-mode.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 5ad309b..17459d2 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -93,6 +93,9 @@ Just for fun, let's try something even more difficult and open-ended to see what > In our experiments, we got working results most of the time, but not every time. > You might try other models or pausing to provide Copilot feedback. +1. (optional) If it is available for you, let's try a different model such as `Claude 3.5 Sonnet`. + + image 1. Ask Copilot to install a local database service. From e6253054a2e2d6b1175ab06e63cf73205b9268f3 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 01:12:21 +0000 Subject: [PATCH 30/32] fix: Update screenshots --- .github/steps/3-copilot-edits.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md index 68044d9..fc1b341 100644 --- a/.github/steps/3-copilot-edits.md +++ b/.github/steps/3-copilot-edits.md @@ -57,13 +57,13 @@ In our previous steps, we used features of Copilot that require more hands-on gu Remember, to add the relevant files to the working set. - ![image](https://github.com/user-attachments/assets/bdd7318b-50e3-46d0-88ce-7615f45ce334) + ![screenshot of working set](https://github.com/user-attachments/assets/d3eadc8e-583e-4a28-9e82-be128eab843b) 1. Before we simply accept the changes, please check our website again and verify everything is updated as expected. Here is an example of an updated activity card. You may need to restart the app or refresh the page. - Activity card with participant info + Activity card with participant info > **Note:** Your activity card may look different. Copilot won't always produce the same results. From 62caf619e67f8e9da131473c5d22445f7d21c641 Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 01:19:15 +0000 Subject: [PATCH 31/32] chore: wording tweaks --- .github/steps/3b-copilot-agent-mode.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/steps/3b-copilot-agent-mode.md b/.github/steps/3b-copilot-agent-mode.md index 17459d2..dbe878a 100644 --- a/.github/steps/3b-copilot-agent-mode.md +++ b/.github/steps/3b-copilot-agent-mode.md @@ -24,7 +24,7 @@ That's just a brief intro and there is much more to learn, but that's for a dedi Now, let's give **Agent** mode a try! 👩‍🚀 -### :keyboard: Activity: Switch to Insiders Mode +### :keyboard: Activity: Switch to Insiders mode If you are not familiar with the Insiders program, please use the below steps to switch your VS Code to the **Insiders** version and your Copilot extension to the **Pre-release** version. @@ -93,7 +93,7 @@ Just for fun, let's try something even more difficult and open-ended to see what > In our experiments, we got working results most of the time, but not every time. > You might try other models or pausing to provide Copilot feedback. -1. (optional) If it is available for you, let's try a different model such as `Claude 3.5 Sonnet`. +1. (optional) If it is available for you, you might try another model such as `Claude 3.5 Sonnet`. image From 67571d3db4de902dd46a229d6aaa591923fecfaa Mon Sep 17 00:00:00 2001 From: "Christopher W. Blake" Date: Tue, 25 Mar 2025 01:20:55 +0000 Subject: [PATCH 32/32] fix: incorrect workflow name --- .github/workflows/4-copilot-on-github.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/4-copilot-on-github.yml b/.github/workflows/4-copilot-on-github.yml index 8b76e83..496dd0a 100644 --- a/.github/workflows/4-copilot-on-github.yml +++ b/.github/workflows/4-copilot-on-github.yml @@ -165,7 +165,7 @@ jobs: - name: Disable current workflow run: | - gh workflow disable "Step 4a" + gh workflow disable "Step 4" gh workflow disable "Step 4b" env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}