You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 35c69f6
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: docs/real-world-development/app/0-prerequisites.md
+9-3Lines changed: 9 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: "Lesson 0 - Prerequisites"
3
3
description: "Set up for the GitHub Copilot app lessons: install Node.js for the Tailspin Toys project and create your own copy of the repository from the template."
4
4
authors:
5
5
- geektrainer
6
-
lastUpdated: 2026-06-30
6
+
lastUpdated: 2026-10-22
7
7
---
8
8
9
9
The GitHub Copilot app is a desktop app serving as your central hub for both Copilot and GitHub. It provides quick access to issues and pull requests, and of course allows you to build using GitHub Copilot. During this workshop you'll be working locally, updating the Tailspin Toys app, built on Astro, using the GitHub Copilot app. Before you get started, let's ensure Node.js is installed locally, then install the Copilot app.
@@ -24,9 +24,10 @@ The simplest option on every platform is the official installer:
24
24
25
25
```shell
26
26
node --version
27
+
npm --version
27
28
```
28
29
29
-
3. If it meets the requirements in the project's README and `package.json`, you can skip to the next section.
30
+
3. If both commands succeed and Node.js meets the requirements in the project's README and `package.json`, you can skip to the next section.
30
31
31
32
> [!TIP]
32
33
> You only need to complete these steps if you don't have Node installed, or you need to update.
@@ -39,9 +40,13 @@ The simplest option on every platform is the official installer:
39
40
40
41
```bash
41
42
node --version
43
+
npm --version
42
44
```
43
45
44
-
9. You should see the version you installed.
46
+
9. You should see the installed Node.js and npm versions.
47
+
48
+
> [!IMPORTANT]
49
+
> The Copilot app's agent must also be able to run `node --version` and `npm --version`. Success in your usual terminal does not guarantee they are available to the app. Fully quit and reopen the app after installing Node.js or changing PATH. If either command still fails in a session, follow the [session environment troubleshooting steps][session-environment] before continuing.
45
50
46
51
> [!IMPORTANT]
47
52
> Each worktree also needs the project dependencies and Playwright Chromium for E2E checks. Follow the Tailspin Toys repository's README when preparing a worktree, and review any installation request before approving it.
@@ -86,3 +91,4 @@ Next, you'll [install the GitHub Copilot app][next-lesson], connect the reposito
description: "Install the GitHub Copilot app, connect the repository you created from the template, get oriented in the workspace, and try a quick chat."
4
4
authors:
5
5
- geektrainer
6
-
lastUpdated: 2026-10-05
6
+
lastUpdated: 2026-10-22
7
7
---
8
8
9
9
The **[GitHub Copilot app][about-copilot-app]** is a desktop application for agent-driven development. It is built on GitHub Copilot CLI and integrates natively with GitHub, so your repositories, branches, and CI pipelines work out of the box. It's designed for workflows where you direct several agents in parallel — each in its own isolated workspace — rather than doing all of the work yourself, and automating repetitive tasks. With Node.js installed and your copy of the project ready, the next step is to install the app and connect that repository.
@@ -20,7 +20,7 @@ In this lesson, you will:
20
20
Your team is adopting AI agents to work through a growing backlog. The Copilot app gives you one place to direct that work — picking up issues, running agents, reviewing changes, and merging pull requests. This lesson gets you installed, connected, and comfortable starting a conversation about your project.
21
21
22
22
> [!NOTE]
23
-
> An eligible Copilot plan is required — Copilot Student or any paid plan (Pro, Pro+, Business, or Enterprise). If you are on Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before the app will work.
23
+
> An eligible Copilot plan is required — Copilot Free,Copilot Student or any paid plan (Pro, Pro+, Business, or Enterprise). If you are on Copilot Business or Copilot Enterprise, your administrator must keep the **GitHub Copilot app** policy enabled.
24
24
25
25
## Install and configure the GitHub Copilot app
26
26
@@ -29,13 +29,12 @@ To use the GitHub Copilot app the first step, as you might imagine, is to instal
29
29
1. In a browser, open the [landing page for the GitHub Copilot app][download-app].
30
30
2. Download the app for your platform and install it following the instructions provided on the landing page.
31
31
3. Open the app once it's installed.
32
-
4. Select **Sign in to GitHub** and follow the prompts to authenticate. If you use GitHub Enterprise Server, choose **Use GitHub Enterprise** and enter your server address when prompted.
33
-
5. After authenticating, you'll be asked about connecting your repositories. Select the Tailspin Toys repo you just created, which should be named `<YOUR_GITHUB_HANDLE>/tailspin-toys`.
34
-
6. Select **Continue** to continue the onboarding.
35
-
7. When prompted for a theme, select the one which brings you the most joy, then select **Finish**.
36
-
37
-
> [!NOTE]
38
-
> If your copy of Tailspin Toys didn't appear in the list automatically, you can add it after completing the onboarding process in the app. When completed, the Copilot app will bring you to the home screen. From there you can select **Choose from GitHub**, and search for your repo by name (\<YOUR_GITHUB_HANDLE\>/tailspin-toys), then select it. Your repo will now be added to the Copilot app!
32
+
4. Select **Sign in to GitHub** and follow the prompts to authenticate. If you use GitHub Enterprise Cloud with data residency, choose **Use GitHub Enterprise** and enter your `*.ghe.com` hostname when prompted. GitHub Enterprise Server is not supported.
33
+
5. If onboarding offers repository selection, select the Tailspin Toys repository you created from the template. You can also skip repository selection and add the project after onboarding.
34
+
6. Choose a theme when prompted, then finish onboarding.
35
+
7. Look for your repository under **Sessions** in the sidebar. If it is already listed, you do not need to add it again.
36
+
8. If the repository is not connected yet, select **+** next to **Sessions** to create a new session, then select **Add GitHub repository**. Use the owner and repository name you recorded in the prerequisites lesson.
37
+
9. Confirm your repository appears in the sidebar. In the layout used here, repository folders such as `tailspin-toys` are grouped under **Sessions**, with individual sessions beneath each repository.
39
38
40
39
## Get oriented in the workspace
41
40
@@ -46,8 +45,8 @@ With your project connected, take a moment to learn your way around. The app org
46
45
-**Issues** - your issues, surfaced the same way. From here you can browse and filter issues and start a session from an issue.
47
46
-**Automations** — saved agent tasks that run on a schedule or on demand. These are great for managing todo lists, regular project maintenance, or other bits of tedium you'd like to offload. The wrap-up links to these as a next step, not another workshop exercise.
48
47
-**Customize** - add features and functions to the Copilot app in the form of MCP servers, plugins, skills, and other components. You'll use it to configure Playwright MCP.
49
-
-**Chats** — lightweight conversations for questions and brainstorming that don't need a branch or workspace of their own. You'll try one at the end of this lesson.
50
-
-**Sessions** — where agents do their work. Each session runs in its own isolated workspace, so you can run several at once without their changes colliding. You'll start your first session when you add star ratings.
48
+
-**Chats** — lightweight conversations for questions and brainstorming that don't need a branch or workspace of their own. This section appears after you start your first chat. If it is not visible, select **+** next to **Sessions** to start your first chat.
49
+
-**Sessions** — groups repository folders and their agent sessions. Select a repository name, such as `tailspin-toys`, to open its repository view, or select a session beneath it to return to that conversation. Each session runs in its own isolated workspace, so you can run several at once without their changes colliding. You'll start your first session when you add star ratings.
51
50
52
51
As you work through the workshop, you'll explore the workspace!
53
52
@@ -58,7 +57,7 @@ As you work through the workshop, you'll explore the workspace!
58
57
59
58
There's likely not a single project without a backlog, and Tailspin Toys isn't any different. Let's explore the backlog that currently exists, which was created when you created your template.
60
59
61
-
1.Select**Issues** in the sidebar.
60
+
1.Under**Sessions** in the sidebar, select the Tailspin Toys repository folder, not an individual session beneath it. Then select **Issues** in the repository's top navigation.
62
61
2. Find these issues by title rather than assuming their issue numbers:
63
62
64
63
- Allow users to filter games by category and publisher
@@ -73,7 +72,7 @@ There's likely not a single project without a backlog, and Tailspin Toys isn't a
73
72
74
73
A great way to get comfortable with the app is to use it to learn about the *app itself* — and a **quick chat** is exactly the right tool for that. Quick chats let you ask a question or brainstorm without creating a branch or worktree, so they're perfect for a fast, throwaway question — no session required.
75
74
76
-
1. In the sidebar, select **+** next to **Chats** to open a new chat.
75
+
1. In the sidebar, select **+** next to **Chats** to open a new chat. If **Chats** is not visible yet, select **+** next to **Sessions** to start your first chat; **Chats** appears afterward.
Copy file name to clipboardExpand all lines: docs/real-world-development/app/2-add-star-rating.md
+8-7Lines changed: 8 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: "Lesson 2 - Add star ratings: a quick win"
3
3
description: "Start your first agent session in the GitHub Copilot app, make a small change to the game cards, and merge it as your first pull request."
4
4
authors:
5
5
- geektrainer
6
-
lastUpdated: 2026-07-09
6
+
lastUpdated: 2026-10-22
7
7
---
8
8
9
9
Now that you've toured the workspace and used a quick chat, it's time to start an **agent session** and make your first change to the project. You'll keep it small: the games already have a star rating in their data, but the game cards on the home page don't show it yet. You'll ask the agent to surface it, review the change, and merge it as your first pull request.
@@ -31,7 +31,7 @@ Inside a session you'll see three things: the **conversation** with the agent, t
31
31
Let's start a new session to begin exploring the project and implementing our feature. During [app setup][prior-lesson], you added your project from its GitHub repository. We'll create a new session for that repository and request our change.
32
32
33
33
1. Return to (or open) the GitHub Copilot app.
34
-
2. Select the **+**next to **Projects**.
34
+
2. Select **+**at the top of the sidebar to start a session.
35
35
3. Select `tailspin-toys` for the repo.
36
36
4. Choose a **new working tree** and **Interactive** mode below the prompt box. Use the following prompt to request the change:
37
37
@@ -47,7 +47,7 @@ Copilot app begins work by first creating a new worktree, an isolated copy of th
47
47
48
48
All AI-generated changes deserve a review before they're merged, even small ones. Let's explore the changes, right here in Copilot app.
49
49
50
-
1. In the upper right-hand corner of the app, select **Toggle review panel**. This will open the diff screen with all the outstanding changes made by Copilot.
50
+
1. In the upper right-hand corner of the app, select **Toggle review panel**. In the panel that opens, select **Changes** to see the changed files and their diffs.
51
51
52
52

53
53
@@ -97,10 +97,11 @@ You've now created the feature! It's time to create a pull request (PR) to merge
97
97
98
98
1. Select **Create PR** in the upper right corner.
99
99
2. If prompted, select **Sign in with your browser** and follow the prompts to authenticate.
100
-
3. Copilot gets to work on creating the PR.
101
-
4. Select the **PR** bubble just above chat to open your PR in the review pane to see your pull request. You can review the PR as needed here.
102
-
5. Once ready, select **Ready to merge**.
103
-
6. Select **Merge pull request** on the new dialog window to merge your pull request!
100
+
3. If Copilot explains that repository policy requires a matching issue before creating the PR, confirm that it should follow that process.
101
+
4. Copilot gets to work on creating the PR.
102
+
5. Select the **PR** bubble just above chat to open your PR in the review pane to see your pull request. You can review the PR as needed here.
103
+
6. Once ready, select **Ready to merge**.
104
+
7. Select **Merge pull request** on the new dialog window to merge your pull request!
Copy file name to clipboardExpand all lines: docs/real-world-development/app/3-agent-modes.md
+15-6Lines changed: 15 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: "Lesson 3 - Agent modes: Plan and Autopilot"
3
3
description: "Explore agent modes: use Plan to agree on an approach, Autopilot to build filtering from an issue, and Interactive to review and verify the result."
4
4
authors:
5
5
- geektrainer
6
-
lastUpdated: 2026-10-05
6
+
lastUpdated: 2026-10-22
7
7
---
8
8
9
9
We started by adding a small feature into our project. But larger changes require a more robust process. Fortunately, the GitHub Copilot app is built to work with an organization's existing flow, ensuring we build the right things the right way. This is the first of several lessons where you will follow a typical agent-driven development process, starting by using an issue to generate a new feature, ensuring the code is valid, the feature behaves as expected, and eventually merged successfully into the project.
@@ -13,7 +13,7 @@ We started by adding a small feature into our project. But larger changes requir
13
13
14
14
To start, in this lesson, you will:
15
15
16
-
-started a new agent session from a GitHub issue.
16
+
-start a new agent session from a GitHub issue.
17
17
- define requirements in **Plan** mode.
18
18
- implement the new feature using **Autopilot** mode.
19
19
- review the code.
@@ -56,13 +56,16 @@ Start in Plan mode, review the plan, then use Autopilot to implement it.
56
56
57
57
Confirm the star-rating PR is merged and your local `main` is up to date before starting.
58
58
59
-
1.Select**Issues**and open **Allow users to filter games by category and publisher**.
59
+
1.Under**Sessions** in the sidebar, select the Tailspin Toys repository folder, then select **Issues**in the repository's top navigation. Open **Allow users to filter games by category and publisher**. This is an existing seeded issue; you do not need to create another one.
60
60
2. Select **New session** and choose a **new working tree** based on the updated `main`.
61
61
62
62

63
63
64
64
3. Confirm the issue is attached to the session and select **Plan** from the mode selector.
65
65
66
+
> [!NOTE]
67
+
> If Node.js or npm is not found, ask the agent to run `node --version` and `npm --version`. If they work in your terminal but not in the session, check the app's PATH or version-manager setup, then fully quit and reopen the app. Retry the failed operation and checks; do not reinstall npm solely because the agent cannot find it.
68
+
66
69
## Plan the filtering feature
67
70
68
71
Planning gives you a chance to review the approach before Copilot writes code. Since you started from the issue, Copilot already has the feature request as context. Send:
@@ -77,7 +80,7 @@ The plan should include lint, unit tests, E2E tests, and type checking using the
77
80
78
81
## Explicitly approve Autopilot
79
82
80
-
Once you're happy with the plan, select **Approve and implement with autopilot**, or the equivalent option in your version. Confirm the mode indicator shows **Autopilot**.
83
+
Once you're happy with the plan, select **Approve and implement this plan**, or the equivalent option in your version. Verify the active mode rather than assuming approval switches it. Confirm the mode indicator shows **Autopilot**.
81
84
82
85
Copilot will begin work on the implementation! You'll notice it will iterate through the process, walking through the established plan, generating code, and even running tests.
83
86
@@ -104,13 +107,19 @@ Ok, the code looks good - but does it run? Let's start the app like we did befor
104
107
```
105
108
106
109
2. In a few moments the app will start and a browser window will open inside the Copilot app.
107
-
3. Confirm rated game cards display their value out of five.
108
-
4. When finished, ask Copilot to stop the dev server it started for this session by using the following prompt:
110
+
3. Select a category and confirm the results match it. Clear the filter, then select a publisher and confirm the results match that publisher.
111
+
4. Combine category and publisher filters and compare the results with the issue and your approved plan. If multiple categories are supported, verify the agreed combination behavior.
112
+
5. Exercise a combination with no matching games and check the empty state. Clear or reset the filters and confirm the full list returns.
113
+
6. When finished, ask Copilot to stop the dev server it started for this session by using the following prompt:
109
114
110
115
```plaintext
111
116
Stop the dev server and close the browser canvas.
112
117
```
113
118
119
+
## Keep this session for the next lessons
120
+
121
+
Do not create or merge the filtering PR yet. Keep this session, worktree, and branch for Lessons 4 through 8. Next, you'll apply custom instructions to the filtering code, then add the skill and QA improvements before creating and merging the combined PR in Lesson 8. You can leave the session idle after stopping its dev server; return to the same session for the next lesson.
122
+
114
123
## Summary and next steps
115
124
116
125
You've used different agent modes to build and review a feature. In this lesson, you:
Copy file name to clipboardExpand all lines: docs/real-world-development/app/4-custom-instructions.md
+3-2Lines changed: 3 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -64,8 +64,9 @@ While the files already built are a good start, there's still some gaps. Let's m
64
64
> Because instructions files have a large impact on the code generated by Copilot, care should be taken in ensuring they clearly guide Copilot. You can always have Copilot create a first version, followed by a review by you to ensure the updates meet your requirements. You can also find a [collection of instructions files on Awesome Copilot][awesome-copilot], which serves as a great starting point.
65
65
66
66
1. In the same files canvas, navigate to `.github/copilot-instructions.md`.
67
-
2. Locate the **Code formatting requirements** header, which should be about halfway down in the file.
68
-
3. Add the following as the last bullet point below that header:
67
+
2. Switch to the editable source view by selecting the code button (the `<>` icon) in the file toolbar.
68
+
3. Locate the **Code formatting requirements** header, which should be about halfway down in the file.
69
+
4. Add the following as the last bullet point below that header:
69
70
70
71
```plaintext
71
72
All new TypeScript should contain TSDocs comments for documentation purposes.
Copy file name to clipboardExpand all lines: docs/real-world-development/app/6-mcp-playwright.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,8 +39,8 @@ There are many other MCP servers available that provide access to different tool
39
39
You manage MCP servers through **Customize** in the sidebar. Servers configured for your repositories or Copilot CLI may already be available in the app, so check before adding a duplicate. The [app customization documentation][customize-app] covers the available options.
40
40
41
41
1. Select **Customize** in the sidebar.
42
-
2.Select**MCP**, then check **Installed** for an existing Playwright server.
43
-
3. If needed, find **Playwright** among the available servers, or use the custom-server flow documented by the publisher.
42
+
2.Open the **All types** dropdown and select**MCP**, then check **Installed** for an existing Playwright server.
43
+
3. If Playwright is not already installed, find **Playwright** among the available servers and then select **Add server**
44
44
4. Review the publisher, configuration, and any installation prompts before approving them. Follow the prompts to add the server; organization policy or missing prerequisites can block setup.
45
45
5. Return to the filtering session in **Interactive** mode and confirm the Playwright MCP tools are available.
0 commit comments