docs: add GitHub Copilot app workshop content by GeekTrainer · Pull Request #144 · github-samples/agents-in-sdlc

GeekTrainer · 2026-06-30T19:56:16Z

GitHub Copilot app workshop

Adds a hands-on workshop that teaches developers how to build software with the GitHub Copilot app, using the Tailspin Toys crowdfunding sample project. Learners work locally and progress from a tiny first change to a full feature built and merged through an agent-driven workflow.

The content lives in a new top-level copilot-app/ folder, with a README.md index, nine lessons, and the screenshots they reference.

What learners do

Lesson 0 - Prerequisites: install Node.js and create their own copy of the project from the template.
Lesson 1 - Installing the app: install and sign in to the GitHub Copilot app, connect the repository, and get oriented in the workspace.
Lesson 2 - First agent session: run an agent session, surface a game's star rating on the home page cards, review the diff, and merge a first pull request.
Lesson 3 - Custom instructions: add a documentation standard to the repo, starting from an issue in the backlog.
Lesson 4 - Building a feature with Autopilot: use Plan and Autopilot modes to build category and publisher filtering, and verify it with an agent skill.
Lesson 5 - Testing with the Playwright MCP server: add the Playwright MCP server and have the agent drive a real browser to test the filtering feature.
Lesson 6 - Agent Merge: let the app shepherd a pull request through its lifecycle and merge it.
Lesson 7 - Canvases: explore canvases for richer, interactive workflows in the app.
Lesson 8 - Review: recap the harness, automate recurring work, and point to where to go next.

Add the GitHub Copilot app harness lessons as a standalone, github.com- readable markdown set under copilot-app/. Converted from the Starlight MDX source: kept frontmatter, rewrote internal lesson links to relative .md, repointed images to copilot-app/images/, and pointed cross-harness links at the published site. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Adds a standalone, GitHub-renderable (pure Markdown) copy of the GitHub Copilot app workshop into a new top-level copilot-app/ folder, mirroring the existing docs-site content so it’s readable directly on GitHub without building the site.

Changes:

Added a copilot-app/README.md index plus 9 lesson markdown files (0-… through 8-…).
Added the referenced lesson images under copilot-app/images/.
Updated internal lesson links and image paths to be relative and GitHub-friendly.

Show a summary per file

File	Description
copilot-app/README.md	Folder index for the Copilot app workshop lessons (GitHub-renderable).
copilot-app/0-prerequisites.md	Lesson 0: local prerequisites and template repo setup.
copilot-app/1-install-copilot-app.md	Lesson 1: install/sign-in/onboarding guidance for the Copilot app.
copilot-app/2-add-star-rating.md	Lesson 2: first agent session walkthrough and first PR flow.
copilot-app/3-custom-instructions.md	Lesson 3: repository/path-scoped instruction files workflow.
copilot-app/4-build-filtering.md	Lesson 4: Plan/Autopilot workflow + skill-based verification.
copilot-app/5-mcp-playwright.md	Lesson 5: adding Playwright MCP server + manual validation.
copilot-app/6-agent-merge.md	Lesson 6: using Agent Merge to land a PR.
copilot-app/7-canvases.md	Lesson 7: creating/saving/using canvases for planning/triage.
copilot-app/8-review.md	Lesson 8: recap, automations, and next steps/resources.
copilot-app/images/app-agent-merge-merge.png	Screenshot asset referenced by Agent Merge lessons.
copilot-app/images/app-4-plan-mode.png	Screenshot asset referenced by Plan/Autopilot lesson.
copilot-app/images/app-2-start-session.png	Screenshot asset referenced by first session lesson.
copilot-app/images/app-0-use-template.png	Screenshot asset referenced by prerequisites lesson.
copilot-app/images/app-open-terminal.png	Screenshot asset referenced by lessons that use the terminal.
copilot-app/images/app-select-changes.png	Screenshot asset referenced by lessons reviewing changes.
copilot-app/images/app-0-create-repository.png	Screenshot asset referenced by prerequisites lesson.
copilot-app/images/app-2-review-panel.png	Screenshot asset referenced by first session lesson.
copilot-app/images/app-new-session-from-issue.png	Screenshot asset referenced by issue-driven lessons.
copilot-app/images/app-automation-dialog.png	Screenshot asset referenced by automations lesson.
copilot-app/images/app-enable-agent-merge.png	Screenshot asset referenced by Agent Merge lessons.

Review details

Files reviewed: 10/21 changed files
Comments generated: 8
Review effort level: Low

+
+## 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. 


+
+## 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.


Fix Ctl->Ctrl, missing 'to', 'following by'->'followed by', plural possessive, 'select add' wording, and consecutive list numbering. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

jamesmontemagno · 2026-07-02T21:22:09Z

+
+## 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!


I think from teh flyout you have the terminal arleady... so no need toa ctually open the terminal. Or also can we integrate into the run menu?

jamesmontemagno · 2026-07-02T21:25:48Z

+
+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**.


Is it worth mentioning or showing off you can see the PR inside of the App (which is nice) and even assing to copilot for review or see CI checks.

jamesmontemagno · 2026-07-02T21:26:45Z

+
+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.


I think it is worth showing that you can have a conversation on the chagnes, so for example you could say use out of 10 isntead of 5. and it will iterate ont he feedback. This is a nice sellign feature.

jamesmontemagno · 2026-07-02T21:27:58Z

+
+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.


maybe point out that AGENTS.md are also compatible.

jamesmontemagno · 2026-07-02T21:29:37Z

+
+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.


Can we jsut have them open the file in teh app. Int he flyout they can do teh + and open teh file and browser for it. and then they can browse all teh code.

jamesmontemagno · 2026-07-02T21:31:35Z

+   ![The session panel tabs in the GitHub Copilot app with an arrow pointing to the Changes tab](images/app-select-changes.png)
+
+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.


same as before we shoudl show built in terminal or run commands

jamesmontemagno · 2026-07-02T21:31:57Z

+
+Let's explore the skill to see what it does.
+
+1. Open your repository on GitHub.


again they can just open the file inside teh app

we shoudl show them how to see the skills from inside of settings

jamesmontemagno · 2026-07-02T21:34:50Z

+- **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.


point out local models too

Copilot AI review requested due to automatic review settings June 30, 2026 19:56

Copilot started reviewing on behalf of GeekTrainer June 30, 2026 19:56 View session

Copilot AI reviewed Jun 30, 2026

View reviewed changes

GeekTrainer changed the title ~~docs: add Copilot App workshop content as pure markdown~~ docs: add GitHub Copilot app workshop content Jun 30, 2026

docs: address Copilot code review feedback

44ae375

Fix Ctl->Ctrl, missing 'to', 'following by'->'followed by', plural possessive, 'select add' wording, and consecutive list numbering. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

jamesmontemagno reviewed Jul 2, 2026

View reviewed changes


		## 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.


		## 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.


		## 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!


		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.


		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.


		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.


		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.


		Let's explore the skill to see what it does.

		1. Open your repository on GitHub.

Uh oh!

Conversation

GeekTrainer commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

GitHub Copilot app workshop

What learners do

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

GeekTrainer commented Jun 30, 2026 •

edited

Loading