Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/steps/3-copilot-edits.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ Let's use Copilot to change the website to display signed up students under each

1. With our new feature complete, please **commit** and **push** the changes to GitHub.

1. Wait a moment for Mona to check your work, provide feedback, and share the final lesson. Almost done!
1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson.


<details>
Expand Down
104 changes: 44 additions & 60 deletions .github/steps/4-copilot-agent-mode.md
Original file line number Diff line number Diff line change
@@ -1,49 +1,50 @@
### :keyboard: Bonus Activity - GitHub Copilot Agent Mode

> 🪧 **Note:** This bonus activity is optional and not graded.
## Step 4: Engage Hyperdrive - Copilot Agent Mode 🚀

### 📖 Theory: What is Copilot Agent Mode?

Copilot **Agent Mode** extends beyond single-pass edits: it can plan, execute, inspect results (including build/terminal output), and iteratively refine its own work without you re‑prompting each micro-step.

**How it differs from Edit Mode** (at a glance):

| Ask / Inline Chat | Edit Mode | Agent Mode |
| ------------------- | ------------------------------- | --------------------------------------- |
| One answer/snippet | Multi‑file patch (single cycle) | Multi‑step adaptive workflow |
| You curate context | You supply context files | Agent may add/read files & run commands |
| No self‑review loop | Minimal implicit review | Explicit feedback & retry loop |
Copilot [agent mode](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode) is the next evolution in AI-assisted coding. Acting as an autonomous peer programmer, it performs multi-step coding tasks at your command.

#### Key capabilities
Copilot Agent Mode responds to compile and lint errors, monitors terminal and test output, and auto-corrects in a loop until the task is completed.

- Feedback loop: can detect errors or incomplete changes and attempt fixes automatically.
- Multi-step reasoning: chains several edit + verify cycles toward a broader goal.
- Tool usage: may run commands / examine terminal output (depending on your environment & permissions).
- Cross-file consistency: attempts to coordinate backend + frontend or related modules.
#### Edit Mode vs Agent Mode (at a glance)

#### Good use cases
| Aspect | ✏️ Edit Mode | 👩‍🚀 Agent Mode |
| -------------- | --------------------------------- | -------------------------------------------------------------------------------- |
| Context scope | Only the files you explicitly add | May read/add additional files & surfaces as needed |
| Self‑review | Minimal (you drive iteration) | Built‑in feedback & retry loop on errors/failures |
| Change scope | Highly scoped & surgical | Broader; may touch related layers for consistency |
| When to choose | You know exactly what to change | Goal is broader or uncertain; requires exploration |
| Tool calling | None (you run commands manually) | Can invoke tools (read/edit files, run commands, inspect terminal & test output) |

- Coordinated refactors (model + route + tests)
- Adding “glue” code across layers
- Resolving a bug that requires reading logs or compiler errors
#### 🧰 Agent Mode Tools

#### Limitations / cautions
Agent mode uses tools to accomplish specialized tasks while processing a user request. Examples of such tasks are:

- Can produce more changes than you expect—always review the diff before keeping.
- Longer runs may drift; give it concise, outcome-focused follow-ups (“The API returns 500; inspect server logs and fix”).
- Side-effectful commands (like installing services) may fail or leave partial state—treat them as experiments.
- Finding relevant files to complete your prompt
- Fetching contents of a webpage
- Running tests or terminal commands

> 💡 **Tip:** If Agent Mode starts to feel “lost,” stop, accept/undo what’s useful, and start a fresh Agent session with a clearer goal.
> [!TIP]
> While VS Code provides many built‑in tools you can also provide Agent Mode more domain‑specific powers through **MCP tools**.
>
> Read more on [MCP servers](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) and [GitHub MCP Server](https://github.com/github/github-mcp-server)

Now, let's give **Agent Mode** a try! 👩‍🚀

### :keyboard: Activity: Use Agent mode to add functional "unregister" buttons

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.
Let's experiment with some more open-ended requests that will add more functionality to our web application.

If you don't get the desired results, you can try other models or provided followup feedback to refine the results.

1. Open the **Copilot** chat panel and use the dropdown menu to switch to **Agent** mode.

<img width="250" alt="image" src="https://github.com/user-attachments/assets/8c537e2a-d89a-4908-8d35-77c7f0830805" />
<img width="250" alt="agent mode" src="https://github.com/user-attachments/assets/9bb85530-77a1-4d47-86b2-99769ce197db" />

1. Click on the **Tools** icon and explore all Tools currently available to Copilot Agent Mode.

<img width="250" alt="tools icon" src="https://github.com/user-attachments/assets/8f73400a-2647-4b28-b52b-721b8cf348d8" />


1. Time for our test! Let's ask Copilot to add functionality for removing participants.

Expand All @@ -54,8 +55,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 probably 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.
The `#codebase` tool is used by Copilot to find relevant files, code chunks that are relevant to the task at hand.

> 🪧 **Note:** In this lab we explicitly include the `#codebase` tool to get the most repeatable results.
> Feel free to try the prompt **without** `#codebase` and observe whether Agent Mode decides to gather broader project context on its own.

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.

Expand All @@ -64,48 +67,29 @@ Let's experiment with some more open-ended requests that will add more functiona
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
>
> ```prompt
> #codebase I've noticed there seems to be a bug.
> 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.

### :keyboard: Activity: Use Agent mode to change the database! 🧑‍🚀
### :keyboard: Activity: Use Agent mode to get test coverage 🧑‍🚀

Just for fun, let's try something even more difficult and open-ended to see what happens!
Your backend is now feature‑rich—but still has zero test coverage. Use Copilot **Agent Mode** to add test dependencies, scaffold starter tests and run them.

> [!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.

1. (optional) If it is available for you, you might try another model such as `Claude 3.5 Sonnet`.

<img width="250" alt="image" src="https://github.com/user-attachments/assets/16125b88-8428-4f62-9c1b-5761e26ed888" />
1. Ask Copilot in **Agent mode** to set up and run tests for your backend.

1. Ask Copilot to install a local database service.

> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
> ![Static Badge](https://img.shields.io/badge/-Prompt-placeholder?style=social&logo=github%20copilot)
>
> ```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.
> Add fastapi tests using pytest in a new tests directory and run them.
> Make sure to add any new dependencies to requirements.txt
> ```

- We purposely 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. As Copilot works on your prompt, different tools might need your approval.

1. Ask Copilot to change our app to use the database service. 🤯
**🎯 Goal: Get all tests passing (green) — aim for a clean run! ✅**

> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
>
> ```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 pre-populate the database with the existing hardcoded json activities, keeping the activity name as the key.
> ```
> 🪧 **Note:** Copilot may one-shot this with the initial prompt or need more guidance from you.

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! 🧑‍🚀 🚀
1. Once the tests are passing - **commit** and **push** all changes to your `accelerate-with-copilot` branch to progress to the last step! Almost done!
8 changes: 5 additions & 3 deletions .github/steps/5-copilot-on-github.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
## Step 4: Using GitHub Copilot within a pull request
## Step 5: Using GitHub Copilot within a pull request

Congratulations! You are finished with coding for this exercise (and VS Code). Now it's time to merge our work. :tada: To wrap up, let's learn about two limited-access Copilot features that can speed up our pull requests!

### 📖 Theory: GitHub Copilot for pull requests

#### Copilot pull request summaries

Typically, you would review your notes and commit messages then summarize them for your pull request description. This may take some time, especially if commit messages are inconsistent or code is not documented well. Fortunately, Copilot can consider all changes in the pull request and provide the important highlights, and with references too!
Expand All @@ -26,9 +28,9 @@ Both **Copilot pull request summaries** and **Copilot code review** have limited

- **base:** `main`
- **compare:** `accelerate-with-copilot`
- **title:** `Add registration validation and more activities`
- **title:** `Improve student activity registration system`

1. (Optional) In the **Add a description** area, enter edit mode if needed, then click the **Copilot actions** icon and **Summary** action. After a moment, Copilot will add a description. :memo:
1. (Optional) In the PR description toolbar click the **Copilot** icon and **Summary** action. After a moment, Copilot will add a description based on your changes. :memo:

<img alt="Copilot summarize button " width="300px" src="https://github.com/user-attachments/assets/3fc5fab4-db03-4ab8-8a16-cdd71ec2ded0">

Expand Down
14 changes: 8 additions & 6 deletions .github/steps/x-review.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ _Congratulations, you've completed this exercise and learned a lot about GitHub

<img src="https://octodex.github.com/images/jetpacktocat.png" alt=celebrate width=200 align=right>

Here's a recap of your accomplishments:
Here's a recap of the GitHub Copilot features you learned:

<!-- TODO: UPDATE WITH AGENT MODE -->
- Set up your GitHub Codespace and environment.
- Learned how to use Copilot inline suggestions, Chat, and Edits.
- Used Copilot to generate commit messages and pull request summaries.
- Learned how to request Copilot to review your code.
- **Ask Mode**: Used @workspace to explore and understand your codebase
- **Inline suggestions**: Completed code with Tab acceptance
- **Inline Chat**: Generated code and data with Ctrl/Cmd + I
- **Edit Mode**: Made multi-file changes with targeted prompts
- **Agent Mode**: Built features and tests autonomously
- **GitHub integration**: Generated commit messages, PR summaries, and code reviews

### What's next?

- Check out the other [GitHub Skills exercises](https://learn.github.com/skills).
- Learn how to [Integrate MCP with Copilot](https://github.com/skills/integrate-mcp-with-copilot) to give Copilot extra capabilities!
- Tailor Copilot to your project needs in [Customize your GitHub Copilot Experience](https://github.com/skills/customize-your-github-copilot-experience)
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/1-preparing.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Step 1 # Preparing to make your extension
name: Step 1

on:
push:
Expand Down Expand Up @@ -99,10 +99,10 @@ jobs:

steps:
- name: Checkout
uses: actions/checkout@v4
uses: actions/checkout@v5

- name: Get response templates
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
Expand Down
7 changes: 3 additions & 4 deletions .github/workflows/2-first-introduction.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
name: Step 2 # Copilot chat

name: Step 2
on:
push:
branches:
Expand Down Expand Up @@ -96,10 +95,10 @@ jobs:

steps:
- name: Checkout
uses: actions/checkout@v4
uses: actions/checkout@v5

- name: Get response templates
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/3-copilot-edits.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Step 3 # Copilot edits
name: Step 3

on:
push:
Expand Down Expand Up @@ -106,10 +106,10 @@ jobs:

steps:
- name: Checkout
uses: actions/checkout@v4
uses: actions/checkout@v5

- name: Get response templates
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
Expand Down
92 changes: 85 additions & 7 deletions .github/workflows/4-copilot-agent-mode.yml
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
name: Step 4 # Copilot Agent Mode
name: Step 4

on:
push:
branches:
- "accelerate-with-copilot"
paths:
- "src/static/**"

permissions:
contents: read
Expand All @@ -20,20 +18,100 @@ jobs:
name: Find Exercise Issue
uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0

check_step_work:
name: Check step work
runs-on: ubuntu-latest
needs: [find_exercise]
env:
ISSUE_REPOSITORY: ${{ github.repository }}
ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }}

steps:
- name: Checkout
uses: actions/checkout@v5

- name: Get response templates
uses: actions/checkout@v5
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
ref: v0.7.0

- name: Find last comment
id: find-last-comment
uses: peter-evans/find-comment@v3
with:
repository: ${{ env.ISSUE_REPOSITORY }}
issue-number: ${{ env.ISSUE_NUMBER }}
direction: last

- name: Update comment - checking work
uses: GrantBirki/comment@v2.1.1
with:
repository: ${{ env.ISSUE_REPOSITORY }}
issue-number: ${{ env.ISSUE_NUMBER }}
comment-id: ${{ steps.find-last-comment.outputs.comment-id }}
file: exercise-toolkit/markdown-templates/step-feedback/checking-work.md
edit-mode: replace

# START: Check practical exercise

- name: Check for pytest keyphrase in requirements.txt
id: check-for-pytest
continue-on-error: true
uses: skills/action-keyphrase-checker@v1
with:
text-file: requirements.txt
keyphrase: pytest

- name: Check if tests directory exists
id: check-tests-dir
continue-on-error: true
run: |
if find . -name "tests" -type d | grep -q .; then
echo "Tests directory found"
exit 0
else
echo "Tests directory not found"
exit 1
fi

- name: Update comment - step results
uses: GrantBirki/comment@v2.1.1
with:
repository: ${{ env.ISSUE_REPOSITORY }}
issue-number: ${{ env.ISSUE_NUMBER }}
comment-id: ${{ steps.find-last-comment.outputs.comment-id }}
edit-mode: replace
file: exercise-toolkit/markdown-templates/step-feedback/step-results-table.md
vars: |
step_number: 4
results_table:
- description: "Checked for pytest in requirements.txt"
passed: ${{ steps.check-for-pytest.outcome == 'success' }}
- description: "Checked if tests are added in a separate directory"
passed: ${{ steps.check-tests-dir.outcome == 'success' }}

# END: Check practical exercise

- name: Fail job if not all checks passed
if: contains(steps.*.outcome, 'failure')
run: exit 1

post_next_step_content:
name: Post next step content
needs: [find_exercise]
needs: [find_exercise, check_step_work]
runs-on: ubuntu-latest
env:
ISSUE_REPOSITORY: ${{ github.repository }}
ISSUE_NUMBER: ${{ needs.find_exercise.outputs.issue-number }}

steps:
- name: Checkout
uses: actions/checkout@v4
uses: actions/checkout@v5

- name: Get response templates
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
Expand All @@ -53,7 +131,7 @@ jobs:
with:
repository: ${{ env.ISSUE_REPOSITORY }}
issue-number: ${{ env.ISSUE_NUMBER }}
file: ${{ env.STEP_4_FILE }}
file: ${{ env.STEP_5_FILE }}

- name: Create comment - watching for progress
uses: GrantBirki/comment@v2.1.1
Expand Down
Loading
Loading