Exercise: Expand your team with Copilot coding agent

[github-actions]

Expand your team with Copilot coding agent

👋 Hey there @narithkun! Welcome to your Skills exercise!

In this exercise, you'll unlock the next level of your favorite AI-powered coding assistant. Let's learn how to assign Copilot coding tasks directly in GitHub! 💻✨

---

✨ This is an interactive, hands-on GitHub Skills exercise!

As you complete each step, I’ll leave updates in the comments:

• ✅ Check your work and guide you forward
• 💡 Share helpful tips and resources
• 🚀 Celebrate your progress and completion

Let’s get started - good luck and have fun!

_{— Mona}

_{If you encounter any issues along the way please report them here.}

[github-actions]

Step 1: Enable Copilot coding agent

In the Getting Started with GitHub Copilot exercise, we learned how to use Copilot in our code editor to make major upgrades to the Mergington Extracurricular Activities site. 🎻 ⚽️ ♟️

In fact, the site has become a regular school tool now. And, although you like that attention, you just realized a problem! You are about to go on sabbatical next semester!

After some discussion with the principal, he has accepted that new features will be postponed, but... he is worried. They need to at least have something for handling simple changes while you are away.

Let's set our teachers up for success by enrolling Copilot (in our school) to handle updates while we are away.

📸 Website screenshot

📖 Theory: Copilot is now your coding agent

In previous exercises, we used Copilot chat, edits and agent mode. While those were super helpful, Copilot coding agent takes this to the next level by operating entirely on GitHub. No code editor required! 😎

Feature	Copilot in the editor	Copilot coding agent
Interface	Your code editor	Issues and Pull Requests
Work Scope	Local files	Repository
Activation	Inline code suggestions, chat	Issue assignment
Customization	Custom instructions	Custom instructions
MCP Support	Yes	Yes
Vibe Coding	😎	😎

How does it work?

From the contributor perspective, the flow is very similar to a normal workflow.

1. A contributor with write access selects an issue and assigns it to Copilot (instead of themselves).
2. Copilot creates a branch and pull request.
3. Copilot works on the branch in an Actions workflow and provides updates via the pull request conversation tab.
4. When Copilot finishes the issue, the assigner is requested to review.
5. Assigner submits a review, adds comments, or approves.
6. If feedback is provided, Copilot continues working to implement it.
7. The requester repeats above steps until satisfied and then merges.

flowchart LR

    contributor((Contributor))
    copilot((Copilot))
    reviewer((Reviewer))

    issue@{ shape: notch-rect, label: "Issue" }
    repo@{ shape: cyl, label: "Repository" }
    branch@{ shape: subproc, label: "Branch" }
    review@{ shape: diamond, label: "Review" }


    subgraph PR[Pull Request]
        direction TB
        branch
        review
        reviewer
    end


    %% Assign
    contributor gl1@-->|Selects| issue
    issue gl2@-->|Assigns to| copilot

    %% Work
    copilot pl1@-->|Creates| branch
    branch pl3@-->|Starts| review

    %% Review
    reviewer gl3@-->|Provides feedback| review
    review pl4@--> |Implements feedback| branch

    %% Approved
    review gl4@-->|Approves and merges| repo


    classDef users fill:#08872B,stroke:#5FED83,color:#fff
    classDef repo fill:#08872B,stroke:#5FED83,color:#fff
    classDef agent fill:#501DAF,stroke:#C06EFF,color:#fff
    classDef pr fill:#0969DA,stroke:#0349B4,color:#fff

    classDef green-line stroke:#08872B, stroke-width:4px;
    classDef purple-line stroke:#501DAF, stroke-width:4px;

    class contributor,reviewer users
    class copilot agent
    class repo repo

    class gl1,gl2,gl3,gl4 green-line
    class pl1,pl2,pl3,pl4 purple-line

Loading

Is this safe?

Several security precautions have been implemented to help reduce concerns. Here are a few limitations that you might need to consider when asking Copilot to work on an issue.

• Copilot can only make changes on the branch it created and resources provided by the repository.
• Copilot has configurable firewall that restricts access to the internet.
• Only users with write access can assign Copilot an issue.
• Hidden content in issues (like commented code) is ignored.

Important

The full list of mitigations and configuration settings can be found in the Risks & Mitigations documentation.

⌨️ Activity: (optional) Get to know our extracurricular activities site

Note

Opening a development environment and running the application is not necessary to complete this exercise. You can skip this activity if desired.

Show Steps

In other exercises, we have been developing the Extracurricular Activities website. You can follow these steps to start up the development environment and try it out.

1. Right-click the below button to open the Create Codespace page in a new tab. Use the default configuration.

   

2. Wait some time for the environment to be prepared. It will automatically install all requirements and services.

3. Validate the GitHub Copilot and Python extensions are installed and enabled.

   
   
   

4. Try running the the application. In the left sidebar, select the Run and Debug tab and then press the Start Debugging icon.

   📸 Show screenshot

   
   
   🤷 Having trouble?

   
   

   If the Run and Debug area is empty, try reloading VS Code: Open the command palette (Ctrl+Shift+P) and search for Developer: Reload Window.

   

5. Use the Ports tab to find the webpage address, open it, and verify it is running.

   📸 Show screenshot

   
   

⌨️ Activity: Enable Copilot coding agent on your repository

Before we can start delegating requests from the teachers to Copilot, we need to grant access to our repository.

1. In the top right, click your user icon and select Settings.

   
   
   

2. In the left navigation, expand the Copilot section and select Coding agent.

   

3. Check that the Repository access field is set to All repositories.

   Alternatively, if you prefer to enable it only for this exercise, select Only selected repositories and select this exercise repository (narithkun/using-copilot-coding-agent).

   

⌨️ Activity: Assign Copilot an issue

There are several important issues to get done before we leave, but let's do a test run on one of the simple options first. This will let us see how interactions and collaboration work, so we can update our docs for guiding the other teachers. Most don't know how to use a traditional coding editor!

Tip

Try to make an issue's goal and acceptance criteria clear. Also, breaking down large tasks into shorter ones provides more opportunity for feedback!

1. Go to the Issues tab of this exercise repository and click the New Issue button.

2. Set the Title to:

   Missing Activity: Manga Maniacs

   Enter the below text as description, and click the Create button.

   The manga club was recently announced and is naturally missing from the website. Please add it.
   
   Here are the details:
   
   Description: Explore the fantastic stories of the most interesting characters from Japanese Manga (graphic novels).
   
   Schedule: Tuesdays at 7pm
   Max attendance: 15 people

3. In the top right, click on the Assignees area and select Copilot.

   

4. As you assign the issue to Copilot - after a moment, you will notice:

   • The issue will have an 👀 reaction to show Copilot is reading the issue.
   • The activity log shows you assigned the issue to Copilot.
   • The issue log includes a linked pull request.
   

5. With the issue assigned, Mona should be busy checking your work. Give her a moment to share the next steps.

Having trouble? 🤷

If you don't get feedback, here are some things to check:

• Make sure you assigned the correct issue. If you practice on other issues, they will be ignored.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Collaborate with Copilot

Now that you've assigned Copilot to your Issue, you can see Copilot also started a Pull Request and linked it to your issue!

Let's learn how to review Copilot's work and provide feedback, just like you would with any team member.

📖 Theory: Understanding Copilot's collaboration workflow

Copilot provides transparency into its work through multiple channels on the pull request. Let's look into those!

📝 Pull request description

The description will be continuously updated as Copilot progresses through its work. You can watch the description updates in real time!

🤖 Coding Agent Sessions

Copilot does all work inside sessions. Each time you assign a task, it analyzes the problem, plans its approach, and implements changes. The first session is started immediately when Coding Agent gets assigned.

In the pull request timeline, you will be able to see progress indicators showing when Copilot starts and completes work

You can access the Coding Session logs in two ways:

• 🔴 Live: Watch the logs in real-time to see all the steps and logic Copilot Coding Agent session is taking to solve the task
• 📋 Review: View the session logs after Copilot has completed its work to review the decisions made

📸 Copilot Session Logs

💬 Providing feedback to Copilot

Once Copilot completes its work, you can collaborate with it just like any team member. The key to effective collaboration is understanding how to trigger new coding sessions:

Copilot will only act on comments or pull request reviews when they include a @copilot mention.

This means you can also leave regular comments for your other, human team members and Copilot won't start unnecessary sessions!

flowchart LR
    A[Leave PR Comment/Review] --> B{Contains @copilot?}
    B -->|Yes| C[🤖 New Coding Agent Session]
    B -->|No| D[💬 Regular Comment Only]

Loading

⚙️ Important considerations

• Copilot's work is done on a branch with the convention copilot/* and does not have access to other branches
• Copilot cannot trigger Actions workflows. Workflows triggered on pull requests require human approval before running
• Rulesets and similar protections are still enforced

Tip

All work created by Copilot is committed with the assignee as a co-contributor (keeping your contribution graph safe). 💕

⌨️ Activity: View Copilot's progress

1. Navigate to the Pull Request that Copilot referenced in your issue.

2. Watch in real-time as Copilot updates the pull request description. It will progress through 3 phases:

   1. When starting, Copilot provides an initial copy of the issue. [show image]

   
   2. After planning, Copilot provides a set of action items. [show image]

   
   3. After finishing, Copilot provides a summary. [show image]

   

3. Scroll down slightly to view the timeline and high-level notes provided by Copilot. Click the View session button.

   

4. The new page shows a journal of Copilot's work. On the right side, you can see the overview of the pull request being worked on live.

   

5. If the Copilot session is still ongoing, monitor the session journal.

6. When Copilot completes its work and requests you as a reviewer of the pull request, you can proceed to the next activity!

Tip

You can use the edited dropdown to view the pull request description change history.

Show image

⌨️ Activity: Provide Copilot feedback

Now that Copilot has finished its working session, let's review its work and provide some feedback!

1. In the pull request, click the Add your review button.

   

2. Find the new entry created by Copilot. Hover over a line to show the plus sign. Click to open the add comment dialog box.

   

3. Reading the description, we think it should be more interesting to match the Manga spirit. Let's ask Copilot to fix that. Enter the following text and click Start a review.

   @copilot Please change this description to be inspired by Japanese Manga.
   It needs more personality to attract students.

4. At the top of the changes list, click the Finish your review button and select Submit Review.

5. After a moment, Copilot will start working on your requested changes in a new agent session. Click the new View session button that will appear in the pull request timeline.

   

6. As you can see, Copilot started working on the requested changes in a new session. However, the entire session journal is kept here so you can revisit logs from the previous sessions!

   

7. You can also steer Copilot mid session if you have any extra details you forgot to add initially, or you notice Copilot is heading in the wrong direction.

   🪧 Note: This step is optional - if the coding agent session for the requested changes is already finished, don't worry - you can skip this step!

   Using the bottom chat panel, right below the session logs - provide this new information that just came up!

   There is a slight change of plans - we got a bigger classroom assignment for this class
   
   Let's move the schedule to 5PM tuesday and change the maximum allowed participants to 25.

8. Wait for Copilot to finish working on the changes.

   🪧 Note: This can take some time! You can monitor the new session or take a break.

9. Once Copilot is finished, you will get requested as a reviewer again.

10. Activate the pull requests by clicking the Ready to Review button then click the Merge button.

11. With the pull request merged, Mona should be checking our work. Give her a moment to respond with the next lesson.

Having trouble? 🤷

If you don't get feedback, here are some things to check:

• Make sure your reviews include @copilot mention
• To progress to the next step in this lab you need to merge the pull request!

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 3! One moment... 🤓

[github-actions]

Step 3: Preparing Copilot's environment

Let's provide Copilot some additional information about the school and typical tasks the teachers request.

To ensure future development is both smooth and reliable for everyone, Copilot should also start its sessions with all the tools and dependencies already installed. 🚀

📖 Theory: Customizing Copilot's development environment

Copilot's environment can be customized in several ways. Below, we'll explore some of the most useful customization options:

📝 Copilot Instructions

The Copilot instructions file should provide repository‑specific guidance, preferences, and context before Copilot starts reasoning about an issue. Include:

• Project overview, including it's purpose, goals, and any relevant background information.
• Program architecture, standards and conventions that should be followed,
• Useful commands or scripts for common tasks

⚙️ Copilot Setup Steps

Pre‑configure the coding agent session with all required tools and dependency versions to ensure fast, consistent, and reproducible help. This typically means:

• Configuring required tools like Python, Node with desired versions
• Pre-installing project dependencies, libraries and running setup scripts

This greatly helps in avoiding delays or errors from Copilot attempting ad‑hoc installs

Note

You can also enable a Model Context Protocal (MCP) server for Copilot to provide even more functionality!

GitHub and Playwright MCP servers are already enabled by default 🚀

⌨️ Activity: Create instructions to guide Copilot

Let's write Copilot instructions that include details about the school, the roles Copilot should assume, and the common tasks teachers request. This will help Copilot interact more naturally with the teachers.

1. In the top navigation, select the Code tab.

2. Create a new branch with the following name:

   prepare-environment

   

3. Navigate to and open the .github/copilot-instructions.md file for editing.

4. Replace the placeholder text with a link to the development guide.

   ## Development Environment
   
   For detailed setup and development instructions, please refer to our [Development Guide](../docs/how-to-develop.md).

5. Add some additional information about the school and teachers to help Copilot interact more naturally.

   ### User Interaction
   
   Consider the following when communicating with the staff.
   
   - The staff is not technical. Explain in simple terms as much as possible and avoid software jargon.
   - Any new code must be easy to maintain and understand, without significant coding experience.
   
   ## Program architecture
   
   - The website users are the students and teachers. Make sure the user experience is simple.
   - Do not make additional apps or services.
   - Do not make command line tools.
   - Do not create a long single file application. Always use an easy-to-understand directory structure.
   - Only use HTML, CSS, Javascript, and Python. No other languages.

   💡 Tip: You can add more details. Check out the copilot-instructions-ext.md file for ideas.

6. When finished, commit your changes to the prepare-environment branch.

⌨️ Activity: Prepare the coding environment for copilot

Customizing Copilot's development environment and adjusting permissions is done with a unique GitHub Actions workflow called copilot-setup-steps.yml.

For this project, we will pre-install the Python backend dependencies and ensure a MongoDB database is available for the backend to use.

1. Ensure you are still on the prepare-environment branch.

2. Navigate to the .github/workflows/ directory.

3. In the top right, click the Add file button and select Create new file.

   

4. Set the file name to:

   copilot-setup-steps.yml

   

5. Paste the following workflow configuration, which will pre-install the dependencies for the website's Python backend and setup a MongoDB service.

   name: "Copilot Setup Steps"
   
   on: workflow_dispatch
   jobs:
     # This is the required job name. If different, Copilot will ignore it.
     copilot-setup-steps:
       runs-on: ubuntu-latest
    
     # Starts a MongoDB service for Copilot to use during its session.
       services:
        mongo:
          image: mongo:7
          ports:
            - 27017:27017
   
       # Grant Copilot early access to read the repository content.
       permissions:
         contents: read
   
       steps:
         - name: Checkout code
           uses: actions/checkout@v5
   
         - name: Set up Python
           uses: actions/setup-python@v6
           with:
             python-version: "3.13"
             cache: "pip"
   
         - name: Install Python dependencies
           run: |
             python -m pip install --upgrade pip
             pip install -r src/requirements.txt

   🪧 Note: Copilot will automatically retrieve the repository contents later. This workflow provides early access during setup to install the dependencies.

   🪧 Note: Copilot will automatically identify and install missing dependencies. Doing it now saves Copilot time and ensures proper environment setup

6. In the top right, click the Commit changes... button and commit your changes to the prepare-environment branch.

7. Create a pull request, but do NOT merge it yet. Mona will check your files to confirm they are correct.

8. After Mona shares the next steps, you should merge the pull request.

🙋 Question: How did the manual process feel compared to letting Copilot do most of the work? 🤔

🤷 Having trouble?

If you accidentally merged the pull request before Mona shared feedback about mistakes, that is ok. Just recreate the branch and try again with a new pull request.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐