diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 6967f376..dfef81ed 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -2,18 +2,17 @@
This repo hosts the **workshop content** for *Agents in SDLC*, published as an Astro + Starlight site at . The demo application learners build during the workshop lives in a separate repository: .
-**This is a content-only repo.** Do not add Python, Flask, Svelte, Tailwind, or other application code here. Application changes belong in `tailspin-toys`.
+**This is a content-only repo.** Do not add the demo app's application code (Astro SSR endpoints, the Drizzle data layer, UI components, Tailwind styles, or tests) here. Application changes belong in `tailspin-toys`.
## Repository structure
- `docs/` — Astro + Starlight site that publishes the workshop to GitHub Pages.
- `src/content/docs/` — **Source MDX for all lessons. Edit here.**
- `index.mdx` — Workshop landing page.
- - `prereqs.mdx` — Shared setup lesson (Exercise 0).
- - `cli/`, `vscode/`, `cloud/` — Per-path lessons (Copilot CLI / VS Code / Cloud agent).
+ - `cli/`, `vscode/`, `cloud/`, `app/` — Per-harness lessons (Copilot CLI / VS Code / Cloud agent / GitHub Copilot app). Each harness opens with its own `0-prerequisites.mdx` setup lesson; the CLI and VS Code harnesses set up a codespace, while the app and cloud harnesses cover the setup their flow needs (for the app, installing Node.js locally and creating the project from the template).
- `_shared/` — Reusable MDX fragments imported via the `@shared/*` alias (see partials conventions below). Underscore-prefixed dirs are excluded from routing.
- `_images/` — Screenshots and diagrams.
- - `astro.config.mjs` — Site config including the manually maintained sidebar and a redirect from the legacy `/shared/0-prereqs/` URL to `/prereqs/`.
+ - `astro.config.mjs` — Site config including the manually maintained sidebar. The legacy `/shared/0-prereqs/` → home (`/`) redirect is a full-HTML redirect page at `src/pages/shared/0-prereqs.astro` (not an `astro.config.mjs` `redirects` entry, which would emit a stub with no `` element that Pagefind can't index). Prerequisites are now per-harness (`//0-prerequisites/`), so the old shared-prereqs URL forwards to the home page.
- `scripts/` — Author tooling for the partials system (`lint_partials.py`, `sync_partial_metadata.py`, `_partials_lib.py`).
- `AUTHORING.md` — Author entry point (recipes for adding lessons, partials, images).
- `CONTRIBUTING.md` — Short pointer to AUTHORING.md + PR/CI rules.
@@ -48,7 +47,7 @@ Don't extract a partial unless it's used in 2+ places (or the same place across
### Reusing a lesson across paths
-When the same prose applies to multiple paths (CLI, VS Code, cloud), pull the body into a `section-…` partial under `_shared/` and `import` it from each per-path lesson. The host page owns frontmatter, H2s, and prev/next nav; the partial owns the reusable prose.
+When the same prose applies to multiple harnesses (CLI, VS Code, cloud), pull the body into a `section-…` partial under `_shared/` and `import` it from each per-harness lesson. The host page owns frontmatter, H2s, and prev/next nav; the partial owns the reusable prose.
### Linking
@@ -76,7 +75,7 @@ Before opening or updating a PR, also make the **PR-time consistency pass** docu
## Things NOT to do here
-- Don't add Python, Flask, SQLAlchemy, Svelte, Astro components, Tailwind classes, or any other application code. That belongs in `github-samples/tailspin-toys`.
-- Don't author against `client/` or `server/` paths — they were removed when the app was extracted.
+- Don't add the demo app's application code — Astro SSR endpoints, the Drizzle data layer, `.astro` UI components, Tailwind classes, or Vitest/Playwright tests. That belongs in `github-samples/tailspin-toys`.
+- Don't author against application source paths — the demo app is a single Astro project that lives in `tailspin-toys`, not here.
- Don't generate summary markdown files at the end of a task.
- Don't add `mkdocs.yml` or other parallel docs tooling — Astro + Starlight is the site.
diff --git a/.github/instructions/astro.instructions.md b/.github/instructions/astro.instructions.md
index 5f57c60f..bedd1025 100644
--- a/.github/instructions/astro.instructions.md
+++ b/.github/instructions/astro.instructions.md
@@ -16,7 +16,7 @@ applyTo: 'docs/**/*.{astro,mjs,ts,js}'
## Don't add app-style components
-This is a docs wrapper. Don't add interactive Svelte islands, Tailwind utility-class styling layers, custom routing, or other application-style code. Anything beyond Starlight defaults should be justified.
+This is a docs wrapper. Don't add interactive framework islands (Svelte, React, etc.), Tailwind utility-class styling layers, custom routing, or other application-style code. Anything beyond Starlight defaults should be justified.
## Building and verifying
diff --git a/.github/instructions/markdown.instructions.md b/.github/instructions/markdown.instructions.md
index 515bff82..f5193b60 100644
--- a/.github/instructions/markdown.instructions.md
+++ b/.github/instructions/markdown.instructions.md
@@ -149,11 +149,11 @@ Use Markdown image syntax with paths relative to the MDX file:

```
-For an image referenced from a `_shared/` partial, use the same `../_images/...` relative path — `_shared/` sits one level under `docs/src/content/docs/`, just like `cli/`, `vscode/`, and `cloud/`, so the path resolves identically for the partial and its consumer pages.
+For an image referenced from a `_shared/` partial, use the same `../_images/...` relative path — `_shared/` sits one level under `docs/src/content/docs/`, just like `cli/`, `vscode/`, `cloud/`, and `app/`, so the path resolves identically for the partial and its consumer pages.
### Path conventions
-- Per-path lessons: `cli/`, `vscode/`, `cloud/`. Files numbered by lesson order: `1-installing.mdx`, `2-custom-instructions.mdx`, etc.
+- Per-path lessons: `cli/`, `vscode/`, `cloud/`, `app/`. Files numbered by lesson order: `1-installing.mdx`, `2-custom-instructions.mdx`, etc.
- Shared content: reusable fragments live in `_shared/` (e.g. `section-mcp-overview.mdx`) and are imported into lesson pages via the `@shared/` alias. They are body-only partials inlined at build time, not standalone routed pages — see [`partials.instructions.md`](./partials.instructions.md).
### Cross-repo links
diff --git a/.github/skills/build-and-verify-docs/SKILL.md b/.github/skills/build-and-verify-docs/SKILL.md
index 707db55a..1da8fe7f 100644
--- a/.github/skills/build-and-verify-docs/SKILL.md
+++ b/.github/skills/build-and-verify-docs/SKILL.md
@@ -45,7 +45,7 @@ cd docs && rm -rf dist && npm run build
### 2. Page-count invariant
-The built page count should equal the number of routable `.mdx` files — everything under `docs/src/content/docs/` **except** `_shared/` — plus the one legacy redirect (`/shared/0-prereqs/`). You never hard-code the number; you confirm the relationship:
+The built page count should equal the number of routable `.mdx` files — everything under `docs/src/content/docs/` **except** `_shared/` — plus the one legacy redirect (`/shared/0-prereqs/`, authored as a full-HTML redirect page at `docs/src/pages/shared/0-prereqs.astro`). You never hard-code the number; you confirm the relationship:
```bash
# routable .mdx (expected pages, minus the redirect)
diff --git a/.github/skills/validate-site-playwright/SKILL.md b/.github/skills/validate-site-playwright/SKILL.md
index e04c3be2..b901add7 100644
--- a/.github/skills/validate-site-playwright/SKILL.md
+++ b/.github/skills/validate-site-playwright/SKILL.md
@@ -39,7 +39,7 @@ Don't hard-code URLs. The built `dist/` is the source of truth for what routes e
find docs/dist -name index.html | grep -v 404 | sed 's#docs/dist#/agents-in-sdlc#; s#/index.html#/#'
```
-Validate a **representative sample** that covers every layout and path: the landing page (`/agents-in-sdlc/`), `prereqs/`, and at least one lesson from each of `cli/`, `vscode/`, and `cloud/`. For a release pass or a change that touches shared layout/components, validate **all** routes.
+Validate a **representative sample** that covers every layout and harness: the landing page (`/agents-in-sdlc/`), a per-harness prerequisites page (e.g. `cli/0-prerequisites/`), and at least one lesson from each of `cli/`, `vscode/`, `cloud/`, and `app/`. For a release pass or a change that touches shared layout/components, validate **all** routes.
## 3. Validate each route
@@ -49,7 +49,7 @@ For each chosen route, use the Playwright MCP tools:
2. **Confirm it rendered** — `browser_snapshot` and check the page has its heading/title and real content (not an error page or raw, unrendered MDX).
3. **Check the console** — `browser_console_messages` with `level: "error"`. There should be **zero** errors. Hydration warnings and 404s for assets surface here.
- *Known benign exception:* the legacy redirect route `/agents-in-sdlc/shared/0-prereqs/` is a bare meta-refresh stub (it immediately forwards to `/prereqs/`) and declares no favicon, so the browser auto-requests `/favicon.ico` and logs a single `404 (Not Found)`. That one favicon 404 **on the redirect stub only** is expected. Validate that route by confirming it lands on `/prereqs/`, not by console cleanliness. A favicon 404 on any *real* page is a genuine finding (real pages link `favicon.svg`).
+ *Known benign exception:* the legacy redirect route `/agents-in-sdlc/shared/0-prereqs/` is a minimal full-HTML redirect page (it immediately forwards to the home page `/agents-in-sdlc/` via a meta refresh) and declares no favicon, so the browser auto-requests `/favicon.ico` and logs a single `404 (Not Found)`. That one favicon 404 **on the redirect page only** is expected. Validate that route by confirming it lands on the home page, not by console cleanliness. A favicon 404 on any *real* page is a genuine finding (real pages link `favicon.svg`).
4. **Find broken images** — `browser_evaluate` with an async function that **force-loads lazy images first**, then flags only the ones that truly fail. Starlight/Astro mark below-the-fold images `loading="lazy"`, so a naive `naturalWidth === 0` check reports false positives for images that simply haven't scrolled into view yet:
```js
diff --git a/AUTHORING.md b/AUTHORING.md
index 1a0a65ae..3774be30 100644
--- a/AUTHORING.md
+++ b/AUTHORING.md
@@ -13,10 +13,10 @@ agents-in-sdlc/
├── docs/
│ └── src/content/docs/ ← MDX source. EDIT HERE.
│ ├── index.mdx ← Workshop landing page
-│ ├── prereqs.mdx ← Shared setup (Exercise 0)
-│ ├── cli/ ← Copilot CLI lessons
-│ ├── vscode/ ← VS Code lessons
-│ ├── cloud/ ← Cloud agent lessons
+│ ├── cli/ ← Copilot CLI lessons (0-prerequisites.mdx + numbered exercises)
+│ ├── vscode/ ← VS Code lessons (0-prerequisites.mdx + numbered exercises)
+│ ├── cloud/ ← Cloud agent lessons (0-prerequisites.mdx + numbered exercises)
+│ ├── app/ ← GitHub Copilot app lessons (setup folded into Exercise 1)
│ ├── _shared/ ← Reusable MDX fragments (callout-/section-/exercise-)
│ └── _images/ ← Screenshots and diagrams
└── .github/
@@ -29,7 +29,7 @@ agents-in-sdlc/
### Add a new lesson
-1. **Pick a path and number.** Lessons live under `docs/src/content/docs/{cli,vscode,cloud}/N-name.mdx`. `N` is the next available integer in that path; the number drives the URL slug (`/cli/4-generating-code/`).
+1. **Pick a path and number.** Lessons live under `docs/src/content/docs/{cli,vscode,app,cloud}/N-name.mdx`. `N` is the next available integer in that path; the number drives the URL slug (`/cli/3-generating-code/`).
2. **Create the file** with frontmatter:
```mdx
---
@@ -44,8 +44,8 @@ agents-in-sdlc/
3. **Write the body.** Use Markdown plus optional MDX `` admonitions. See **Style essentials** below.
4. **Add prev/next navigation.** Define `[previous-lesson]` and `[next-lesson]` reference links at the bottom of the page, pointing at the adjacent lessons in the same path:
```markdown
- [previous-lesson]: ../3-custom-instructions/
- [next-lesson]: ../5-agent-skills/
+ [previous-lesson]: ../2-custom-instructions/
+ [next-lesson]: ../4-mcp/
```
Then surface them in the body using **the same style as the other lessons in your path** — don't mix styles within a path:
- **Woven into prose** (common in the CLI path): end the lesson with a sentence like ``the next step is to [create the PR][next-lesson]``.
@@ -108,7 +108,7 @@ See [`.github/instructions/partials.instructions.md`](./.github/instructions/par
### Add an image
-1. **Drop the file** in `docs/src/content/docs/_images/` (or a path-scoped `cli/_images/` etc. when the image is path-specific). Use lowercase-with-hyphens filenames; prefix with `shared-` if the image is referenced from multiple paths.
+1. **Drop the file** in `docs/src/content/docs/_images/` (or a path-scoped `cli/_images/` etc. when the image is path-specific). Use lowercase-with-hyphens filenames; prefix with `shared-` if the image is referenced from multiple harnesses.
2. **Reference it** with a relative path from the consuming MDX page:
```mdx

@@ -118,14 +118,14 @@ See [`.github/instructions/partials.instructions.md`](./.github/instructions/par
### Edit an existing lesson
-1. **Find the file** under `docs/src/content/docs/` (use the published URL as a hint — `/cli/4-generating-code/` lives at `cli/4-generating-code.mdx`).
+1. **Find the file** under `docs/src/content/docs/` (use the published URL as a hint — `/cli/3-generating-code/` lives at `cli/3-generating-code.mdx`).
2. **Edit the MDX.** Same conventions apply — see **Style essentials** below.
3. **Preview** with `npm run dev` in `docs/`.
4. **Commit, PR, merge.**
### Reuse a lesson across paths
-When the same lesson applies to multiple paths (CLI, VS Code, Cloud), pull the body into a `section-…` partial under `_shared/` and `import` it from each per-path lesson page. The host page owns the frontmatter, the H2s, and the prev/next nav; the partial owns the reusable prose.
+When the same lesson applies to multiple harnesses (CLI, VS Code, Cloud), pull the body into a `section-…` partial under `_shared/` and `import` it from each per-harness lesson page. The host page owns the frontmatter, the H2s, and the prev/next nav; the partial owns the reusable prose.
## Building and verifying
diff --git a/README.md b/README.md
index 86862dfa..d9d1d834 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Workshop content for **Agents in SDLC**, a guided exploration of GitHub Copilot'
The published site lives at ** **.
> [!NOTE]
-> The demo application learners build through during the workshop — Tailspin Toys, a Flask + Astro/Svelte crowdfunding site — lives in a separate repository: ****. This repo holds only the *content*: lesson MDX, partials, images, and the Astro + Starlight site that publishes them.
+> The demo application learners build through during the workshop — Tailspin Toys, a pure-Astro crowdfunding site (SSR, API endpoints, and a Drizzle data layer) — lives in a separate repository: ****. This repo holds only the *content*: lesson MDX, partials, images, and the Astro + Starlight site that publishes them.
## Start the workshop
@@ -22,10 +22,10 @@ For PR/CI rules, see **[CONTRIBUTING.md](./CONTRIBUTING.md)**.
- **`docs/`** — Astro + Starlight site that publishes the workshop to GitHub Pages.
- `src/content/docs/` — **Lesson source (MDX). Edit here.**
- `index.mdx` — Workshop landing page.
- - `prereqs.mdx` — Shared setup lesson (Exercise 0).
- - `cli/`, `vscode/`, `cloud/` — Per-path lessons (Copilot CLI / VS Code / cloud agent).
+ - `cli/`, `vscode/`, `cloud/`, `app/` — Per-harness lessons (Copilot CLI / VS Code / cloud agent / GitHub Copilot app). Each codespace-based harness opens with its own `0-prerequisites.mdx` setup lesson.
- `_shared/` — Reusable MDX fragments (`callout-*`, `section-*`, `exercise-*` prefixes), imported via the `@shared/*` alias.
- `_images/` — Screenshots and diagrams.
+ - `src/pages/shared/0-prereqs.astro` — Full-HTML redirect forwarding the legacy `/shared/0-prereqs/` URL to the home page.
- **`AUTHORING.md`** — Author entry point (recipes for adding/editing content).
- **`CONTRIBUTING.md`** — PR flow + CI requirements.
- **`.github/`**
diff --git a/docs/README.md b/docs/README.md
index ef4f1ac8..d2f3dc0a 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -20,6 +20,7 @@ npm run preview # preview the production build
- `astro.config.mjs` — Site URL, base path, sidebar (manually maintained).
- `src/content.config.ts` — Content collection loader. Excludes `_shared/**` from routing so partials aren't published as pages.
- `src/components/` — Site-shell components (`.astro`). Lesson content does **not** live here.
+- `src/pages/` — Standalone Astro routes outside the content collection. Currently just `shared/0-prereqs.astro`, the full-HTML redirect that forwards the legacy `/shared/0-prereqs/` URL to the home page (prerequisites are now per-harness at `//0-prerequisites/`).
## Deployment
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 67d75a20..40a94428 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -7,14 +7,11 @@ export default defineConfig({
site: 'https://github-samples.github.io',
base: '/agents-in-sdlc',
trailingSlash: 'always',
- redirects: {
- '/shared/0-prereqs/': '/agents-in-sdlc/prereqs/',
- },
integrations: [
starlight({
title: 'Agents in the SDLC Workshop',
description:
- 'A hands-on workshop exploring GitHub Copilot agents across VS Code, the Copilot CLI, and the Copilot cloud agent.',
+ 'A hands-on workshop exploring GitHub Copilot agents across VS Code, the Copilot CLI, the GitHub Copilot app, and the Copilot cloud agent.',
social: [
{
icon: 'github',
@@ -28,27 +25,28 @@ export default defineConfig({
},
sidebar: [
{ label: 'Home', link: '/' },
- { label: 'Prerequisites', link: '/prereqs/' },
{
- label: 'VS Code path',
+ label: 'VS Code',
items: [
{ label: 'Overview', link: '/vscode/' },
- { label: '1. MCP with VS Code', link: '/vscode/1-mcp/' },
- { label: '2. Custom instructions', link: '/vscode/2-custom-instructions/' },
- { label: '3. Agent mode', link: '/vscode/3-agent-mode/' },
+ { label: '0. Prerequisites', link: '/vscode/0-prerequisites/' },
+ { label: '1. Custom instructions', link: '/vscode/1-custom-instructions/' },
+ { label: '2. Agent mode', link: '/vscode/2-agent-mode/' },
+ { label: '3. Testing with Playwright MCP', link: '/vscode/3-mcp/' },
{ label: '4. Custom agents', link: '/vscode/4-custom-agents/' },
{ label: '5. Managing agents', link: '/vscode/5-managing-agents/' },
{ label: '6. Iterating', link: '/vscode/6-iterating/' },
],
},
{
- label: 'Copilot CLI path',
+ label: 'Copilot CLI',
items: [
{ label: 'Overview', link: '/cli/' },
+ { label: '0. Prerequisites', link: '/cli/0-prerequisites/' },
{ label: '1. Install Copilot CLI', link: '/cli/1-install-copilot-cli/' },
- { label: '2. MCP with CLI', link: '/cli/2-mcp/' },
- { label: '3. Custom instructions', link: '/cli/3-custom-instructions/' },
- { label: '4. Generating code', link: '/cli/4-generating-code/' },
+ { label: '2. Custom instructions', link: '/cli/2-custom-instructions/' },
+ { label: '3. Generating code', link: '/cli/3-generating-code/' },
+ { label: '4. Testing with Playwright MCP', link: '/cli/4-mcp/' },
{ label: '5. Agent skills', link: '/cli/5-agent-skills/' },
{ label: '6. Custom agents', link: '/cli/6-custom-agents/' },
{ label: '7. Slash commands', link: '/cli/7-slash-commands/' },
@@ -56,9 +54,25 @@ export default defineConfig({
],
},
{
- label: 'Cloud agent path',
+ label: 'Copilot App',
+ items: [
+ { label: 'Overview', link: '/app/' },
+ { label: '0. Prerequisites', link: '/app/0-prerequisites/' },
+ { label: '1. Install the Copilot app', link: '/app/1-install-copilot-app/' },
+ { label: '2. Running your first agent session', link: '/app/2-add-star-rating/' },
+ { label: '3. Guiding Copilot with custom instructions', link: '/app/3-custom-instructions/' },
+ { label: '4. Building a feature with Autopilot', link: '/app/4-build-filtering/' },
+ { label: '5. Testing with Playwright MCP', link: '/app/5-mcp-playwright/' },
+ { label: '6. Merging with Agent Merge', link: '/app/6-agent-merge/' },
+ { label: '7. Planning with canvases', link: '/app/7-canvases/' },
+ { label: '8. Review', link: '/app/8-review/' },
+ ],
+ },
+ {
+ label: 'Copilot Cloud Agent',
items: [
{ label: 'Overview', link: '/cloud/' },
+ { label: '0. Prerequisites', link: '/cloud/0-prerequisites/' },
{ label: '1. Custom instructions', link: '/cloud/1-custom-instructions/' },
{ label: '2. Cloud agent', link: '/cloud/2-cloud-agent/' },
{ label: '3. Custom agents', link: '/cloud/3-custom-agents/' },
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 5957f024..7fdb8e95 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -9,7 +9,7 @@
"version": "0.0.1",
"dependencies": {
"@astrojs/check": "^0.9.4",
- "@astrojs/starlight": "^0.36.0",
+ "@astrojs/starlight": "^0.37.7",
"astro": "^5.16.0",
"sharp": "^0.34.0",
"typescript": "^5.7.0"
@@ -169,9 +169,9 @@
}
},
"node_modules/@astrojs/starlight": {
- "version": "0.36.3",
- "resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.36.3.tgz",
- "integrity": "sha512-5cm4QVQHUP6ZE52O43TtUpsTvLKdZa9XEs4l3suzuY7Ymsbz4ojtoL9NhistbMqM+/qk6fm6SmxbOL6hQ/LfNA==",
+ "version": "0.37.7",
+ "resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.37.7.tgz",
+ "integrity": "sha512-KyBnou8aKIlPJUSNx6a1SN7XyH22oj/VAvTGC+Edld4Bnei1A//pmCRTBvSrSeoGrdUjK0ErFUfaEhhO1bPfDg==",
"license": "MIT",
"dependencies": {
"@astrojs/markdown-remark": "^6.3.1",
@@ -190,6 +190,7 @@
"i18next": "^23.11.5",
"js-yaml": "^4.1.0",
"klona": "^2.0.6",
+ "magic-string": "^0.30.17",
"mdast-util-directive": "^3.0.0",
"mdast-util-to-markdown": "^2.1.0",
"mdast-util-to-string": "^4.0.0",
diff --git a/docs/package.json b/docs/package.json
index 6c51026b..9d753905 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,7 +13,7 @@
},
"dependencies": {
"@astrojs/check": "^0.9.4",
- "@astrojs/starlight": "^0.36.0",
+ "@astrojs/starlight": "^0.37.7",
"astro": "^5.16.0",
"sharp": "^0.34.0",
"typescript": "^5.7.0"
diff --git a/docs/src/content/docs/_images/app-0-create-repository.png b/docs/src/content/docs/_images/app-0-create-repository.png
new file mode 100644
index 00000000..34913187
Binary files /dev/null and b/docs/src/content/docs/_images/app-0-create-repository.png differ
diff --git a/docs/src/content/docs/_images/app-0-use-template.png b/docs/src/content/docs/_images/app-0-use-template.png
new file mode 100644
index 00000000..cf02650d
Binary files /dev/null and b/docs/src/content/docs/_images/app-0-use-template.png differ
diff --git a/docs/src/content/docs/_images/app-2-review-panel.png b/docs/src/content/docs/_images/app-2-review-panel.png
new file mode 100644
index 00000000..95006ea5
Binary files /dev/null and b/docs/src/content/docs/_images/app-2-review-panel.png differ
diff --git a/docs/src/content/docs/_images/app-2-start-session.png b/docs/src/content/docs/_images/app-2-start-session.png
new file mode 100644
index 00000000..b06d71ec
Binary files /dev/null and b/docs/src/content/docs/_images/app-2-start-session.png differ
diff --git a/docs/src/content/docs/_images/app-4-plan-mode.png b/docs/src/content/docs/_images/app-4-plan-mode.png
new file mode 100644
index 00000000..1eaea46f
Binary files /dev/null and b/docs/src/content/docs/_images/app-4-plan-mode.png differ
diff --git a/docs/src/content/docs/_images/app-agent-merge-merge.png b/docs/src/content/docs/_images/app-agent-merge-merge.png
new file mode 100644
index 00000000..03ec3689
Binary files /dev/null and b/docs/src/content/docs/_images/app-agent-merge-merge.png differ
diff --git a/docs/src/content/docs/_images/app-automation-dialog.png b/docs/src/content/docs/_images/app-automation-dialog.png
new file mode 100644
index 00000000..1ba60bf1
Binary files /dev/null and b/docs/src/content/docs/_images/app-automation-dialog.png differ
diff --git a/docs/src/content/docs/_images/app-enable-agent-merge.png b/docs/src/content/docs/_images/app-enable-agent-merge.png
new file mode 100644
index 00000000..47462d47
Binary files /dev/null and b/docs/src/content/docs/_images/app-enable-agent-merge.png differ
diff --git a/docs/src/content/docs/_images/app-new-session-from-issue.png b/docs/src/content/docs/_images/app-new-session-from-issue.png
new file mode 100644
index 00000000..26db5be2
Binary files /dev/null and b/docs/src/content/docs/_images/app-new-session-from-issue.png differ
diff --git a/docs/src/content/docs/_images/app-open-terminal.png b/docs/src/content/docs/_images/app-open-terminal.png
new file mode 100644
index 00000000..dbdcdb01
Binary files /dev/null and b/docs/src/content/docs/_images/app-open-terminal.png differ
diff --git a/docs/src/content/docs/_images/app-select-changes.png b/docs/src/content/docs/_images/app-select-changes.png
new file mode 100644
index 00000000..ebfc5c94
Binary files /dev/null and b/docs/src/content/docs/_images/app-select-changes.png differ
diff --git a/docs/src/content/docs/_images/cli-4-mcp-add-playwright.png b/docs/src/content/docs/_images/cli-4-mcp-add-playwright.png
new file mode 100644
index 00000000..3c269700
Binary files /dev/null and b/docs/src/content/docs/_images/cli-4-mcp-add-playwright.png differ
diff --git a/docs/src/content/docs/_images/ex1-create-issue-allow.png b/docs/src/content/docs/_images/ex1-create-issue-allow.png
deleted file mode 100644
index 2ef6ed47..00000000
Binary files a/docs/src/content/docs/_images/ex1-create-issue-allow.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-create-issue-dialog.png b/docs/src/content/docs/_images/ex1-create-issue-dialog.png
deleted file mode 100644
index 85fe4b0c..00000000
Binary files a/docs/src/content/docs/_images/ex1-create-issue-dialog.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-create-issue-review.png b/docs/src/content/docs/_images/ex1-create-issue-review.png
deleted file mode 100644
index 1b42304c..00000000
Binary files a/docs/src/content/docs/_images/ex1-create-issue-review.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-extensions-updates.png b/docs/src/content/docs/_images/ex1-extensions-updates.png
deleted file mode 100644
index 2d59af44..00000000
Binary files a/docs/src/content/docs/_images/ex1-extensions-updates.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-github-issues-created.png b/docs/src/content/docs/_images/ex1-github-issues-created.png
deleted file mode 100644
index 3f5d6be1..00000000
Binary files a/docs/src/content/docs/_images/ex1-github-issues-created.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-mcp-auth-popup.png b/docs/src/content/docs/_images/ex1-mcp-auth-popup.png
deleted file mode 100644
index 4f4a6811..00000000
Binary files a/docs/src/content/docs/_images/ex1-mcp-auth-popup.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-mcp-authorize-vscode.png b/docs/src/content/docs/_images/ex1-mcp-authorize-vscode.png
deleted file mode 100644
index 3afc46ab..00000000
Binary files a/docs/src/content/docs/_images/ex1-mcp-authorize-vscode.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-mcp-select-account.png b/docs/src/content/docs/_images/ex1-mcp-select-account.png
deleted file mode 100644
index 016a6d37..00000000
Binary files a/docs/src/content/docs/_images/ex1-mcp-select-account.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-select-model.png b/docs/src/content/docs/_images/ex1-select-model.png
deleted file mode 100644
index 5493a71d..00000000
Binary files a/docs/src/content/docs/_images/ex1-select-model.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex1-start-mcp-server.png b/docs/src/content/docs/_images/ex1-start-mcp-server.png
deleted file mode 100644
index b95c926c..00000000
Binary files a/docs/src/content/docs/_images/ex1-start-mcp-server.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex2-add-instructions-file.png b/docs/src/content/docs/_images/ex2-add-instructions-file.png
deleted file mode 100644
index 0df231fa..00000000
Binary files a/docs/src/content/docs/_images/ex2-add-instructions-file.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex2-copilot-instructions-references.png b/docs/src/content/docs/_images/ex2-copilot-instructions-references.png
deleted file mode 100644
index 79204760..00000000
Binary files a/docs/src/content/docs/_images/ex2-copilot-instructions-references.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex2-generate-instructions.png b/docs/src/content/docs/_images/ex2-generate-instructions.png
deleted file mode 100644
index 13000a4d..00000000
Binary files a/docs/src/content/docs/_images/ex2-generate-instructions.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex2-select-chat-mode.png b/docs/src/content/docs/_images/ex2-select-chat-mode.png
deleted file mode 100644
index 362b571d..00000000
Binary files a/docs/src/content/docs/_images/ex2-select-chat-mode.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex2-select-edit-mode.png b/docs/src/content/docs/_images/ex2-select-edit-mode.png
deleted file mode 100644
index c35c449d..00000000
Binary files a/docs/src/content/docs/_images/ex2-select-edit-mode.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex2-source-control-changes.png b/docs/src/content/docs/_images/ex2-source-control-changes.png
deleted file mode 100644
index 228148e5..00000000
Binary files a/docs/src/content/docs/_images/ex2-source-control-changes.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/ex3-mcp-playwright-config.png b/docs/src/content/docs/_images/ex3-mcp-playwright-config.png
new file mode 100644
index 00000000..ebb6de6e
Binary files /dev/null and b/docs/src/content/docs/_images/ex3-mcp-playwright-config.png differ
diff --git a/docs/src/content/docs/_images/ex6-steer-coding-agent-task.png b/docs/src/content/docs/_images/ex6-steer-coding-agent-task.png
deleted file mode 100644
index b32ef396..00000000
Binary files a/docs/src/content/docs/_images/ex6-steer-coding-agent-task.png and /dev/null differ
diff --git a/docs/src/content/docs/_images/shared-add-instructions-file.png b/docs/src/content/docs/_images/shared-add-instructions-file.png
deleted file mode 100644
index 6ff042b9..00000000
Binary files a/docs/src/content/docs/_images/shared-add-instructions-file.png and /dev/null differ
diff --git a/docs/src/content/docs/_shared/callout-start-copilot-cli-allow-all.mdx b/docs/src/content/docs/_shared/callout-start-copilot-cli-allow-all.mdx
index e5f27905..c71ceb3b 100644
--- a/docs/src/content/docs/_shared/callout-start-copilot-cli-allow-all.mdx
+++ b/docs/src/content/docs/_shared/callout-start-copilot-cli-allow-all.mdx
@@ -13,7 +13,7 @@ import { Aside } from '@astrojs/starlight/components';
To pick up your most recent session for this project instead of starting fresh, run `copilot --yolo --enable-all-github-mcp-tools --continue`. If Copilot CLI is already running from an earlier exercise, send `/clear` to start a clean conversation.
- `--enable-all-github-mcp-tools` enables the read/write GitHub MCP tools for the current session, so Copilot can create and update issues and pull requests during the workshop flow.
+ `--enable-all-github-mcp-tools` enables the read/write GitHub MCP tools for the current session, so Copilot can read your backlog and open pull requests during the workshop flow.
`--yolo` enables full automatic permissions (`--allow-all-tools`, `--allow-all-paths`, and `--allow-all-urls`). Use it only in an isolated environment like a Codespace or VM, and never alias it as your default for day-to-day development. See [Allowing and denying tool use][allow-all-warning] for details.
diff --git a/docs/src/content/docs/_shared/callout-student-plan.mdx b/docs/src/content/docs/_shared/callout-student-plan.mdx
new file mode 100644
index 00000000..25aaadf6
--- /dev/null
+++ b/docs/src/content/docs/_shared/callout-student-plan.mdx
@@ -0,0 +1,9 @@
+{/* @summary Tip noting verified students can use GitHub Copilot for free via the Copilot Student plan, which covers every feature this workshop uses. @sections Aside */}
+
+import { Aside } from '@astrojs/starlight/components';
+
+
+ No paid plan? Verified students can get GitHub Copilot for free through [GitHub Education][callout-student-plan-education]. The **Copilot Student** plan includes the agent, MCP, code review, and Copilot CLI features this workshop uses — so you can complete every harness with it.
+
+
+[callout-student-plan-education]: https://github.com/education/students
diff --git a/docs/src/content/docs/_shared/callout-template-seeds-backlog.mdx b/docs/src/content/docs/_shared/callout-template-seeds-backlog.mdx
new file mode 100644
index 00000000..b46fd119
--- /dev/null
+++ b/docs/src/content/docs/_shared/callout-template-seeds-backlog.mdx
@@ -0,0 +1,9 @@
+{/*
+@summary Note explaining that creating the project from the template automatically seeds the backlog of GitHub issues used throughout the workshop.
+@sections
+*/}
+import { Aside } from '@astrojs/starlight/components';
+
+
+ When you create your repository from the template, a backlog of GitHub issues is created for you automatically. You'll work from these issues throughout the workshop — there's nothing to file yourself.
+
diff --git a/docs/src/content/docs/_shared/exercise-create-codespace.mdx b/docs/src/content/docs/_shared/exercise-create-codespace.mdx
new file mode 100644
index 00000000..3a14c82d
--- /dev/null
+++ b/docs/src/content/docs/_shared/exercise-create-codespace.mdx
@@ -0,0 +1,29 @@
+{/*
+@summary Hands-on numbered steps to create a GitHub Codespace from your repository, with guidance on dev containers and running locally.
+@sections
+*/}
+import { Aside } from '@astrojs/starlight/components';
+
+[GitHub Codespaces][codespaces] are a cloud-based development environment that allows you to write, run, and debug code directly in your browser. It provides a fully-featured IDE with support for multiple programming languages, extensions, and tools.
+
+1. Navigate to your newly created repository.
+2. Select the green **Code** button.
+
+ 
+
+3. Select the **Codespaces** tab and select the **+** button to create a new Codespace.
+
+ 
+
+The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, you can use this time to explore other features of GitHub Copilot, which we'll turn your attention to next.
+
+
+ You'll return to the codespace in a future exercise. For the time being, leave it open in a tab in your browser.
+
+
+
+ This workshop is built to run inside a codespace or local [dev container][dev-containers]. Both ensure the environment has all the necessary prerequisites installed for a smooth experience. If you'd prefer to run it locally, open the cloned repository in VS Code and select **Reopen in Container** when prompted — VS Code will build the same dev container the codespace uses.
+
+
+[codespaces]: https://github.com/features/codespaces
+[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers
diff --git a/docs/src/content/docs/_shared/exercise-create-template-repo.mdx b/docs/src/content/docs/_shared/exercise-create-template-repo.mdx
new file mode 100644
index 00000000..13493829
--- /dev/null
+++ b/docs/src/content/docs/_shared/exercise-create-template-repo.mdx
@@ -0,0 +1,15 @@
+{/*
+@summary Hands-on numbered steps to create your own copy of the Tailspin Toys repository from the template.
+@sections
+*/}
+
+1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/tailspin-toys`.
+2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**.
+
+ 
+
+3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to GitHub Copilot.
+
+ 
+
+4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab.
diff --git a/docs/src/content/docs/_shared/exercise-explore-instructions-files.mdx b/docs/src/content/docs/_shared/exercise-explore-instructions-files.mdx
index 17331d53..f8fbcb42 100644
--- a/docs/src/content/docs/_shared/exercise-explore-instructions-files.mdx
+++ b/docs/src/content/docs/_shared/exercise-explore-instructions-files.mdx
@@ -4,15 +4,15 @@
*/}
import { Aside } from '@astrojs/starlight/components';
-Take a moment to read the instruction files this repository ships with — there's one core `copilot-instructions.md` and a collection of `*.instructions.md` files for various tasks. Open these in your codespace or the GitHub web UI.
+Take a moment to read the instruction files this repository ships with — there's one core `copilot-instructions.md` and a collection of `*.instructions.md` files for various tasks. Open these in your editor or the GitHub web UI.
1. Open `.github/copilot-instructions.md`.
2. Explore the file, noting the brief description of the project plus sections such as **Agent notes**, **Code standards**, **Scripts**, and **Repository Structure**. Under **Code standards**, note the nested **GitHub Actions Workflows** guidance. These are applicable to any interactions you'd have with Copilot.
-3. Open the `.github/instructions` folder and look around. Note there are instructions for Astro files, Svelte files, tests, and more.
-4. Open `.github/instructions/python-tests.instructions.md`. Note the `applyTo` field at the top — this sets a glob (relative to the repo root) that determines which files the instructions apply to. Here, any Python file in `server/tests` whose name starts with `test_` will match.
-5. Note the instructions specific to creating Python tests for this project.
-6. Finally, open `.github/instructions/flask-endpoint.instructions.md` and scroll to the bottom. Note the links to other instruction files and existing files in the project. This lets you break larger instruction sets into smaller, reusable files, and point Copilot at examples to follow when generating code. (Paths there are relative to the instruction file rather than the repo root.)
+3. Open the `.github/instructions` folder and look around. Note there are instructions for Astro files, the Drizzle data layer, tests, and more.
+4. Open `.github/instructions/unit-tests.instructions.md`. Note the `applyTo` field at the top — this sets a glob (relative to the repo root) that determines which files the instructions apply to. Here, any TypeScript test file (for example, one matching `**/*.test.ts`) will match.
+5. Note the instructions specific to creating unit tests for this project.
+6. Finally, open `.github/instructions/drizzle.instructions.md` and scroll to the bottom. Note the links to other instruction files (like `unit-tests.instructions.md`) and existing files in the project. This lets you break larger instruction sets into smaller, reusable files, and point Copilot at examples to follow when generating code. (Paths there are relative to the instruction file rather than the repo root.)
- The **Code formatting requirements** section in `copilot-instructions.md` already includes the rule about Python type hints. In the next steps, you'll add additional rules about docstrings and comment headers.
+ The **Code formatting requirements** section in `copilot-instructions.md` documents the project's coding standards, but it doesn't yet require in-code documentation. In the next steps, you'll add rules for TSDoc doc comments and file comment headers.
diff --git a/docs/src/content/docs/_shared/exercise-instructions-add-docstring.mdx b/docs/src/content/docs/_shared/exercise-instructions-add-docstring.mdx
index 38da7aa7..c87b36af 100644
--- a/docs/src/content/docs/_shared/exercise-instructions-add-docstring.mdx
+++ b/docs/src/content/docs/_shared/exercise-instructions-add-docstring.mdx
@@ -1,5 +1,5 @@
{/*
-@summary Hands-on numbered steps to add docstring and file-header rules to .github/copilot-instructions.md, plus a tip about repo vs *.instructions.md scope.
+@summary Hands-on numbered steps to add TSDoc doc comment and file-header rules to .github/copilot-instructions.md, plus a tip about repo vs *.instructions.md scope.
@sections
*/}
import { Aside } from '@astrojs/starlight/components';
@@ -7,16 +7,16 @@ import { Aside } from '@astrojs/starlight/components';
As highlighted previously, `.github/copilot-instructions.md` is designed to provide project-level information to Copilot. Let's ensure repository coding standards are documented to improve code suggestions.
1. Re-open `.github/copilot-instructions.md`.
-2. Locate the **Code formatting requirements** section, which should be near line 27. Note how it contains a directive to use type hints — that's why you saw those in the code generated previously.
-3. Add the following lines of markdown right below the note about type hints to instruct Copilot to add comment headers to files and docstrings:
+2. Locate the **Code formatting requirements** section, which should be near line 27. Note how it documents the project's coding standards — but it has no rule yet for in-code documentation, which is why the generated helper had no doc comments.
+3. Add the following lines of markdown right below the existing standards to instruct Copilot to add file comment headers and TSDoc doc comments:
```markdown
- - Every function should have docstrings or the language equivalent.
+ - Every exported function should have a TSDoc comment describing its purpose, parameters, and return value.
- Before imports or any code, add a comment block to the file that explains its purpose.
```
4. Save `copilot-instructions.md`.
- As you saw in the previous lesson, instruction files can be created at the repository level (`.github/copilot-instructions.md`) for global guidance, or as `*.instructions.md` files for specific languages, file types, or tasks. The repository-level file is the right home for project-wide standards like the docstring rule you just added.
+ As you saw in the previous lesson, instruction files can be created at the repository level (`.github/copilot-instructions.md`) for global guidance, or as `*.instructions.md` files for specific languages, file types, or tasks. The repository-level file is the right home for project-wide standards like the doc comment rule you just added.
diff --git a/docs/src/content/docs/_shared/section-agent-skills-overview.mdx b/docs/src/content/docs/_shared/section-agent-skills-overview.mdx
index ad738f1d..3201004a 100644
--- a/docs/src/content/docs/_shared/section-agent-skills-overview.mdx
+++ b/docs/src/content/docs/_shared/section-agent-skills-overview.mdx
@@ -4,14 +4,14 @@
*/}
import { Aside } from '@astrojs/starlight/components';
-Doing app development often involves repeatable tasks like generating builds, running tests, or creating pull requests. **Agent skills** let you give Copilot — and other AI agents — guidance on how to perform those tasks. A skill is a folder of instructions, scripts, and resources that the agent can load on demand. [Agent Skills is an open standard][agent-skills-repo] used by a range of agents, so the same skill can work across Copilot Chat in agent mode, Copilot cloud agent, and Copilot CLI.
+Doing app development often involves repeatable tasks like generating builds, running tests, or creating pull requests. **Agent skills** let you give Copilot — and other AI agents — guidance on how to perform those tasks. A skill is a folder of instructions, scripts, and resources that the agent can load on demand. [Agent Skills is an open standard][agent-skills-repo] used by a range of agents, so the same skill can work across Copilot Chat in agent mode, Copilot cloud agent, Copilot CLI, and the GitHub Copilot app.
Skills live in the `.github/skills` folder of a project, or globally in `~/.copilot/skills`. Each skill is a folder containing a `SKILL.md` file with YAML frontmatter (a `name` and a `description`) followed by the markdown instructions:
```yaml
---
-name: branches-commits-prs
-description: All changes to the repository must be done through a pull request (PR). A branch must always be created, and commits grouped together logically. Whenever asked to create commit messages, to push code, or create a pull request (PR), use this skill so everything is done correctly.
+name: make-contribution
+description: All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly.
---
```
diff --git a/docs/src/content/docs/_shared/section-instructions-overview.mdx b/docs/src/content/docs/_shared/section-instructions-overview.mdx
index 8230f35a..112eaeec 100644
--- a/docs/src/content/docs/_shared/section-instructions-overview.mdx
+++ b/docs/src/content/docs/_shared/section-instructions-overview.mdx
@@ -11,9 +11,9 @@ import { Aside } from '@astrojs/starlight/components';
As any good dev shop, Tailspin Toys has a set of guidelines and requirements for development practices. These include:
-- API always needs unit tests.
+- The data layer always needs unit tests.
- UI should be in dark mode and have a modern feel.
-- Documentation should be added to code in the form of docstrings.
+- Documentation should be added to code in the form of TSDoc doc comments.
- A block of comments should be added to the head of each file describing what the file does.
Through the use of instruction files you'll ensure Copilot has the right information to perform the tasks in alignment with the practices highlighted.
@@ -25,7 +25,7 @@ Custom instructions allow you to provide context and preferences to Copilot, so
There are two types of instructions files:
- `.github/copilot-instructions.md`, a single instruction file sent to Copilot for **every** request for the repository. This file should contain project-level information — context relevant for most chat or CLI requests sent to Copilot. This could include the tech stack being used, an overview of what's being built, best practices, and other global guidance.
-- `.github/instructions/*.instructions.md` files can be created for specific tasks or file types. You can use them to provide guidelines for particular languages (like Python or TypeScript), or for tasks like creating a React component or a new set of unit tests.
+- `.github/instructions/*.instructions.md` files can be created for specific tasks or file types. You can use them to provide guidelines for particular languages (like TypeScript or Astro), or for tasks like creating a UI component or a new set of unit tests.
When working in your IDE, instructions files are only used for code generation in Copilot Chat — not for code completions or next-edit suggestions.
@@ -40,7 +40,7 @@ There are two types of instructions files:
A full conversation about creating instructions files is beyond the scope of the workshop. However, the examples provided in the sample project show a representative approach. At a high level:
- Keep instructions in `copilot-instructions.md` focused on project-level guidance, such as a description of what's being built, the structure of the project, and global coding standards.
-- Use `*.instructions.md` files to provide specific instructions for file types (unit tests, React components, API endpoints), or for specific tasks.
+- Use `*.instructions.md` files to provide specific instructions for file types (unit tests, Astro components, the data layer), or for specific tasks.
- Use natural language. Keep guidance clear. Provide examples of how code should (and shouldn't) look.
There isn't one specific way to create instructions files, just as there isn't one specific way to use AI. You will find through experimentation what works best for your project.
diff --git a/docs/src/content/docs/_shared/section-iterating-recap-cloud.mdx b/docs/src/content/docs/_shared/section-iterating-recap-cloud.mdx
index 75ef545f..063e016d 100644
--- a/docs/src/content/docs/_shared/section-iterating-recap-cloud.mdx
+++ b/docs/src/content/docs/_shared/section-iterating-recap-cloud.mdx
@@ -1,10 +1,10 @@
{/*
-@summary Recap of the cloud-agent lab so far, then a "review the work" scenario framing for inspecting the documentation/endpoint/accessibility PRs.
+@summary Recap of the cloud-agent lab so far, then a "review the work" scenario framing for inspecting the documentation/related-games/accessibility PRs.
@sections
- H3 Scenario
*/}
-Throughout this lab you've worked with GitHub Copilot on several tasks focused on improving the user experience and adding functionality. You asked Copilot to add documentation to your code, generate endpoints for the design team to iterate on, and implement accessibility features including high-contrast and light mode toggles. Let's explore the code changes and, if necessary, provide feedback to Copilot to improve its work.
+Throughout this lab you've worked with GitHub Copilot on several tasks focused on improving the user experience and adding functionality. You asked Copilot to add documentation to your code, build a related games feature for the design team to iterate on, and implement accessibility features including high-contrast and light mode toggles. Let's explore the code changes and, if necessary, provide feedback to Copilot to improve its work.
### Scenario
-As has been highlighted numerous times, the fundamentals of software design and DevOps do not change with the addition of generative AI. We always want to review the code generated, and work through our normal DevOps process. With that in mind, let's review the suggestions from GitHub Copilot for creating the documentation, new endpoints, and accessibility features before we turn on review for the rest of our team.
+As has been highlighted numerous times, the fundamentals of software design and DevOps do not change with the addition of generative AI. We always want to review the code generated, and work through our normal DevOps process. With that in mind, let's review the suggestions from GitHub Copilot for creating the documentation, the related games feature, and accessibility features before we turn on review for the rest of our team.
diff --git a/docs/src/content/docs/_shared/section-iterating-recap-vscode.mdx b/docs/src/content/docs/_shared/section-iterating-recap-vscode.mdx
index ad689496..e395b420 100644
--- a/docs/src/content/docs/_shared/section-iterating-recap-vscode.mdx
+++ b/docs/src/content/docs/_shared/section-iterating-recap-vscode.mdx
@@ -3,7 +3,7 @@
@sections
- H3 Scenario
*/}
-Throughout this lab you've worked with GitHub Copilot on several tasks focused on improving the user experience. You used MCP to plan a backlog, agent mode to add filtering across the client and server, then a custom agent to implement accessibility features — high-contrast and light-mode toggles — and steered the session mid-flight to extend the work. Now it's time to publish that local work and review it the same way your team would.
+Throughout this lab you've worked with GitHub Copilot on several tasks focused on improving the user experience. You used agent mode to add filtering across the client and server, the Playwright MCP server to manually test that work in a browser, then a custom agent to implement accessibility features — high-contrast and light-mode toggles — and steered the session mid-flight to extend the work. Now it's time to publish that local work and review it the same way your team would.
### Scenario
diff --git a/docs/src/content/docs/_shared/section-playwright-mcp-test.mdx b/docs/src/content/docs/_shared/section-playwright-mcp-test.mdx
new file mode 100644
index 00000000..525bc87a
--- /dev/null
+++ b/docs/src/content/docs/_shared/section-playwright-mcp-test.mdx
@@ -0,0 +1,30 @@
+{/*
+@summary Explains what the Playwright MCP server does and gives the shared prompt for manually testing the filtering feature in a browser.
+@sections
+*/}
+import { Aside } from '@astrojs/starlight/components';
+
+The [Playwright MCP server][playwright-mcp-server] gives Copilot a real browser to drive. Instead of you clicking through the app to check your work, the agent can open a page, navigate, apply filters, and read the result back to you — then summarize what it saw. It's the fastest way to confirm a feature behaves the way you expect without leaving the conversation.
+
+Under the hood, the Playwright MCP server works from the page's [accessibility tree][playwright-mcp-server] rather than screenshots. That means the agent reasons over structured, labelled elements (buttons, links, list items) the same way assistive technology does — so a quick functional check doubles as a light accessibility sanity check.
+
+With the server connected and the app running, ask Copilot to exercise the filtering feature you just built:
+
+```text
+Using the Playwright MCP server, open a browser to the running app at http://localhost:4321 and verify the new game filtering feature:
+
+1. Go to the games page and note how many games are listed.
+2. Apply a category filter and confirm the list updates to only show games in that category.
+3. Clear it, then apply a publisher filter and confirm the list updates to that publisher.
+4. Combine a category and a publisher filter and confirm the results respect both.
+
+Report what you observe at each step, and call out anything that does not behave as expected.
+```
+
+Copilot will launch a browser through the Playwright MCP server, walk through each step, and report back what it found. Read its summary against the acceptance criteria in the issue — if something looks off, ask follow-up questions or send it back to fix the code before you open a pull request.
+
+
+ The app needs to be running at `http://localhost:4321` for this test. If you stopped the dev server, start it again before sending the prompt. The first time Copilot uses the Playwright MCP server it may need to download a browser — if it reports a missing browser, have it run `npx playwright install chromium` and try again.
+
+
+[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp
diff --git a/docs/src/content/docs/_shared/section-tech-debt-scenarios.mdx b/docs/src/content/docs/_shared/section-tech-debt-scenarios.mdx
index 22fe1367..5de87713 100644
--- a/docs/src/content/docs/_shared/section-tech-debt-scenarios.mdx
+++ b/docs/src/content/docs/_shared/section-tech-debt-scenarios.mdx
@@ -1,9 +1,9 @@
{/*
-@summary Two scenarios — missing docstrings and a needed Games CRUD endpoint set — that frame the cloud-agent task assignments later in the lab.
+@summary Two scenarios — missing doc comments and a needed related-games feature — that frame the cloud-agent task assignments later in the lab.
@sections
*/}
-Tailspin Toys has some tech debt they'd like to address. The contractors initially hired to create the first version of the site left the documentation in an unideal state - and by that you'll notice it's completely lacking. As a first step, they'd like to see docstrings or the equivalent added to all functions in the application.
+Tailspin Toys has some tech debt they'd like to address. The contractors initially hired to create the first version of the site left the documentation in an unideal state - and by that you'll notice it's completely lacking. As a first step, they'd like to see TSDoc doc comments added to all exported functions in the application.
-Additionally, the design team is ready to get to work on building the UX for managing games. They don't need a full implementation yet, but they at least need some endpoints they can use for testing. Specifically, they need endpoints for the games API which will allow them to create, update and delete games. This is currently a blocker, but there are other issues which are of higher priority at the moment.
+Additionally, the design team is ready to improve game discovery. They'd like each game's details page to show related games — other titles in the same category — so people can keep browsing. They don't need a polished implementation yet; they just want something they can use for acceptance testing of the UX. This is currently a blocker, but there are other issues which are of higher priority at the moment.
These are both examples of tasks which can quickly find themselves deprioritized, and are great to assign to Copilot cloud agent. Copilot cloud agent can then work on them asynchronously, allowing the developer to focus on other tasks, then return to review Copilot's work and ensure everything is as expected.
diff --git a/docs/src/content/docs/app/0-prerequisites.mdx b/docs/src/content/docs/app/0-prerequisites.mdx
new file mode 100644
index 00000000..aa36f03f
--- /dev/null
+++ b/docs/src/content/docs/app/0-prerequisites.mdx
@@ -0,0 +1,82 @@
+---
+title: "Lesson 0 - Prerequisites"
+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."
+---
+
+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, using both the Tailspin Toys app, built on Astro, and of course the GitHub Copilot app. Before you get started, let's ensure Node.js is installed locally, then install the Copilot app.
+
+In this lesson, you will:
+
+- install Node.js so the project's tests can run on your machine.
+- create your own copy of the Tailspin Toys project from the template.
+
+## Install Node.js
+
+Several lessons ask an agent to build features and run the Tailspin Toys test suite locally, which needs **[Node.js][nodejs]** — the only runtime the project requires. Install version **22 or newer**; the current **LTS** release is a safe choice.
+
+The simplest option on every platform is the official installer:
+
+1. In your operating system, open a terminal window using Windows Terminal, macOS terminal, or whatever you typically use.
+2. Run the following command to confirm you have at least Node.js 22 or higher installed:
+
+ ```shell
+ node --version
+ ```
+
+3. If you see `v22` or a higher number, you can skip to the next section!
+
+> [!TIP]
+> You only need to complete these steps if you don't have Node installed, or you need to update.
+
+4. Open the [Node.js download page][node-download].
+5. Download the **LTS** build for your operating system.
+6. Run the installer and accept the defaults. On Windows, keep the **Add to PATH** option selected.
+7. Once installed, open a new terminal window.
+8. Confirm the install in the new terminal window by running the following:
+
+ ```bash
+ node --version
+ ```
+
+9. You should see `v22.x.x` or higher.
+
+> [!TIP]
+> Prefer containers? If you have **[Docker][docker]**, you can use the repository's [dev container][dev-containers] instead of installing Node.js locally — it bundles Node for you. You don't need both.
+
+## Set up the lab repository
+
+You'll work against your own copy of the Tailspin Toys project. Create it now from the [template repository][template-repository]. The new repository contains every file the lab needs, and you'll connect it to the app in the next lesson.
+
+1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/tailspin-toys`.
+2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**.
+
+ 
+
+3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to GitHub Copilot.
+
+ 
+
+4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab.
+
+> [!NOTE]
+> When you create your repository from the template, a backlog of GitHub issues is created for you automatically. You'll work from these issues throughout the workshop — there's nothing to file yourself.
+
+## Summary and next steps
+
+You're set up! You installed Node.js so the project can build and test on your machine, and you created your own copy of the Tailspin Toys repository from the template.
+
+Next, you'll install the GitHub Copilot app, connect the repository you just created, and get oriented in the workspace. Continue to [Lesson 1 - Installing the GitHub Copilot app][next-lesson].
+
+## Resources
+
+- [Download Node.js][node-download]
+- [Creating a repository from a template][template-repository]
+- [About the GitHub Copilot app][about-copilot-app]
+
+[next-lesson]: ../1-install-copilot-app/
+[nodejs]: https://nodejs.org/
+[node-download]: https://nodejs.org/en/download
+[docker]: https://www.docker.com/products/docker-desktop/
+[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers
+[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository
+[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app
diff --git a/docs/src/content/docs/app/1-install-copilot-app.mdx b/docs/src/content/docs/app/1-install-copilot-app.mdx
new file mode 100644
index 00000000..fcd467ae
--- /dev/null
+++ b/docs/src/content/docs/app/1-install-copilot-app.mdx
@@ -0,0 +1,97 @@
+---
+title: "Lesson 1 - Installing the GitHub Copilot app"
+description: "Install the GitHub Copilot app, connect the repository you created from the template, get oriented in the workspace, and try a quick chat."
+---
+
+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. With Node.js installed and your copy of the project ready, the next step is to install the app and connect that repository.
+
+In this lesson, you will:
+
+- install the GitHub Copilot app and sign in.
+- add your project to the app from its GitHub repository.
+- get oriented in the workspace, including the backlog the template seeded for you.
+- try a quick chat to learn about the app itself.
+
+## Scenario
+
+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.
+
+> [!NOTE]
+> 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.
+
+## Install and configure the GitHub Copilot app
+
+To use the GitHub Copilot app the first step, as you might imagine, is to install it. Versions are available for Windows, macOS and Linux. Let's install the app, authenticate, and select add our Tailspin Toys repo to the app.
+
+1. In a browser, open the [landing page for the GitHub Copilot app][download-app].
+2. Download the app for your platform and install it following the instructions provided on the landing page.
+3. Open the app once it's installed.
+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.
+5. After authenticating, you'll be asked about connecting your repositories. Select the Tailspin Toys repo you just created, which should be named `/tailspin-toys`.
+6. Select **Continue** to continue the onboarding.
+7. When prompted for a theme, select the one which brings you the most joy, then select **Finish**.
+
+> [!NOTE]
+> 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 (\/tailspin-toys), then select it. Your repo will now be added to the Copilot app!
+
+## Get oriented in the workspace
+
+With your project connected, take a moment to learn your way around. The app organizes everything into a few areas in the sidebar:
+
+- **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 in the next lesson.
+- **Quick 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.
+- **My work** — your issues and pull requests, surfaced through the app's **native GitHub integration**. From here you can browse and filter issues and pull requests, check CI status, start a session from an issue, and review pull requests — all without leaving the app.
+- **Automations** — saved agent tasks that run on a schedule or on demand. You'll create one near the end of the harness.
+
+### Find your seeded backlog
+
+Because the app integrates with GitHub natively, the work waiting in your repository shows up right inside the app. When you created your repository from the template, a backlog of issues was filed for you — let's confirm it's there.
+
+1. Select **My work** in the sidebar.
+2. Confirm you see the three issues the template seeded for your backlog:
+
+ - Allow users to filter games by category and publisher
+ - Add a custom instructions standard so generated TypeScript code includes clear TSDoc doc comments
+ - Stretch Goal: Implement pagination on the game list page
+
+3. Select an issue to read its details. Each issue is also a launch point for an agent session — you'll start work from these issues later in the harness.
+
+> [!NOTE]
+> The list of items in My work is automatically filtered to only display items from the repositories you've added to Copilot app. Want to see work items from other repos? Add them to the app!
+
+## Try a quick chat
+
+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.
+
+1. In the sidebar, select **+** next to **Quick chats** to open a new chat.
+2. Ask the app how its own sessions work:
+
+ ```plaintext
+ How does the GitHub Copilot app use worktrees?
+ ```
+
+3. Read the response in the conversation view. You'll see that each session runs in its own isolated git worktree — the detail that lets you run several agents in parallel without their changes colliding. You can continue the conversation or start a new chat at any time.
+
+## Summary and next steps
+
+Congratulations! You've installed the GitHub Copilot app, connected your project, and explored your workspace. You learned how to:
+
+- install the app and sign in to GitHub.
+- add a project from its GitHub repository.
+- get oriented in the workspace and find your seeded backlog in **My work**.
+- use a quick chat to ask a fast, throwaway question.
+
+Next, you'll start your first agent session and make your first change to the project — showing a star rating on the game cards. Continue to [Lesson 2 - Running your first agent session][next-lesson].
+
+## Resources
+
+- [About the GitHub Copilot app][about-copilot-app]
+- [Getting started with the GitHub Copilot app][getting-started]
+- [Working with agent sessions in the GitHub Copilot app][agent-sessions]
+
+[ex0]: ../0-prerequisites/
+[next-lesson]: ../2-add-star-rating/
+[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app
+[getting-started]: https://docs.github.com/copilot/how-tos/github-copilot-app/getting-started
+[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions
+[download-app]: https://gh.io/app
diff --git a/docs/src/content/docs/app/2-add-star-rating.mdx b/docs/src/content/docs/app/2-add-star-rating.mdx
new file mode 100644
index 00000000..fd275275
--- /dev/null
+++ b/docs/src/content/docs/app/2-add-star-rating.mdx
@@ -0,0 +1,131 @@
+---
+title: "Lesson 2 - Running your first agent session"
+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."
+---
+
+In the previous lesson you toured the workspace and used a quick chat. Now 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.
+
+In this lesson, you will:
+
+- start an agent session and learn how a session is structured.
+- ask the agent to make a small, focused change to the project.
+- review the change in the workspace diff view.
+- run the app locally to confirm the change in the browser.
+- open and merge your first pull request.
+
+## Scenario
+
+Each game in Tailspin Toys can have a star rating, and it already appears on the game details page. The game cards on the home page, though, only show the title, category, publisher, and description. As a warm-up, you'll have the agent display the existing rating on each card — a tiny, self-contained change that's perfect for your first session.
+
+## Anatomy of a session
+
+A **session** is a conversation with an agent that runs in its own isolated workspace. Every session gets a **dedicated git worktree and branch**, which is what lets you run several sessions at once — one adding a feature, another fixing a bug — without their changes colliding. Your sessions appear in the sidebar grouped by repository; select any one to switch to it.
+
+Inside a session you'll see three things: the **conversation** with the agent, the agent's **tool activity** as it explores and edits files, and the list of **changed files** with their diffs.
+
+## Start a session and request our change
+
+Let's start a new session to begin exploring the project and implementing our feature. In a [prior lesson][prior-lesson] you added your project from its GitHub repository. We'll create a new session for that repository and request our change.
+
+1. Return to (or open) the GitHub Copilot app.
+2. Select the **Home screen**.
+3. Ensure `tailspin-toys` is selected for the repo.
+
+ 
+
+4. Use the following prompt to request the change:
+
+ ```plaintext
+ On the game cards, show each game's star rating. The Game type already includes a starRating field — it's a number out of 5, or null when a game hasn't been rated yet. Display it on each card in src/components/GameCard.astro, and when starRating is null show "No rating yet" instead. Keep the change small and don't restructure the card layout.
+ ```
+
+> [!NOTE]
+> Notice how the prompt contained the name of the file for Copilot to update. While it's not required at all to specify which files Copilot should include in its work, pointing it in the right direction both helps Copilot quickly generate code and reduce token usage.
+
+5. Select Enter to send the prompt to Copilot.
+
+Copilot app begins work by first creating a new worktree, an isolated copy of the project. It then explores the project, locating the necessary files to update to add the new feature. It will then create the necessary code. You've now added a new feature with Copilot app!
+
+## Review the diff
+
+All AI-generated changes deserve a review before they're merged, even small ones. Let's explore the changes, right here in Copilot app.
+
+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.
+
+ 
+
+2. You should notice code added to `GameCard.astro`, the core file used to display game details. It should be similar to the following — a small block that renders the rating when present and falls back to "No rating yet" when `starRating` is `null`:
+
+ ```astro
+ {game.starRating !== null ? (
+
+ ★ {game.starRating} / 5
+
+ ) : (
+
+ No rating yet
+
+ )}
+ ```
+
+> [!NOTE]
+> Because Copilot, like all generative AI tools, is probabilistic rather than deterministic, the exact code may vary from the above. But it should be relatively similar.
+
+## Check the changes
+
+Of course we shouldn't just read the code and assume it works. We should visually test everything as well! To do so we'll need to start the app from the terminal, then confirm everything works. Fortunately there's a terminal button in the upper right that will allow us quick access to the worktree the Copilot app created!
+
+1. In the upper right hand corner of the Copilot app, select **Open** next to the terminal icon.
+
+ 
+
+2. Enter the following command in the terminal window to start the web app's dev server:
+
+ ```shell
+ npm run dev
+ ```
+
+3. Once the server starts (this will just take a moment), open a browser window.
+4. Navigate to http://localhost:4321.
+5. You should now see star ratings on all the games on the landing page!
+6. Return to the terminal window.
+7. Select Ctl +C to stop the dev server.
+
+## Open and merge your first pull request
+
+Your change looks good — now it's time to ship it! You'll ask the agent to open a pull request, then review and merge it yourself on github.com. For now we'll manage this manually. In an upcoming lesson we'll explore how Copilot can handle some of the work for you automatically.
+
+1. In the upper right hand corner, select **Create PR**.
+2. If prompted, select **Sign in with your browser** and follow the prompts to authenticate.
+3. Copilot gets to work on creating the PR.
+
+Once the PR is created, Copilot will monitor any workflows on the repository that need to run. After a few moments, the button in the upper right will change to **Ready to merge**. This will be your indication your PR is ready to merge!
+
+4. Select **Ready to merge**.
+5. Select **Merge pull request** on the new dialog window the merge your pull request!
+
+You've now pushed a new feature to the website!
+
+## Summary and next steps
+
+You've started your first agent session and shipped your first change! Specifically, you:
+
+- started an agent session and learned how sessions are structured.
+- directed the agent to make a small, focused change to the game cards.
+- reviewed the change in the workspace diff view.
+- ran the app locally to confirm the star rating in the browser.
+- opened a pull request and merged it yourself on github.com.
+
+Next, you'll use the app to add a custom instructions standard to the repository — starting from one of the issues in your backlog. Continue to [Lesson 3 - Guiding Copilot with custom instructions][next-lesson].
+
+## Resources
+
+- [Working with agent sessions in the GitHub Copilot app][agent-sessions]
+- [About the GitHub Copilot app][about-copilot-app]
+- [Managing issues and pull requests with the GitHub Copilot app][managing-issues-prs]
+
+[prior-lesson]: ../1-install-copilot-app/#install-and-configure-the-github-copilot-app
+[next-lesson]: ../3-custom-instructions/
+[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions
+[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app
+[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests
diff --git a/docs/src/content/docs/app/3-custom-instructions.mdx b/docs/src/content/docs/app/3-custom-instructions.mdx
new file mode 100644
index 00000000..031a0cfd
--- /dev/null
+++ b/docs/src/content/docs/app/3-custom-instructions.mdx
@@ -0,0 +1,156 @@
+---
+title: "Lesson 3 - Guiding Copilot with custom instructions"
+description: "Use the GitHub Copilot app to add a custom instructions standard to your repository, starting from an issue in your backlog and merging the change as a pull request."
+---
+
+Context is key when working with generative AI. If a task needs to be done a particular way — or there's background information Copilot should know — you want that context available. One of the most powerful tools for this is [instruction files][instruction-files], which describe not just *what* code you want but *how* it should be structured. In this lesson you'll add a documentation standard to your repository, and you'll do it the way you'll do most work from here on: starting from an issue in your backlog and letting the agent make the change.
+
+In this lesson, you will:
+
+- explore how repository instructions and path-scoped instruction files reach the agent.
+- start a session from the instructions issue in your backlog.
+- ask the agent to add a documentation standard to `.github/copilot-instructions.md`.
+- review the change and merge it as a pull request.
+
+## Scenario
+
+As any good dev shop, Tailspin Toys has a set of guidelines and requirements for development practices. These include:
+
+- Documentation should be added to code in the form of TSDoc doc comments.
+- Formatting should be documented and enforced through linting.
+
+Through the use of instruction files you'll ensure Copilot has the right information to perform the tasks in alignment with the practices highlighted.
+
+## Instruction files
+
+Custom instructions allow you to provide context and preferences to Copilot, so that it can better understand your coding style and requirements. This is a powerful feature that can help you steer Copilot to get more relevant suggestions and code snippets. You can specify your preferred coding conventions, libraries, and even the types of comments you like to include in your code. You can create instructions for your entire repository, or for specific types of files for task-level context.
+
+There are two types of instructions files:
+
+- `.github/copilot-instructions.md`, a single instruction file sent to Copilot for **every** request for the repository. This file should contain project-level information — context relevant for most chat or CLI requests sent to Copilot. This could include the tech stack being used, an overview of what's being built, best practices, and other global guidance.
+- `.github/instructions/*.instructions.md` files can be created for specific tasks or file types. You can use them to provide guidelines for particular languages (like TypeScript or Astro), or for tasks like creating a UI component or a new set of unit tests.
+
+> [!NOTE]
+> When working in your IDE, instructions files are only used for code generation in Copilot Chat — not for code completions or next-edit suggestions.
+>
+> Copilot Chat, Copilot CLI and Copilot cloud agent use both repository-level and `*.instructions.md` files (with `applyTo` front matter) when generating code.
+>
+> Finally, Copilot [supports instructions files using other standards][custom-instructions-support], including AGENTS.md and CLAUDE.md files.
+
+### Best practices for managing instructions files
+
+A full conversation about creating instructions files is beyond the scope of the workshop. However, the examples provided in the sample project show a representative approach. At a high level:
+
+- Keep instructions in `copilot-instructions.md` focused on project-level guidance, such as a description of what's being built, the structure of the project, and global coding standards.
+- Use `*.instructions.md` files to provide specific instructions for file types (unit tests, Astro components, the data layer), or for specific tasks.
+- Use natural language. Keep guidance clear. Provide examples of how code should (and shouldn't) look.
+
+There isn't one specific way to create instructions files, just as there isn't one specific way to use AI. You will find through experimentation what works best for your project.
+
+> [!TIP]
+> Every project using GitHub Copilot should have a robust collection of instruction files. As you explore the ones in this project, you may notice there are instructions files for numerous types of code files.
+>
+> Looking for templates or a starting point? Explore [awesome-copilot][awesome-copilot], a repository full of instruction files, custom agents, and other resources.
+
+## Explore the custom instructions files in this project
+
+Take a moment to read the instruction files this repository ships with — there's one core `copilot-instructions.md` and a collection of `*.instructions.md` files for various tasks. Open these in your editor or the GitHub web UI.
+
+1. Open your repository on GitHub.
+2. Navigate to `.github/copilot-instructions.md`.
+3. Explore the file, noting the brief description of the project plus sections such as **Agent notes**, **Code standards**, **Scripts**, and **Repository Structure**. Under **Code standards**, note the nested **GitHub Actions Workflows** guidance. These are applicable to any interactions you'd have with Copilot.
+4. Navigate to the `.github/instructions` folder and look around. Note there are instructions for Astro files, the Drizzle data layer, tests, and more.
+5. Open `.github/instructions/unit-tests.instructions.md`. Note the `applyTo` field at the top — this sets a glob (relative to the repo root) that determines which files the instructions apply to. Here, any TypeScript test file (for example, one matching `**/*.test.ts`) will match.
+6. Note the instructions specific to creating unit tests for this project.
+7. Finally, open `.github/instructions/drizzle.instructions.md` and scroll to the bottom. Note the links to other instruction files (like `unit-tests.instructions.md`) and existing files in the project. This lets you break larger instruction sets into smaller, reusable files, and point Copilot at examples to follow when generating code. (Paths there are relative to the instruction file rather than the repo root.)
+
+> [!NOTE]
+> The **Code formatting requirements** section in `copilot-instructions.md` documents the project's coding standards, but it doesn't yet require in-code documentation. In the next steps, you'll add rules for TSDoc doc comments and file comment headers.
+
+## Start from the instructions issue
+
+In the previous lesson you started a session from a direct prompt. Most work, however, starts with an issue. Let's create a new session based off an issue filed to update the instructions files, then make the request for the update.
+
+> [!NOTE]
+> Because instructions files have a large impact on the code generated by Copilot, care should be taken in ensuring they clearly guide Copilot. Having Copilot create a first version, like you'll do in this lesson is a great approach, followed by a review by you to ensure the updates meet your requirements.
+
+1. Select **My work** in the sidebar
+2. Select the issue titled **Add a custom instructions standard so generated TypeScript code includes clear TSDoc doc comments** to open the issue.
+3. Select **New session** in the upper right to start a new session based on the issue.
+
+ 
+
+4. Use the following prompt to request Copilot update the instructions files to meet the requirements documented in the issue:
+
+ ```plaintext
+ Following this issue, make the updates to the instructions files in this project to meet the requirements documented. Don't create the PR quite yet!
+ ```
+
+Copilot will make the updates!
+
+## Review the change
+
+Let's both read through the updates Copilot made, but also ask it to provide an example of the code it will now generate based on the updated instructions.
+
+1. Select **Changes** in the upper right to open the code changes.
+
+ 
+
+2. Review the updated instructions file. Confirm it has the guidelines about adding documentation and comments to the code.
+
+> [!NOTE]
+> Because AI is probabilistic rather than deterministic, the exact text will vary.
+
+3. Use the following prompt to ask Copilot to create an example of the code it will now generate:
+
+ ```plaintext
+ Do not make any updates, but show me what the code would look like. Based on the new instructions, if I asked Copilot to create a new library component to return all Publishers what would that code look like?
+ ```
+
+4. Review the code Copilot proposes. Note the TSDoc doc comments and the file header comment it includes — exactly what the updated instructions ask for.
+
+You've now updated the instructions files in the project and seen the impact it will have!
+
+## Open and merge the pull request
+
+Instructions files become assets in the repository, meaning they're shared with the rest of the team. Let's create a PR with our work, just like we would any other asset!
+
+1. In the upper right hand corner, select **Create PR**.
+2. If prompted, select **Sign in with your browser** and follow the prompts to authenticate.
+3. Copilot gets to work on creating the PR.
+
+Once the PR is created, Copilot will monitor any workflows on the repository that need to run. After a few moments, the button in the upper right will change to **Ready to merge**. This will be your indication your PR is ready to merge!
+
+4. Select **Ready to merge**.
+5. Select **Merge pull request** on the new dialog window to merge your pull request!
+
+> [!NOTE]
+> With the standard merged into your default branch, it becomes part of the project for everyone — and for every new session. When you start the filtering session in the next lesson from an up-to-date default branch, the agent will follow this standard automatically. You'll see the TypeScript it generates include TSDoc doc comments without being asked — a small but real demonstration of instructions shaping generated code.
+
+## Summary and next steps
+
+You explored how the app picks up context from instruction files, then used a session to add and merge a repository-wide standard. Specifically, you:
+
+- explored the repository's `copilot-instructions.md` and path-scoped `*.instructions.md` files.
+- started a session from the instructions issue in your backlog.
+- asked the agent to add a documentation standard to `.github/copilot-instructions.md`.
+- reviewed the change and merged it as a pull request.
+
+Next, you'll build the filtering feature in a fresh session — and watch it pick up the standard you just merged. Continue to [Lesson 4 - Building a feature with Autopilot][next-lesson].
+
+## Resources
+
+- [Instruction files for GitHub Copilot customization][instruction-files]
+- [Customizing the GitHub Copilot app][customize-app]
+- [Best practices for creating custom instructions][instructions-best-practices]
+- [Awesome Copilot — a collection of instruction files and other resources][awesome-copilot]
+
+[next-lesson]: ../4-build-filtering/
+[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses
+[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app
+[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository
+[awesome-copilot]: https://awesome-copilot.github.com/github
+[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support
+[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md
+[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md
+[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests
diff --git a/docs/src/content/docs/app/4-build-filtering.mdx b/docs/src/content/docs/app/4-build-filtering.mdx
new file mode 100644
index 00000000..ee1eaa5b
--- /dev/null
+++ b/docs/src/content/docs/app/4-build-filtering.mdx
@@ -0,0 +1,177 @@
+---
+title: "Lesson 4 - Building a feature with Autopilot"
+description: "Use Plan and Autopilot modes in the GitHub Copilot app to build a static, client-side filtering feature, watch it inherit your documentation standard, and verify it with an agent skill."
+---
+
+We've made a couple of small updates to our project thus far. But more robust changes require a more robust process. Fortunately, the GitHub Copilot app is built to work with our existing flow, ensuring we build the right things the right way. This is the first of three lessons where you will follow a typical development process, starting by using an issue to generate a new feature and an agent skill to run the validation tests and linters.
+
+In this lesson, you will:
+
+- start a fresh session from the filtering issue.
+- use **Plan** mode to plan the feature, then **Autopilot** to build it.
+- confirm the generated code follows the documentation standard you merged earlier.
+- verify your work with the project's `quality-checks` skill.
+
+## Scenario
+
+The home page lists every game, but visitors can't narrow the list down. The filtering issue asks you to let them filter games by **category** and **publisher**. Let's use Copilot to implement that functionality.
+
+## Background
+
+Introducing AI coding agents to your development flow doesn't change the fundamentals. If anything, they become even more important! Most developers follow a flow that resembles:
+
+1. Open a filed issue with details of what needs to be done.
+2. Create a plan of what needs to be built.
+3. Build and review the code.
+4. Run the tests to validate the code.
+5. Manually validate the new functionality.
+6. Create a pull request (PR).
+7. Once the code has been reviewed and the continuous integration process succeeds, merge the code.
+
+> [!NOTE]
+> Depending on your team and organization, the exact specifics will vary. But most will be a variation on the theme listed above.
+
+By sticking to this standard approach you ensure the code generated by AI meets the requirements set forth, and goes through the same vetting process as code written by hand.
+
+## Session modes
+
+The **session mode** controls how much autonomy the agent has. You can set it from the dropdown below the prompt field and change it at any time:
+
+- **Interactive**: You and the agent work together. The agent suggests changes and waits for your input before proceeding.
+- **Plan**: The agent creates a plan first. You review and approve the plan before the agent executes it.
+- **Autopilot**: The agent works fully autonomously—writing code, running tests, and iterating without waiting for input.
+
+## Plan the filtering feature
+
+The best time to catch a potential issue is before any code is written, and the best way to do that is a bit of planning in advance. By planning with Copilot you'll ask Copilot to generate a set of steps and document the approach it will take. You can then review the plan, make any suggestions you might have to improve it, before letting Copilot generate the code based on the plan.
+
+Let's open the issue, start a new session, and create a plan by switching into plan mode and making the request.
+
+1. Select **My work** from the navigation tab.
+2. Select the issue titled **Allow users to filter games by category and publisher**.
+3. Select **New session** in the upper right.
+
+ 
+
+4. Select Shift +Tab until the mode displays **Plan**.
+
+ 
+
+5. Send the following prompt. The filtering issue is already in this session's context because you started from it:
+
+ ```plaintext
+ Plan the work based on the requirements documented in the issue. Please ask any clarifying questions you might have as you build the plan.
+ ```
+
+6. The agent may ask follow-up questions as it builds the plan. Answer them based on how you'd build the feature.
+
+> [!NOTE]
+> Because Copilot is probabilistic, the exact follow-up questions Copilot asks will vary. In fact, it might not ask any questions! This is perfectly normal.
+
+7. Once completed, Copilot will offer a plan summary. Review the plan. You should see it propose building queries, adding filter controls, and of course tests. Provide feedback to refine it if you'd like — the agent will incorporate your suggestions into a new version.
+
+## Build it with Autopilot
+
+With the plan created, let's let Copilot build the implementation!
+
+1. In the list of options in the **Plan summary** dialog, select the option closest to **Approve and implement with autopilot**.
+
+Copilot will begin work on the implementation!
+
+> [!NOTE]
+> If Copilot doesn't automatically start creating the necessary code, you can prompt it to do so by using a prompt like "Go ahead and start building out the plan!".
+>
+> Creating the necessary updates will take several minutes. The agent edits and creates files, writes and runs tests, and iterates. Now's a good time to reflect on what you've explored so far, or to enjoy a beverage.
+
+## Review the changes
+
+All AI-generated code needs review before it's merged. Let's both review the code and run the site to ensure everything looks good.
+
+1. Select **Changes** in the upper right to open the code changes.
+
+ 
+
+2. Review the changes. You should see new TypeScript and Astro files, and test files. Notice the new helper functions include TSDoc doc comments and a file header comment — the documentation standard you merged in Lesson 3, applied automatically without being asked.
+3. In the upper right hand corner of the Copilot app, select **Open** next to the terminal icon.
+
+ 
+
+4. Enter the following command in the terminal window to start the web app's dev server:
+
+ ```shell
+ npm run dev
+ ```
+
+5. Once the server starts (this will just take a moment), open a browser window.
+6. Navigate to http://localhost:4321.
+7. You should now see filters available on the landing page!
+8. If anything doesn't look right, you can ask Copilot to make the updates!
+9. Once satisfied, return to the terminal window.
+10. Select Ctl +C to stop the dev server.
+
+## Verify your work with the quality-checks skill
+
+You could eyeball the diff and call it done, but the team has a defined quality bar — and a repeatable way to check it.
+
+**Agent skills** let you give Copilot guidance on how to perform repeatable tasks like running tests, generating builds, or creating pull requests. A skill is a folder of instructions, scripts, and resources that the agent can load on demand. [Agent Skills is an open standard][agent-skills-repo] used by a range of agents, so the same skill works across Copilot Chat in agent mode, Copilot cloud agent, Copilot CLI, and the GitHub Copilot app.
+
+Skills live in the `.github/skills` folder of a project, or globally in `~/.copilot/skills`. Each skill is a folder containing a `SKILL.md` file with YAML frontmatter (a `name` and a `description`) followed by the markdown instructions:
+
+```yaml
+---
+name: quality-checks
+description: Run the project's test suites and linter to verify code changes are ready to commit, push, or merge.
+---
+```
+
+Skills can also include subfolders with scripts, assets, and reference material. The full structure is covered in the [agent skills specification][agent-skills-spec].
+
+> [!TIP]
+> Skills are loaded dynamically. The agent decides which skill applies based on the `description` field — a clear, scenario-specific description is the difference between a skill that gets used and one that gets ignored.
+
+## Explore the quality-checks skill
+
+Let's explore the skill to see what it does.
+
+1. Open your repository on GitHub.
+1. Follow the links in your repo to open `.github/skills/quality-checks/SKILL.md` in your project.
+2. Note the `name` and `description`. The description tells the agent *when* to use it — whenever code changes need to be tested, linted, or verified before a commit, push, or merge.
+3. Read through the skill. Notice it documents which script runs which suite (unit tests, Playwright end-to-end tests, ESLint), in what order, and how to debug common failures — so the agent runs the checks the team's way instead of guessing.
+
+## Run the checks
+
+In the same filtering session, ask the agent to verify the work. You won't name the skill — the agent will match it from your request.
+
+1. Return to Copilot app.
+2. Directly call the skill by using the slash command `/quality-checks` and select Enter .
+3. Following the skill, the agent runs the unit tests, the linter, and the end-to-end tests, and reports the results. If anything fails, ask it to fix the issue and run the checks again until everything is green.
+4. **Keep this session open.** In the next lesson you'll add the Playwright MCP server and use it to see the filtering feature working in a real browser.
+
+## Summary and next steps
+
+You built a real feature end to end and verified it against the team's bar! Specifically, you:
+
+- started a fresh session from the filtering issue on an up-to-date project.
+- used Plan mode to plan the feature and Autopilot to build it, with static-Astro constraints.
+- confirmed the generated helper followed the documentation standard you merged in Lesson 3.
+- verified your work with the `quality-checks` skill.
+
+Next, you'll connect the Playwright MCP server and ask the agent to explore your filtering feature in a real browser. Continue to [Lesson 5 - Testing with the Playwright MCP server][next-lesson].
+
+## Resources
+
+- [Working with agent sessions in the GitHub Copilot app][agent-sessions]
+- [About Agent Skills][about-agent-skills]
+- [Customizing the GitHub Copilot app][customize-app]
+- [About cloud and local sandboxes for GitHub Copilot][sandboxes]
+
+[ex0]: ../0-prerequisites/
+[ex2]: ../2-add-star-rating/
+[ex3]: ../3-custom-instructions/
+[next-lesson]: ../5-mcp-playwright/
+[agent-sessions]: https://docs.github.com/copilot/how-tos/github-copilot-app/agent-sessions
+[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills
+[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app
+[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes
+[agent-skills-repo]: https://github.com/agentskills/agentskills
+[agent-skills-spec]: https://agentskills.io/specification
diff --git a/docs/src/content/docs/app/5-mcp-playwright.mdx b/docs/src/content/docs/app/5-mcp-playwright.mdx
new file mode 100644
index 00000000..7ac89992
--- /dev/null
+++ b/docs/src/content/docs/app/5-mcp-playwright.mdx
@@ -0,0 +1,83 @@
+---
+title: "Lesson 5 - Testing with the Playwright MCP server"
+description: "Add the Playwright MCP server to the GitHub Copilot app and ask the agent to manually test your filtering feature in a real browser."
+---
+
+In the previous lesson you created and verified the filtering feature with the project's automated test suite. Tests automate validation of code, but allowing the agent to confirm behavior is powerful. It allows an agent to respond to issues it sees in the actual UI it's creating. Let's explore how MCP allows access to external capabilities to AI agents, and add the Playwright MCP server to allow Copilot to interact with the site you're building directly.
+
+In this lesson, you will:
+
+- understand what Model Context Protocol (MCP) is and how the GitHub Copilot app uses it.
+- add the Playwright MCP server from the app settings.
+- ask the agent to drive a browser and explore your filtering feature.
+
+## Scenario
+
+While unit and end to end tests are important, validating updates to the UI require actually interacting with the UI. You want to allow Copilot to use the website you're working on as a user would to further automate how changes are made, providing more confidence the updates perform as expected.
+
+## What is Model Context Protocol (MCP)?
+
+[Model Context Protocol (MCP)][mcp-blog-post] provides AI agents with a way to communicate with external tools and services. By using MCP, AI agents can communicate with external tools and services in real-time. This allows them to access up-to-date information (using resources) and perform actions on your behalf (using tools).
+
+These tools and resources are accessed through an MCP server, which acts as a bridge between the AI agent and the external tools and services. The MCP server is responsible for managing the communication between the AI agent and the external tools (such as existing APIs or local tools like NPM packages). Each MCP server represents a different set of tools and resources that the AI agent can access.
+
+A couple of popular existing MCP servers are:
+
+- **[GitHub MCP Server](https://github.com/github/github-mcp-server)**: This server provides access to a set of APIs for managing your GitHub repositories. It allows the AI agent to perform actions such as creating new repositories, updating existing ones, and managing issues and pull requests.
+- **[Playwright MCP Server][playwright-mcp-server]**: This server provides browser automation capabilities using Playwright. It allows the AI agent to perform actions such as navigating to web pages, filling out forms, and clicking buttons.
+
+There are many other MCP servers available that provide access to different tools and resources. GitHub hosts an [MCP registry](https://github.com/mcp) to enhance discoverability and contributions to the ecosystem.
+
+> [!CAUTION]
+> Treat MCP servers as you would any other dependency in your project. Before using an MCP server, carefully review its source code, verify the publisher, and consider the security implications. Only use MCP servers that you trust and be cautious about granting access to sensitive resources or operations.
+
+## Add the Playwright MCP server
+
+You add and manage MCP servers from the app settings. The app includes a catalog of popular servers, so the [Playwright MCP server][playwright-mcp-server] is just a couple of clicks away.
+
+1. Select Ctl +, to open the Copilot app settings page.
+2. Select **MCP servers**.
+3. In the search dialog, type `Playwright`.
+4. Select **Playwright** from the list of **Popular MCP servers**.
+5. Select **Add server** to add it to the list of available MCP servers.
+6. Select Esc to close the settings dialog.
+
+You've now added the Playwright MCP server!
+
+## Ask Copilot to explore the feature via Playwright
+
+Let's ask Copilot to test the feature manually by using the Playwright MCP server.
+
+1. Use the following prompt to ask Copilot to validate the new functionality:
+
+ ```plaintext
+ Start the dev server then use the Playwright MCP server to validate the functionality you just added exists. Use the details in the issue to ensure the newly added behavior matches the specs.
+ ```
+
+Copilot will launch a browser through the Playwright MCP server, walk through each step, and report back what it found. You'll actually see it open a browser on your system to perform the tasks!
+
+2. Read its summary against the acceptance criteria in the issue. If something looks off, ask follow-up questions or send it back to fix the code before you open a pull request.
+3. Leave this session open as we're going to close it out in the next lesson!
+
+Copilot has now also validated the functionality in the browser by exploring the feature like a user would.
+
+## Summary and next steps
+
+Congratulations, you used the Playwright MCP server to explore your feature in a real browser from the GitHub Copilot app! To recap, you:
+
+- learned what Model Context Protocol (MCP) is and how the app makes MCP tools available.
+- added the Playwright MCP server from the app settings.
+- asked the agent to drive a browser and explore your filtering feature.
+
+Your feature is built, verified, and seen working. Now it's time to ship it — using **Agent Merge** to open and merge the pull request for you. Continue to [Lesson 6 - Merging with Agent Merge][next-lesson].
+
+## Resources
+
+- [What the heck is MCP and why is everyone talking about it?][mcp-blog-post]
+- [Microsoft Playwright MCP Server][playwright-mcp-server]
+- [Configuring MCP servers in the GitHub Copilot app][customize-app]
+
+[next-lesson]: ../6-agent-merge/
+[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/
+[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp
+[customize-app]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app
diff --git a/docs/src/content/docs/app/6-agent-merge.mdx b/docs/src/content/docs/app/6-agent-merge.mdx
new file mode 100644
index 00000000..dfbceeb3
--- /dev/null
+++ b/docs/src/content/docs/app/6-agent-merge.mdx
@@ -0,0 +1,64 @@
+---
+title: "Lesson 6 - Merging with Agent Merge"
+description: "Open the filtering pull request, review it in My work, and let Agent Merge fix what's blocking it and merge it for you — the top rung of the merge-automation ladder."
+---
+
+Your filtering feature is built, verified, and seen working in a browser. The last step is to merge it. You've merged twice already in this harness — both times you opened the pull request and merged it yourself on github.com. This time you'll let the app do the heavy lifting with **Agent Merge**, which shepherds a pull request through its whole lifecycle from inside the app.
+
+In this lesson, you will:
+
+- learn what Agent Merge is and how it automates the merge lifecycle.
+- enable Agent Merge on your filtering session.
+- watch it create the pull request, run CI, and merge when everything is green.
+
+## Scenario
+
+Over the last few modules you've explored various levels of automation, from creating code to allowing Copilot to validate a UI directly. To further speed development, Tailspin Toys would like to see if there's a way pull requests that have been vetted and validated can automatically be merged.
+
+## Introducing Agent Merge
+
+**Agent Merge** allows automation of the last mile of landing a pull request via Copilot app. When you enable it, the app's session reads your pull request, addresses what's blocking it — fixing failing CI checks, responding to review comments, rebasing when needed — and merges it as soon as GitHub allows. It runs in the background, survives app restarts, and turns itself off once your pull request is merged.
+
+Up to this point you've been the one clicking **Merge pull request** on github.com. Agent Merge shifts that responsibility to the agent so you can move on to the next task while it shepherds the PR through to completion. You still review and approve the work — the agent just handles the mechanical finish line.
+
+## Use Agent Merge to manage the PR
+
+You've reviewed the code manually, ran tests, and even allowed Copilot to validate the UI. Now it's time to merge the new code into the codebase! Let's allow agent merge to shepherd the PR through continuous integration (CI) and to merge.
+
+1. Return to the session you had open from the previous module where you were adding filtering functionality.
+2. In the upper right-hand corner, select the dropdown next to **Create PR**.
+3. Select **Agent merge** to enable agent merge.
+
+ 
+
+4. The button text now changes to **Agent merge**.
+5. Select the **Agent merge** button to start the agent merge process.
+
+Copilot app then begins the process of creating and managing the PR! It starts by exploring the project to determine how best to create a PR, following by creating the new PR.
+
+After a few moments, you'll notice Copilot starts work again, looking at the PR conditions - the CI process of running all the tests on your repository. It will report back status on any reviews left by other team members, any checks that need to run (the CI process), and if the PR is mergeable.
+
+6. Allow agent merge to merge the pull request by selecting the dropdown next to **Agent merge** then **Merge pull request**.
+
+ 
+
+7. Once all CI processes are green (meaning the tests passed), Copilot will merge the pull request!
+
+## Summary and next steps
+
+You've automated several parts of the development process, including generating code, testing and validating code, and now the pull request process. You:
+
+- learned what Agent Merge is and how it automates the merge lifecycle.
+- enabled Agent Merge on your filtering session.
+- watched it create the pull request, run CI, and merge when everything was green.
+
+Next, you'll explore **canvases** — a richer way to plan and visualize work with the agent. Continue to [Lesson 7 - Planning with canvases][next-lesson].
+
+## Resources
+
+- [Managing issues and pull requests with the GitHub Copilot app][managing-issues-prs]
+- [About the GitHub Copilot app][about-copilot-app]
+
+[next-lesson]: ../7-canvases/
+[managing-issues-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests
+[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app
diff --git a/docs/src/content/docs/app/7-canvases.mdx b/docs/src/content/docs/app/7-canvases.mdx
new file mode 100644
index 00000000..3a230d21
--- /dev/null
+++ b/docs/src/content/docs/app/7-canvases.mdx
@@ -0,0 +1,124 @@
+---
+title: "Lesson 7 - Planning with canvases"
+description: "Create a shared, agent-driven canvas in the GitHub Copilot app to plan and track your work alongside the agent."
+---
+
+So far you've directed agents through chat. But a lot of work doesn't live in a conversation — it lives on a board, in a document, or on a checklist. **Canvases** give you and the agent a shared surface for exactly that kind of work, right inside the app. In this lesson you'll create a simple canvas to plan and track the backlog you've been working through.
+
+In this lesson, you will:
+
+- understand what a canvas is and when to use one.
+- create a shared Kanban board canvas to triage your backlog.
+- save the canvas to your repository and merge it for the team.
+- open the canvas in a new session and start work from it.
+
+## Scenario
+
+Looking at a list of issues can be rather daunting, even in the best of times. Tailspin Toy's developers have been looking for a tool that would allow them to quickly triage issues, and begin work on them in Copilot app.
+
+## What is a canvas?
+
+A [canvas][canvas-docs] is a shared, interactive surface for a work artifact — a plan, a triage board, a release checklist, a dashboard, or a document. While chat is great for describing intent and reasoning through ambiguity, most work happens on a *surface*. Canvases let you collaborate with the agent directly on that surface.
+
+Canvases are **bidirectional**: the agent can update the canvas while it works, and you can edit the same surface yourself. When you create a canvas, the agent builds it based on your prompt and workflow, and you can ask it to add, remove, or revise capabilities as you go. Once created, a canvas opens in the app's right side panel.
+
+Some common examples include:
+
+- **Markdown canvases** for planning your day and prioritizing issues and pull requests.
+- **Agentic kanban boards** where people and agents add cards and move work across columns.
+- **Issue triage boards** that summarize top issues and recurring themes for a repository.
+
+## Why use a canvas?
+
+Reach for a canvas when a task needs structure, iteration, and verification, and a chat alone isn't enough. A canvas lets you:
+
+- ground the agent's work in an actual artifact that fits your workflow.
+- steer or correct work directly on the shared surface, then let the agent continue from your changes.
+- inspect progress as visible changes to an artifact, not just chat responses.
+
+## Create a canvas to track your work
+
+You've shipped a lot: the star rating, the documentation standard, and the filtering feature are all merged. But there's still items on the backlog. Let's create the canvas to help quickly triage the work.
+
+1. Return to (or open) the GitHub Copilot app.
+2. Select the **Home screen**.
+3. Ensure `tailspin-toys` is selected for the repo.
+4. In the prompt box, use the following prompt to create our canvas that meets our needs:
+
+ ```plaintext
+ Create a basic Kanban board canvas that allows me to quickly triage work. Highlight the three issues which are most likely to need attention right now, with the remainder in a second section down below. The top three cards should include a description of the issue's content and a justification of why they're at the top of the list. Each issue should have a button that allows me to add it to the current context for the current session so I can get to work on it straightaway.
+ ```
+
+Copilot will get to work on creating the canvas!
+
+> [!NOTE]
+> This will take a few minutes for it to do so. Because this is a complicated task, you might not be satisfied with the first version. You can continue to prompt to build the tool of your dreams!
+
+## Save the canvas and merge it to the repository
+
+Canvases can become assets in the repository, just like instructions files and skills. Let's ask Copilot to add it to our repository and merge it so the whole team can use it.
+
+1. In the same session, ask Copilot to save the canvas to the repository by using the following prompt:
+
+ ```plaintext
+ Let's save this canvas definition to the repository so I can share it with my development team
+ ```
+
+2. Once Copilot has saved the canvas files, select the dropdown next to **Create PR** in the upper right-hand corner.
+3. Select **Agent merge** to enable agent merge.
+
+ 
+
+4. The button text now changes to **Agent merge**.
+5. Select the **Agent merge** button to start the agent merge process.
+
+Copilot app begins the process of creating and managing the PR. It starts by exploring the project to determine how best to create a PR, then creates it.
+
+After a few moments, you'll notice Copilot starts work again, looking at the PR conditions — the CI process of running all the tests on your repository. It will report back status on any reviews left by other team members, any checks that need to run (the CI process), and if the PR is mergeable.
+
+6. Allow agent merge to merge the pull request by selecting the dropdown next to **Agent merge** then **Merge pull request**.
+
+ 
+
+7. Wait for all CI processes to pass (go green). Once they do, Copilot will merge the pull request automatically!
+
+You've now created a new shared canvas for your team!
+
+## Work in the canvas
+
+With the canvas created, let's start a new session and put it to work!
+
+1. Inside the Copilot app, start a new session by selecting **New session** next to **tailspin-toys**.
+2. Ask Copilot to open the triage canvas by using the following prompt:
+
+ ```plaintext
+ Open the triage issues canvas
+ ```
+
+3. You should notice the canvas you built is now open in this new session!
+4. Select **Add to current context** on one of the issues that's of most interest to you.
+5. Copilot gets to work on the issue!
+
+You've now used a canvas you created to streamline the development process.
+
+## Summary and next steps
+
+You created a shared surface where you and the agent can collaborate! You:
+
+- learned what canvases are and when to use them.
+- created a shared Kanban triage board canvas with the agent.
+- saved and merged the canvas to your repository with Agent Merge.
+- opened the canvas in a new session and used it to start work.
+
+With your backlog tracked, take a step back to review everything you've built and where to go next. Continue to [Lesson 8 - Review and next steps][next-lesson].
+
+## Resources
+
+- [Working with canvas extensions in the GitHub Copilot app][canvas-docs]
+- [Canvases on Awesome Copilot][awesome-copilot-canvases]
+- [About the GitHub Copilot app][about-copilot-app]
+
+[next-lesson]: ../8-review/
+[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions
+[awesome-copilot-canvases]: https://awesome-copilot.github.com/canvases
+[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app
diff --git a/docs/src/content/docs/app/8-review.mdx b/docs/src/content/docs/app/8-review.mdx
new file mode 100644
index 00000000..66ade145
--- /dev/null
+++ b/docs/src/content/docs/app/8-review.mdx
@@ -0,0 +1,83 @@
+---
+title: "Lesson 8 - Review and next steps"
+description: "Recap the GitHub Copilot app harness, automate recurring work, and explore where to go next."
+---
+
+Over the last several lessons, you took a feature from idea to merge with the GitHub Copilot app, including:
+
+- connecting a repository and orienting to the app's workspace and your seeded backlog.
+- starting sessions from a direct task and from issues, and using Plan and Autopilot modes to control how the agent works.
+- guiding the agent with custom instructions and a reusable skill.
+- testing your work with the Playwright MCP server in a real browser.
+- collaborating with the agent on a shared canvas.
+- shipping changes up a ladder of merge automation — from merging on github.com yourself to letting **Agent Merge** land a pull request.
+
+Let's automate some recurring work, talk through best practices, and look at where to go next.
+
+## Automate recurring work
+
+The app can run agents for you on a schedule or on demand through **automations** — great for routine tasks like triaging new issues or recapping recent activity. Let's create a simple, non-destructive one.
+
+1. Select **Automations** in the sidebar, then select **New automation**.
+2. Give it a name, such as `Recap my recent work`.
+3. Choose a trigger. **Manual** lets you run it on demand; **On a schedule** runs it automatically; **When an issue is created** reacts to new issues. Choose **Manual** for this lesson.
+4. Enter a read-only prompt so the automation can't change anything, for example:
+
+ ```plaintext
+ Summarize the pull requests merged in this repository over the last week, and list any issues still open in the backlog.
+ ```
+
+5. Pick the project (your Tailspin Toys repository) and create the automation.
+
+ 
+
+6. Run it on demand to see the result.
+
+> [!TIP]
+> Automations can run locally or in the cloud. Enable **Run in the cloud** and pick the **Tools** an automation may use when you want it to run unattended on a schedule. Keep scheduled automations scoped and non-destructive until you trust their output.
+
+## Best practices
+
+When using any AI tool, the infrastructure around it drives the quality of what you get out. Instructions files, skills, and custom agents all played a part in this workshop — invest in them and reuse them across sessions.
+
+Match the **mode and model** to the task. Use **Plan** to think through an approach before building, **Interactive** to stay in the loop on focused changes, and **Autopilot** only for well-scoped, isolated tasks. Choose a faster model for routine edits and a more capable model with higher reasoning effort for complex work.
+
+Context still matters as much as infrastructure. Clearly describing *what* you want built, *why*, and *how* meaningfully changes the output. Quick chats are a great place to scope an idea before you commit it to a full session.
+
+## More to explore
+
+You've covered the core workflow. A few more features worth a look:
+
+- **Quick chats** for fast, throwaway questions that don't need a full session.
+- **Rubber duck** to talk through a problem and get high-signal feedback before you build.
+- [**Custom agents**][custom-agents] to package a role, its tools, and its instructions for repeatable, specialized work.
+- [`/chronicle`][chronicle] to generate a narrative of what happened in a session.
+- [Bring your own key (BYOK)][byok] to use models from your own provider.
+- [Cloud sandboxes][sandboxes] to run sessions in a GitHub-hosted isolated environment.
+- [Deep links][deep-links] to open the app straight into a repository, session, or prompt.
+
+## Next steps
+
+The best way to improve with any tool is to keep using it! Use it for production code, for hobby code, for the little app you've had in mind for years but never got around to building. Share your learnings with your team, and learn from theirs. And, as always, explore the documentation.
+
+If you'd like to explore more of the GitHub Copilot ecosystem, check out the [VS Code harness](../../vscode/), the [Copilot CLI harness](../../cli/), or the [Cloud agent harness](../../cloud/).
+
+## Resources
+
+- [About the GitHub Copilot app][about-copilot-app]
+- [Getting started with the GitHub Copilot app][getting-started]
+- [Customize the GitHub Copilot app][customize]
+- [Using automations][using-automations]
+- [Working with canvas extensions][canvas-docs]
+- [About cloud and local sandboxes][sandboxes]
+
+[about-copilot-app]: https://docs.github.com/copilot/concepts/agents/github-copilot-app
+[getting-started]: https://docs.github.com/copilot/how-tos/github-copilot-app/getting-started
+[customize]: https://docs.github.com/copilot/how-tos/github-copilot-app/customize-github-copilot-app
+[using-automations]: https://docs.github.com/copilot/how-tos/github-copilot-app/using-automations
+[canvas-docs]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions
+[sandboxes]: https://docs.github.com/copilot/concepts/about-cloud-and-local-sandboxes
+[chronicle]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/chronicle
+[custom-agents]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents
+[byok]: https://docs.github.com/copilot/how-tos/github-copilot-app/use-byok-models
+[deep-links]: https://docs.github.com/copilot/how-tos/github-copilot-app/open-with-deep-links
diff --git a/docs/src/content/docs/app/index.mdx b/docs/src/content/docs/app/index.mdx
new file mode 100644
index 00000000..f1d6bf76
--- /dev/null
+++ b/docs/src/content/docs/app/index.mdx
@@ -0,0 +1,54 @@
+---
+title: "GitHub Copilot app"
+---
+
+The **[GitHub Copilot app](https://docs.github.com/copilot/concepts/agents/github-copilot-app)** is a desktop application built on Copilot CLI that brings agent-driven development into a single, focused workspace. It adds parallel agent sessions, switchable session modes, shared canvases, and native GitHub issue and pull request management — including **Agent Merge**, which shepherds a pull request through rebases, review feedback, CI fixes, and merge.
+
+Across these lessons you'll install the app and set up your project, then get oriented in the app's workspace and the backlog the template seeded for you. You'll start with a small change — adding a star rating — then add a custom instructions standard from an issue, build a filtering feature in an isolated agent session, and verify it with a reusable skill. You'll add the Playwright MCP server to explore the feature in a real browser, then climb a ladder of merge automation that ends with **Agent Merge** landing your pull request. Finally you'll collaborate on a shared canvas and automate recurring work — a complete loop from idea to merged feature.
+
+## Lessons
+
+| Lesson | Topic | Description |
+|--------|-------|-------------|
+| [0. Prerequisites][ex0] | Setup | Install Node.js and create your copy of the Tailspin Toys project |
+| [1. Install the Copilot app][ex1] | Setup | Install the app, connect your project, and get oriented in the workspace |
+| [2. Running your first agent session][ex2] | First change | Start a session and ship a small change as your first pull request |
+| [3. Guiding Copilot with custom instructions][ex3] | Context | Add a documentation standard from an issue and merge it |
+| [4. Building a feature with Autopilot][ex4] | Core Feature | Use Plan and Autopilot to build filtering, then verify it with a skill |
+| [5. Testing with Playwright MCP][ex5] | External Tools | Add the Playwright MCP server and explore your feature in a browser |
+| [6. Merging with Agent Merge][ex6] | Merge | Let Agent Merge fix and land your filtering pull request |
+| [7. Planning with canvases][ex7] | Collaboration | Create a shared canvas to plan and track your work |
+| [8. Review and next steps][ex8] | Summary | Automate recurring tasks and explore what's next |
+
+## Prerequisites
+
+Before attending this workshop, please ensure you have:
+
+- [ ] A GitHub account with an active **Copilot Student, Pro, Pro+, Business, or Enterprise** plan
+- [ ] A computer running **macOS, Linux, or Windows**
+- [ ] [Git installed][install-git] on your computer
+
+> [!TIP]
+> No paid plan? Verified students can get GitHub Copilot for free through [GitHub Education][callout-student-plan-education]. The **Copilot Student** plan includes the agent, MCP, code review, and Copilot CLI features this workshop uses — so you can complete every harness with it.
+
+> [!NOTE]
+> Because the Copilot app runs on your own machine rather than in a codespace, [Lesson 0][ex0] walks you through installing Node.js and creating your copy of the project before you install the app.
+
+> [!NOTE]
+> If you are using Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before you can use the app.
+
+## Get Started
+
+**[Start with Lesson 0: Prerequisites →][ex0]**
+
+[ex0]: 0-prerequisites/
+[ex1]: 1-install-copilot-app/
+[ex2]: 2-add-star-rating/
+[ex3]: 3-custom-instructions/
+[ex4]: 4-build-filtering/
+[ex5]: 5-mcp-playwright/
+[ex6]: 6-agent-merge/
+[ex7]: 7-canvases/
+[ex8]: 8-review/
+[install-git]: https://github.com/git-guides/install-git
+[callout-student-plan-education]: https://github.com/education/students
diff --git a/docs/src/content/docs/cli/0-prerequisites.mdx b/docs/src/content/docs/cli/0-prerequisites.mdx
new file mode 100644
index 00000000..bdfe0a5d
--- /dev/null
+++ b/docs/src/content/docs/cli/0-prerequisites.mdx
@@ -0,0 +1,42 @@
+---
+title: "Exercise 0: Prerequisites"
+---
+
+import ExerciseCreateTemplateRepo from '@shared/exercise-create-template-repo.mdx';
+import ExerciseCreateCodespace from '@shared/exercise-create-codespace.mdx';
+import CalloutTemplateSeedsBacklog from '@shared/callout-template-seeds-backlog.mdx';
+
+Before you start the Copilot CLI exercises, you need to get everything ready. You'll create your own copy of the Tailspin Toys repository and spin up a [codespace][codespaces], whose integrated terminal you'll use to install and run Copilot CLI in the next exercise.
+
+## Setting up the lab repository
+
+To create a copy of the repository for the code you'll create, you'll make an instance from the [template][template-repository]. The new instance will contain all of the necessary files for the lab, and you'll use it as you work through the exercises.
+
+
+
+
+
+## Creating a codespace
+
+Next up, you'll use a codespace to complete the lab exercises.
+
+
+
+## Summary
+
+Congratulations, you have created a copy of the lab repository! You also began the creation process of your codespace, which you'll use when you begin working with Copilot CLI.
+
+## Next step
+
+Let's install Copilot CLI and authenticate it with your GitHub account. Continue to [Exercise 1 - Installing GitHub Copilot CLI][next-lesson].
+
+## Resources
+
+- [GitHub Codespaces overview][codespaces]
+- [Creating a repository from a template][template-repository]
+- [Getting started with Codespaces][codespaces-quickstart]
+
+[codespaces]: https://github.com/features/codespaces
+[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository
+[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart
+[next-lesson]: ../1-install-copilot-cli/
diff --git a/docs/src/content/docs/cli/1-install-copilot-cli.mdx b/docs/src/content/docs/cli/1-install-copilot-cli.mdx
index 44232709..8bc6231f 100644
--- a/docs/src/content/docs/cli/1-install-copilot-cli.mdx
+++ b/docs/src/content/docs/cli/1-install-copilot-cli.mdx
@@ -112,7 +112,7 @@ Congratulations! You've successfully installed and authenticated GitHub Copilot
- trust a directory for Copilot CLI to work with.
- verify the installation is working correctly.
-Now that Copilot CLI is installed, let's configure MCP and create the backlog issues you'll use throughout the rest of the path. Continue to [Exercise 2 - MCP servers with CLI][next-lesson].
+Now that Copilot CLI is installed, let's give Copilot some project context. Continue to [Exercise 2 - Custom instructions with CLI][next-lesson].
## Resources
@@ -120,8 +120,8 @@ Now that Copilot CLI is installed, let's configure MCP and create the backlog is
- [About Copilot CLI][about-copilot-cli]
- [Using Copilot CLI][using-copilot-cli]
-[previous-lesson]: ../../prereqs/
-[next-lesson]: ../2-mcp/
+[previous-lesson]: ../0-prerequisites/
+[next-lesson]: ../2-custom-instructions/
[install-copilot-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli
[install-npm]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-npm-all-platforms
[install-winget]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-winget-windows
diff --git a/docs/src/content/docs/cli/3-custom-instructions.mdx b/docs/src/content/docs/cli/2-custom-instructions.mdx
similarity index 64%
rename from docs/src/content/docs/cli/3-custom-instructions.mdx
rename to docs/src/content/docs/cli/2-custom-instructions.mdx
index 3344a250..c2cbf521 100644
--- a/docs/src/content/docs/cli/3-custom-instructions.mdx
+++ b/docs/src/content/docs/cli/2-custom-instructions.mdx
@@ -1,5 +1,5 @@
---
-title: "Exercise 3 - Custom instructions (Copilot CLI)"
+title: "Exercise 2 - Custom instructions (Copilot CLI)"
---
import { Aside } from '@astrojs/starlight/components';
@@ -8,17 +8,17 @@ import ExerciseExploreInstructionsFiles from '@shared/exercise-explore-instructi
import ExerciseInstructionsAddDocstring from '@shared/exercise-instructions-add-docstring.mdx';
import CalloutStartCopilotCliAllowAll from '@shared/callout-start-copilot-cli-allow-all.mdx';
-[← Previous lesson: MCP with CLI][previous-lesson] · [Next lesson: Generating code with CLI →][next-lesson]
+[← Previous lesson: Installing Copilot CLI][previous-lesson] · [Next lesson: Generating code with CLI →][next-lesson]
Context is key when working with generative AI. If a task needs to be done a particular way — or there's background information Copilot should know — you want to make sure that context is available. There are several tools available to you to help Copilot, which we'll explore throughout this workshop. We're going to start with [instruction files][instruction-files], which are typically focused on how the code itself should be structured. This helps Copilot understand not just *what* code you want but *how* it should be structured.
In this exercise, you will:
- explore how project-specific context, coding guidelines, and documentation standards reach Copilot through repository custom instructions and path-scoped instruction files,
-- generate the first backend slice for filtering (a publishers endpoint) with the *current* instructions in place,
+- generate the first data slice for filtering (a publishers helper) with the *current* instructions in place,
- add a new repository-wide standard to `.github/copilot-instructions.md`,
- run a follow-up prompt and watch the regenerated code adopt the new standard,
-- commit the instruction updates and endpoint so the next exercise can build on them.
+- commit the instruction updates and helper so the next exercise can build on them.
Generated code may diverge from some of the standards you set. Copilot is non-deterministic. The goal is to see the *trend* in behavior change after updating the instructions, not to match output character-for-character.
@@ -57,19 +57,19 @@ To see the impact of custom instructions, start by generating code with the curr
1. Make sure your Copilot CLI session is running from the **repository root** so it picks up `.github/copilot-instructions.md` automatically.
-2. At the Copilot CLI prompt, ask it to generate the publishers endpoint that the filtering UI will use:
+2. At the Copilot CLI prompt, ask it to generate the publishers helper that the filtering UI will use:
```plaintext
- Create a new endpoint at server/routes/publishers.py to return a list of all publishers. It should return the name and id for all publishers. Do not run the tests yet.
+ Create a new data-access helper at src/lib/publishers.ts to return a list of all publishers. It should return the name and id for all publishers. Do not run the tests yet.
```
3. Copilot CLI will explore the project, propose a plan, and write the file in this `--yolo` session. Monitor the changes in your terminal output, then review in your editor.
-4. Open the generated `server/routes/publishers.py` in your editor.
-5. Notice the function signatures use [type hints][python-type-hints] — that's coming from a directive already in `.github/copilot-instructions.md`.
-6. Notice the generated code **is missing** docstrings and a file-level comment header.
+4. Open the generated `src/lib/publishers.ts` in your editor.
+5. Notice the helper is a typed function that takes a `db` client as its first argument and returns a typed array of publishers — that's coming from the data-layer conventions in `.github/instructions/drizzle.instructions.md` (which applies to `src/lib/*.ts`).
+6. Notice the generated code **is missing** TSDoc doc comments and a file-level comment header.
- Copilot is probabilistic — there's a chance it'll add docstrings even without being told. If that happens, that's fine; the *consistency* improvement after the instruction update is still the takeaway.
+ Copilot is probabilistic — there's a chance it'll add doc comments even without being told. If that happens, that's fine; the *consistency* improvement after the instruction update is still the takeaway.
## Add a new repository standard
@@ -78,37 +78,37 @@ To see the impact of custom instructions, start by generating code with the curr
## Re-run the prompt and observe the change
-Now that the instructions have a docstring rule, ask Copilot CLI to update the publishers file you just generated. The same standards directive will steer the rewrite.
+Now that the instructions have a doc comment rule, ask Copilot CLI to update the publishers file you just generated. The same standards directive will steer the rewrite.
1. Send `/clear` in your Copilot CLI session to start with a clean conversation.
2. Send the following prompt:
```plaintext
- Update server/routes/publishers.py to follow the latest documentation conventions in .github/copilot-instructions.md.
+ Update src/lib/publishers.ts to follow the latest documentation conventions in .github/copilot-instructions.md.
```
-3. Let the edit complete, then reopen `server/routes/publishers.py`.
+3. Let the edit complete, then reopen `src/lib/publishers.ts`.
4. Notice that the file now opens with a comment block similar to:
- ```python
- """
- Publisher API routes for the Tailspin Toys Crowd Funding platform.
- This module provides endpoints to retrieve publisher information.
- """
+ ```typescript
+ /**
+ * Publisher data-access helpers for the Tailspin Toys Crowd Funding platform.
+ * Provides functions to retrieve publisher information from the database.
+ */
```
-5. Notice that the generated function now includes a docstring similar to:
+5. Notice that the generated function now includes a TSDoc comment similar to:
- ```python
- """
- Returns a list of all publishers with their id and name.
-
- Returns:
- Response: JSON response containing an array of publisher objects
- """
+ ```typescript
+ /**
+ * Returns a list of all publishers with their id and name.
+ *
+ * @param db - The Drizzle database client.
+ * @returns A promise that resolves to an array of publisher objects.
+ */
```
-6. Keep this updated file in place. It's the first backend slice you'll build on in the next exercise.
+6. Keep this updated file in place. It's the first data slice you'll build on in the next exercise.
## Commit and push this first filtering slice
@@ -118,16 +118,16 @@ Now that the instructions have a docstring rule, ask Copilot CLI to update the p
git status
```
-2. Stage the instruction update and the endpoint:
+2. Stage the instruction update and the helper:
```bash
- git add .github/copilot-instructions.md server/routes/publishers.py
+ git add .github/copilot-instructions.md src/lib/publishers.ts
```
3. Commit the changes:
```bash
- git commit -m "Add docstring standards and publishers endpoint foundation"
+ git commit -m "Add doc comment standards and publishers helper foundation"
```
4. Push the branch:
@@ -140,10 +140,10 @@ Now that the instructions have a docstring rule, ask Copilot CLI to update the p
You explored how Copilot picks up context from instruction files in this project, then used Copilot CLI to:
-- generate a Flask endpoint foundation for filtering with the *existing* instructions,
+- generate a publishers data-access helper foundation for filtering with the *existing* instructions,
- add a new repository-wide standard to `.github/copilot-instructions.md`,
- run a follow-up prompt and watch the regenerated code adopt the new standard,
-- commit and push both the instructions update and the endpoint foundation.
+- commit and push both the instructions update and the helper foundation.
Next, you'll apply these instructions while implementing backlog work in [the generating-code exercise][next-lesson].
@@ -154,10 +154,9 @@ Next, you'll apply these instructions while implementing backlog work in [the ge
- [5 tips for writing better custom instructions for Copilot][copilot-instructions-five-tips]
- [Awesome Copilot — a collection of instruction files and other resources][awesome-copilot]
-[previous-lesson]: ../2-mcp/
-[next-lesson]: ../4-generating-code/
+[previous-lesson]: ../1-install-copilot-cli/
+[next-lesson]: ../3-generating-code/
[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses
-[python-type-hints]: https://docs.python.org/3/library/typing.html
[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository
[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/
[awesome-copilot]: https://github.com/github/awesome-copilot
diff --git a/docs/src/content/docs/cli/2-mcp.mdx b/docs/src/content/docs/cli/2-mcp.mdx
deleted file mode 100644
index 6ea09933..00000000
--- a/docs/src/content/docs/cli/2-mcp.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: "Exercise 2 - MCP Servers with GitHub Copilot CLI"
----
-
-import { Aside } from '@astrojs/starlight/components';
-import CalloutStartCopilotCliAllowAll from '@shared/callout-start-copilot-cli-allow-all.mdx';
-import SectionMcpOverview from '@shared/section-mcp-overview.mdx';
-
-There's more to writing code than just writing code. Issues need to be filed, external services need to be called, and information needs to be gathered. Typically this involves interacting with external tools, which can break a developer's flow. Through the power of Model Context Protocol (MCP), you can access all of this functionality right from Copilot CLI!
-
-In this exercise, you will:
-
-- understand what Model Context Protocol (MCP) is and how it works with Copilot CLI.
-- configure Copilot CLI for read/write access to the GitHub MCP server.
-- use GitHub Copilot CLI to create issues in your repository.
-
-## Scenario
-
-You've been assigned various tasks to introduce new functionality to the website. Being a good team member, you want to file issues to track your work. To help future you, you've decided to enlist the help of Copilot. You will set up your backlog of work for the rest of the lab, using GitHub Copilot CLI and the GitHub Model Context Protocol (MCP) server to create the issues for you.
-
-## What is Model Context Protocol (MCP)?
-
-
-
-You can register MCP servers for Copilot CLI to use in a couple of locations. These allow you to both ensure the right MCP servers are available for a project, and to always have access to the ones you use frequently across all projects.
-
-| Location | Access | Editing |
-| --- | --- | --- |
-| `/.mcp.json` | Available to the current project. Becomes an asset in the project. | Manually update the file |
-| `~/.copilot/mcp-config.json` | Always available when you're using Copilot CLI on that system. | Manually update the file, use `copilot mcp ...` subcommands, or use `/mcp` inside Copilot CLI |
-
-
- Copilot CLI includes a default read-only GitHub MCP tool subset. In this workshop flow, you'll launch Copilot CLI with read/write GitHub MCP tools enabled for the session.
-
-
-## Starting Copilot CLI with read/write GitHub MCP access
-
-Start Copilot CLI with the workshop launch flags so you can use both automatic tool approval and read/write GitHub MCP tools.
-
-
-
-1. Confirm the GitHub MCP server is active by running:
-
- ```
- /mcp list
- ```
-
-2. You should see the GitHub MCP server listed and marked as active.
-
-## Creating a backlog of tasks
-
-Now that your session has read/write GitHub MCP tools enabled, you can use Copilot CLI to create a backlog of tasks for use in the rest of the workshop.
-
-1. In the Copilot CLI prompt, type or paste the following prompt to create the issues you'll be working on in the lab:
-
- ```markdown
- In my GitHub repo, create GitHub issues for our Tailspin Toys backlog. Each issue should include:
- - A clear title
- - A brief description of the task and why it is important to the project
- - A checkbox list of acceptance criteria
-
- From our recent planning meeting, the upcoming backlog includes the following tasks:
-
- 1. Allow users to filter games by category and publisher
- 2. Add a custom instructions standard so generated Python code includes clear module and function docstrings
- 3. Improve accessibility by adding a high-contrast mode with a persistent user toggle
- 4. Stretch Goal: Implement pagination on the game list page
- ```
-
-2. Press Enter to send the prompt to Copilot.
-3. Because this workshop session was started with `--yolo`, Copilot can run write operations without prompting for each one. Watch the output to review what it creates. If you prefer per-operation approvals, restart Copilot CLI without `--yolo`.
-
-
- Remember, AI can make mistakes. Review the generated issues in GitHub and edit anything that isn't right.
-
-
-4. In a separate browser tab, navigate to your GitHub repository and select the **Issues** tab.
-5. You should see a list of issues that have been created by Copilot. Each issue should include a clear title and a checkbox list of acceptance criteria.
-
-## Summary and next steps
-
-Congratulations, you have created issues on GitHub using Copilot CLI and MCP!
-
-To recap, in this exercise you:
-
-- understood what Model Context Protocol (MCP) is and how it works with Copilot CLI.
-- configured Copilot CLI for read/write GitHub MCP access in your workshop session.
-- used GitHub Copilot CLI to create issues in your repository.
-
-You can now continue to the next exercise, where you will [add and validate custom instructions][next-lesson].
-
-## Resources
-
-- [What the heck is MCP and why is everyone talking about it?][mcp-blog-post]
-- [GitHub MCP Server][github-mcp-server]
-- [GitHub MCP Registry][mcp-registry]
-
-[previous-lesson]: ../1-install-copilot-cli/
-[next-lesson]: ../3-custom-instructions/
-[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/
-[github-mcp-server]: https://github.com/github/github-mcp-server
-[mcp-registry]: https://github.com/mcp
diff --git a/docs/src/content/docs/cli/4-generating-code.mdx b/docs/src/content/docs/cli/3-generating-code.mdx
similarity index 78%
rename from docs/src/content/docs/cli/4-generating-code.mdx
rename to docs/src/content/docs/cli/3-generating-code.mdx
index 2b84f4b5..3f32583d 100644
--- a/docs/src/content/docs/cli/4-generating-code.mdx
+++ b/docs/src/content/docs/cli/3-generating-code.mdx
@@ -1,15 +1,15 @@
---
-title: "Exercise 4 - Adding project features with GitHub Copilot CLI"
+title: "Exercise 3 - Adding project features with GitHub Copilot CLI"
---
import { Aside } from '@astrojs/starlight/components';
import CalloutStartCopilotCliAllowAll from '@shared/callout-start-copilot-cli-allow-all.mdx';
-As you might expect, the core tasks you'll perform with GitHub Copilot CLI is to add features, functionality, and code to a project. Let's take one of the issues we generated previously and ask Copilot to help us implement it.
+As you might expect, the core tasks you'll perform with GitHub Copilot CLI is to add features, functionality, and code to a project. Let's take one of the issues from your backlog and ask Copilot to help us implement it.
## Scenario
-The time has come to complete filtering in the project. You already have the issue in GitHub and a foundation endpoint from the previous exercise. Let's have Copilot retrieve the issue details, account for existing work, and build the remaining functionality.
+The time has come to complete filtering in the project. You already have the filtering issue in your backlog and a foundation helper from the previous exercise. Let's have Copilot retrieve the issue details, account for existing work, and build the remaining functionality.
In this exercise, you will:
@@ -29,11 +29,11 @@ You'll start the process of creating the new functionality by utilizing plan mod
1. Enter the following prompt into Copilot CLI to create a plan based on the filtering issue:
```
- /plan Retrieve the issue on the repository related to adding filtering. We already added a publishers endpoint in server/routes/publishers.py, so treat that as existing work and plan the remaining updates (games filtering logic, UI, and tests).
+ /plan Retrieve the issue on the repository related to adding filtering. We already added a publishers helper in src/lib/publishers.ts, so treat that as existing work and plan the remaining updates (games filtering logic, UI, and tests).
```
2. Copilot may ask follow-up questions as it builds out its plan. As those arise, answer them based on how you'd build out the functionality.
-3. Once the plan is generated, review the blueprint. You should notice it recommends remaining changes to the backend and frontend, as well as generating tests.
+3. Once the plan is generated, review the blueprint. You should notice it recommends remaining changes across the data layer and UI, as well as generating tests.
4. Copilot CLI will offer you the ability to provide additional feedback to the plan. You can cursor down to the indicated section, then type your suggestions. Copilot will incorporate your suggestions into a new version of the plan.
5. Once you're satisfied, select the option provided by Copilot to begin work building the new feature!
@@ -61,7 +61,7 @@ All AI code needs to be reviewed before being merged into production. Let's take
/diff
```
-2. Note the files changed. Use your arrow keys to switch left and right to view the different files. You should see updates to files such as `games.py`, the Games API, and `test_games.py`, the tests for that API. You may also see updates to `publishers.py` if Copilot refines your existing endpoint to align with the full implementation.
+2. Note the files changed. Use your arrow keys to switch left and right to view the different files. You should see updates to files such as the games listing page (where the new filter controls and client-side filtering live) and `src/lib/games.ts`, plus tests like `games.test.ts`. You may also see updates to `publishers.ts` if Copilot refines your existing helper to align with the full implementation.
## Summary and next steps
@@ -70,7 +70,7 @@ You've now added filtering functionality to the website with the help of Copilot
- utilized plan mode to generate a plan for implementing the filtering functionality.
- generated the code necessary to add filtering to the website with Copilot.
-Of course, the next step from here is to [create the PR][next-lesson], which we'll do with the help of a skill.
+Of course, the next step from here is to make sure it works. Let's [test your feature with the Playwright MCP server][next-lesson] before we open a pull request.
## Resources
@@ -78,8 +78,8 @@ Of course, the next step from here is to [create the PR][next-lesson], which we'
- [About Copilot CLI][about-copilot-cli]
- [Context management in Copilot CLI][context-management]
-[previous-lesson]: ../3-custom-instructions/
-[next-lesson]: ../5-agent-skills/
+[previous-lesson]: ../2-custom-instructions/
+[next-lesson]: ../4-mcp/
[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli
[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli
[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management
diff --git a/docs/src/content/docs/cli/4-mcp.mdx b/docs/src/content/docs/cli/4-mcp.mdx
new file mode 100644
index 00000000..5ee0c1b0
--- /dev/null
+++ b/docs/src/content/docs/cli/4-mcp.mdx
@@ -0,0 +1,117 @@
+---
+title: "Exercise 4 - Testing your feature with the Playwright MCP server"
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CalloutStartCopilotCliAllowAll from '@shared/callout-start-copilot-cli-allow-all.mdx';
+import SectionMcpOverview from '@shared/section-mcp-overview.mdx';
+import SectionPlaywrightMcpTest from '@shared/section-playwright-mcp-test.mdx';
+
+You just generated the filtering feature with Copilot CLI. Before you open a pull request, you should confirm it works in the browser. Rather than click through the app yourself, you'll connect the **Playwright MCP server** and let Copilot drive a real browser to test the feature for you.
+
+In this exercise, you will:
+
+- understand what Model Context Protocol (MCP) is and how MCP servers extend Copilot CLI.
+- add the Playwright MCP server to Copilot CLI.
+- ask Copilot to use it to manually test your filtering feature in a browser.
+
+## What is Model Context Protocol (MCP)?
+
+
+
+
+ The [GitHub MCP server][github-mcp-server] is **built in** to Copilot CLI — it's already available without any setup, which is how Copilot has been reading and writing to your repository throughout the workshop. In this exercise you'll add a *second* server, Playwright, to give Copilot a browser.
+
+
+## Add the Playwright MCP server
+
+The quickest way to add a server is the interactive `/mcp add` command. You'll register the [Playwright MCP server][playwright-mcp-server], which gives Copilot a browser it can control.
+
+
+
+1. In your Copilot CLI session, enter:
+
+ ```text
+ /mcp add
+ ```
+
+2. A configuration form appears. Use Tab to move between fields and fill it in as follows:
+
+ - **Server Name**: `playwright`
+ - **Server Type**: select **Local** (also labelled **STDIO**)
+ - **Command**: `npx @playwright/mcp@latest --headless`
+ - **Tools**: leave as `*` to allow all of the server's tools
+
+3. Press Ctrl +S to save. The server is added and available immediately — no restart required.
+
+ 
+
+The `--headless` flag tells Playwright to run the browser without a visible window, which is required inside a codespace where there's no desktop to display it. Behind the scenes, this writes the server to your `~/.copilot/mcp-config.json` file:
+
+```json
+{
+ "mcpServers": {
+ "playwright": {
+ "type": "local",
+ "command": "npx",
+ "args": ["@playwright/mcp@latest", "--headless"],
+ "tools": ["*"]
+ }
+ }
+}
+```
+
+4. Confirm the server is registered and active by listing your MCP servers:
+
+ ```text
+ /mcp show
+ ```
+
+5. You should see `playwright` listed alongside the built-in `github` server.
+
+
+ The Tailspin Toys project already uses Playwright for its end-to-end tests, so the browser Playwright needs is typically already installed. If Copilot later reports that a browser is missing, have it run `npx playwright install chromium` and try again.
+
+
+## Start the website
+
+The Playwright MCP server needs a running app to test against. Start the Astro dev server in a **separate** terminal so it keeps running while you work in Copilot CLI.
+
+1. Open a new terminal in your codespace by selecting Ctrl +\` .
+2. Start the website:
+
+ ```bash
+ npm run dev
+ ```
+
+3. Leave this terminal running. Once you see the `Astro server: http://localhost:4321` banner, the app is ready.
+
+## Test the filtering feature
+
+Return to your Copilot CLI session and ask Copilot to test the feature.
+
+
+
+## Summary and next steps
+
+Congratulations, you used the Playwright MCP server to manually test your feature with Copilot CLI! To recap, you:
+
+- learned what Model Context Protocol (MCP) is and how MCP servers extend Copilot CLI.
+- added the Playwright MCP server with `/mcp add`.
+- asked Copilot to drive a browser and verify your filtering feature before shipping it.
+
+Now that you've confirmed the feature works, you can continue to the next exercise, where you'll [open a pull request with the help of an agent skill][next-lesson].
+
+## Resources
+
+- [What the heck is MCP and why is everyone talking about it?][mcp-blog-post]
+- [Microsoft Playwright MCP Server][playwright-mcp-server]
+- [Adding MCP servers for Copilot CLI][cli-add-mcp]
+- [GitHub MCP Server][github-mcp-server]
+
+[previous-lesson]: ../3-generating-code/
+[next-lesson]: ../5-agent-skills/
+[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/
+[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp
+[github-mcp-server]: https://github.com/github/github-mcp-server
+[cli-add-mcp]: https://docs.github.com/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers
diff --git a/docs/src/content/docs/cli/5-agent-skills.mdx b/docs/src/content/docs/cli/5-agent-skills.mdx
index 5d013365..3c4f96cc 100644
--- a/docs/src/content/docs/cli/5-agent-skills.mdx
+++ b/docs/src/content/docs/cli/5-agent-skills.mdx
@@ -38,7 +38,7 @@ Skills are loaded dynamically when the agent determines they're necessary. The d
Because Tailspin Toys has a set of requirements for creating PRs, they created a skill to help AI tools be able to generate PRs which follow these guidelines. Let's explore the skill to understand what it'll do.
-1. Open `.github/skills/branches-commits-prs/SKILL.md`.
+1. Open `.github/skills/make-contribution/SKILL.md`.
2. Note the name and description. Notice how the description highlights the scenario in which it should be used, which is whenever a request is made to create a pull request or committing code.
3. Read through the skill. Notice the rules are defined about how branches should be created, commits generated, and the contents of the pull request.
@@ -54,7 +54,7 @@ As highlighted previously, skills are automatically invoked by Copilot CLI. As a
Can you please create a pull request for me!
```
-2. Copilot will acknowledge the request. After a few moments, you'll notice Copilot will indicate it's utilizing the **branches-commits-prs** skill.
+2. Copilot will acknowledge the request. After a few moments, you'll notice Copilot will indicate it's utilizing the **make-contribution** skill.

@@ -85,7 +85,7 @@ Skills are perfect for tasks, but for more robust operations we want to take adv
- [Agent Skills Repository][agent-skills-repo]
- [Agent Skills on awesome-copilot][awesome-copilot-skills]
-[previous-lesson]: ../4-generating-code/
+[previous-lesson]: ../4-mcp/
[next-lesson]: ../6-custom-agents/
[agent-skills-repo]: https://github.com/agentskills/agentskills
[agent-skills-spec]: https://agentskills.io/specification
diff --git a/docs/src/content/docs/cli/7-slash-commands.mdx b/docs/src/content/docs/cli/7-slash-commands.mdx
index ea2be1dc..c26b873a 100644
--- a/docs/src/content/docs/cli/7-slash-commands.mdx
+++ b/docs/src/content/docs/cli/7-slash-commands.mdx
@@ -16,7 +16,7 @@ In this exercise you will use:
- `/share` to create a GitHub gist to share your session with the team.
- `/context` to see the context Copilot CLI is currently using.
- `/model` to explore the list of available models and select a new one if you so desire.
-- `/delegate` to optionally hand off a task to cloud agent. This requires Copilot Pro+, Business, or Enterprise with cloud agent enabled.
+- `/delegate` to optionally hand off a task to cloud agent. This requires cloud agent, available on Copilot Student, Pro, Pro+, Business, or Enterprise — every plan except Copilot Free.
## Sharing a session
@@ -112,7 +112,7 @@ Different models have different strengths, and different developers have differe
There are times when you want to keep working in your terminal but hand off a longer-running task to Copilot cloud agent. The `/delegate` command sends the current Copilot CLI session to GitHub.com, where cloud agent picks it up, works asynchronously, and opens a pull request when done.
- `/delegate` requires Copilot Pro+, Business, or Enterprise with cloud agent enabled. If you don't have access, read through this section and skip the hands-on steps.
+ `/delegate` requires cloud agent, available on Copilot Student, Pro, Pro+, Business, or Enterprise — every plan except Copilot Free. If you don't have access, read through this section and skip the hands-on steps.
1. Clear the current session first so accumulated workshop context isn't delegated:
@@ -121,10 +121,10 @@ There are times when you want to keep working in your terminal but hand off a lo
/clear
```
-2. Send a small, well-scoped prompt. For example, you could delegate the stretch-goal pagination from the backlog you created in Exercise 2:
+2. Send a small, well-scoped prompt. For example, you could delegate the stretch-goal pagination from your backlog:
```
- Implement pagination on the games list page. Add support for page and pageSize query parameters on the games API, update the frontend to render pagination controls, and add tests.
+ Implement pagination on the games list page so it shows a fixed number of games per page with Previous and Next controls, and add tests.
```
3. Send the following slash command to hand the session to cloud agent, and confirm the prompt you want to delegate:
@@ -134,7 +134,7 @@ There are times when you want to keep working in your terminal but hand off a lo
```
4. Open [Copilot agents](https://github.com/copilot/agents) in a browser to monitor progress.
-5. You don't need to wait for the pull request to complete in this path; you can return to it later. If you want to dig deeper into managing asynchronous agent work, continue with the [Cloud path](../../cloud/).
+5. You don't need to wait for the pull request to complete in this harness; you can return to it later. If you want to dig deeper into managing asynchronous agent work, continue with the [Cloud agent harness](../../cloud/).
## Summary and next steps
diff --git a/docs/src/content/docs/cli/8-review.mdx b/docs/src/content/docs/cli/8-review.mdx
index 2675a42d..9d39bce1 100644
--- a/docs/src/content/docs/cli/8-review.mdx
+++ b/docs/src/content/docs/cli/8-review.mdx
@@ -48,7 +48,7 @@ Context still matters as much as infrastructure. Clearly describing *what* you w
The best way to improve your skills with any tool is to keep using the tool! Use it for production code, for hobby code, for the little app you've had in your mind for years but never got around to building. Share your learnings with your team, and learn from your team. And, as always, explore the documentation.
-If you'd like to explore more of the GitHub Copilot ecosystem, check out the [VS Code path](../../vscode/) or the [Cloud/Cloud Agent path](../../cloud/).
+If you'd like to explore more of the GitHub Copilot ecosystem, check out the [VS Code harness](../../vscode/) or the [Cloud agent harness](../../cloud/).
## Resources
diff --git a/docs/src/content/docs/cli/index.mdx b/docs/src/content/docs/cli/index.mdx
index 3202ae9d..6e926372 100644
--- a/docs/src/content/docs/cli/index.mdx
+++ b/docs/src/content/docs/cli/index.mdx
@@ -1,20 +1,23 @@
---
-title: "GitHub Copilot CLI Learning Path"
+title: "GitHub Copilot CLI"
---
import { Aside } from '@astrojs/starlight/components';
+import CalloutStudentPlan from '@shared/callout-student-plan.mdx';
-Welcome to the **Copilot CLI** learning path! This path focuses on GitHub Copilot CLI — a powerful agentic coding assistant that runs directly in your terminal, enabling you to explore codebases, generate code, run commands, and interact with external tools — all from the command line.
+**[GitHub Copilot CLI](https://docs.github.com/copilot/concepts/agents/about-copilot-cli)** puts GitHub Copilot in your terminal as an agentic coding assistant. It explores codebases, generates code, runs commands, and connects to external tools — all from the command line, so you can stay in the flow without switching to a graphical editor.
-## Path Overview
+Across these exercises you'll install and authenticate Copilot CLI, then give it project context with custom instructions before using plan mode to generate a feature deliberately. You'll connect the Playwright MCP server to test that feature in a real browser, then extend Copilot with reusable agent skills and custom agents. Finally, you'll explore slash commands for managing context, models, and sharing, and wrap up with a review of what you've built.
+
+## Exercises
| Exercise | Topic | Description |
|----------|-------|-------------|
| [0. Prerequisites][ex0] | Setup | Create your repository and codespace |
| [1. Installing Copilot CLI][ex1] | Installation | Install and authenticate Copilot CLI |
-| [2. MCP Servers][ex2] | External Tools | Connect to GitHub and other services via MCP |
-| [3. Custom instructions][ex3] | Context | Add an instruction and see how Copilot CLI follows it |
-| [4. Generating Code][ex4] | Code Generation | Use plan mode and generate features |
+| [2. Custom instructions][ex2] | Context | Add an instruction and see how Copilot CLI follows it |
+| [3. Generating Code][ex3] | Code Generation | Use plan mode and generate features |
+| [4. Testing with Playwright MCP][ex4] | External Tools | Add the Playwright MCP server and test your feature in a browser |
| [5. Agent Skills][ex5] | Skills | Enhance Copilot with specialized skills |
| [6. Custom Agents][ex6] | Agents | Review and use custom agents |
| [7. Slash Commands][ex7] | CLI Features | Explore context, models, sharing, and optional delegation to cloud agent |
@@ -24,10 +27,12 @@ Welcome to the **Copilot CLI** learning path! This path focuses on GitHub Copilo
Before attending this workshop, please ensure you have:
-- [ ] A GitHub account with an active **Copilot Pro, Pro+, Business, or Enterprise** subscription
+- [ ] A GitHub account with an active **Copilot Student, Pro, Pro+, Business, or Enterprise** plan
- [ ] Basic familiarity with terminal/command line operations
- [ ] Git installed and configured
+
+
If you are using Copilot Business or Copilot Enterprise, ensure your admin has enabled Copilot CLI for use.
@@ -36,11 +41,11 @@ Before attending this workshop, please ensure you have:
**[Start with Exercise 0: Prerequisites →][ex0]**
-[ex0]: ../prereqs/
+[ex0]: 0-prerequisites/
[ex1]: 1-install-copilot-cli/
-[ex2]: 2-mcp/
-[ex3]: 3-custom-instructions/
-[ex4]: 4-generating-code/
+[ex2]: 2-custom-instructions/
+[ex3]: 3-generating-code/
+[ex4]: 4-mcp/
[ex5]: 5-agent-skills/
[ex6]: 6-custom-agents/
[ex7]: 7-slash-commands/
diff --git a/docs/src/content/docs/cloud/0-prerequisites.mdx b/docs/src/content/docs/cloud/0-prerequisites.mdx
new file mode 100644
index 00000000..5150230e
--- /dev/null
+++ b/docs/src/content/docs/cloud/0-prerequisites.mdx
@@ -0,0 +1,39 @@
+---
+title: "Exercise 0: Prerequisites"
+---
+
+import ExerciseCreateTemplateRepo from '@shared/exercise-create-template-repo.mdx';
+import ExerciseCreateCodespace from '@shared/exercise-create-codespace.mdx';
+
+Before you start the Copilot cloud agent exercises, you need to get everything ready. You'll create your own copy of the Tailspin Toys repository and spin up a [codespace][codespaces] you can use to edit instruction files and review the work the cloud agent produces.
+
+## Setting up the lab repository
+
+To create a copy of the repository for the code you'll create, you'll make an instance from the [template][template-repository]. The new instance will contain all of the necessary files for the lab, and you'll use it as you work through the exercises.
+
+
+
+## Creating a codespace
+
+Next up, you'll use a codespace to complete the lab exercises.
+
+
+
+## Summary
+
+Congratulations, you have created a copy of the lab repository! You also began the creation process of your codespace, which you'll use as you work alongside the Copilot cloud agent.
+
+## Next step
+
+Let's add custom instructions the cloud agent will follow. Continue to [Exercise 1 - Custom instructions][next-lesson].
+
+## Resources
+
+- [GitHub Codespaces overview][codespaces]
+- [Creating a repository from a template][template-repository]
+- [Getting started with Codespaces][codespaces-quickstart]
+
+[codespaces]: https://github.com/features/codespaces
+[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository
+[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart
+[next-lesson]: ../1-custom-instructions/
diff --git a/docs/src/content/docs/cloud/1-custom-instructions.mdx b/docs/src/content/docs/cloud/1-custom-instructions.mdx
index 7385fbba..71e9aa4f 100644
--- a/docs/src/content/docs/cloud/1-custom-instructions.mdx
+++ b/docs/src/content/docs/cloud/1-custom-instructions.mdx
@@ -17,7 +17,7 @@ In this exercise, you will:
- add a new repository-wide standard to `.github/copilot-instructions.md`.
- Unlike the VS Code and CLI paths, you won't run a *before/after* prompt here — Copilot cloud agent works asynchronously on GitHub issues, so the impact is harder to demonstrate side-by-side in real time. You'll see your instruction file's influence later in this path when you review the pull requests cloud agent produces.
+ Unlike the VS Code and CLI harnesses, you won't run a *before/after* prompt here — Copilot cloud agent works asynchronously on GitHub issues, so the impact is harder to demonstrate side-by-side in real time. You'll see your instruction file's influence later in this harness when you review the pull requests cloud agent produces.
## Instruction files
@@ -30,7 +30,7 @@ In this exercise, you will:
## Add a new repository standard
-The next step is the one bit of editing you'll do here: add a project-wide rule that documentation should live in code as docstrings and a file-level comment header. Cloud agent will pick this up when it works on issues you assign to it later in this path.
+The next step is the one bit of editing you'll do here: add a project-wide rule that documentation should live in code as TSDoc doc comments and a file-level comment header. Cloud agent will pick this up when it works on issues you assign to it later in this harness.
Before you edit, set up a branch to work on (cloud agent will read your instructions from whatever branch the issue targets, but you'll commit your edits cleanly anyway):
@@ -50,7 +50,7 @@ Cloud agent reads instruction files from the branch the issue targets. When you
```bash
git add .github/copilot-instructions.md
- git commit -m "Add docstring and file-header standards to copilot instructions"
+ git commit -m "Add doc comment and file-header standards to copilot instructions"
```
2. Push the branch:
@@ -67,7 +67,7 @@ Cloud agent reads instruction files from the branch the issue targets. When you
## Summary and next steps
-You explored how Copilot picks up context from instruction files in this project and added a new repository-wide standard to `.github/copilot-instructions.md`. You'll see that standard exercised in the pull requests cloud agent generates over the rest of this path.
+You explored how Copilot picks up context from instruction files in this project and added a new repository-wide standard to `.github/copilot-instructions.md`. You'll see that standard exercised in the pull requests cloud agent generates over the rest of this harness.
Next, you'll [assign your first issue to Copilot cloud agent][next-lesson].
@@ -78,7 +78,7 @@ Next, you'll [assign your first issue to Copilot cloud agent][next-lesson].
- [5 tips for writing better custom instructions for Copilot][copilot-instructions-five-tips]
- [Awesome Copilot — a collection of instruction files and other resources][awesome-copilot]
-[previous-lesson]: ../../prereqs/
+[previous-lesson]: ../0-prerequisites/
[next-lesson]: ../2-cloud-agent/
[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses
[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository
diff --git a/docs/src/content/docs/cloud/2-cloud-agent.mdx b/docs/src/content/docs/cloud/2-cloud-agent.mdx
index d7aab287..8966db7c 100644
--- a/docs/src/content/docs/cloud/2-cloud-agent.mdx
+++ b/docs/src/content/docs/cloud/2-cloud-agent.mdx
@@ -36,16 +36,16 @@ Earlier exercises introduced custom instructions and how they guide Copilot. If
Open the following files in the GitHub web UI for your repository, or in a codespace if you already have one running:
-- `.github/copilot-instructions.md` - Review the **Code standards** section, especially the requirement that Python code includes type hints.
-- `.github/instructions/python-tests.instructions.md` - Notice the `applyTo` frontmatter, which scopes these instructions to `server/tests/test_*.py` files.
+- `.github/copilot-instructions.md` - Review the **Code standards** section, especially the expectations for TypeScript conventions and TSDoc doc comments.
+- `.github/instructions/unit-tests.instructions.md` - Notice the `applyTo` frontmatter, which scopes these instructions to `**/*.test.ts` files.
-When you assign the `Code lacks documentation` issue to cloud agent in the next section, watch the resulting pull request for type hints, docstrings, and comment headers - these come from these instruction files. We'll call this out again when reviewing PRs in a later exercise.
+When you assign the `Code lacks documentation` issue to cloud agent in the next section, watch the resulting pull request for TSDoc doc comments, TypeScript conventions, and comment headers - these come from these instruction files. We'll call this out again when reviewing PRs in a later exercise.
## Setting up the dev environment for the Copilot cloud agent
Creating code, regardless of who's involved, typically requires a specific environment and some setup scripts to be run to ensure everything is in a good state. This holds true when assigning tasks to Copilot, which is performing tasks in a similar fashion to a SWE.
-Cloud agent uses [GitHub Actions][github-actions] for its environment when doing its work. You can customize this environment by creating a [special setup workflow][setup-workflow], configured in the `.github/workflows/copilot-setup-steps.yml` file, to run before it gets to work. This enables it to have access to the required development tools and dependencies. This has been pre-configured ahead of the lab to help the lab flow and allow this learning opportunity. It makes sure that Copilot had access to Python, Node.JS, and the required dependencies for the client and server:
+Cloud agent uses [GitHub Actions][github-actions] for its environment when doing its work. You can customize this environment by creating a [special setup workflow][setup-workflow], configured in the `.github/workflows/copilot-setup-steps.yml` file, to run before it gets to work. This enables it to have access to the required development tools and dependencies. This has been pre-configured ahead of the lab to help the lab flow and allow this learning opportunity. It makes sure that Copilot has access to Node.js, project dependencies, browser binaries for end-to-end tests, and the migrated and seeded SQLite database for the single Astro app:
```yaml
name: "Copilot Setup Steps"
@@ -53,6 +53,9 @@ name: "Copilot Setup Steps"
# Allows you to test the setup steps from your repository's "Actions" tab
on: workflow_dispatch
+env:
+ ASTRO_TELEMETRY_DISABLED: "1"
+
jobs:
copilot-setup-steps:
runs-on: ubuntu-latest
@@ -64,29 +67,23 @@ jobs:
- name: Checkout code
uses: actions/checkout@v5
- # Backend setup - Python
- - name: Set up Python
- uses: actions/setup-python@v6
- with:
- python-version: "3.13"
- cache: "pip"
-
- # Frontend setup - Node.js
+ # Frontend / app setup - Node.js (the whole app is now Astro + Drizzle/libSQL)
- name: Set up Node.js
uses: actions/setup-node@v6
with:
- node-version: "22"
+ node-version: "lts/*"
cache: "npm"
- cache-dependency-path: |
- package-lock.json
- client/package-lock.json
+ cache-dependency-path: "./package-lock.json"
+
+ - name: Install JavaScript dependencies
+ run: npm ci
- - name: Install dependencies
- run: npm install
+ - name: Install Playwright browsers
+ run: npx playwright install --with-deps chromium
- - name: Install Playwright
- working-directory: ./client
- run: npx playwright install
+ # Migrate + seed the local SQLite database so builds and tests have data.
+ - name: Set up the database
+ run: npm run db:setup
```
It looks like any other GitHub workflow file, but it has a few key points:
@@ -106,7 +103,7 @@ While everyone understands the importance of documentation, most projects have e
6. Set the **Description** to:
```plaintext
- Our organization has a requirement that all functions have docstrings or the language equivalent. Unfortunately, recent updates haven't followed this standard. We need to update the existing code to ensure docstrings (or the equivalent) are included with every function or method.
+ Our organization has a requirement that functions and methods include TSDoc doc comments where helpful. Unfortunately, recent updates haven't followed this standard. We need to update the existing code to ensure doc comments are included where they clarify behavior.
```
7. Select **Create** to create the issue.
@@ -140,23 +137,24 @@ While everyone understands the importance of documentation, most projects have e
This will likely take several minutes. One of the primary goals of Copilot cloud agent is to allow it to perform tasks asynchronously, freeing us to focus on other tasks. We're going to take advantage of that very feature by both assigning another task to Copilot cloud agent, then turning our attention to writing some code to add features to our application.
-## Create new endpoints to modify games
+## Add a related games section to the game details page
-As has been highlighted, one of the great advantages of GitHub Copilot cloud agent is the ability to divide work, where you can focus on one set of tasks while it focuses on another. While creating the endpoints for modifying games for the design team might not necessarily take a long time, it's still time which could be used for other tasks. Let's assign it to Copilot cloud agent!
+As has been highlighted, one of the great advantages of GitHub Copilot cloud agent is the ability to divide work, where you can focus on one set of tasks while it focuses on another. While adding a related games section for the design team might not necessarily take a long time, it's still time which could be used for other tasks. Let's assign it to Copilot cloud agent!
1. Return to your repository on github.com.
2. Select the **Issues** tab.
3. Select **New issue** to open the new issue dialog.
4. Select **Blank issue** to use the blank template.
-5. Set the **Title** to: `Add endpoints to create and edit games`
+5. Set the **Title** to: `Show related games on the game details page`
6. Set the **Description** to:
```markdown
- We're going to be creating functionality in the future to allow for the submission (and editing) of games. For now we just want the endpoints so we can explore how we want to create the UX and do some acceptance testing. Our requirements are:
+ We want to help people discover more games by showing related games on each game's details page. The design team wants to explore the UX and do some acceptance testing. Our requirements are:
- - Add new endpoints to the Games API to support creating, updating and deleting games
- - There should be appropriate error handling for all new endpoints
- - There should be unit tests created for all new endpoints
+ - Add a data-access helper in `src/lib/` that returns other games in the same category as a given game, excluding that game
+ - Show a "Related games" section on the game details page that uses the helper
+ - Handle the case where a game has no related games
+ - There should be unit tests created for the new helper
- Before creating the PR, ensure all tests pass
```
diff --git a/docs/src/content/docs/cloud/5-iterating.mdx b/docs/src/content/docs/cloud/5-iterating.mdx
index 8923575b..37394c78 100644
--- a/docs/src/content/docs/cloud/5-iterating.mdx
+++ b/docs/src/content/docs/cloud/5-iterating.mdx
@@ -38,22 +38,22 @@ Let's start by exploring the first pull request (PR) generated by GitHub Copilot

-5. Explore the newly updated code, which includes the newly created docstrings and other documentation. The exact changes will vary.
+5. Explore the newly updated code, which includes the newly created TSDoc doc comments and other documentation. The exact changes will vary.
- As you scan the changes, look for type hints, docstrings, and comment headers. These come from the custom instruction files you reviewed at the start of Exercise 2.
+ As you scan the changes, look for TSDoc doc comments, TypeScript conventions, and comment headers. These come from the custom instruction files you reviewed at the start of Exercise 2.
6. Once you've reviewed the updates and everything looks good, navigate back to the **Conversation** tab and scroll down.
7. You should see an indicator that some workflows are waiting for approval.
8.
-9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the workflows pass for both the backend and frontend. This may take a few minutes to complete.
+9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the project checks pass for the single Astro app. This may take a few minutes to complete.
## Requesting changes from GitHub Copilot
Working with Copilot on a pull request is not just a one-way street. You can also tag Copilot in comments - like you would other members of your team - in the pull request, or inline comments of the code. Copilot will see these comments, and trigger another session to address them. Due to the non-deterministic results, we can't give prescriptive text of what to ask for. Some ideas of what to ask Copilot to update include:
- Add comment headers to the top of each code file with a brief description of what they do.
-- Add docstrings to TypeScript and Svelte files.
-- Create a README in both the server and client folders with descriptions of the codebase of each.
+- Add TSDoc doc comments to TypeScript and Astro files.
+- Create a README with a description of the Astro app structure.
1. Add a comment requesting a change to the generated documentation, tagging **@copilot** like you would any user. Use one of the ideas above, or another suggestion for Copilot around documentation you'd like to see in the codebase.
2. Select **View Session** to watch Copilot perform its work. Notice how Copilot starts a new session to make the updates.
@@ -68,26 +68,26 @@ Feel free to continue iterating until you are happy. Once happy, you can convert

-## Review the new endpoints
+## Review the related games feature
-Let's return to the PR Copilot generated for resolving our issue about adding endpoints to the games API for creating, updating and deleting games.
+Let's return to the PR Copilot generated for resolving our issue about showing related games on the game details page.
1. Return to your repository in GitHub.com.
2. Select the **Pull Requests** tab.
-3. Select the PR which has a title similar to **Add CRUD endpoints for games API** or something more robust.
+3. Select the PR which has a title similar to **Show related games on the game details page** or something more robust.
4. Select the **Files changed** tab to review the code it generated.
5. Once you've reviewed the updates and everything looks good, navigate back to the **Conversation** tab and scroll down.
6. You should see an indicator that some workflows are waiting for approval.
7.
-8. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the workflows pass for both the backend and frontend. This may take a few minutes to complete.
-9. **Optional:** You could even switch to this branch in your Codespace to perform a manual test of the new endpoints. Navigate to your Codespace, open the terminal, and run the following commands (replace `` with the name of the branch Copilot created, e.g. **copilot/fix-8**.):
+8. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the project checks pass for the single Astro app. This may take a few minutes to complete.
+9. **Optional:** You could even switch to this branch in your Codespace to perform a manual test of the related games feature. Navigate to your Codespace, open the terminal, and run the following commands (replace `` with the name of the branch Copilot created, e.g. **copilot/fix-8**.):
```bash
git fetch origin
git checkout
```
-Copilot has created the new endpoints! Just as before, you can work iteratively with Copilot cloud agent to request updates. For example, you might want to request Copilot centralizes the error handling to reduce duplication, or ensuring comments and docstrings are added (remember - this was assigned **before** you made the updates to your custom instructions!) Just like before, you can make these requests by adding a new comment on the **Conversation** tab, which Copilot will see and kickoff a new session.
+Copilot has built the related games feature! Just as before, you can work iteratively with Copilot cloud agent to request updates. For example, you might want to request Copilot tweak how many related games are shown, or ensuring comment headers and TSDoc doc comments are added (remember - this was assigned **before** you made the updates to your custom instructions!) Just like before, you can make these requests by adding a new comment on the **Conversation** tab, which Copilot will see and kickoff a new session.
## Review the accessibility features
@@ -112,7 +112,7 @@ Finally, let's review the accessibility features that were implemented using the
6. Once you've reviewed the updates and everything looks good, navigate back to the **Conversation** tab and scroll down.
7. You should see an indicator that some workflows are waiting for approval.
8.
-9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the workflows pass for both the backend and frontend. This may take a few minutes to complete.
+9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the project checks pass for the single Astro app. This may take a few minutes to complete.
10. **Optional:** You could switch to this branch in your Codespace to manually test the accessibility features. Navigate to your Codespace, open the terminal, and run the following commands (replace `` with the name of the branch Copilot created):
```bash
@@ -129,12 +129,12 @@ Notice how the custom accessibility agent helped guide Copilot to implement thes
Cloud agent works best when you can hand it real backlog items and turn your attention elsewhere. To build the habit, file a few more issues against your repository and assign them to Copilot. Some ideas:
- Create a backer interest form on the game details page.
-- Implement pagination on the game listing endpoint.
-- Add input validation and error handling to the Flask API.
+- Implement pagination on the games listing page.
+- Add input validation and error handling to the data-access helpers.
## Summary
-You completed the cloud agent path. Across these lessons you:
+You completed the Cloud agent harness. Across these lessons you:
- **Inspected the custom instruction files this repo ships with** so you could see their effect in cloud agent's output later.
- **Assigned issues to Copilot cloud agent** and watched it set up its environment, plan, and execute asynchronously.
@@ -144,10 +144,10 @@ You completed the cloud agent path. Across these lessons you:
## Review and next steps
-You've completed the Cloud / Cloud Agent path. If you'd like to keep exploring, the other paths complement what you practiced here:
+You've completed the Cloud agent harness. If you'd like to keep exploring, the other harnesses complement what you practiced here:
-- 🖥️ **[VS Code path](../../vscode/)** — explore Copilot Chat agent mode and MCP integration directly from your IDE.
-- 💻 **[CLI path](../../cli/)** — work the same flows from your terminal with Copilot CLI: plan mode, agent skills, custom agents, and slash commands like `/delegate` to bridge back to the cloud agent you used here.
+- 🖥️ **[VS Code harness](../../vscode/)** — explore Copilot Chat agent mode and MCP integration directly from your IDE.
+- 💻 **[CLI harness](../../cli/)** — work the same flows from your terminal with Copilot CLI: plan mode, agent skills, custom agents, and slash commands like `/delegate` to bridge back to the cloud agent you used here.
In your own repository, try these follow-up ideas:
diff --git a/docs/src/content/docs/cloud/index.mdx b/docs/src/content/docs/cloud/index.mdx
index 707f3c9f..7c5ebc45 100644
--- a/docs/src/content/docs/cloud/index.mdx
+++ b/docs/src/content/docs/cloud/index.mdx
@@ -1,12 +1,15 @@
---
-title: "Cloud & Cloud Agent Learning Path"
+title: "Copilot cloud agent"
---
import { Aside } from '@astrojs/starlight/components';
+import CalloutStudentPlan from '@shared/callout-student-plan.mdx';
-Welcome to the **Cloud & Cloud Agent** learning path! This path focuses on GitHub Copilot's cloud-based capabilities — specifically the **Copilot cloud agent**, which works asynchronously like a peer programmer on your GitHub issues, and the tools for managing and guiding agent sessions.
+**[GitHub Copilot cloud agent](https://docs.github.com/copilot/concepts/agents/cloud-agent/about-cloud-agent)** lets GitHub Copilot work asynchronously in the cloud. You assign work on GitHub, and the cloud agent picks it up in the background — exploring the repository, making changes, and opening a pull request — while you stay free to do other things.
-## Path Overview
+Across these exercises you'll add custom instructions the cloud agent will follow, then assign a GitHub issue and let it implement the work. You'll review and use custom agents to shape its approach, monitor and steer sessions from the agents dashboard, and finish by reviewing its pull requests and iterating on the results.
+
+## Exercises
| Exercise | Topic | Description |
|----------|-------|-------------|
@@ -21,22 +24,24 @@ Welcome to the **Cloud & Cloud Agent** learning path! This path focuses on GitHu
Before attending this workshop, please ensure you have:
-- [ ] A GitHub account with an active **Copilot Pro+, Business, or Enterprise** subscription
+- [ ] A GitHub account with an active **Copilot Student, Pro, Pro+, Business, or Enterprise** plan
- [ ] Copilot cloud agent enabled for your account or organization
+
+
- Requires **Copilot Pro+, Business, or Enterprise** with cloud agent enabled.
+ Cloud agent is available on **Copilot Student, Pro, Pro+, Business, and Enterprise** — every plan except Copilot Free. On Copilot Business or Enterprise, an administrator must enable it for your organization.
- MCP isn't covered in this path. To explore using MCP servers with Copilot, see the [CLI path](../cli/) or the [VS Code path](../vscode/).
+ MCP isn't covered in this harness. To explore using MCP servers with Copilot, see the [CLI harness](../cli/) or the [VS Code harness](../vscode/).
## Get Started
**[Start with Exercise 0: Prerequisites →][ex0]**
-[ex0]: ../prereqs/
+[ex0]: 0-prerequisites/
[ex1]: 1-custom-instructions/
[ex2]: 2-cloud-agent/
[ex3]: 3-custom-agents/
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 7d6845eb..6767a91b 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -7,91 +7,35 @@ import { Aside } from '@astrojs/starlight/components';
The recent additions to the capabilities of GitHub Copilot provide powerful tools to the developer across the entire software development lifecycle (SDLC). This includes working with issues and pull requests on GitHub, interacting with external services, and of course code creation. This lab explores the functionality, providing real-world use cases and tips on how to get the most out of the tools.
- Because GitHub Copilot, and generative AI at large, is probabilistic rather than deterministic, the exact code, files changed, etc., may vary. As a result, you may notice slight differences between screenshots and code snippets in the lab and your experience. This is to be expected, and is just the nature of working with this class of tools.
+ Because GitHub Copilot is probabilistic rather than deterministic, the exact code, files changed, etc., may vary. As a result, you may notice slight differences between screenshots and code snippets in the lab and your experience. This is to be expected, and is just the nature of working with this class of tools.
If something appears broken or isn't running correctly, please ask a mentor!
-## Choose your learning path
+## Choose your harness
-This workshop offers multiple paths depending on how you want to interact with GitHub Copilot. All paths begin with the same shared prerequisites, then move into path-specific exercises that build on a shared Tailspin Toys backlog.
+GitHub Copilot meets you wherever you work. Pick the harness that matches how you want to build, and work through its exercises against a shared Tailspin Toys backlog. Each harness starts with its own setup, so you can dive straight into the one you choose.
-### 🖥️ [VS Code Path](vscode/)
+### 🖥️ [VS Code](vscode/)
-Focused on GitHub Copilot features within **Visual Studio Code** and GitHub Codespaces. Covers Copilot Chat agent mode, MCP integration, and custom agents — all from your IDE.
+GitHub Copilot inside **Visual Studio Code** and GitHub Codespaces. Work with Copilot Chat agent mode, MCP servers, and custom agents without leaving the editor you already use — ideal when you want AI assistance woven directly into your IDE.
-**Best for**: Developers who prefer IDE-based workflows.
+### 💻 [Copilot CLI](cli/)
-| # | Exercise |
-|---|---------|
-| 0 | [Prerequisites](prereqs/) |
-| 1 | [MCP with VS Code](vscode/1-mcp/) |
-| 2 | [Custom instructions](vscode/2-custom-instructions/) |
-| 3 | [Agent mode](vscode/3-agent-mode/) |
-| 4 | [Custom agents](vscode/4-custom-agents/) |
-| 5 | [Managing agents](vscode/5-managing-agents/) |
-| 6 | [Iterating on Copilot's work](vscode/6-iterating/) |
+**GitHub Copilot CLI** — an agentic assistant that runs in your terminal. Install it, connect MCP servers, generate code with plan mode, and build your own skills, custom agents, and slash commands, all from the command line.
----
-
-### 💻 [CLI Path](cli/)
-
-Focused on **GitHub Copilot CLI** — a powerful agentic assistant that runs in your terminal. Covers installation, MCP, code generation with plan mode, agent skills, custom agents, and slash commands.
-
-**Best for**: Developers who live in the terminal and want AI assistance without leaving the command line.
-
-| # | Exercise |
-|---|---------|
-| 0 | [Prerequisites](prereqs/) |
-| 1 | [Install Copilot CLI](cli/1-install-copilot-cli/) |
-| 2 | [MCP with CLI](cli/2-mcp/) |
-| 3 | [Custom instructions](cli/3-custom-instructions/) |
-| 4 | [Generating code](cli/4-generating-code/) |
-| 5 | [Agent skills](cli/5-agent-skills/) |
-| 6 | [Custom agents](cli/6-custom-agents/) |
-| 7 | [Slash commands](cli/7-slash-commands/) |
-| 8 | [Review](cli/8-review/) |
-
----
-
-### ☁️ [Cloud / Cloud Agent Path](cloud/)
-
-Focused on **Copilot cloud agent** — the asynchronous peer programmer that works on GitHub issues in the background. Covers assigning issues, custom agents, monitoring with the agents dashboard, and reviewing generated work.
+### 🤖 [Copilot App](app/)
-**Best for**: Developers who want to offload tasks and let Copilot work asynchronously.
+The **GitHub Copilot app** — a desktop application built on Copilot CLI. Run parallel agent sessions, switch session modes, collaborate on canvases, and manage GitHub issues and pull requests natively — including **Agent Merge**, which shepherds a pull request through rebases, review feedback, CI fixes, and merge.
-
- Requires **Copilot Pro+, Business, or Enterprise** with cloud agent enabled.
-
-
-| # | Exercise |
-|---|---------|
-| 0 | [Prerequisites](prereqs/) |
-| 1 | [Custom instructions](cloud/1-custom-instructions/) |
-| 2 | [Copilot cloud agent](cloud/2-cloud-agent/) |
-| 3 | [Custom agents](cloud/3-custom-agents/) |
-| 4 | [Managing agents](cloud/4-managing-agents/) |
-| 5 | [Iterating on Copilot's work](cloud/5-iterating/) |
-
----
-
-### 🗺️ Complete Path
+### ☁️ [Copilot Cloud Agent](cloud/)
-Want to explore everything? Work through all three paths to experience the full breadth of GitHub Copilot's agent capabilities.
-
-**Recommended order:**
-
-1. **Shared setup**: [Prerequisites](prereqs/)
-2. **VS Code**: [MCP](vscode/1-mcp/) → [Custom instructions](vscode/2-custom-instructions/) → [Agent mode](vscode/3-agent-mode/)
-3. **CLI**: [Install CLI](cli/1-install-copilot-cli/) → [MCP](cli/2-mcp/) → [Custom instructions](cli/3-custom-instructions/) → [Generating code](cli/4-generating-code/) → [Agent skills](cli/5-agent-skills/) → [Custom agents](cli/6-custom-agents/) → [Slash commands](cli/7-slash-commands/) → [Review](cli/8-review/)
-4. **Cloud**: [Custom instructions](cloud/1-custom-instructions/) → [Cloud agent](cloud/2-cloud-agent/) → [Custom agents](cloud/3-custom-agents/) → [Managing agents](cloud/4-managing-agents/) → [Iterating](cloud/5-iterating/)
-
----
+**Copilot cloud agent** — an asynchronous peer programmer that works on GitHub issues in the background. Assign work, guide it with custom agents, monitor progress from the agents dashboard, and review the pull requests it opens.
## Scenario
-You are a new developer for Tailspin Toys, a fictional company who provides crowdfunding for board games with a developer theme - a huge market! You are tasked with creating issues to document desired updates, then working through a backlog that includes feature work (like filtering and pagination) and quality improvements (like accessibility and coding standards). You'll work iteratively, exploring both the site and Copilot's capabilities, to complete the tasks.
+You are a new developer for Tailspin Toys, a fictional company who provides crowdfunding for board games with a developer theme - a huge market! Your team's backlog is already filed as GitHub issues, ready for you to pick up — feature work (like filtering and pagination) alongside quality improvements (like accessibility and coding standards). You'll work iteratively, exploring both the site and Copilot's capabilities, to complete the tasks.
## Get started
-Choose your path above and start with [Exercise 0: Prerequisites](prereqs/)!
+Choose your harness above to begin — each one opens with the setup it needs to get you building.
diff --git a/docs/src/content/docs/prereqs.mdx b/docs/src/content/docs/prereqs.mdx
deleted file mode 100644
index 4ab25241..00000000
--- a/docs/src/content/docs/prereqs.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: "Exercise 0: Prerequisites"
----
-
-import { Aside } from '@astrojs/starlight/components';
-
-| | Next: pick your path → [VS Code][next-vscode] · [CLI][next-cli] · [Cloud][next-cloud] |
-|:--|--:|
-
-Before you get started on the lab, there's a few tasks you need to complete to get everything ready. You need to get a copy of the repository which includes the code, then spin up a [codespace][codespaces] to use to create your code.
-
-## Setting up the Lab Repository
-
-To create a copy of the repository for the code you'll create an instance from the [template][template-repository]. The new instance will contain all of the necessary files for the lab, and you'll use it as you work through the exercises.
-
-1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/tailspin-toys`.
-2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**.
-
- 
-
-3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to GitHub Copilot.
-
- 
-
-4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab.
-
-## Creating a codespace
-
-Next up, you'll be using a codespace to complete the lab exercises. [GitHub Codespaces][codespaces] are a cloud-based development environment that allows you to write, run, and debug code directly in your browser. It provides a fully-featured IDE with support for multiple programming languages, extensions, and tools.
-
-1. Navigate to your newly created repository.
-2. Select the green **Code** button.
-
- 
-
-3. Select the **Codespaces** tab and select the **+** button to create a new Codespace.
-
- 
-
-The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, you can use this time to explore other features of GitHub Copilot, which we'll turn your attention to next!
-
-
- You'll return to the codespace in a future exercise. For the time being, leave it open in a tab in your browser.
-
-
-
- This workshop is built to run inside a codespace or local [dev container][dev-containers]. Both ensure the environment has all the necessary prerequisites installed for a smooth experience. If you'd prefer to run it locally, open the cloned repository in VS Code and select **Reopen in Container** when prompted — VS Code will build the same dev container the codespace uses.
-
-
-
-## Using GitHub Copilot Chat and agent mode
-
-To access GitHub Copilot Chat agent mode, you need to have the GitHub Copilot Chat extension installed in your IDE, which should already be the case if you are using a GitHub Codespace.
-
-
- If you do not have the GitHub Copilot Chat extension installed, you can [install it from the Visual Studio Code Marketplace][copilot-chat-extension]. Or open the Extensions view in Visual Studio Code, search for **GitHub Copilot Chat**, and select **Install**.
-
-
-Once you have the extension installed, you may need to authenticate with your GitHub account to enable it.
-
-1. Return to your codespace.
-2. If you don't already see Copilot Chat on the right side of your editor, select the **Copilot Chat** icon at the top of your codespace.
-3. Type a message like "Hello world" in the Copilot Chat window and press enter. This should activate Copilot Chat.
-4. Alternatively, if you are not authenticated you will be prompted to sign in to your GitHub account. Follow the instructions to authenticate.
-
- 
-
-5. After authentication, you should see the Copilot Chat window appear.
-
-## Summary
-
-Congratulations, you have created a copy of the lab repository! You also began the creation process of your codespace, which you'll use when you begin writing code.
-
-## Next step
-
-Let's explore how you can provide context to Copilot using instruction files! Continue to the next exercise in your chosen path using the links below.
-
-## Resources
-
-- [GitHub Codespaces overview][codespaces]
-- [Creating a repository from a template][template-repository]
-- [Getting started with Codespaces][codespaces-quickstart]
-
----
-
-| | Next: pick your path → [VS Code][next-vscode] · [CLI][next-cli] · [Cloud][next-cloud] |
-|:--|--:|
-
-[codespaces]: https://github.com/features/codespaces
-[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository
-[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart
-[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers
-[next-vscode]: ../vscode/1-mcp/
-[next-cli]: ../cli/1-install-copilot-cli/
-[next-cloud]: ../cloud/1-custom-instructions/
-[copilot-chat-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat
diff --git a/docs/src/content/docs/vscode/0-prerequisites.mdx b/docs/src/content/docs/vscode/0-prerequisites.mdx
new file mode 100644
index 00000000..00ae3b5a
--- /dev/null
+++ b/docs/src/content/docs/vscode/0-prerequisites.mdx
@@ -0,0 +1,63 @@
+---
+title: "Exercise 0: Prerequisites"
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import ExerciseCreateTemplateRepo from '@shared/exercise-create-template-repo.mdx';
+import ExerciseCreateCodespace from '@shared/exercise-create-codespace.mdx';
+import CalloutTemplateSeedsBacklog from '@shared/callout-template-seeds-backlog.mdx';
+
+Before you start the VS Code exercises, you need to get everything ready. You'll create your own copy of the Tailspin Toys repository, spin up a [codespace][codespaces] to work in, and confirm GitHub Copilot Chat is up and running in your editor.
+
+## Setting up the lab repository
+
+To create a copy of the repository for the code you'll create, you'll make an instance from the [template][template-repository]. The new instance will contain all of the necessary files for the lab, and you'll use it as you work through the exercises.
+
+
+
+
+
+## Creating a codespace
+
+Next up, you'll use a codespace to complete the lab exercises.
+
+
+
+## Using GitHub Copilot Chat and agent mode
+
+To access GitHub Copilot Chat agent mode, you need to have the GitHub Copilot Chat extension installed in your IDE, which should already be the case if you are using a GitHub Codespace.
+
+
+ If you do not have the GitHub Copilot Chat extension installed, you can [install it from the Visual Studio Code Marketplace][copilot-chat-extension]. Or open the Extensions view in Visual Studio Code, search for **GitHub Copilot Chat**, and select **Install**.
+
+
+Once you have the extension installed, you may need to authenticate with your GitHub account to enable it.
+
+1. Return to your codespace.
+2. If you don't already see Copilot Chat on the right side of your editor, select the **Copilot Chat** icon at the top of your codespace.
+3. Type a message like "Hello world" in the Copilot Chat window and press enter. This should activate Copilot Chat.
+4. Alternatively, if you are not authenticated you will be prompted to sign in to your GitHub account. Follow the instructions to authenticate.
+
+ 
+
+5. After authentication, you should see the Copilot Chat window appear.
+
+## Summary
+
+Congratulations, you have created a copy of the lab repository! You also began the creation process of your codespace, which you'll use when you begin writing code.
+
+## Next step
+
+Let's start putting Copilot to work. Continue to [Exercise 1 - Custom instructions][next-lesson], where you'll teach Copilot your project's conventions.
+
+## Resources
+
+- [GitHub Codespaces overview][codespaces]
+- [Creating a repository from a template][template-repository]
+- [Getting started with Codespaces][codespaces-quickstart]
+
+[codespaces]: https://github.com/features/codespaces
+[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository
+[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart
+[copilot-chat-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat
+[next-lesson]: ../1-custom-instructions/
diff --git a/docs/src/content/docs/vscode/2-custom-instructions.mdx b/docs/src/content/docs/vscode/1-custom-instructions.mdx
similarity index 65%
rename from docs/src/content/docs/vscode/2-custom-instructions.mdx
rename to docs/src/content/docs/vscode/1-custom-instructions.mdx
index f1d12274..9199051b 100644
--- a/docs/src/content/docs/vscode/2-custom-instructions.mdx
+++ b/docs/src/content/docs/vscode/1-custom-instructions.mdx
@@ -1,5 +1,5 @@
---
-title: "Exercise 2 - Custom instructions (VS Code)"
+title: "Exercise 1 - Custom instructions (VS Code)"
---
import { Aside } from '@astrojs/starlight/components';
@@ -8,14 +8,14 @@ import ExerciseExploreInstructionsFiles from '@shared/exercise-explore-instructi
import ExerciseInstructionsAddDocstring from '@shared/exercise-instructions-add-docstring.mdx';
import CalloutStartCopilotChat from '@shared/callout-start-copilot-chat.mdx';
-[← Previous lesson: MCP with VS Code][previous-lesson] · [Next lesson: Agent mode →][next-lesson]
+[← Previous lesson: Prerequisites][previous-lesson] · [Next lesson: Agent mode →][next-lesson]
Context is key when working with generative AI. If a task needs to be done a particular way — or there's background information Copilot should know — you want to make sure that context is reachable. There are several ways to share specific context with Copilot. Key among these is [instruction files][instruction-files], which are how you provide that guidance about code generation.
In this exercise, you will:
- explore how project-specific context, coding guidelines, and documentation standards reach Copilot through repository custom instructions and path-scoped instruction files,
-- generate the first backend slice for filtering (a publishers endpoint) with the *current* instructions in place,
+- generate the first data slice for filtering (a publishers helper) with the *current* instructions in place,
- add a new repository-wide standard to `.github/copilot-instructions.md`,
- re-run the same prompt and watch the generated code adopt the new standard,
- commit the instructions update and filtering slice to `main` so Copilot can use the updated guidance in the next exercise.
@@ -51,7 +51,7 @@ Let's follow some best practices here and create a branch for our changes.
To see the impact of custom instructions, start by sending a prompt with the current instruction file in place. Later, you'll update it and re-send the same prompt to see the difference.
1. Close any open editor tabs from previous exercises so Copilot picks up only the context you want.
-2. Open `server/routes/publishers.py` so Copilot knows where the endpoint should live.
+2. Open `src/lib/publishers.ts` so Copilot knows where the helper should live.
3. Select **Agent** from the agents dropdown in the Chat view so Copilot can apply file changes.

@@ -59,15 +59,15 @@ To see the impact of custom instructions, start by sending a prompt with the cur
4. Send the following prompt:
```plaintext
- Create or update server/routes/publishers.py with an endpoint that returns a list of all publishers with the name and id for each. Apply the file changes.
+ Create or update src/lib/publishers.ts with a data-access helper that returns a list of all publishers with the name and id for each. Apply the file changes.
```
-5. Copilot explores the project and applies code updates, often spanning `publishers.py`, `app.py`, and tests.
-6. Notice the proposed function signatures use [type hints][python-type-hints] — that's coming from a directive already in `.github/copilot-instructions.md`.
-7. Notice the proposed code **is missing** docstrings and a file-level comment header.
+5. Copilot explores the project and applies code updates, often spanning the helper file and its tests.
+6. Notice the proposed helper is a typed function that takes a `db` client as its first argument and returns a typed array of publishers — that's coming from the data-layer conventions in `.github/instructions/drizzle.instructions.md` (which applies to `src/lib/*.ts`).
+7. Notice the proposed code **is missing** TSDoc doc comments and a file-level comment header.
- Because Copilot is probabilistic, there's a chance it'll add docstrings even without being told to. If that happens, that's fine — the *consistency* improvement after the instruction update is still the point.
+ Because Copilot is probabilistic, there's a chance it'll add doc comments even without being told to. If that happens, that's fine — the *consistency* improvement after the instruction update is still the point.
## Add a new repository standard
@@ -77,31 +77,31 @@ To see the impact of custom instructions, start by sending a prompt with the cur
## Re-run the prompt and observe the change
1. Return to Copilot Chat and select **New Chat** to clear the buffer.
-2. Click back into `server/routes/publishers.py` so Copilot focuses on the right file.
+2. Click back into `src/lib/publishers.ts` so Copilot focuses on the right file.
3. Send the **same prompt** as before:
```plaintext
- Create or update server/routes/publishers.py with an endpoint that returns a list of all publishers with the name and id for each. Apply the file changes.
+ Create or update src/lib/publishers.ts with a data-access helper that returns a list of all publishers with the name and id for each. Apply the file changes.
```
4. Notice that the proposed file now opens with a comment block similar to:
- ```python
- """
- Publisher API routes for the Tailspin Toys Crowd Funding platform.
- This module provides endpoints to retrieve publisher information.
- """
+ ```typescript
+ /**
+ * Publisher data-access helpers for the Tailspin Toys Crowd Funding platform.
+ * Provides functions to retrieve publisher information from the database.
+ */
```
-5. Notice that the proposed function now includes a docstring similar to:
+5. Notice that the proposed function now includes a TSDoc comment similar to:
- ```python
- """
- Returns a list of all publishers with their id and name.
-
- Returns:
- Response: JSON response containing an array of publisher objects
- """
+ ```typescript
+ /**
+ * Returns a list of all publishers with their id and name.
+ *
+ * @param db - The Drizzle database client.
+ * @returns A promise that resolves to an array of publisher objects.
+ */
```
You just steered Copilot to follow a new project standard and apply it to real code that the next exercise will build on.
@@ -111,18 +111,18 @@ You just steered Copilot to follow a new project standard and apply it to real c
Instructions files are just like any asset in the repository, meaning they're managed using the same source control approach you'd take with any other item. So let's commit and push the branch to our repository.
1. Open a new terminal window in your codespace by selecting Ctrl +\` .
-2. From the terminal, confirm your instructions update and endpoint changes are present by running:
+2. From the terminal, confirm your instructions update and helper changes are present by running:
```bash
git status
```
-3. From the terminal, stage and commit the instructions update and every file Copilot changed for the endpoint foundation:
+3. From the terminal, stage and commit the instructions update and every file Copilot changed for the helper foundation:
```bash
- git add .github/copilot-instructions.md server/routes/publishers.py
- # If git status shows additional supporting updates (for example route registration or tests), add those files too.
- git commit -m "Add docstring standards and publishers endpoint foundation"
+ git add .github/copilot-instructions.md src/lib/publishers.ts
+ # If git status shows additional supporting updates (for example tests), add those files too.
+ git commit -m "Add doc comment standards and publishers helper foundation"
```
4. From the terminal, push the branch to the repository:
@@ -133,25 +133,29 @@ Instructions files are just like any asset in the repository, meaning they're ma
## Create and merge a pull request
-With our branch pushed, we should create a pull request and tie it to the issue we created earlier about updating our instructions with our coding standards. We could manually do that, but Copilot, through MCP, can do that on our behalf. Let's prompt Copilot to find the issue, create the PR to close the issue, and then merge it.
+With our branch pushed, we should create a pull request and tie it to the documentation-standard issue in your backlog. We could manually do that, but Copilot can do it on our behalf using the GitHub tools that are already connected to your project. Let's prompt Copilot to find the issue, create the PR to close the issue, and then merge it.
+
+
+ This is the first exercise that has Copilot act on GitHub for you. The project template already wires GitHub's tools into your workspace, so there's nothing to set up — the first time Copilot uses one, VS Code may prompt you to sign in to GitHub. Follow the prompts to allow it. You'll learn how this connection works (Model Context Protocol) in a later exercise.
+
1. Open Copilot Chat inside of your codespace.
2. Select Control +Command +I (Mac) or Ctrl +Alt +I (Windows/Linux) to open the Copilot Chat view, and ensure **Agent** is selected from the agent picker.
-3. Ask Copilot to find the issue related to updating instructions files and create a PR from the current branch that describes both the instructions updates and the new publishers endpoint foundation:
+3. Ask Copilot to find the issue related to updating instructions files and create a PR from the current branch that describes both the instructions updates and the new publishers helper foundation:
```
- Find the issue related to updating the instructions file. Create a new PR from the current branch, highlight that the PR closes that issue, and include that we also added the publishers endpoint foundation for the upcoming filtering work.
+ Find the issue related to updating the instructions file. Create a new PR from the current branch, highlight that the PR closes that issue, and include that we also added the publishers helper foundation for the upcoming filtering work.
```
4. Copilot will begin work on finding the issue and creating the PR.
-5. As prompted to **Allow** Copilot to perform tasks through the MCP server, review the command and select **Allow** as appropriate.
+5. As prompted to **Allow** Copilot to perform GitHub actions on your behalf, review the command and select **Allow** as appropriate.
6. Once the PR is created, ask Copilot to merge the PR and to return your branch to main by using the following prompt:
```
Merge the PR into main. Then return to main locally, and pull the latest code so we are up to date.
```
-7. As prompted to **Allow** Copilot to perform tasks through the MCP server and the shell, review the command and select **Allow** as appropriate.
+7. As prompted to **Allow** Copilot to perform GitHub actions and run shell commands on your behalf, review the command and select **Allow** as appropriate.
You have now created and merged a pull request with the help of GitHub Copilot!
@@ -162,7 +166,7 @@ You explored how Copilot picks up context from instruction files in this project
- send a code-generation prompt and observe what Copilot produces with the *existing* instructions,
- add a new repository-wide standard to `.github/copilot-instructions.md`,
- re-run the same prompt and watch the proposed code adopt the new standard,
-- commit the instructions update and endpoint foundation to `main` so the next exercise can build on them.
+- commit the instructions update and helper foundation to `main` so the next exercise can build on them.
Next, you'll put those instructions to work in [agent mode][next-lesson] as Copilot adds a new feature across the codebase.
@@ -174,10 +178,9 @@ Next, you'll put those instructions to work in [agent mode][next-lesson] as Copi
- [Personal custom instructions for GitHub Copilot][personal-instructions]
- [Awesome Copilot — a collection of instruction files and other resources][awesome-copilot]
-[previous-lesson]: ../1-mcp/
-[next-lesson]: ../3-agent-mode/
+[previous-lesson]: ../0-prerequisites/
+[next-lesson]: ../2-agent-mode/
[instruction-files]: https://code.visualstudio.com/docs/copilot/copilot-customization
-[python-type-hints]: https://docs.python.org/3/library/typing.html
[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository
[personal-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-personal-custom-instructions-for-github-copilot
[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/
diff --git a/docs/src/content/docs/vscode/1-mcp.mdx b/docs/src/content/docs/vscode/1-mcp.mdx
deleted file mode 100644
index cb4c8656..00000000
--- a/docs/src/content/docs/vscode/1-mcp.mdx
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: "Exercise 1 - Setting up the backlog with Copilot agent mode and GitHub's MCP Server"
----
-
-import { Aside } from '@astrojs/starlight/components';
-import SectionMcpOverview from '@shared/section-mcp-overview.mdx';
-
-There's more to writing code than just writing code. Issues need to be filed, external services need to be called, and information needs to be gathered. Typically this involves interacting with external tools, which can break a developer's flow. Through the power of Model Context Protocol (MCP), you can access all of this functionality right from Copilot!
-
-## Scenario
-
-You've been assigned various tasks to introduce new functionality to the website. Being a good team member, you want to file issues to track your work. To help future you, you've decided to enlist the help of Copilot. You will set up your backlog of work for the rest of the lab, using GitHub Copilot Chat agent mode and the GitHub Model Context Protocol (MCP) server to create the issues for you.
-
-In this exercise, you will:
-
-- use Model Context Protocol (MCP), which provides access to external tools and capabilities.
-- set up the GitHub MCP server in your repository.
-- use GitHub Copilot Chat agent mode to create issues in your repository.
-
-By the end of this exercise, you will have created a backlog of GitHub issues for use throughout the remainder of the lab.
-
-## What is agent mode and Model Context Protocol (MCP)?
-
-Agent mode in GitHub Copilot Chat transforms Copilot into an AI agent that can perform actions on your behalf. This mode allows you to interact with Copilot in a more dynamic way, enabling it to use tools and execute tasks, like running tests or terminal commands, reading problems from the editor, and using those insights to update your code. This allows for a more interactive and collaborative workflow, enabling you to leverage the capabilities of AI in your development process.
-
-
-
-
-
-## Setting up the GitHub MCP server
-
-The `.vscode/mcp.json` file is used to configure the MCP servers that are available in this Visual Studio Code workspace. The MCP servers provide access to external tools and resources that GitHub Copilot can use to perform actions on your behalf.
-
-1. Open `.vscode/mcp.json` in your repository.
-2. You should see a JSON structure similar to the following:
-
- ```json
- {
- "servers": {
- "github": {
- "type": "http",
- "url": "https://api.githubcopilot.com/mcp/"
- }
- }
- }
- ```
-
-This configuration provides GitHub Copilot access to several additional tools so that it can interact with GitHub repositories, issues, pull requests, and more. This particular configuration uses the [remote GitHub MCP server][remote-github-mcp-server]. By using this approach, you don't need to worry about running the MCP server locally (and the associated management, like keeping it up to date), and you can authenticate to the remote server using OAuth 2.0 instead of a personal access token (PAT).
-
-The MCP server configuration is defined in the `servers` section of the `mcp.json` file. Each MCP server is defined by a unique name (in this case, `github`) and its type (in this case, `http`). When using local MCP servers, the type may be `stdio` and have a `command` and `args` field to specify how to start the MCP server. You can find out more about the configuration format in the [VS Code documentation][vscode-mcp-config]. In some configurations (not for the remote GitHub MCP server with OAuth), you may also see an `inputs` section. This defines any inputs (like sensitive tokens) that the MCP server may require. You can read more about the configuration properties in the [VS Code documentation][vscode-mcp-config]
-
-## Starting the MCP server
-
-To utilize an MCP server it needs to be "started". This will allow GitHub Copilot to communicate with the server and perform the tasks you request. Let's start the GitHub MCP server listed in the `mcp.json` file.
-
-1. Inside VS Code, open `.vscode/mcp.json`.
-2. To start the GitHub MCP server, select **Start** above the GitHub server.
-
- 
-
-3. You should see a popup asking you to authenticate to GitHub.
-
- 
-
-4. Select **Continue** on the user account that you're using for this lab.
-
- 
-
-5. If the page appears, select **Authorize visual-studio-code** to allow the GitHub MCP server to login as your selected user account. Once complete, the page should say "You can now close the window.".
-
- 
-
-6. After navigating back to the GitHub Codespace, you should see that the GitHub MCP server has started. You can check this in two places:
- - The line in `.vscode/mcp.json` which previously said start should now present several options, and show a number of tools available.
- - Select the tools icon in the Copilot Chat pane to see the tools available. Scroll down the list that appears at the top of the screen, and you should see a list of tools from the GitHub MCP server.
-
-That's it! You can now use Copilot Chat in agent mode to create issues, manage pull requests, and more.
-
-## Creating a backlog of tasks
-
-Now that you have set up the GitHub MCP server, you can use Copilot Agent mode to create a backlog of tasks for use in the rest of the lab.
-
-1. Return to the Copilot Chat pane and place the cursor inside the dialog.
-2. Press Control +Command +I (Mac) or Ctrl +Alt +I (Windows/Linux) to open the Copilot Chat view, then select **Agent** from the agents dropdown in the Chat view.
-
- 
-
-3. Type or paste the following prompt to create the issues you'll be working on in the lab:
-
- ```markdown
- In my GitHub repo, create GitHub issues for our Tailspin Toys backlog. Each issue should include:
- - A clear title
- - A brief description of the task and why it is important to the project
- - A checkbox list of acceptance criteria
-
- From our recent planning meeting, the upcoming backlog includes the following tasks:
-
- 1. Allow users to filter games by category and publisher
- 2. Add a custom instructions standard so generated Python code includes clear module and function docstrings
- 3. Improve accessibility by adding a high-contrast mode with a persistent user toggle
- 4. Stretch Goal: Implement pagination on the game list page
- ```
-
-4. Press Enter or select the **Send** button to send the prompt to Copilot.
-5. GitHub Copilot should process the request and respond with a dialog box asking you to confirm the creation of the issues.
-
- 
-
-
- Remember, AI can make mistakes, so make sure to review the issues before confirming.
-
-
-6. Select **see more** in **Run open new issue** box to see the details of the issue that will be created.
-7. Ensure the details in the **owner** and **repo**, **title** and **body** of the issue look correct. You can make any desired edits by double clicking the body and updating the content with the correct information.
-8. After reviewing the generated content, select **Continue** to create the issue.
-
- 
-
-9. Repeat steps 6-8 for the remainder of the issues. Alternatively, if you are comfortable with Copilot automatically creating the issues you can select the down-arrow next to **Continue** and select **Allow in this session** to allow Copilot to create the issues for this session (the current chat).
-
- 
-
-
- Ensure you are comfortable with Copilot automatically performing tasks on your behalf before you selecting **Allow in this session** or a similar option.
-
-
-10. In a separate browser tab, navigate to your GitHub repository and select the issues tab.
-11. You should see a list of issues that have been created by Copilot. Each issue should include a clear title and a checkbox list of acceptance criteria.
-
-You should notice that the issues are fairly detailed. This is where you benefit from the power of Large Language Models (LLMs) and Model Context Protocol (MCP), as it has been able to create a clear initial issue description.
-
-
-
-## Summary and next steps
-
-Congratulations, you have created issues on GitHub using Copilot Chat and MCP!
-
-To recap, in this exercise you:
-
-- used Model Context Protocol (MCP), which provides access to external tools and capabilities.
-- set up the GitHub MCP server in your repository.
-- used GitHub Copilot Chat agent mode to create issues in your repository.
-
-With the GitHub MCP server configured, you can now use GitHub Copilot Chat Agent Mode to perform additional actions on your behalf, like creating new repositories, managing pull requests, and searching for information across your repositories.
-
-You can now continue to the next exercise, where you will [provide custom instructions][next-lesson] so Copilot follows your project's conventions.
-
-### Optional exploration exercise – Set up the Microsoft Playwright MCP server
-
-If you are feeling adventurous, you can try installing and configuring another MCP server, such as the [Microsoft Playwright MCP server][playwright-mcp-server]. This will allow you to use GitHub Copilot Chat Agent Mode to perform browser automation tasks, such as navigating to web pages, filling out forms, and clicking buttons.
-
-You can find the instructions for installing and configuring the Playwright MCP server in the [Playwright MCP repository][playwright-mcp-server].
-
-Notice that the setup process is similar to the GitHub MCP server, but you do not need to provide any credentials like the GitHub Personal Access Token. This is because the Playwright MCP server does not require authentication to access its capabilities.
-
-## Resources
-
-- [What the heck is MCP and why is everyone talking about it?][mcp-blog-post]
-- [GitHub MCP Server][github-mcp-server]
-- [Microsoft Playwright MCP Server][playwright-mcp-server]
-- [GitHub MCP Registry][mcp-registry]
-- [VS Code Extensions][vscode-extensions]
-- [GitHub Copilot Chat Extension][copilot-chat-extension]
-
-[previous-lesson]: ../../prereqs/
-[next-lesson]: ../2-custom-instructions/
-[prereqs-lesson]: ../../prereqs/
-[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/
-[github-mcp-server]: https://github.com/github/github-mcp-server
-[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp
-[mcp-registry]: https://github.com/mcp
-[vscode-extensions]: https://code.visualstudio.com/docs/configure/extensions/extension-marketplace
-[copilot-chat-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
-[remote-github-mcp-server]: https://github.blog/changelog/2025-06-12-remote-github-mcp-server-is-now-available-in-public-preview/
-[vscode-mcp-config]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_configuration-format
diff --git a/docs/src/content/docs/vscode/3-agent-mode.mdx b/docs/src/content/docs/vscode/2-agent-mode.mdx
similarity index 72%
rename from docs/src/content/docs/vscode/3-agent-mode.mdx
rename to docs/src/content/docs/vscode/2-agent-mode.mdx
index e832034d..36459a73 100644
--- a/docs/src/content/docs/vscode/3-agent-mode.mdx
+++ b/docs/src/content/docs/vscode/2-agent-mode.mdx
@@ -1,5 +1,5 @@
---
-title: "Exercise 3 - Adding new functionality with Copilot Agent Mode"
+title: "Exercise 2 - Adding new functionality with Copilot Agent Mode"
---
import { Aside } from '@astrojs/starlight/components';
@@ -19,22 +19,22 @@ Copilot Agent Mode is built to act more autonomously in your IDE. It behaves in
In this exercise, you will learn how:
- Copilot Agent Mode can explore your project, identify relevant files, and make coordinated changes.
-- GitHub Copilot Agent Mode can implement new features across both backend and frontend codebases.
+- GitHub Copilot Agent Mode can implement new features across the UI and data layer.
- to review changes and tests generated by Copilot Agent Mode before merging into your codebase.
## Scenario
-As the list of games grows, you want to allow users to filter by category and publisher. You already added a publishers endpoint in the previous exercise, and now you'll finish the remaining API, UI, and test work with Copilot Agent Mode.
+As the list of games grows, you want to allow users to filter by category and publisher. You already added a publishers helper in the previous exercise, and now you'll finish the remaining data-layer, UI, and test work with Copilot Agent Mode.
## Running the Tailspin Toys website
-Before you make any changes, let's explore the Tailspin Toys website to understand its current functionality.
+Before you make any changes, let's explore the Tailspin Toys website to understand its current functionality.
-The website is a crowdfunding platform for board games with a developer theme. It allows users to list games and display details about them. The website has two main components: the front-end (written in Svelte) and the backend (written in Python).
+The website is a crowdfunding platform for board games with a developer theme. It allows users to list games and display details about them. The website is a single Astro app that renders its pages as static HTML at build time. Pages query a local SQLite database directly in their frontmatter through Drizzle ORM — there's no separate backend API or client-side UI framework. Reusable data-access helpers live in `src/lib/`, and any interactivity is added with a small, scoped Astro `