Skip to content

Commit affcaac

Browse files
chriswblakeFidelusAleksander
chriswblake
and
FidelusAleksander
authored
feat: Add preview content about agent mode (#13)
Co-authored-by: Aleksander Fidelus <[email protected]>
1 parent e86de78 commit affcaac

File tree

5 files changed

+220
-5
lines changed

5 files changed

+220
-5
lines changed

‎.github/steps/3-copilot-edits.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,9 @@ In our previous steps, we used features of Copilot that require more hands-on gu
4040
> <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
4141
>
4242
> ```prompt
43-
> Hey Copilot, can you please edit the area where activities are
44-
> listed on the website to show what participants are already signed up for that activity.
43+
> Hey Copilot, can you please edit the activity cards to add a participants section.
44+
> It will show what participants that are already signed up for that activity as a bulleted list.
45+
> Remember to make it pretty!
4546
> ```
4647
4748
- An extra icon has appeared next to the file names and open editor windows indicating they have suggested edits.
@@ -56,13 +57,13 @@ In our previous steps, we used features of Copilot that require more hands-on gu
5657
5758
Remember, to add the relevant files to the working set.
5859
59-
![image](https://github.com/user-attachments/assets/bdd7318b-50e3-46d0-88ce-7615f45ce334)
60+
![screenshot of working set](https://github.com/user-attachments/assets/d3eadc8e-583e-4a28-9e82-be128eab843b)
6061
6162
</details>
6263
6364
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.
6465
65-
<img width="350" alt="Activity card with participant info" src="https://github.com/user-attachments/assets/59fe792e-d587-487d-8525-2548ac0a7adf" />
66+
<img width="350" alt="Activity card with participant info" src="https://github.com/user-attachments/assets/c4d56187-4791-4c8e-87d7-d5ce7cdc0bee" />
6667
6768
> **Note:** Your activity card may look different. Copilot won't always produce the same results.
6869
@@ -93,3 +94,10 @@ If you don't get feedback, here are some things to check:
9394
- If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.
9495
9596
</details>
97+
98+
<details>
99+
<summary>Bonus content? 🧐</summary><br/>
100+
101+
> **Insider Tip:** Try adding an issue comment asking @professortocat about Copilot Agent mode. 😉
102+
103+
</details>

‎.github/steps/3b-copilot-agent-mode.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
### :keyboard: Bonus Activity - Preview of GitHub Copilot Agent Mode
2+
3+
Nice! You found this hidden bonus level! 🎮 👾
4+
5+
If you have been keeping an eye on Github, you may have heard about **Agent** mode.
6+
It's a public preview feature for GitHub Copilot.
7+
8+
But... it's only for _Insiders_! 😎🤫
9+
10+
But... good news. Anyone can access the Insiders version if they know the tricks. Yay! 🧐🎉
11+
12+
> [!IMPORTANT]
13+
> This activity is optional and ungraded.
14+
> Since the Insiders version is updated daily, please expect to see differences or have breaking changes.
15+
16+
### What is "Agent" Mode?
17+
18+
**Agent** mode enhances Copilot by automatically providing it feedback, typically the types of feedback you would provide after reviewing Copilot's suggested edits.
19+
20+
**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
21+
typically handle more complex and multi-step tasks.
22+
23+
That's just a brief intro and there is much more to learn, but that's for a dedicated future exercise. (hint)
24+
25+
Now, let's give **Agent** mode a try! 👩‍🚀
26+
27+
### :keyboard: Activity: Switch to Insiders mode
28+
29+
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.
30+
31+
> [!NOTE]
32+
> While switching you will may likely receive an error messages about extension incompatability. This will be resolved after both versions are changed.
33+
34+
1. Ensure you are in a browser-based instance of VS Code (your Codespace).
35+
36+
> **Tip:** This allows switching to **Insiders** mode without installing another version on your local computer.
37+
38+
1. In the bottom left, click the **Manage** icon and select the **Switch to Insiders Version...** option.
39+
40+
<img width="300" alt="image" src="https://github.com/user-attachments/assets/11580b67-9891-4aa9-9a7c-04aff1e7ef9c" />
41+
42+
1. In the left navigation, select the **Extensions** tab.
43+
Find the **GitHub Copilot** entry, click the **Manage** icon, and select **Switch to Pre-Release Version**.
44+
45+
<img width="300" alt="image" src="https://github.com/user-attachments/assets/39e1d9ae-ba50-4cd7-b6b6-eb51aa0a35aa" />
46+
47+
A greeen tag will be added in the top left to indicate the pre-release version.
48+
49+
<img width="160" alt="image" src="https://github.com/user-attachments/assets/21ee8307-0c6d-4e8e-965d-cfd729edfe4c" />
50+
51+
### :keyboard: Activity: Test out Copilot Agent mode! 🧑‍🚀
52+
53+
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.
54+
55+
1. Ensure you using **both** the insiders version of VS Code and the pre-release version of the GitHub Copilot extension.
56+
57+
1. Open the **Copilot** side panel and use the dropdown menu to switch to **Agent** mode.
58+
59+
<img width="250" alt="image" src="https://github.com/user-attachments/assets/201e08ab-14a0-48bf-824e-ba4f8f43f8ab" />
60+
61+
1. Time for our test! Let's ask Copilot to add functionality for removing participants.
62+
63+
> <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
64+
>
65+
> ```prompt
66+
> #codebase Please add a delete icon next to each participant and hide the bullet points.
67+
> When clicked, it will unregister that participant from the activity.
68+
> ```
69+
70+
- 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.
71+
- In **Agent** mode, Copilot reviewed its own work and refined it to ensure all changes were error free and coordinated together.
72+
73+
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.
74+
75+
1. Ask Copilot to fix a registration bug.
76+
77+
> <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
78+
>
79+
> ```prompt
80+
> #codebase I've noticed there seems to be a bug.
81+
> When a participant is registered, the page must be refreshed to see the change on the activity.
82+
> ```
83+
84+
- If you try this prompt in **Edit** mode, it may or may not work.
85+
86+
1. When Copilot is finished, inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback.
87+
88+
### :keyboard: Activity: Test out Copilot Agent mode, _again_! 🧑‍🚀🚀
89+
90+
Just for fun, let's try something even more difficult and open-ended to see what happens!
91+
92+
> [!TIP]
93+
> In our experiments, we got working results most of the time, but not every time.
94+
> You might try other models or pausing to provide Copilot feedback.
95+
96+
1. (optional) If it is available for you, you might try another model such as `Claude 3.5 Sonnet`.
97+
98+
<img width="250" alt="image" src="https://github.com/user-attachments/assets/16125b88-8428-4f62-9c1b-5761e26ed888" />
99+
100+
1. Ask Copilot to install a local database service.
101+
102+
> <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
103+
>
104+
> ```prompt
105+
> Please install a local mongodb server for development reasons.
106+
> Afterward, run a command that lists the collections to verify the service is active and working.
107+
> Do not modify our program yet.
108+
> ```
109+
110+
- We purposly made the default development environment not ready for installing a local MongoDB server.
111+
- You will see Copilot make mistakes, analyze the error messages, and ask to run various extra commands to make the environment suitable. Nice!
112+
113+
1. Ask Copilot to change our app to use the database service. 🤯
114+
115+
> <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
116+
>
117+
> ```prompt
118+
> #codebase I don't like that we are storing the data in memory.
119+
> Let's switch to using mongodb.
120+
> For now use the local development instance.
121+
> Please prepopulate the database with the existing hardcoded json activities, keeping the activity name as the key.
122+
> ```
123+
124+
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! 🧑‍🚀 🚀

‎.github/workflows/2-first-introduction.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,5 +165,6 @@ jobs:
165165
run: |
166166
gh workflow disable "Step 2"
167167
gh workflow enable "Step 3"
168+
gh workflow enable "Step 3b"
168169
env:
169170
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/3b-copilot-agent-mode.yml

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
name: Step 3b # Copilot Agent Mode
2+
3+
on:
4+
issue_comment:
5+
types: [created]
6+
7+
permissions:
8+
contents: read
9+
actions: write
10+
issues: write
11+
12+
env:
13+
# Keywords required in the issue comment to allow this workflow to run
14+
REQUIRED_ISSUE_COMMENT_KEYWORDS: "@professortocat,Agent"
15+
STEP_3B_FILE: ".github/steps/3b-copilot-agent-mode.md"
16+
17+
jobs:
18+
required_issue_comment_keywords:
19+
name: Check issue comment text for required keywords
20+
runs-on: ubuntu-latest
21+
22+
steps:
23+
- name: Stop early if missing the expected keywords, case insensitive
24+
shell: bash
25+
run: |
26+
required_keywords=(${REQUIRED_ISSUE_COMMENT_KEYWORDS//,/ })
27+
comment_body_lower=$(echo "$COMMENT_BODY" | tr '[:upper:]' '[:lower:]')
28+
for keyword in "${required_keywords[@]}"; do
29+
keyword_lower=$(echo "$keyword" | tr '[:upper:]' '[:lower:]')
30+
if [[ ! "$comment_body_lower" =~ $keyword_lower ]]; then
31+
exit 1
32+
fi
33+
done
34+
env:
35+
COMMENT_BODY: ${{ github.event.comment.body }}
36+
37+
find_exercise:
38+
name: Find exercise by issue title
39+
runs-on: ubuntu-latest
40+
41+
outputs:
42+
issue-url: ${{ steps.get-issue-url.outputs.ISSUE_URL }}
43+
44+
steps:
45+
- id: get-issue-url
46+
run: |
47+
# Get the issue url from the event or search for it.
48+
if [ -n "${{ github.event.issue }}" ]; then
49+
issue_url="${{ github.event.issue.html_url }}"
50+
else
51+
issue_url=$(gh issue list --repo $REPO --search "in:title Exercise:" --json url,title --jq '.[].url')
52+
fi
53+
54+
# Save to output
55+
echo "ISSUE_URL=$issue_url" >> $GITHUB_OUTPUT
56+
env:
57+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
58+
REPO: ${{ github.repository }}
59+
60+
post_step_3b_content:
61+
name: Post step 3b content
62+
needs: [find_exercise, required_issue_comment_keywords]
63+
runs-on: ubuntu-latest
64+
env:
65+
ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }}
66+
67+
steps:
68+
- name: Checkout
69+
uses: actions/checkout@v4
70+
71+
- name: Create comment - add step content
72+
run: |
73+
gh issue comment "$ISSUE_URL" \
74+
--body-file "$STEP_3B_FILE"
75+
env:
76+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
77+
78+
- name: Disable current workflow
79+
run: |
80+
gh workflow disable "Step 3b"
81+
env:
82+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/4-copilot-on-github.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ jobs:
165165

166166
- name: Disable current workflow
167167
run: |
168-
gh workflow disable "Step 4a"
168+
gh workflow disable "Step 4"
169169
gh workflow disable "Step 4b"
170170
env:
171171
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

0 commit comments

Comments
 (0)