diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index be1d8f5e..1040daf4 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -8,11 +8,12 @@ This repo hosts the **workshop content** for **Copilot Workshops**, published as - `docs/` — **Source Markdown for all lessons. Edit here.** Browsable directly on github.com; no build required. - `README.md` — Workshop landing page (also the site home via `slug: index` frontmatter). - - `cli/`, `vscode/`, `cloud/`, `app/` — Per-harness lessons (Copilot CLI / VS Code / Cloud agent / GitHub Copilot app). Each folder's landing page is a `README.md` (routed via a `slug:` matching the folder path). Each harness opens with its own `0-prerequisites.md` 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). + - `first-steps/` — Guided introductory workshops (`copilot-app/`, `copilot-cli/`, and `vscode/`). Each workshop has its own folder and `README.md` landing page. + - `real-world-development/` — Scenario-based workshops organized by environment (`cli/`, `vscode/`, `cloud/`, and `app/`). Each environment's landing page is a `README.md` routed via a slug matching the full category path. Each workshop opens with its own `0-prerequisites.md` setup lesson. - `es-es/`, `ja-jp/`, `ko-kr/`, `pt-br/`, `zh-cn/` — Localized content at the locale-root paths required by Starlight. Translated pages mirror the English path beneath each locale directory; untranslated pages use Starlight's English fallback. - `_images/` — Screenshots and diagrams (shared across all locales). - `website/` — Optional Astro + Starlight site that publishes `docs/` to GitHub Pages (loader `base: '../docs'`). Only needed to self-host or preview the rendered site. - - `astro.config.mjs` — Site config including the manually maintained sidebar and the `locales` block. 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. + - `astro.config.mjs` — Site config including the manually maintained sidebar and the `locales` block. 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 workshop (`///0-prerequisites/`), so the old shared-prereqs URL forwards to the home page. - `src/content.config.ts` — Custom content loader (`base: '../docs'`) that excludes underscore-prefixed support directories so `_images/` is not routed as content. - `AUTHORING.md` — Author entry point (recipes for adding lessons and images). - `CONTRIBUTING.md` — Short pointer to AUTHORING.md + PR/CI rules. @@ -28,7 +29,7 @@ This repo hosts the **workshop content** for **Copilot Workshops**, published as ### Reusing prose across paths -When the same prose applies to multiple harnesses (CLI, VS Code, cloud), copy it inline into each per-harness `.md` lesson. There is no import-based shared content system; the host page owns frontmatter, headings, navigation, and body prose. +When the same prose applies to multiple workshops (CLI, VS Code, cloud), copy it inline into each workshop's `.md` lesson. There is no import-based shared content system; the host page owns frontmatter, headings, navigation, and body prose. Because inline copies can drift, run the `check-content-alignment` skill after editing duplicated sections. The `.github/workflows/content-alignment.md` agentic workflow performs the same analysis on PRs as a safety net, but do not rely on it as a substitute for updating all affected lessons. diff --git a/.github/instructions/astro.instructions.md b/.github/instructions/astro.instructions.md index 19502d94..56978130 100644 --- a/.github/instructions/astro.instructions.md +++ b/.github/instructions/astro.instructions.md @@ -12,7 +12,7 @@ applyTo: 'website/**/*.{astro,mjs,ts,js}' - Base path: `/copilot-workshops` (the repo's GitHub Pages slug). - Site URL: `https://github-samples.github.io/copilot-workshops/`. - **Sidebar: manually maintained** in `astro.config.mjs`. The `sidebar` array drives both the order learners see and which pages appear in navigation. New lessons must be added explicitly. -- **Content collection** is sourced from the repo-root `docs/` directory via the custom `glob()` loader in `src/content.config.ts` (`base: '../docs'`). That loader excludes underscore-prefixed files and directories so support assets such as `_images/` don't get routed as pages. Folder landing pages are `README.md` files (so they render on github.com) rather than Starlight's default `index.md`; each carries a `slug:` in its frontmatter to reproduce the route it would otherwise get from an index file — `docs/README.md` → `slug: index` (site home `/`), `docs//README.md` → `slug: `, and localized landings use the locale-prefixed slug (`docs//README.md` → `slug: `, `docs///README.md` → `slug: /`). +- **Content collection** is sourced from the repo-root `docs/` directory via the custom `glob()` loader in `src/content.config.ts` (`base: '../docs'`). That loader excludes underscore-prefixed files and directories so support assets such as `_images/` don't get routed as pages. Folder landing pages are `README.md` files (so they render on github.com) rather than Starlight's default `index.md`; each carries a `slug:` in its frontmatter to reproduce the route it would otherwise get from an index file — `docs/README.md` → `slug: index` (site home `/`), `docs//README.md` → `slug: `, `docs///README.md` → `slug: /`, and localized landings use the locale-prefixed full path. ## Don't add app-style components diff --git a/.github/instructions/markdown.instructions.md b/.github/instructions/markdown.instructions.md index 78714542..eab2a655 100644 --- a/.github/instructions/markdown.instructions.md +++ b/.github/instructions/markdown.instructions.md @@ -142,7 +142,7 @@ Use Markdown image syntax with paths relative to the Markdown file: ## Path conventions -- Per-path lessons: `cli/`, `vscode/`, `cloud/`, `app/`. Files are numbered by lesson order: `1-installing.md`, `2-custom-instructions.md`, etc. +- Workshop lessons live under category and workshop folders, such as `first-steps/copilot-app/` and `real-world-development/cli/`. Files are numbered by lesson order: `1-installing.md`, `2-custom-instructions.md`, etc. - Support images live in `_images/` directories and are excluded from routing by `website/src/content.config.ts`. ## Cross-repo links diff --git a/.github/skills/localizations/SKILL.md b/.github/skills/localizations/SKILL.md index 9b0c3dbb..e319ee41 100644 --- a/.github/skills/localizations/SKILL.md +++ b/.github/skills/localizations/SKILL.md @@ -17,22 +17,26 @@ The skill takes input content and a list of target locales. It then translates t . └── docs/ ← workshop content (source + locale outputs) ├── README.md ← landing page (source; slug: index) - ├── / ← English lessons (source) - │ ├── README.md ← harness landing (source; slug: ) - │ └── *.md - ├── _images/ ← shared assets (not localized) - └── / ← localized output, direct child of docs/ - ├── README.md ← locale landing (slug: ) - └── / - ├── README.md ← localized harness landing (slug: /) - └── *.md + ├── / ← English workshop category + │ ├── README.md ← category landing (source; slug: ) + │ └── / + │ ├── README.md ← workshop landing (source; slug: /) + │ └── *.md + ├── _images/ ← shared assets (not localized) + └── / ← localized output, direct child of docs/ + ├── README.md ← locale landing (slug: ) + └── / + ├── README.md ← localized category landing (slug: /) + └── / + ├── README.md ← localized workshop landing (slug: //) + └── *.md ``` ### Input contents Here are the contents in scope for localization: -- All English Markdown files under `docs/` **and its subdirectories** — the workshop landing (`docs/README.md`) and the per-harness lessons (`docs//**/*.md`). +- All English Markdown files under `docs/` **and its subdirectories** — the site landing (`docs/README.md`), category landings, and workshop lessons (`docs///**/*.md`). Do **not** treat `_images/` (shared assets) or any configured locale-root directory as source input. @@ -66,7 +70,7 @@ The process runs in two passes. First, the content is analyzed to identify key p Regardless of locale, the following must be preserved exactly and **not** translated: -- YAML frontmatter **keys** (translate values only where appropriate, e.g. a `title`). **Exception — the `slug` key on landing pages (`README.md`):** the site routes each folder landing via its `slug`, so a localized landing must carry a **locale-prefixed** slug rather than the English one. Rewrite it: a locale root (`docs//README.md`) uses `slug: `, and a localized harness landing (`docs///README.md`) uses `slug: /`. Never copy the English `slug: index` / `slug: ` verbatim into a localized file — that would collide with the English route. +- YAML frontmatter **keys** (translate values only where appropriate, e.g. a `title`). **Exception — the `slug` key on landing pages (`README.md`):** the site routes each folder landing via its `slug`, so a localized landing must carry a **locale-prefixed** slug rather than the English one. Rewrite it: a locale root (`docs//README.md`) uses `slug: `, a localized category landing uses `slug: /`, and a localized workshop landing uses `slug: //`. Never copy an English landing slug verbatim into a localized file because it would collide with the English route. - Fenced and inline code, including variable, function, and command names. - URLs and external link targets. - HTML tags, Markdown structure, tables, and admonition markers. @@ -75,7 +79,7 @@ Translate human-language prose, including comments inside code blocks where they **Heading anchors follow the localized text.** When a heading is translated, its auto-generated anchor/slug changes with it—this is expected. The requirement is that **same-document anchor links keep resolving**: whenever you translate a heading, update every in-page link that targets it (`](#...)`) to the localized heading's new slug. Do not leave a link pointing at the original English slug once the heading is translated, and do not preserve an English anchor that no longer matches its heading. Anchors that point into **non-localized** files (or external URLs) keep their original target. -**Image and asset paths point to the original assets unless a localized asset exists.** Because localized files live under `docs//`, rewrite source-relative paths as needed so they still resolve to the shared asset (for example, an app lesson at `docs//app/2-foo.md` uses `../../_images/x.png` to reach `docs/_images/`). Only point at a localized asset when a corresponding translated image actually exists under the locale tree. Either way, the link must resolve to a real file. +**Image and asset paths point to the original assets unless a localized asset exists.** Because localized files live under `docs//`, rewrite source-relative paths as needed so they still resolve to the shared asset (for example, a lesson at `docs//real-world-development/app/2-foo.md` uses `../../../_images/x.png` to reach `docs/_images/`). Only point at a localized asset when a corresponding translated image actually exists under the locale tree. Either way, the link must resolve to a real file. ### Translator agent @@ -97,4 +101,3 @@ The evaluator scores the localized document against the locale's **Evaluator Sco - **Don't** treat configured locale-root directories as source input. - **Don't** reorder or restructure content; keep headings and their order stable. - **Don't** translate code, commands, or identifiers; translate explanatory prose and code comments only. - diff --git a/.github/skills/validate-site-playwright/SKILL.md b/.github/skills/validate-site-playwright/SKILL.md index f0b22f9f..194b2f51 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 website/dist -name index.html | grep -v 404 | sed 's#website/dist#/copilot-workshops#; s#/index.html#/#' ``` -Validate a **representative sample** that covers every layout and harness: the landing page (`/copilot-workshops/`), 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. +Validate a **representative sample** that covers every category and workshop: the landing page (`/copilot-workshops/`), a first-steps lesson, and at least one real-world development 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 diff --git a/.github/workflows/content-alignment.md b/.github/workflows/content-alignment.md index c53cd137..8f721779 100644 --- a/.github/workflows/content-alignment.md +++ b/.github/workflows/content-alignment.md @@ -50,8 +50,8 @@ Inspect the pull request diff, restricted to `docs/**`. For each changed lesson, Search the rest of `docs/**` for passages that should stay in sync with each change. Focus on three drift categories: -1. **Formerly-shared copies.** Short callouts and steps that used to be shared partials are now copied verbatim into multiple lessons (for example, the Copilot CLI "Allow all" approval callout, and the "Approve and run workflows" step in `cloud/5-iterating.md` and `vscode/6-iterating.md`). Quote a distinctive phrase from the change and grep for it across all lessons. -2. **Parallel concepts across harnesses.** The same idea is taught once per harness in `cli/`, `vscode/`, `app/`, and `cloud/`. A conceptual change usually needs the same correction in the sibling lessons of the other harnesses. +1. **Formerly-shared copies.** Short callouts and steps that used to be shared partials are now copied verbatim into multiple lessons (for example, the Copilot CLI "Allow all" approval callout, and the "Approve and run workflows" step in `real-world-development/cloud/5-iterating.md` and `real-world-development/vscode/6-iterating.md`). Quote a distinctive phrase from the change and grep for it across all lessons. +2. **Parallel concepts across workshops.** The same idea may be taught in the `cli/`, `vscode/`, `app/`, and `cloud/` workshops under `real-world-development/`. A conceptual change usually needs the same correction in sibling lessons. 3. **Cross-references and shared facts.** Reference-style links to a renamed/retitled lesson, lesson numbers in prose, the published URL shape, the `github.com/github-samples/tailspin-toys/...` demo-app URL, tool/library names, and shared screenshots. Exclude the files already changed in this PR from your candidate list. diff --git a/AUTHORING.md b/AUTHORING.md index cede46e7..fe195859 100644 --- a/AUTHORING.md +++ b/AUTHORING.md @@ -12,11 +12,16 @@ This is the entry point for **content authors and maintainers** of **Copilot Wor copilot-workshops/ ├── docs/ ← Markdown source. EDIT HERE. Browsable on github.com. │ ├── README.md ← Workshop landing page (also site home via slug: index) -│ ├── cli/ ← Copilot CLI lessons, including the optional 8-foundry-agent/ series -│ ├── vscode/ ← VS Code lessons (0-prerequisites.md + numbered exercises) -│ ├── cloud/ ← Cloud agent lessons (0-prerequisites.md + numbered exercises) -│ ├── app/ ← GitHub Copilot app lessons (setup folded into Exercise 1) -│ ├── es-es/ ja-jp/ ... ← Translated locale trees (app harness and selected VS Code content) +│ ├── first-steps/ ← Guided introductory workshops +│ │ ├── copilot-app/ ← GitHub Copilot app tour +│ │ ├── copilot-cli/ ← GitHub Copilot CLI first steps +│ │ └── vscode/ ← Visual Studio Code first steps +│ ├── real-world-development/ ← Scenario workshops organized by environment +│ │ ├── cli/ ← Copilot CLI lessons, including the optional 8-foundry-agent/ series +│ │ ├── vscode/ ← VS Code lessons, including the optional 7-foundry-toolkit/ series +│ │ ├── cloud/ ← Cloud agent lessons +│ │ └── app/ ← GitHub Copilot app lessons +│ ├── es-es/ ja-jp/ ... ← Translated locale trees mirroring source paths │ └── _images/ ← Screenshots and diagrams (shared across locales) ├── website/ ← Optional Astro + Starlight publisher │ ├── astro.config.mjs ← Site URL, base path, locales, sidebar @@ -31,7 +36,7 @@ copilot-workshops/ ### Add a new lesson -1. **Pick a path and number.** Lessons live under `docs/{cli,vscode,app,cloud}/N-name.md`. `N` is the next available integer in that path; the number drives the URL slug (`/cli/3-generating-code/`). A longer optional exercise can use `N-name/README.md` for its overview and numbered modules inside that folder. Preserve the entry URL with the overview's `slug`, keep the core review as the default next destination, and place the optional sidebar group after it. +1. **Pick a category, workshop, and number.** Lessons live under `docs///N-name.md`. `N` is the next available integer in that workshop; the number drives the URL slug (`/real-world-development/cli/3-generating-code/`). A longer optional exercise can use `N-name/README.md` for its overview and numbered modules inside that folder. Preserve the entry URL with the overview's `slug`, keep the core review as the default next destination, and place the optional sidebar group after it. 2. **Create the file** with frontmatter: ```markdown --- @@ -79,22 +84,23 @@ Prerequisite modules use setup goals and a readiness check instead of an artific Every folder's landing page is a `README.md` so it renders directly when someone browses that folder on github.com. Because Starlight normally derives a folder's index route from an `index.md`, each landing carries an explicit `slug:` in its frontmatter that reproduces the route: - `docs/README.md` → `slug: index` (site home `/`). -- `docs//README.md` → `slug: ` (e.g. `slug: app` → `/app/`). +- `docs//README.md` → `slug: ` (e.g. `slug: first-steps` → `/first-steps/`). +- `docs///README.md` → `slug: /` (e.g. `slug: real-world-development/app` → `/real-world-development/app/`). - `docs//README.md` → `slug: ` (e.g. `slug: es-es` → `/es-es/`). -- `docs///README.md` → `slug: /` (e.g. `slug: es-es/app` → `/es-es/app/`). -- Nested lesson overviews follow the same rule: `docs/app/8-foundry-canvas/README.md` → `slug: app/8-foundry-canvas` and `docs/vscode/7-foundry-toolkit/README.md` → `slug: vscode/7-foundry-toolkit`; localized copies use the corresponding `slug: //` path. Numbered modules live beside the overview and retain nested routes. Links between lessons resolve from the published route, while image paths resolve from the Markdown source file. +- `docs////README.md` → `slug: //` (e.g. `slug: es-es/real-world-development/app` → `/es-es/real-world-development/app/`). +- Nested lesson overviews follow the same rule: `docs/real-world-development/app/8-foundry-canvas/README.md` → `slug: real-world-development/app/8-foundry-canvas`; localized copies include the locale prefix. Numbered modules live beside the overview and retain nested routes. Links between lessons resolve from the published route, while image paths resolve from the Markdown source file. When you add a new harness or locale landing, name it `README.md` and set its `slug:` to match the folder path. Localized landings must use the locale-prefixed slug, never the English one. ### Optional multi-module series -An optional series can live in a lesson subfolder, such as `docs/cli/8-foundry-agent/`, with a `README.md` overview and numbered module files. The overview uses `slug: cli/8-foundry-agent` to preserve the series entry URL. The sidebar groups its overview and modules under the optional series title, after the core workshop's review lesson. +An optional series can live in a lesson subfolder, such as `docs/real-world-development/cli/8-foundry-agent/`, `docs/real-world-development/vscode/7-foundry-toolkit/`, or `docs/real-world-development/app/8-foundry-canvas/`, with a `README.md` overview and numbered module files. The overview slug matches the complete category, workshop, and series path. The sidebar groups its overview and modules under the optional series title after the core workshop lessons. Each module has its own objectives, story-focused scenario, numbered instructions, completion checkpoint, and next-module handoff. Shared cleanup instructions live on the overview and are linked from every module so learners can stop at any checkpoint. When moving a lesson into a subfolder, adjust image paths and navigation links for the extra directory level, and keep existing localized entry links aligned; missing module translations use the site's English fallback. ### Add an image -1. **Drop the file** in `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. +1. **Drop the file** in `docs/_images/` (or a workshop-scoped `_images/` directory when the image is specific to one workshop). Use lowercase-with-hyphens filenames; prefix with `shared-` if the image is referenced from multiple workshops. 2. **Reference it** with a relative path from the consuming Markdown page: ```markdown ![Description of the screenshot](../_images/my-screenshot.png) @@ -104,7 +110,7 @@ Each module has its own objectives, story-focused scenario, numbered instruction ### Edit an existing lesson -1. **Find the file** under `docs/` (use the published URL as a hint — `/cli/3-generating-code/` lives at `docs/cli/3-generating-code.md`). +1. **Find the file** under `docs/` (use the published URL as a hint — `/real-world-development/cli/3-generating-code/` lives at `docs/real-world-development/cli/3-generating-code.md`). 2. **Edit the Markdown.** Same conventions apply — see **Style essentials** below. 3. **Preview** with `npm run dev` in `website/`. 4. **Commit, PR, merge.** diff --git a/README.md b/README.md index 9747d7e7..29022d5a 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # Copilot Workshops — Workshop Content -Workshop content for **Copilot Workshops**, a guided exploration of GitHub Copilot's agentic capabilities (Copilot CLI, VS Code agent mode, the Copilot app, and the Copilot cloud agent) across the software development lifecycle. +Workshop content for **Copilot Workshops**, with guided first-step experiences and real-world development scenarios across Copilot CLI, VS Code agent mode, the GitHub Copilot app, and the Copilot cloud agent. The published site lives at ****. > [!NOTE] -> 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 Markdown, images, and the Astro + Starlight site that publishes them. +> The real-world development workshops use Tailspin Toys, a pure-Astro crowdfunding site (SSR, API endpoints, and a Drizzle data layer) that lives in a separate repository: ****. First steps workshops may guide learners in creating a small project from scratch. This repository holds only the workshop content: lesson Markdown, images, and the Astro + Starlight site that publishes them. ## Start the workshop @@ -21,8 +21,9 @@ For PR/CI rules, see **[CONTRIBUTING.md](./CONTRIBUTING.md)**. - **`docs/`** — **Lesson source (plain Markdown). Edit here.** Browsable directly on github.com, no build required. - `README.md` — Workshop landing page (also the published site's home via `slug: index`). - - `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.md` setup lesson, and a folder `README.md` (routed via a `slug:` matching the folder) is its landing page. - - `es-es/`, `ja-jp/`, `ko-kr/`, `pt-br/`, `zh-cn/` — Translated locale trees (app harness and selected VS Code content). + - `first-steps/` — Guided introductory workshops for the GitHub Copilot app, GitHub Copilot CLI, and VS Code, adapted from James Montemagno's [First Steps with GitHub Copilot](https://github.com/jamesmontemagno/first-steps-with-github-copilot) (MIT). + - `real-world-development/` — Scenario-based workshops organized by environment: `cli/`, `vscode/`, `cloud/`, and `app/`. + - `es-es/`, `ja-jp/`, `ko-kr/`, `pt-br/`, `zh-cn/` — Translated locale trees that mirror available English category and workshop paths. - `_images/` — Screenshots and diagrams (shared across all locales). - **`website/`** — Optional Astro + Starlight site that publishes `docs/` to GitHub Pages. Only needed to self-host or preview the rendered site. - `astro.config.mjs` — Site URL, base path, `locales` block, sidebar. diff --git a/docs/README.md b/docs/README.md index 56ff3ad5..d381684f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,42 +1,43 @@ --- -title: "Hands-on with GitHub Copilot's agents" +title: "GitHub Copilot workshops" slug: index authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-28 --- -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. +Choose a workshop based on what you want to learn and how deeply you want to explore it. **First steps** offers a guided introduction to GitHub Copilot, while **Real-world development** uses a complete application and team backlog to practice production-oriented workflows. -> [!CAUTION] -> 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 harness +## First steps -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. +Start with a focused, guided experience that introduces the key capabilities of a GitHub Copilot product without requiring an existing codebase. -### 🖥️ [VS Code](vscode/) +### [GitHub Copilot app tour][first-steps-app] -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. +Build a Space Quiz from an empty folder, publish it to GitHub, implement an issue, complete a Copilot review, schedule an automation, and explore a Canvas workflow. -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot CLI first steps][first-steps-cli] -**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. +Build the same Space Quiz from your terminal, review diffs, run parallel sessions in worktrees, plan before editing, and create, merge, and delegate pull requests without leaving the shell. -### 🤖 [Copilot App](app/) +### [Visual Studio Code first steps][first-steps-vscode] -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. +Build the Space Quiz in VS Code, test it in the integrated browser, publish with Source Control, work with issues and pull requests through GitHub tools, and hand off to a cloud session. -### ☁️ [Copilot Cloud Agent](cloud/) +## Real-world development -**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. +Practice GitHub Copilot in a realistic software development lifecycle using the Tailspin Toys application and backlog. Choose the environment where you want to work, then plan, build, test, review, and deliver meaningful changes. -## Scenario +### [Browse the real-world development workshops][real-world-development] -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. +Choose from GitHub Copilot CLI, the GitHub Copilot app, the GitHub Copilot cloud agent, or Visual Studio Code. -## Get started +> [!CAUTION] +> GitHub Copilot is probabilistic rather than deterministic, so the exact code and files changed may vary from the examples. Small differences are expected. +> +> If something appears broken or does not run correctly during an instructor-led workshop, ask a mentor. -Choose your harness above to begin — each one opens with the setup it needs to get you building. +[first-steps-app]: first-steps/copilot-app/ +[first-steps-cli]: first-steps/copilot-cli/ +[first-steps-vscode]: first-steps/vscode/ +[real-world-development]: real-world-development/ diff --git a/docs/_images/first-steps-app-automations.svg b/docs/_images/first-steps-app-automations.svg new file mode 100644 index 00000000..d28de07d --- /dev/null +++ b/docs/_images/first-steps-app-automations.svg @@ -0,0 +1,114 @@ + +The Automations view in the Copilot app with weekly automation cards + + + + + +New + +My work + + +Automations + +Customize + +Projects + + +space-quiz +Automations +Templates +New automation +All +Local +Cloud + + +Search automations… + +Your automations +Use agents to handle recurring work on a cadence you choose. + +Issue triage +Weekly +Review the latest GitHub issues +and rank them by severity… + +space-quiz · Local + +2d ago + + +Accessibility audit +Weekly +Review PRs merged this week +and summarize a11y issues… + +space-quiz · Local + +Each run opens its own session, so an automation never disturbs your work. + diff --git a/docs/_images/first-steps-app-canvas-kanban.svg b/docs/_images/first-steps-app-canvas-kanban.svg new file mode 100644 index 00000000..8286b90d --- /dev/null +++ b/docs/_images/first-steps-app-canvas-kanban.svg @@ -0,0 +1,89 @@ + +A Kanban canvas with issue cards, one being dragged from Backlog into Plan +Repository Issues Kanban + + +BACKLOG +PLAN +READY +IMPLEMENT + + + + + + +#12 +Per-question timer + +#13 +Review screen + + + +#13 +Review screen +Drop a card into a lane and the app opens a session with that issue already loaded. + diff --git a/docs/_images/first-steps-app-changes-tab.svg b/docs/_images/first-steps-app-changes-tab.svg new file mode 100644 index 00000000..d789973b --- /dev/null +++ b/docs/_images/first-steps-app-changes-tab.svg @@ -0,0 +1,85 @@ + +The Changes tab in the app flyout showing a file diff +space-quiz · session + + +Changes +Terminal +1 file changed ++142 −8 + +index.html + ++ <div class="progress"> ++ <span id="score">0</span> +− <h1>Quiz</h1> + +SESSION +Implement issue #12 + +Added the per-question timer +Review the diff before you accept it → + + diff --git a/docs/_images/first-steps-app-my-work.svg b/docs/_images/first-steps-app-my-work.svg new file mode 100644 index 00000000..bbab0bc0 --- /dev/null +++ b/docs/_images/first-steps-app-my-work.svg @@ -0,0 +1,104 @@ + +The My work view in the Copilot app with the sidebar and a list of pull requests + + + + + +New + + +My work + +Automations + +Customize + +Projects + + + +space-quiz +My work +All +Active +Review requests +Done + + + + +Move the route picker into the lab#5 +jamesmontemagno/first-steps-with-github-copilot +10m ago + + + +Polish the multi-product lab#4 +jamesmontemagno/first-steps-with-github-copilot +3h ago + +Every issue and pull request you care about, without leaving the app. + diff --git a/docs/_images/first-steps-app-new-session.svg b/docs/_images/first-steps-app-new-session.svg new file mode 100644 index 00000000..3a93a42f --- /dev/null +++ b/docs/_images/first-steps-app-new-session.svg @@ -0,0 +1,86 @@ + +The Copilot app New session screen with the prompt box and folder, mode, and agent pickers + + + +Ask anything or paste a URL. Use / for commands, & sessions, # issues… ++ +Interactive +Auto · Balance +Default agent + + + + +space-quiz + +Local + +main + + +Start from New → Open folder +Pick the folder, the mode, and the agent before you send the first prompt. + diff --git a/docs/_images/first-steps-app-session-details.svg b/docs/_images/first-steps-app-session-details.svg new file mode 100644 index 00000000..7c7d4f0e --- /dev/null +++ b/docs/_images/first-steps-app-session-details.svg @@ -0,0 +1,109 @@ + +The Copilot app session details panel showing path, project, agent, changes, tokens, and context usage +Space Quiz build· space-quiz/main + +main +from +origin/main + + +Remote controlNot enabled +Path~/Projects/spa… +Projectspace-quiz +Session nameSpace Quiz build +Session ID509d8b9a-cc2e… +AgentDefaultChange + + +Changes1 file changed + +Tokens +↑ 6.8M(6.8M cached) +↓ 35.1K(6.9K reasoning) +Context +27%328K + + + + +Session spend20.7 AI credits + + + +Enable remote control +Rename session +View session insights +Share as secret gist +Archive session + + +Which folder andbranch this really is + +The number to watchAs context fills, starta fresh session + +More options forthe session + + + diff --git a/docs/_images/first-steps-cli-context.svg b/docs/_images/first-steps-cli-context.svg new file mode 100644 index 00000000..2cbb8ee6 --- /dev/null +++ b/docs/_images/first-steps-cli-context.svg @@ -0,0 +1,81 @@ + +Terminal showing the slash context command and a context usage meter +copilot — /context + +>/context +Context window +61% used + + + + + +Conversation +Files read +Instructions + + +Running low? Use /compact to summarize, or start a fresh session. + diff --git a/docs/_images/first-steps-cli-side-panel.svg b/docs/_images/first-steps-cli-side-panel.svg new file mode 100644 index 00000000..5032126c --- /dev/null +++ b/docs/_images/first-steps-cli-side-panel.svg @@ -0,0 +1,94 @@ + +The Copilot CLI side panel showing the Issues tab with an open issue selected and the keyboard hints along the bottom +space-quiz — copilot + + +Current +Sessions +Issues +Pull requests +Gists + + +is: +issue +is: +open +involves: +@me +repo: +space-quiz +1 / 1 + + + +Add a score screen at the end of the quiz +#2 · jamesmontemagno opened 1w ago + +←opens this panel · tab moves between the tabs + + +/ search · enter details · o open · w worktree · c chat · a all + diff --git a/docs/_images/first-steps-cli-welcome.svg b/docs/_images/first-steps-cli-welcome.svg new file mode 100644 index 00000000..f6e9fb34 --- /dev/null +++ b/docs/_images/first-steps-cli-welcome.svg @@ -0,0 +1,80 @@ + +Copilot CLI welcome screen in a terminal window +space-quiz — copilot + + +┌─────────────────────────────┐ +│ GitHub Copilot CLI │ +└─────────────────────────────┘ +Trust the files in this folder? +> 1. Yes, proceed + 2. No, exit + + +/modelchoose the model for this session + +/helplist every slash command +>Create a space exploration quiz + diff --git a/docs/_images/first-steps-cli-worktree.svg b/docs/_images/first-steps-cli-worktree.svg new file mode 100644 index 00000000..553d421b --- /dev/null +++ b/docs/_images/first-steps-cli-worktree.svg @@ -0,0 +1,73 @@ + +Terminal output from the slash worktree command creating an isolated checkout +copilot — /worktree + + +>/worktree +✓ Created worktree ../space-quiz-13 + branch: issue-13-review-screen + this session now works there; main is untouched + + diff --git a/docs/_images/first-steps-vscode-cloud-harness.svg b/docs/_images/first-steps-vscode-cloud-harness.svg new file mode 100644 index 00000000..78dea476 --- /dev/null +++ b/docs/_images/first-steps-vscode-cloud-harness.svg @@ -0,0 +1,87 @@ + +The Copilot Chat harness picker in VS Code switching from Local to Cloud +Copilot Chat + + +Add three new colour themes + +Working in the cloud… +Follow the session on GitHub + +Ask Copilot + +Harness ⌄ + +Harness +Copilot + +Local + +Cloud +✓ + +Claude +Codex + diff --git a/docs/_images/first-steps-vscode-commit.svg b/docs/_images/first-steps-vscode-commit.svg new file mode 100644 index 00000000..56d486c7 --- /dev/null +++ b/docs/_images/first-steps-vscode-commit.svg @@ -0,0 +1,88 @@ + +The VS Code Source Control view with the Copilot sparkle button on the commit message box +space-quiz — Visual Studio Code + + + + + + +SOURCE CONTROL + +Message (⌘Enter to commit) + + +Commit +CHANGES +index.htmlM +.github/copilot-instructions.mdU + +Copilot wrote your message +Add per-question timer to the quiz + +Create Pull Request +Commit first, then this button appears +right inside Source Control. + diff --git a/docs/_images/first-steps-vscode-instructions.svg b/docs/_images/first-steps-vscode-instructions.svg new file mode 100644 index 00000000..ddbbe987 --- /dev/null +++ b/docs/_images/first-steps-vscode-instructions.svg @@ -0,0 +1,84 @@ + +The copilot-instructions.md file open in VS Code +copilot-instructions.md — space-quiz + + +EXPLORER +▾ .github + +copilot-instructions.md +index.html + +copilot-instructions.md + +# Space Quiz +Single index.html. No dependencies, no build step. +Every answer must be reachable by keyboard. +Respect prefers-color-scheme in both themes. +## How I like code written +Small functions, early returns, no clever one-liners. +Comment only what is genuinely surprising. + + diff --git a/docs/es-es/README.md b/docs/es-es/README.md index c57d5067..1b079d78 100644 --- a/docs/es-es/README.md +++ b/docs/es-es/README.md @@ -1,42 +1,43 @@ --- slug: es-es -title: "Manos a la obra con los agentes de GitHub Copilot" +title: "Talleres de GitHub Copilot" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-28 --- -Las recientes ampliaciones de las capacidades de GitHub Copilot ofrecen a los desarrolladores herramientas potentes para todo el ciclo de vida del desarrollo de software (SDLC). Estas capacidades incluyen trabajar con incidencias y solicitudes de incorporación de cambios en GitHub, interactuar con servicios externos y, por supuesto, crear código. En este laboratorio se exploran estas funciones mediante casos de uso reales y consejos para aprovechar al máximo las herramientas. +Elige un taller según lo que quieras aprender y el nivel de profundidad que busques. **Primeros pasos** ofrece una introducción guiada a GitHub Copilot, mientras que **Desarrollo en escenarios reales** utiliza una aplicación completa y el backlog de un equipo para practicar flujos de trabajo orientados a producción. -> [!CAUTION] -> Como GitHub Copilot es probabilístico y no determinista, el código exacto, los archivos modificados y otros elementos pueden variar. Por este motivo, es posible que observes pequeñas diferencias entre las capturas de pantalla y los fragmentos de código del laboratorio y lo que tú ves. Es algo normal y forma parte de trabajar con este tipo de herramientas. -> -> Si algo parece no funcionar o no se ejecuta correctamente, ¡pide ayuda a un mentor! - -## Elige tu entorno +## Primeros pasos -GitHub Copilot te acompaña allí donde trabajes. Elige el entorno que se ajuste a tu forma de desarrollar y completa sus ejercicios con el trabajo pendiente compartido de Tailspin Toys. Cada entorno comienza con su propia configuración para que puedas empezar directamente con el que elijas. +Comienza con una experiencia guiada y específica que presenta las capacidades principales de un producto de GitHub Copilot sin requerir un código base existente. -### 🖥️ [VS Code](../vscode/) +### [Recorrido por la aplicación GitHub Copilot][first-steps-app] -GitHub Copilot dentro de **Visual Studio Code** y GitHub Codespaces. Trabaja con el modo agente de Copilot Chat, servidores MCP y agentes personalizados sin salir del editor que ya utilizas. Es ideal si quieres integrar la asistencia de IA directamente en el IDE. +Crea un cuestionario sobre el espacio desde una carpeta vacía, publícalo en GitHub, implementa una incidencia, completa una revisión de Copilot, programa una automatización y explora un flujo de trabajo con Canvas. -### 💻 [Copilot CLI](cli/) +### [Primeros pasos con GitHub Copilot CLI][first-steps-cli] -**GitHub Copilot CLI** es un asistente basado en agentes que se ejecuta en el terminal. Instálalo, conecta servidores MCP, genera código con el modo de planificación y crea tus propias skills, agentes personalizados y comandos con barra diagonal, todo desde la línea de comandos. +Crea el mismo cuestionario desde la terminal, revisa las diferencias, ejecuta sesiones en paralelo en árboles de trabajo, planifica antes de editar y crea, combina y delega solicitudes de incorporación de cambios sin salir del shell. -### 🤖 [Copilot App](app/) +### [Primeros pasos con Visual Studio Code][first-steps-vscode] -La **aplicación GitHub Copilot** es una aplicación de escritorio basada en Copilot CLI. Ejecuta sesiones de agentes en paralelo, cambia el modo de las sesiones, colabora en lienzos y gestiona incidencias y solicitudes de incorporación de cambios de GitHub de forma nativa. También incluye **Agent Merge**, que guía una solicitud de incorporación de cambios durante los cambios de base, los comentarios de revisión, las correcciones de integración continua y la combinación. +Crea el cuestionario en VS Code, pruébalo en el explorador integrado, publícalo con Control de código fuente, trabaja con incidencias y solicitudes de incorporación de cambios mediante las herramientas de GitHub y delega trabajo a una sesión en la nube. -### ☁️ [Copilot Cloud Agent](../cloud/) +## Desarrollo en escenarios reales -El **agente de Copilot en la nube** es un compañero de programación asíncrono que trabaja en segundo plano en las incidencias de GitHub. Asígnale trabajo, guíalo con agentes personalizados, supervisa el progreso desde el panel de agentes y revisa las solicitudes de incorporación de cambios que abre. +Practica con GitHub Copilot en un ciclo de vida de desarrollo de software realista mediante la aplicación Tailspin Toys y su backlog. Elige el entorno en el que quieras trabajar y, a continuación, planifica, desarrolla, prueba, revisa y entrega cambios significativos. -## Escenario +### [Consulta los talleres de desarrollo en escenarios reales][real-world-development] -Acabas de incorporarte como desarrollador a Tailspin Toys, una empresa ficticia que ofrece financiación colectiva para juegos de mesa de temática tecnológica: ¡un mercado enorme! El trabajo pendiente del equipo ya está registrado como incidencias de GitHub para que puedas comenzar. Incluye tanto funcionalidades, como el filtrado y la paginación, como mejoras de calidad, como la accesibilidad y los estándares de programación. Trabajarás de forma iterativa para completar las tareas mientras exploras el sitio y las capacidades de Copilot. +Elige entre GitHub Copilot CLI, la aplicación GitHub Copilot, el agente de GitHub Copilot en la nube o Visual Studio Code. -## Primeros pasos +> [!CAUTION] +> GitHub Copilot es probabilístico y no determinista, por lo que el código exacto y los archivos modificados pueden variar respecto a los ejemplos. Es normal que haya pequeñas diferencias. +> +> Si algo parece no funcionar correctamente durante un taller dirigido por un instructor, pide ayuda a un mentor. -Elige uno de los entornos anteriores para empezar. Cada uno comienza con la configuración necesaria para que puedas ponerte manos a la obra. \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[first-steps-cli]: ../first-steps/copilot-cli/ +[first-steps-vscode]: ../first-steps/vscode/ +[real-world-development]: ../real-world-development/ diff --git a/docs/es-es/app/0-prerequisites.md b/docs/es-es/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/es-es/app/0-prerequisites.md rename to docs/es-es/real-world-development/app/0-prerequisites.md index b93e4997..f9bbfd0f 100644 --- a/docs/es-es/app/0-prerequisites.md +++ b/docs/es-es/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Trabajarás con tu propia copia del proyecto Tailspin Toys. Créala ahora a part 1. En una nueva ventana del navegador, ve al repositorio de GitHub de este laboratorio: `https://github.com/github-samples/tailspin-toys`. 2. Para crear tu propia copia del repositorio, selecciona el botón **Use this template** en la página del repositorio del laboratorio. A continuación, selecciona **Create a new repository**. - ![Botón Use this template con la opción Create a new repository seleccionada en el menú desplegable](../../_images/app-0-use-template.png) + ![Botón Use this template con la opción Create a new repository seleccionada en el menú desplegable](../../../_images/app-0-use-template.png) 3. Si realizas el taller como parte de un evento dirigido por GitHub o Microsoft, sigue las instrucciones de los mentores. De lo contrario, puedes crear el nuevo repositorio en una organización en la que tengas acceso a GitHub Copilot. - ![Formulario Create a new repository con github-samples/tailspin-toys como plantilla y el nombre del repositorio completado](../../_images/app-0-create-repository.png) + ![Formulario Create a new repository con github-samples/tailspin-toys como plantilla y el nombre del repositorio completado](../../../_images/app-0-create-repository.png) 4. Anota la ruta del repositorio que has creado (**organization-or-user-name/repository-name**), ya que la utilizarás más adelante en el laboratorio. diff --git a/docs/es-es/app/1-install-copilot-app.md b/docs/es-es/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/es-es/app/1-install-copilot-app.md rename to docs/es-es/real-world-development/app/1-install-copilot-app.md diff --git a/docs/es-es/app/2-add-star-rating.md b/docs/es-es/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/es-es/app/2-add-star-rating.md rename to docs/es-es/real-world-development/app/2-add-star-rating.md index b10c330b..ce1665f6 100644 --- a/docs/es-es/app/2-add-star-rating.md +++ b/docs/es-es/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Vamos a iniciar una sesión nueva para comenzar a explorar el proyecto e impleme 2. Selecciona **Home screen**. 3. Comprueba que `tailspin-toys` esté seleccionado como repositorio. - ![Cuadro de indicaciones de la aplicación GitHub Copilot con el selector de repositorio establecido en tailspin-toys y el selector de modelo debajo](../../_images/app-2-start-session.png) + ![Cuadro de indicaciones de la aplicación GitHub Copilot con el selector de repositorio establecido en tailspin-toys y el selector de modelo debajo](../../../_images/app-2-start-session.png) 4. Utiliza la indicación siguiente para solicitar el cambio: @@ -55,7 +55,7 @@ Todos los cambios generados por IA deben revisarse antes de combinarlos, incluso 1. En la esquina superior derecha de la aplicación, selecciona **Toggle review panel**. Se abrirá la pantalla de diferencias con todos los cambios pendientes realizados por Copilot. - ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../_images/app-2-review-panel.png) + ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../../_images/app-2-review-panel.png) 2. Deberías observar código añadido a `GameCard.astro`, el archivo principal que se utiliza para mostrar los detalles de los juegos. Debería ser similar al siguiente: un pequeño bloque que representa la valoración cuando existe y muestra "No rating yet" cuando `starRating` es `null`: @@ -80,7 +80,7 @@ No debemos limitarnos a leer el código y dar por hecho que funciona. También d 1. En el panel de revisión situado a la derecha de la aplicación Copilot, selecciona **Terminal**. Si no aparece el botón **Terminal**, selecciona **+** (con la etiqueta **Open in panel**) y, después, **Terminal**. - ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../../_images/app-terminal-screenshot.png) 2. Introduce el comando siguiente en la ventana de terminal para iniciar el servidor de desarrollo de la aplicación web: diff --git a/docs/es-es/app/3-custom-instructions.md b/docs/es-es/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/es-es/app/3-custom-instructions.md rename to docs/es-es/real-world-development/app/3-custom-instructions.md index 3275c5e6..fa914368 100644 --- a/docs/es-es/app/3-custom-instructions.md +++ b/docs/es-es/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ Dedica un momento a leer los archivos de instrucciones incluidos en este reposit 1. Si el panel de revisión aún no está visible, selecciona **Toggle review panel** en la esquina superior derecha para abrirlo. - ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../_images/app-2-review-panel.png) + ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../../_images/app-2-review-panel.png) 2. Selecciona **+** para añadir un elemento nuevo al panel de revisión. 3. Selecciona **File**. @@ -66,7 +66,7 @@ Dedica un momento a leer los archivos de instrucciones incluidos en este reposit 6. Explora el archivo. Observa la breve descripción del proyecto y secciones como **Agent notes**, **Code standards**, **Scripts** y **Repository Structure**. En **Code standards**, fíjate en las directrices anidadas de **GitHub Actions Workflows**. Se aplican a cualquier interacción con Copilot. 7. Selecciona **Show folder view** para abrir el navegador de carpetas. - ![Botón Show folder view del panel de revisión con un archivo abierto en la aplicación GitHub Copilot](../../_images/app-show-folder-view.png) + ![Botón Show folder view del panel de revisión con un archivo abierto en la aplicación GitHub Copilot](../../../_images/app-show-folder-view.png) 8. Ve a la carpeta `.github/instructions` y explora los archivos. Observa que hay instrucciones para archivos de Astro, la capa de datos de Drizzle, pruebas y otros elementos. 9. Abre `.github/instructions/unit-tests.instructions.md`. Observa el campo `applyTo` de la parte superior: establece un patrón glob, relativo a la raíz del repositorio, que determina a qué archivos se aplican las instrucciones. En este caso, coincidirá cualquier archivo de prueba de TypeScript, por ejemplo, uno que cumpla `**/*.test.ts`. @@ -87,7 +87,7 @@ En la lección anterior iniciaste una sesión con una indicación directa. Sin e 2. Selecciona la incidencia titulada **Update our repository coding standards** para abrirla. 3. Selecciona **New session** en la esquina superior derecha para iniciar una sesión basada en la incidencia. - ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../_images/app-new-session-from-issue.png) + ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../../_images/app-new-session-from-issue.png) 4. Utiliza la indicación siguiente para pedir a Copilot que actualice los archivos de instrucciones de acuerdo con los requisitos documentados en la incidencia: @@ -103,7 +103,7 @@ Vamos a leer las actualizaciones de Copilot y también a pedirle un ejemplo del 1. Selecciona **Changes** en la esquina superior derecha para abrir los cambios de código. - ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../_images/app-select-changes.png) + ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../../_images/app-select-changes.png) 2. Revisa el archivo de instrucciones actualizado. Confirma que contiene las directrices para añadir documentación y comentarios al código. diff --git a/docs/es-es/app/4-build-filtering.md b/docs/es-es/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/es-es/app/4-build-filtering.md rename to docs/es-es/real-world-development/app/4-build-filtering.md index 39105d16..47f758bd 100644 --- a/docs/es-es/app/4-build-filtering.md +++ b/docs/es-es/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Vamos a abrir la incidencia, iniciar una sesión nueva y crear un plan. Para ell 2. Selecciona la incidencia titulada **Allow users to filter games by category and publisher**. 3. Selecciona **New session** en la esquina superior derecha. - ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../_images/app-new-session-from-issue.png) + ![Vista de una incidencia en la aplicación GitHub Copilot con una flecha que señala el botón New session de la esquina superior derecha](../../../_images/app-new-session-from-issue.png) 4. Selecciona Shift+Tab hasta que el modo muestre **Plan**. - ![Cuadro de indicaciones de la aplicación GitHub Copilot con una flecha que señala el selector de modo establecido en Plan](../../_images/app-4-plan-mode.png) + ![Cuadro de indicaciones de la aplicación GitHub Copilot con una flecha que señala el selector de modo establecido en Plan](../../../_images/app-4-plan-mode.png) 5. Envía la indicación siguiente. La incidencia sobre filtrado ya está en el contexto de esta sesión porque la has iniciado desde ella: @@ -92,12 +92,12 @@ Todo el código generado por IA debe revisarse antes de combinarlo. Vamos a revi 1. Selecciona **Changes** en la esquina superior derecha para abrir los cambios de código. - ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../_images/app-select-changes.png) + ![Pestañas del panel de sesión de la aplicación GitHub Copilot con una flecha que señala la pestaña Changes](../../../_images/app-select-changes.png) 2. Revisa los cambios. Deberías ver nuevos archivos de TypeScript y Astro, además de archivos de prueba. Observa que las nuevas funciones auxiliares incluyen comentarios de documentación TSDoc y un comentario de cabecera de archivo: el estándar de documentación que combinaste en la Lección 3, aplicado automáticamente sin solicitarlo. 3. En el panel de revisión situado a la derecha de la aplicación Copilot, selecciona **Terminal**. Si no aparece el botón **Terminal**, selecciona **+** (con la etiqueta **Open in panel**) y, después, **Terminal**. - ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botón Terminal del panel de revisión de la aplicación GitHub Copilot](../../../_images/app-terminal-screenshot.png) 4. Introduce el comando siguiente en la ventana de terminal para iniciar el servidor de desarrollo de la aplicación web: @@ -138,7 +138,7 @@ Vamos a explorar la habilidad para ver qué hace. 1. Si el panel de revisión aún no está visible, selecciona **Toggle review panel** en la esquina superior derecha para abrirlo. - ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../_images/app-2-review-panel.png) + ![Barra de herramientas superior de la aplicación GitHub Copilot con una flecha que señala el botón Toggle review panel situado a la derecha de Create PR](../../../_images/app-2-review-panel.png) 2. Selecciona **+** para añadir un elemento nuevo al panel de revisión. 3. Selecciona **File**. diff --git a/docs/es-es/app/5-mcp-playwright.md b/docs/es-es/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/es-es/app/5-mcp-playwright.md rename to docs/es-es/real-world-development/app/5-mcp-playwright.md index 705fe8cd..102e1265 100644 --- a/docs/es-es/app/5-mcp-playwright.md +++ b/docs/es-es/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ Hay muchos otros servidores MCP que proporcionan acceso a distintas herramientas Los servidores MCP se añaden y gestionan desde la configuración de la aplicación. La aplicación incluye un catálogo de servidores populares, por lo que el [servidor MCP de Playwright][playwright-mcp-server] está a solo un par de selecciones. -1. Selecciona Ctrl+, para abrir la página de configuración de la aplicación Copilot. +1. Pulsa Command+, (Mac) o Ctrl+, (Windows/Linux) para abrir la página de configuración de la aplicación Copilot. 2. Selecciona **MCP servers**. 3. En el cuadro de búsqueda, escribe `Playwright`. 4. Selecciona **Playwright** en la lista de **Popular MCP servers**. diff --git a/docs/es-es/app/6-agent-merge.md b/docs/es-es/real-world-development/app/6-agent-merge.md similarity index 97% rename from docs/es-es/app/6-agent-merge.md rename to docs/es-es/real-world-development/app/6-agent-merge.md index b29b7903..9efbc075 100644 --- a/docs/es-es/app/6-agent-merge.md +++ b/docs/es-es/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ Has revisado el código manualmente, ejecutado pruebas e incluso permitido que C 2. En la esquina superior derecha, selecciona el menú desplegable situado junto a **Create PR**. 3. Selecciona **Agent merge** para habilitar Agent Merge. - ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../_images/app-enable-agent-merge.png) + ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../../_images/app-enable-agent-merge.png) 4. El texto del botón cambia a **Agent merge**. 5. Selecciona el botón **Agent merge** para iniciar el proceso. @@ -43,7 +43,7 @@ Transcurridos unos instantes, observarás que Copilot vuelve a trabajar y examin 6. Permite que Agent Merge combine la solicitud seleccionando el menú desplegable situado junto a **Agent merge** y, después, **Merge pull request**. - ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Cuando todos los procesos de CI estén en verde, lo que significa que las pruebas han finalizado correctamente, Copilot combinará la solicitud. diff --git a/docs/es-es/app/7-canvases.md b/docs/es-es/real-world-development/app/7-canvases.md similarity index 97% rename from docs/es-es/app/7-canvases.md rename to docs/es-es/real-world-development/app/7-canvases.md index 693e1c2b..e3435214 100644 --- a/docs/es-es/app/7-canvases.md +++ b/docs/es-es/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/es-es/app/9-review/ + link: /copilot-workshops/es-es/real-world-development/app/9-review/ label: "Repaso y pasos siguientes" --- @@ -73,7 +73,7 @@ Los lienzos pueden convertirse en recursos del repositorio, al igual que los arc 2. Cuando Copilot haya guardado los archivos del lienzo, selecciona el menú desplegable situado junto a **Create PR** en la esquina superior derecha. 3. Selecciona **Agent merge** para habilitar Agent Merge. - ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../_images/app-enable-agent-merge.png) + ![Menú desplegable Create PR de la aplicación GitHub Copilot abierto, con una flecha que señala la opción Agent merge](../../../_images/app-enable-agent-merge.png) 4. El texto del botón cambia a **Agent merge**. 5. Selecciona el botón **Agent merge** para iniciar el proceso. @@ -84,7 +84,7 @@ Transcurridos unos instantes, observarás que Copilot vuelve a trabajar y examin 6. Permite que Agent Merge combine la solicitud seleccionando el menú desplegable situado junto a **Agent merge** y, después, **Merge pull request**. - ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menú desplegable Agent merge con las acciones permitidas al agente —Address reviews, Fix CI failures y Resolve conflicts— y una flecha que señala Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Espera a que todos los procesos de CI se completen correctamente y se muestren en verde. Cuando terminen, Copilot combinará automáticamente la solicitud. diff --git a/docs/es-es/app/8-foundry-canvas/1-project-and-model.md b/docs/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 93% rename from docs/es-es/app/8-foundry-canvas/1-project-and-model.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 9b4908ab..b8d4c76d 100644 --- a/docs/es-es/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/8-foundry-canvas/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/ label: "Opcional: Incorporar Foundry" next: - link: /copilot-workshops/es-es/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Crear e implementar el agente --- @@ -33,7 +33,7 @@ La configuración conecta la aplicación GitHub Copilot con Azure y mantiene uni 3. Instala [Azure Developer CLI][install-azd] y verifica con `azd version` que esté instalada la versión 1.27.1 o posterior. 4. Abre la aplicación GitHub Copilot, abre **Customize** y selecciona **Plugins**. Busca `microsoft-foundry` y selecciona **Install** para el complemento Microsoft Foundry, que incluye Canvas y las habilidades de Foundry. - ![Instalar el complemento Microsoft Foundry](../../../_images/app-8-install-foundry-plugin.png) + ![Instalar el complemento Microsoft Foundry](../../../../_images/app-8-install-foundry-plugin.png) 5. En **Customize**, selecciona **Plugins**, busca `azure` o selecciónalo en la lista **Featured** y, después, selecciona **Install** para el complemento Azure. 6. En la pestaña **My work**, busca y abre la incidencia titulada **Add a Backer Concierge assistant for catalog questions** en el repositorio de Tailspin Toys. Selecciona **New session** para iniciar una sesión vinculada a la incidencia en un worktree nuevo. Conserva este repositorio, esta rama del worktree y esta sesión de la incidencia durante los tres módulos. @@ -57,11 +57,11 @@ El repositorio de ejemplo incluye un script de exportación que proporciona al a npm run db:export ``` - ![Generar la exportación del catálogo](../../../_images/app-8-generate-catalog-export.png) + ![Generar la exportación del catálogo](../../../../_images/app-8-generate-catalog-export.png) 10. Abre `db/catalog.json` y confirma que contiene 21 juegos con título, descripción, categoría, editor y valoración por estrellas. Comprueba el campo `note`: el catálogo no contiene importes recaudados, cifras de patrocinadores, niveles de aportación ni fechas de lanzamiento. Considera también como no disponibles los precios, números de jugadores y duraciones de partida que falten, en lugar de rellenar los huecos con conocimientos externos. Si la exportación falla o es distinta, pide a Copilot que lo investigue y vuelva a ejecutarla antes de continuar. - ![Exportación del catálogo abierta en la aplicación Copilot](../../../_images/app-8-view-catalog.png) + ![Exportación del catálogo abierta en la aplicación Copilot](../../../../_images/app-8-view-catalog.png) ## Configurar un proyecto de Foundry y un modelo @@ -95,7 +95,7 @@ Crear primero el proyecto y la implementación en el chat permite que Canvas se Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Crear un proyecto de Foundry](../../../_images/app-8-foundry-project-created.png) + ![Crear un proyecto de Foundry](../../../../_images/app-8-foundry-project-created.png) 14. Pide a Copilot que recomiende un modelo. Los criterios de aceptación de la incidencia ya están en el contexto porque la sesión se inició desde ella: @@ -105,7 +105,7 @@ Crear primero el proyecto y la implementación en el chat permite que Canvas se 15. Confirma que Copilot carga la habilidad `microsoft-foundry` y elige un modelo disponible según sus ventajas e inconvenientes. La guía de inicio rápido de agentes hospedados de Microsoft Foundry utiliza actualmente `gpt-5.4-mini`, pero la disponibilidad y la cuota varían según la región. - ![Seleccionar un modelo](../../../_images/app-8-select-model.png) + ![Seleccionar un modelo](../../../../_images/app-8-select-model.png) 16. Pide a Copilot que implemente el modelo elegido y revisa el proyecto de destino y el coste antes de aprobarlo: @@ -124,7 +124,7 @@ Esta comprobación verifica el proyecto y el modelo antes de que exista código 18. Abre el menú **More options** en la esquina superior derecha de Canvas y selecciona **Sign in**. 19. Selecciona el proyecto de Foundry **tailspin-toys**. Expande **Models** y confirma que la implementación aparece con el nombre y el estado esperados. - ![Validar el proyecto y el modelo en Canvas](../../../_images/app-8-validate-project-model.png) + ![Validar el proyecto y el modelo en Canvas](../../../../_images/app-8-validate-project-model.png) 20. En la misma sesión, escribe: diff --git a/docs/es-es/app/8-foundry-canvas/2-build-and-deploy.md b/docs/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 95% rename from docs/es-es/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index a2c83233..03912153 100644 --- a/docs/es-es/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar el proyecto y el modelo next: - link: /copilot-workshops/es-es/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: Conectar el agente al sitio --- @@ -49,7 +49,7 @@ Canvas genera el código, la estructura de carpetas y el archivo `azure.yaml` de Canvas envía a Copilot la indicación y el contexto de la suscripción actual y del proyecto de Foundry. Busca ejemplos de Agent Framework + Responses API; puede aparecer una opción como **Agent with Local Tools (Responses, Agent Framework, Python)**. - ![Generar la estructura inicial del agente Backer Concierge en Canvas](../../../_images/app-8-scaffold-backer-concierge.png) + ![Generar la estructura inicial del agente Backer Concierge en Canvas](../../../../_images/app-8-scaffold-backer-concierge.png) 5. Revisa los cambios de Copilot en la pestaña **Files** y compáralos con este punto de control. Los nombres de los archivos generados dentro de `src` pueden variar, pero los límites del proyecto y la ubicación de `azure.yaml` deberían coincidir: @@ -90,7 +90,7 @@ Canvas genera el código, la estructura de carpetas y el archivo `azure.yaml` de Resultado esperado: menciona solo títulos reales del catálogo y utiliza la información correcta de cada título. - ![Recomendación basada en el catálogo en Agent Inspector](../../../_images/app-8-grounded-recommendation.png) + ![Recomendación basada en el catálogo en Agent Inspector](../../../../_images/app-8-grounded-recommendation.png) 10. Prueba una **pregunta trampa para detectar alucinaciones**: @@ -144,7 +144,7 @@ Canvas utiliza `azd` para implementar el agente probado. Foundry empaqueta el c 16. En Canvas, en **Deploy and test**, selecciona **Deploy to Foundry**. Revisa la indicación que inserta en el chat. - ![Indicación Deploy to Foundry en el lienzo](../../../_images/app-8-deploy-to-foundry.png) + ![Indicación Deploy to Foundry en el lienzo](../../../../_images/app-8-deploy-to-foundry.png) 17. Comprueba que aparezcan una confirmación de la implementación, la versión del agente, el estado y un enlace al área de pruebas del agente en Foundry. Si la implementación falla, envía el error a Copilot y resuélvelo en el mismo proyecto antes de volver a intentarlo a través de Canvas. 18. Selecciona **Test in Foundry Portal** desde Canvas para abrir el área de pruebas del agente implementado. Vuelve a ejecutar las seis comprobaciones de aceptación de los pasos 9–14 con esta versión implementada; mantén las dos indicaciones enlazadas en una misma conversación para comprobar la continuidad. Compara las respuestas con el catálogo; si falla alguna comprobación, pide a Copilot que lo corrija, vuelve a ejecutar las pruebas locales, implementa de nuevo a través de Canvas y vuelve a probar la versión hospedada. diff --git a/docs/es-es/app/8-foundry-canvas/3-connect-to-site.md b/docs/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/es-es/app/8-foundry-canvas/3-connect-to-site.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 401c65e8..af5b893c 100644 --- a/docs/es-es/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Crear e implementar el agente next: - link: /copilot-workshops/es-es/app/9-review/ + link: /copilot-workshops/es-es/real-world-development/app/9-review/ label: Repaso y pasos siguientes --- @@ -56,7 +56,7 @@ El proxy es la única parte del código que puede acceder a las credenciales de 7. Inspecciona la respuesta: debería explicar que el catálogo no contiene precios. Confirma que no contiene ningún token de Foundry, credencial, identificador interno de conversación, punto de conexión del proyecto ni traza de la pila. Si no se puede acceder a la función, o la respuesta filtra detalles o inventa precios, envía el fallo sin datos sensibles a Copilot, corrígelo y vuelve a ejecutar las pruebas del proxy antes de continuar. - ![Prueba del proxy local](../../../_images/app-8-local-proxy-test.png) + ![Prueba del proxy local](../../../../_images/app-8-local-proxy-test.png) ## Crear y probar el widget de chat @@ -77,7 +77,7 @@ Con el proxy en ejecución, el widget muestra la conversación en el sitio sin e 11. Revisa el informe y verifica en el navegador el comportamiento que describe, incluido el uso del teclado y la conversación de dos turnos de las [comprobaciones de aceptación del agente hospedado][agent-checks]. Confirma que las solicitudes del navegador pasan por `/api/concierge` con una referencia opaca, no directamente a Foundry, y que las respuestas no exponen credenciales ni identificadores internos de Foundry. Comprueba que las recomendaciones y las respuestas sobre datos ausentes se mantengan dentro de los límites del catálogo. Resuelve las pruebas fallidas con Copilot, reinicia el servicio local afectado si es necesario y vuelve a ejecutar las pruebas. - ![Resultados de las pruebas de extremo a extremo del widget Backer Concierge](../../../_images/app-8-e2e-test-results.png) + ![Resultados de las pruebas de extremo a extremo del widget Backer Concierge](../../../../_images/app-8-e2e-test-results.png) ## Punto de control y pasos siguientes diff --git a/docs/es-es/app/8-foundry-canvas/README.md b/docs/es-es/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/es-es/app/8-foundry-canvas/README.md rename to docs/es-es/real-world-development/app/8-foundry-canvas/README.md index 4888bf7c..ad59478c 100644 --- a/docs/es-es/app/8-foundry-canvas/README.md +++ b/docs/es-es/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "Opcional: Incorporar Foundry" -slug: es-es/app/8-foundry-canvas +slug: es-es/real-world-development/app/8-foundry-canvas description: "Crea un Backer Concierge basado en el catálogo con Microsoft Foundry Canvas, con puntos seguros para detenerte durante el recorrido." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/es-es/app/9-review/ + link: /copilot-workshops/es-es/real-world-development/app/9-review/ label: Repaso y pasos siguientes next: - link: /copilot-workshops/es-es/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/es-es/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar el proyecto y el modelo --- diff --git a/docs/es-es/app/9-review.md b/docs/es-es/real-world-development/app/9-review.md similarity index 100% rename from docs/es-es/app/9-review.md rename to docs/es-es/real-world-development/app/9-review.md diff --git a/docs/es-es/app/README.md b/docs/es-es/real-world-development/app/README.md similarity index 99% rename from docs/es-es/app/README.md rename to docs/es-es/real-world-development/app/README.md index 56ea701e..92fd275b 100644 --- a/docs/es-es/app/README.md +++ b/docs/es-es/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/app +slug: es-es/real-world-development/app title: "Aplicación GitHub Copilot" authors: - geektrainer diff --git a/docs/es-es/cli/0-prerequisites.md b/docs/es-es/real-world-development/cli/0-prerequisites.md similarity index 94% rename from docs/es-es/cli/0-prerequisites.md rename to docs/es-es/real-world-development/cli/0-prerequisites.md index 383b011b..91abe83d 100644 --- a/docs/es-es/cli/0-prerequisites.md +++ b/docs/es-es/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Para crear una copia del repositorio para el código que vas a crear, generarás 1. En una nueva ventana del navegador, ve al repositorio de GitHub de este laboratorio: `https://github.com/github-samples/tailspin-toys`. 2. Crea tu propia copia del repositorio seleccionando el botón **Use this template** en la página del repositorio del laboratorio. Después, selecciona **Create a new repository**. - ![Captura del botón Use this template](../../_images/ex0-use-template.png) + ![Captura del botón Use this template](../../../_images/ex0-use-template.png) 3. Si estás realizando el taller como parte de un evento dirigido por GitHub o Microsoft, sigue las instrucciones proporcionadas por el personal mentor. En caso contrario, puedes crear el nuevo repositorio en una organización en la que tengas acceso a GitHub Copilot. - ![Captura de la configuración de la plantilla del repositorio](../../_images/ex0-repository-settings.png) + ![Captura de la configuración de la plantilla del repositorio](../../../_images/ex0-repository-settings.png) 4. Anota la ruta del repositorio que has creado (**nombre-de-organización-o-usuario/nombre-del-repositorio**), ya que la consultarás más adelante en el laboratorio. @@ -36,11 +36,11 @@ Ahora usarás un codespace para completar los ejercicios del laboratorio. 1. Ve a tu repositorio recién creado. 2. Selecciona el botón verde **Code**. - ![Botón Code](../../_images/ex0-code-button.png) + ![Botón Code](../../../_images/ex0-code-button.png) 3. Selecciona la pestaña **Codespaces** y, a continuación, selecciona el botón **+** para crear un Codespace nuevo. - ![Crear un codespace nuevo](../../_images/ex0-create-codespace.png) + ![Crear un codespace nuevo](../../../_images/ex0-create-codespace.png) La creación del codespace tardará varios minutos, aunque sigue siendo mucho más rápida que instalar manualmente todos los servicios. Dicho esto, puedes aprovechar este tiempo para explorar otras funciones de GitHub Copilot, a las que prestaremos atención a continuación. diff --git a/docs/es-es/cli/1-install-copilot-cli.md b/docs/es-es/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/es-es/cli/1-install-copilot-cli.md rename to docs/es-es/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/es-es/cli/2-custom-instructions.md b/docs/es-es/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/es-es/cli/2-custom-instructions.md rename to docs/es-es/real-world-development/cli/2-custom-instructions.md diff --git a/docs/es-es/cli/3-generating-code.md b/docs/es-es/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/es-es/cli/3-generating-code.md rename to docs/es-es/real-world-development/cli/3-generating-code.md diff --git a/docs/es-es/cli/4-mcp.md b/docs/es-es/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/es-es/cli/4-mcp.md rename to docs/es-es/real-world-development/cli/4-mcp.md diff --git a/docs/es-es/cli/5-agent-skills.md b/docs/es-es/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/es-es/cli/5-agent-skills.md rename to docs/es-es/real-world-development/cli/5-agent-skills.md diff --git a/docs/es-es/cli/6-custom-agents.md b/docs/es-es/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/es-es/cli/6-custom-agents.md rename to docs/es-es/real-world-development/cli/6-custom-agents.md diff --git a/docs/es-es/cli/7-slash-commands.md b/docs/es-es/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/es-es/cli/7-slash-commands.md rename to docs/es-es/real-world-development/cli/7-slash-commands.md index 0973cdf8..c9bdcbd6 100644 --- a/docs/es-es/cli/7-slash-commands.md +++ b/docs/es-es/real-world-development/cli/7-slash-commands.md @@ -66,7 +66,7 @@ Cuando trabajas en tareas grandes o complejas, puedes llegar al límite máximo 2. En apenas unos instantes, Copilot CLI generará una representación visual de su contexto actual: - ![Captura de la ventana de contexto de Copilot CLI](../../_images/cli-7-context-window.png) + ![Captura de la ventana de contexto de Copilot CLI](../../../_images/cli-7-context-window.png) 3. Fíjate en el modelo mostrado (que puede ser distinto del de la imagen) y en el porcentaje actual de tokens usados. El resto de la información destaca lo siguiente: diff --git a/docs/es-es/cli/8-foundry-agent/1-project-and-model.md b/docs/es-es/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/es-es/cli/8-foundry-agent/1-project-and-model.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 93e2ea9e..e0561da3 100644 --- a/docs/es-es/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ El agente necesita el catálogo en un archivo que pueda leer. El ejemplo de Tail npm run db:export ``` - ![Resumen de la exportación del catálogo](../../../_images/cli-8-export-db-catalog.png) + ![Resumen de la exportación del catálogo](../../../../_images/cli-8-export-db-catalog.png) 2. Abre `db/catalog.json`. Confirma que contiene 21 juegos con título, descripción, categoría, editorial y valoración por estrellas. Su campo `note` indica que el catálogo no contiene importes totales de financiación, cifras de personas que apoyan los juegos, niveles de aportación ni fechas de lanzamiento. Tampoco tiene campos de precio, número de jugadores o duración de las partidas. Esas omisiones definen el límite que debe respetar el agente. @@ -129,7 +129,7 @@ El agente necesita un proyecto de Foundry y un modelo desplegado. Usarás la hab Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![Creación de un proyecto público de Foundry](../../../_images/cli-8-create-foundry-project.png) + ![Creación de un proyecto público de Foundry](../../../../_images/cli-8-create-foundry-project.png) 2. Cuando el proyecto esté listo, pide a Copilot que recomiende un modelo: @@ -139,7 +139,7 @@ El agente necesita un proyecto de Foundry y un modelo desplegado. Usarás la hab Copilot puede pedirte que selecciones un modelo entre las opciones recomendadas. - ![Selección de un modelo entre las opciones recomendadas](../../../_images/cli-8-select-foundry-model.png) + ![Selección de un modelo entre las opciones recomendadas](../../../../_images/cli-8-select-foundry-model.png) Continuaremos con `gpt-5.4-mini` en los pasos restantes, pero la disponibilidad y la cuota varían según la región. @@ -149,7 +149,7 @@ El agente necesita un proyecto de Foundry y un modelo desplegado. Usarás la hab Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![Despliegue del modelo seleccionado](../../../_images/cli-8-deploy-foundry-model.png) + ![Despliegue del modelo seleccionado](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > La disponibilidad de los modelos cambia con el tiempo. La elección adecuada es un modelo cuya disponibilidad en tu proyecto confirme Copilot, no un modelo fijado en un ejemplo. @@ -198,7 +198,7 @@ Primero, asignarás a la cuenta con la que has iniciado sesión el rol **Foundry Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Respuesta del modelo de Foundry que recomienda un juego real del catálogo e indica que no hay datos de financiación disponibles](../../../_images/cli-8-foundry-agent-response.png) + ![Respuesta del modelo de Foundry que recomienda un juego real del catálogo e indica que no hay datos de financiación disponibles](../../../../_images/cli-8-foundry-agent-response.png) 5. Revisa la respuesta. Debe recomendar únicamente un juego real del catálogo, usar los datos correctos del catálogo y explicar que la información de financiación no está disponible. Si el modelo inventa un título, detalles del juego o un importe total de financiación, compáralo con otro modelo recomendado antes de continuar. diff --git a/docs/es-es/cli/8-foundry-agent/2-build-and-deploy.md b/docs/es-es/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 98% rename from docs/es-es/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index ad11981b..a699ed6f 100644 --- a/docs/es-es/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Ahora pedirás a la habilidad Microsoft Foundry que genere la estructura del age No continúes hasta que las pruebas específicas se superen. - ![Verificación de la estructura generada del agente](../../../_images/cli-8-verify-generated-agent.png) + ![Verificación de la estructura generada del agente](../../../../_images/cli-8-verify-generated-agent.png) ## Prueba el agente en local @@ -113,7 +113,7 @@ Ahora comprobarás, mediante la API Responses local del agente, que sus respuest 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![Pruebas del despliegue del agente hospedado superadas](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![Pruebas del despliegue del agente hospedado superadas](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. Revisa los resultados. Si el agente no puede conectarse, confirma que el segundo terminal sigue ejecutando el servicio. Si falla una prueba, pide a Copilot que corrija solo el defecto local, ejecute las pruebas específicas y te indique cuándo reiniciar `azd ai agent run`. Reinicia el servicio y repite la prueba de aceptación fallida después de cada cambio. @@ -130,7 +130,7 @@ Una vez superadas las pruebas de aceptación locales, puedes desplegar el agente 3. Si se te pide que selecciones el origen de una batería de evaluación, elige **No, set it up later**. - ![Estado del despliegue del agente hospedado y enlace al área de pruebas](../../../_images/cli-8-hosted-agent-deployment.png) + ![Estado del despliegue del agente hospedado y enlace al área de pruebas](../../../../_images/cli-8-hosted-agent-deployment.png) 4. Revisa el estado del despliegue y la respuesta remota. Confirma que el agente está en ejecución y recomienda únicamente juegos reales del catálogo. Si el despliegue o la invocación fallan, pide a Copilot que diagnostique el fallo y repita la prueba remota antes de continuar. diff --git a/docs/es-es/cli/8-foundry-agent/3-connect-to-site.md b/docs/es-es/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 97% rename from docs/es-es/cli/8-foundry-agent/3-connect-to-site.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 8df12ffc..b35fd33a 100644 --- a/docs/es-es/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ La habilidad `microsoft-foundry` se encarga del flujo del agente hospedado, mien For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Configuración del proxy local de Azure Functions](../../../_images/cli-8-azure-functions-proxy.png) + ![Configuración del proxy local de Azure Functions](../../../../_images/cli-8-azure-functions-proxy.png) 2. Abre otro terminal e inicia la función local con el comando que te proporcione Copilot. Deja la función en ejecución. 3. Vuelve a Copilot CLI y pide a Copilot que pruebe el proxy local: @@ -54,7 +54,7 @@ La habilidad `microsoft-foundry` se encarga del flujo del agente hospedado, mien 4. Inspecciona la respuesta. Debe explicar que el catálogo no contiene precios. No debe contener ningún token, credencial, punto de conexión del proyecto ni identificador de conversación sin procesar de Foundry, ni tampoco una traza de la pila. - ![Respuesta JSON sin datos sensibles del punto de conexión local del concierge](../../../_images/cli-8-sanitized-json-response.png) + ![Respuesta JSON sin datos sensibles del punto de conexión local del concierge](../../../../_images/cli-8-sanitized-json-response.png) ## Crea el widget de chat @@ -73,7 +73,7 @@ El proxy ofrece al navegador una forma segura de conectarse al concierge. Ahora Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Captura del widget Backer Concierge en el sitio de Tailspin Toys](../../../_images/cli-8-backer-concierge-widget.png) + ![Captura del widget Backer Concierge en el sitio de Tailspin Toys](../../../../_images/cli-8-backer-concierge-widget.png) 4. Revisa los resultados y las pruebas aportadas. Si alguna comprobación falla, pide a Copilot que corrija el comportamiento correspondiente del proxy o del widget y repita las comprobaciones fallidas antes de terminar. diff --git a/docs/es-es/cli/8-foundry-agent/README.md b/docs/es-es/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/es-es/cli/8-foundry-agent/README.md rename to docs/es-es/real-world-development/cli/8-foundry-agent/README.md index 27342b72..7b27f394 100644 --- a/docs/es-es/cli/8-foundry-agent/README.md +++ b/docs/es-es/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/cli/8-foundry-agent +slug: es-es/real-world-development/cli/8-foundry-agent title: "Opcional: incorpora Foundry" description: "Una serie de tres módulos para preparar un modelo, crear y desplegar un agente basado en el catálogo y conectarlo a Tailspin Toys." authors: diff --git a/docs/es-es/cli/9-review.md b/docs/es-es/real-world-development/cli/9-review.md similarity index 100% rename from docs/es-es/cli/9-review.md rename to docs/es-es/real-world-development/cli/9-review.md diff --git a/docs/es-es/cli/README.md b/docs/es-es/real-world-development/cli/README.md similarity index 98% rename from docs/es-es/cli/README.md rename to docs/es-es/real-world-development/cli/README.md index 568127ff..35469ce0 100644 --- a/docs/es-es/cli/README.md +++ b/docs/es-es/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/cli +slug: es-es/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/es-es/vscode/6-iterating.md b/docs/es-es/real-world-development/vscode/6-iterating.md similarity index 99% rename from docs/es-es/vscode/6-iterating.md rename to docs/es-es/real-world-development/vscode/6-iterating.md index b609bd0a..942e9f3f 100644 --- a/docs/es-es/vscode/6-iterating.md +++ b/docs/es-es/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ Los controles de alto contraste y modo claro que has implementado con el agente 9. Vuelve a la pestaña **Conversation**. 10. Si hay flujos de trabajo pendientes de aprobación, selecciona **Approve and run workflows**. - ![Aprobar y ejecutar flujos de trabajo con Approve and run workflows](../../_images/shared-approve-workflows.png) + ![Aprobar y ejecutar flujos de trabajo con Approve and run workflows](../../../_images/shared-approve-workflows.png) 11. Espera a que terminen los flujos de trabajo. Si todo va bien, deberían completarse correctamente. > [!TIP] diff --git a/docs/es-es/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/es-es/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 0be9b826..2fb7573b 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ El proyecto contiene el modelo y, más adelante, el agente hospedado. Al retomar 1. Selecciona **Foundry Toolkit** en la barra de actividades, expande **Help and Feedback** y selecciona **Ask Copilot**. Confirma el modelo que prefieras en la lista desplegable y envía el prompt `/foundrytk-quick-start` generado. - ![Captura de pantalla que muestra la secuencia de inicio rápido de Foundry Toolkit.](../../../_images/vscode-foundry-setup.png) + ![Captura de pantalla que muestra la secuencia de inicio rápido de Foundry Toolkit.](../../../../_images/vscode-foundry-setup.png) 2. En el flujo interactivo, responde a **Where are you starting from?** con **Set up Foundry** y, a continuación, a **What do you have already?** con **I have an Azure subscription or Foundry resources**. 3. Revisa las solicitudes de aprobación de herramientas. Si los comandos propuestos y su alcance son adecuados, selecciona **Allow azmcp …** para esta sesión para reducir las solicitudes de aprobación repetidas. @@ -93,7 +93,7 @@ Aquí importan más el cumplimiento de las reglas y la fundamentación en los da 3. Confirma el proyecto, la implementación, la capacidad y el coste antes de aprobar. Si procede tras revisar el alcance, selecciona **Allow az …** para esta sesión para reducir las solicitudes repetidas. 4. Selecciona **Foundry Toolkit**, expande **My Resources** y selecciona **Models**. Confirma que el modelo implementado aparece en Foundry. La captura de pantalla es un ejemplo; tu región puede ofrecer un modelo diferente. - ![Captura de pantalla que muestra un ejemplo de implementación de modelo en Foundry Toolkit.](../../../_images/vscode-model-deployed.png) + ![Captura de pantalla que muestra un ejemplo de implementación de modelo en Foundry Toolkit.](../../../../_images/vscode-model-deployed.png) ## Probar el modelo implementado diff --git a/docs/es-es/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 95% rename from docs/es-es/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 6bfc2aeb..da9becad 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ El kit de herramientas genera la estructura de código en el repositorio actual 1. Selecciona **Foundry Toolkit**, expande **Developer Tools**, expande **+ Build** y selecciona **+ Create Agent**. En **Create Agent**, selecciona **Code an agent with Copilot**. - ![Captura de pantalla que muestra la página de creación de agentes.](../../../_images/vscode-create-agent.png) + ![Captura de pantalla que muestra la página de creación de agentes.](../../../../_images/vscode-create-agent.png) 2. En el nuevo chat, confirma que se cambia a **AIAgentExpert**. Sustituye el prompt generado por el prompt personalizado y envíalo: @@ -65,7 +65,7 @@ El kit de herramientas genera la estructura de código en el repositorio actual 5. Reutiliza los seis prompts de [Probar el modelo implementado][model-tests]. Comprueba las respuestas con el archivo `db/catalog.json` completo, en lugar de suponer que la clasificación del subconjunto de nueve juegos coincide con la del catálogo completo. 6. Alterna entre **Input & Output**, **Events** y **Tools** para inspeccionar los datos de las solicitudes y respuestas, los eventos de sesión y las llamadas a herramientas. Si el comportamiento incumple los criterios de aceptación, pide a Copilot que lo corrija y vuelve a ejecutar las pruebas específicas y las comprobaciones de Inspector antes de implementar. - ![Captura de pantalla que muestra el flujo de depuración local del agente.](../../../_images/vscode-agent-debug.png) + ![Captura de pantalla que muestra el flujo de depuración local del agente.](../../../../_images/vscode-agent-debug.png) ## Implementar y probar el agente hospedado @@ -77,17 +77,17 @@ La transferencia **Go production** empaqueta el agente existente para Foundry. N /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![Captura de pantalla que muestra las opciones de transferencia del agente AIAgentExpert.](../../../_images/vscode-go-production-handoff.png) + ![Captura de pantalla que muestra las opciones de transferencia del agente AIAgentExpert.](../../../../_images/vscode-go-production-handoff.png) 2. Revisa el chat y el terminal para comprobar los parámetros y las solicitudes de aprobación de comandos. Confirma que la implementación tiene como destino el proyecto `tailspin-toys` existente y revisa los recursos facturables antes de aprobar. 3. Si Copilot ofrece un conjunto de evaluaciones, puedes aceptarlo y completarlo como comprobación adicional. 4. Selecciona **Foundry Toolkit**, expande **My Resources** y selecciona **Agents**. En la pestaña **Agents**, cambia a **Hosted Agent**. - ![Captura de pantalla que muestra el agente hospedado implementado.](../../../_images/vscode-agent-deployed.png) + ![Captura de pantalla que muestra el agente hospedado implementado.](../../../../_images/vscode-agent-deployed.png) 5. Selecciona el nombre del agente y confirma que el estado de implementación es **Running**. Cambia a **Playground** y repite las comprobaciones de fundamentación, datos ausentes, peticiones fuera del catálogo, peticiones vagas y clasificación con el catálogo implementado. - ![Captura de pantalla que muestra una respuesta del agente hospedado implementado.](../../../_images/vscode-agent-response.png) + ![Captura de pantalla que muestra una respuesta del agente hospedado implementado.](../../../../_images/vscode-agent-response.png) 6. Si la implementación o las respuestas fallan, inspecciona con Copilot el estado notificado y los registros, corrige el fallo en el proyecto existente y repite las comprobaciones. No continúes con una implementación sin verificar. diff --git a/docs/es-es/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/es-es/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 7a094df0..1316ad21 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ La interfaz ya tiene un backend verificado. Las pruebas de extremo a extremo com Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Captura de pantalla que muestra el widget de chat Backer Concierge en funcionamiento](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Captura de pantalla que muestra el widget de chat Backer Concierge en funcionamiento](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Mantén la función y el sitio en ejecución y, a continuación, verifica la experiencia completa: diff --git a/docs/es-es/vscode/7-foundry-toolkit/README.md b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/es-es/vscode/7-foundry-toolkit/README.md rename to docs/es-es/real-world-development/vscode/7-foundry-toolkit/README.md index 847d40cc..8fe9b31a 100644 --- a/docs/es-es/vscode/7-foundry-toolkit/README.md +++ b/docs/es-es/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/vscode/7-foundry-toolkit +slug: es-es/real-world-development/vscode/7-foundry-toolkit title: "Opcional: Incorporar Foundry" description: "Crea un Backer Concierge basado en el catálogo con VS Code y Microsoft Foundry Toolkit en tres módulos específicos." authors: diff --git a/docs/es-es/vscode/README.md b/docs/es-es/real-world-development/vscode/README.md similarity index 98% rename from docs/es-es/vscode/README.md rename to docs/es-es/real-world-development/vscode/README.md index 15d8feb0..71398c63 100644 --- a/docs/es-es/vscode/README.md +++ b/docs/es-es/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: es-es/vscode +slug: es-es/real-world-development/vscode title: "VS Code" authors: - geektrainer diff --git a/docs/first-steps/README.md b/docs/first-steps/README.md new file mode 100644 index 00000000..ab3adf0a --- /dev/null +++ b/docs/first-steps/README.md @@ -0,0 +1,35 @@ +--- +title: "First steps" +slug: first-steps +authors: + - geektrainer +lastUpdated: 2026-09-28 +--- + +First steps workshops are guided introductions that help you explore GitHub Copilot without requiring an existing application or a detailed development scenario. Each workshop starts small, introduces the product as you use it, and takes you through a complete workflow. + +Every workshop builds the same Space Quiz from an empty folder, so you can pick the tool you want to learn, or complete more than one to compare how each one works. + +> [!NOTE] +> These workshops were created by [James Montemagno][james] and adapted from [First Steps with GitHub Copilot][source-lab], which is available under the [MIT License][source-license]. + +## Workshops + +### [GitHub Copilot app tour][copilot-app] + +Build a colorful Space Quiz from an empty folder and take it through the development loop: create, refine, test, capture project instructions, publish, plan work, implement issues, review and merge a pull request, automate recurring work, and explore a Canvas extension. + +### [GitHub Copilot CLI first steps][copilot-cli] + +Learn the terminal-first loop: build and review diffs before Git writes anything, run sessions side by side in worktrees, plan before you edit, manage context, then create, merge, and delegate work without leaving your shell. + +### [Visual Studio Code first steps][vscode] + +Use the editor loop: build in a workspace, polish elements from the integrated browser, inspect context, test before Git writes, plan before you edit, and let GitHub tools handle issues, pull requests, and cloud sessions without leaving VS Code. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[copilot-app]: copilot-app/ +[copilot-cli]: copilot-cli/ +[vscode]: vscode/ diff --git a/docs/first-steps/copilot-app/0-prerequisites.md b/docs/first-steps/copilot-app/0-prerequisites.md new file mode 100644 index 00000000..61e31e86 --- /dev/null +++ b/docs/first-steps/copilot-app/0-prerequisites.md @@ -0,0 +1,74 @@ +--- +title: "Lesson 0 - Prerequisites and setup" +description: "Verify the workshop prerequisites, install the GitHub Copilot app, and get familiar with its workspace." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Before you build the Space Quiz, confirm that you have what you need, install the GitHub Copilot app, and get familiar with its workspace. + +In this lesson, you will: + +- verify the workshop prerequisites. +- install and sign in to the GitHub Copilot app. +- choose a model for your sessions. +- identify the app's primary work areas. +- try a quick chat. + +## Prerequisites + +You need: + +- a GitHub account with a [Copilot plan][copilot-plans]. +- a computer running macOS, Windows, or Linux. + +The app ships with Git, so there is nothing else to install. + +> [!NOTE] +> If you use Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before agent sessions will work. + +## Install and configure the app + +1. Download and install the [GitHub Copilot app][download-app] for your operating system. +2. Open the app. +3. Select **Sign in to GitHub** and authenticate. +4. Choose a theme, then select **Finish**. + +## Choose a model + +Use the following preference order when you choose a model, and select the first option available to you: + +1. **GPT-6-Luna** (recommended). +2. **Auto**, as a balanced backup. +3. Any model from the [list of active models][active-models]. + +Model availability depends on your plan, organization policy, and product version. + +## Find your way around + +The app brings the development workflow into one place: + +- **New**: Start a session on a project, or choose **Chat** for a quick question. +- **My work**: Browse your GitHub issues and pull requests. +- **Automations**: Schedule recurring agent work on a repository. +- **Customize**: Change themes and models, and manage Canvas extensions. + +## Try a quick chat + +Not every question needs a workspace. From **New**, choose **Chat** instead of a project. A chat has no repository attached and cannot edit files, so it is the fastest way to ask a question, get an explanation, or think through an approach before you start a real session. + +Send the following prompt in a chat: + +```plaintext +How does the GitHub Copilot app use worktrees? +``` + +## Summary and next steps + +You verified the prerequisites, installed the app, chose a model, and explored its main work areas. Continue to [Lesson 1: Create the Space Quiz workspace][next-lesson]. + +[copilot-plans]: https://github.com/features/copilot/plans +[download-app]: https://gh.io/app +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: ../1-create-workspace/ diff --git a/docs/first-steps/copilot-app/1-create-workspace.md b/docs/first-steps/copilot-app/1-create-workspace.md new file mode 100644 index 00000000..fb4b48aa --- /dev/null +++ b/docs/first-steps/copilot-app/1-create-workspace.md @@ -0,0 +1,34 @@ +--- +title: "Lesson 1 - Create the Space Quiz workspace" +description: "Start a local Interactive session for the Space Quiz in an empty folder." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Create a local workspace for the Space Quiz and configure a session that keeps you in control as the agent begins working. + +In this lesson, you will: + +- open an empty local folder. +- start an Interactive agent session. +- confirm the folder, mode, and model before the first prompt. + +## Create the workspace + +1. Open the GitHub Copilot app and confirm that you are signed in. +2. Select **New**, then **Open folder**, and choose an empty folder named `space-quiz`. Create the folder first if it does not exist. +3. Set the session mode to **Interactive**. +4. Choose your preferred model using the [preference order from Lesson 0][model-order]. +5. Select **Create**. The session opens empty and waits for your first prompt. + +![Illustration of the Copilot app New screen with a prompt box, the Interactive mode, Auto model, and Default agent pickers, and the space-quiz folder on the Local main branch.](../../_images/first-steps-app-new-session.svg) + +The **New** screen is where you set the folder, the mode, and the agent before you type the first prompt. An Interactive session lets you direct the work and review each stage while the agent builds the project. + +## Summary and next steps + +Your empty Space Quiz workspace is ready. Continue to [Lesson 2: Build and polish the quiz][next-lesson]. + +[model-order]: ../0-prerequisites/#choose-a-model +[next-lesson]: ../2-build-and-polish/ diff --git a/docs/first-steps/copilot-app/10-remote.md b/docs/first-steps/copilot-app/10-remote.md new file mode 100644 index 00000000..aea857dc --- /dev/null +++ b/docs/first-steps/copilot-app/10-remote.md @@ -0,0 +1,33 @@ +--- +title: "Lesson 10 - Continue a session remotely (optional)" +description: "Use /remote to continue an in-progress app session on GitHub and follow it from any device." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +This lesson is optional, and worth saving until the local loop feels natural. The `/remote` command continues the session you are already in on GitHub, so you can step away from your machine and keep following it. + +In this lesson, you will: + +- continue an in-progress session remotely. +- follow the remote session from your browser. +- review the resulting changes like any other pull request. + +## Continue a session remotely + +1. Open a session that has work in progress. +2. Run `/remote` to continue that session remotely. +3. Select the link it returns to open the remote session in your browser. +4. Follow its progress from there, then review the changes exactly as you would any other pull request. + +> [!NOTE] +> **This is not delegation** +> +> You are not handing the task to a different agent. It is the same session, continuing somewhere you can reach from any device. + +## Summary and next steps + +You continued a session beyond your local machine. Continue to [Lesson 11: Explore a Canvas][next-lesson]. + +[next-lesson]: ../11-canvas/ diff --git a/docs/first-steps/copilot-app/11-canvas.md b/docs/first-steps/copilot-app/11-canvas.md new file mode 100644 index 00000000..55a181dc --- /dev/null +++ b/docs/first-steps/copilot-app/11-canvas.md @@ -0,0 +1,50 @@ +--- +title: "Lesson 11 - Explore a Canvas" +description: "Install a Repository Issues Kanban Canvas and start a session from an issue card." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +A **Canvas** is a shared, bidirectional surface where you and an agent can update the same plan, board, checklist, or dashboard. Explore a Kanban Canvas that turns repository issues into a visual workflow. + +In this lesson, you will: + +- install a Canvas extension. +- connect the Canvas to the Space Quiz repository. +- move an issue into active work. +- inspect the session created from the issue. + +## Install the Repository Issues Kanban Canvas + +1. Browse the [Canvas extensions gallery][canvas-gallery]. +2. Open the [Repository Issues Kanban extension][kanban-extension]. +3. Select **Install in GitHub Copilot app** and approve the installation. +4. In the app, open **Customize**, then **Canvas**. +5. Confirm that the extension is installed. + +## Start work from the Canvas + +1. Select **New session** for the Canvas. +2. Choose the `space-quiz` project. +3. Explore the issue board. +4. Move an issue card into the active-work column. +5. Open the automatically generated session. +6. Confirm that the selected issue is available as session context. + +![Illustration of the Repository Issues Kanban Canvas with Backlog, Plan, Ready, and Implement lanes. Issue 13, Review screen, is being dragged from Backlog into the Plan lane, while issue 12, Per-question timer, remains in Backlog.](../../_images/first-steps-app-canvas-kanban.svg) + +When you drop a card into a lane, the Canvas hands that issue to a new session with the issue already loaded. + +> [!NOTE] +> The current Repository Issues Kanban extension moves cards with pointer-based drag and drop. If you cannot use that interaction, note the issue number on the board, open the issue in **My work**, then select **New session**. This creates the same issue-grounded session without moving the card. + +The Canvas provides a visual way to select and begin work while keeping the agent grounded in the issue. + +## Summary and next steps + +You used a shared visual surface to start an agent session. Continue to [Lesson 12: Review and next steps][next-lesson]. + +[canvas-gallery]: https://awesome-copilot.github.com/extensions/ +[kanban-extension]: https://awesome-copilot.github.com/extension/accessibility-kanban/ +[next-lesson]: ../12-review/ diff --git a/docs/first-steps/copilot-app/12-review.md b/docs/first-steps/copilot-app/12-review.md new file mode 100644 index 00000000..5c82a6cc --- /dev/null +++ b/docs/first-steps/copilot-app/12-review.md @@ -0,0 +1,51 @@ +--- +title: "Lesson 12 - Review and next steps" +description: "Review the GitHub Copilot app workflow and find resources for continued learning." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +You directed an agent through a complete development workflow, from an empty folder to planned work, an isolated implementation, code review, automation, a remote session, and a visual Canvas. + +## What you completed + +You: + +- created a local project in Interactive mode. +- built and refined a quiz with live browser feedback. +- inspected the session details and ran a browser-level smoke test. +- captured project rules with `/init`. +- published the project as a GitHub repository. +- created a focused backlog. +- implemented an issue in an isolated worktree and reviewed the diff. +- planned a second issue before any code changed. +- shipped an issue through pull request review and Agent Merge. +- automated weekly issue triage. +- continued a session remotely. +- explored a shared Kanban Canvas. + +## Keep exploring + +- [Learn about the GitHub Copilot app][about-app]. +- [Review the official getting started guide][getting-started]. +- [Learn how to work with agent sessions][agent-sessions]. +- [Manage issues and pull requests in the app][issues-and-prs]. +- [Learn about Copilot code review][code-review]. +- [Build and use Canvas extensions][canvas-extensions]. +- [Follow best practices for writing prompts that hold up on real code][best-practices]. +- [Compare Copilot plans][copilot-plans]. + +Run the same Space Quiz through a different way of working with the [Copilot CLI first steps workshop][first-steps-cli] or the [Visual Studio Code first steps workshop][first-steps-vscode]. If you are ready for a deeper scenario using a complete application and team backlog, continue with the [real-world GitHub Copilot app workshop][real-world-app]. + +[about-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 +[issues-and-prs]: https://docs.github.com/copilot/how-tos/github-copilot-app/managing-issues-and-pull-requests +[code-review]: https://docs.github.com/copilot/concepts/code-review/code-review +[canvas-extensions]: https://docs.github.com/copilot/how-tos/github-copilot-app/working-with-canvas-extensions +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-cli]: ../../copilot-cli/ +[first-steps-vscode]: ../../vscode/ +[real-world-app]: ../../../real-world-development/app/ diff --git a/docs/first-steps/copilot-app/2-build-and-polish.md b/docs/first-steps/copilot-app/2-build-and-polish.md new file mode 100644 index 00000000..f48258a5 --- /dev/null +++ b/docs/first-steps/copilot-app/2-build-and-polish.md @@ -0,0 +1,62 @@ +--- +title: "Lesson 2 - Build and polish the quiz" +description: "Build a single-file Space Quiz and refine it with the integrated browser and element picker." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Use one detailed prompt to build the Space Quiz, verify its behavior in the integrated browser, and make a visual refinement with the element picker. + +In this lesson, you will: + +- create a dependency-free quiz in `index.html`. +- test the quiz in the integrated browser. +- inspect the generated code. +- refine a selected element while preserving accessibility. + +## Build the quiz + +Send the following prompt in your `space-quiz` session: + +```plaintext +Create a space exploration quiz with 10 questions, a progress bar, score counter, and colorful animated feedback (green for correct, red shake for wrong). Show a results screen with emoji reaction at the end. Center in a narrow column. Single index.html, no server/dependencies. Polished, sans-serif, 14–16px body, prefers-color-scheme. Open in the integrated browser. +``` + +When the agent finishes, play several questions and confirm: + +- the progress bar advances. +- the score updates. +- correct answers show a green state. +- incorrect answers use a red shake animation. +- the results screen appears after the final question. + +## Inspect the generated code + +Collapse the left sidebar and the right-side browser panel, then review `index.html` in the expanded code area. Notice how the HTML, CSS, and JavaScript work together in one file. Restore both panels when you finish. + +## Polish with the element picker + +1. Select the element picker in the browser toolbar. +2. Select the quiz heading or answer area. +3. Send the following prompt: + + ```plaintext + Make the selected element feel more like a mission-control display. Keep it accessible and preserve the existing light and dark themes. + ``` + +4. Watch the integrated browser refresh and verify the change. + +## Optional refinements + +If you want to continue experimenting, ask the agent to: + +- add a subtle star-field background that respects `prefers-reduced-motion`. +- make the results screen more celebratory when the score is 8 or higher. +- improve keyboard focus states, then verify the quiz without a mouse. + +## Summary and next steps + +You built, inspected, and refined the Space Quiz. Continue to [Lesson 3: Inspect the session and test the quiz][next-lesson]. + +[next-lesson]: ../3-inspect-and-test/ diff --git a/docs/first-steps/copilot-app/3-inspect-and-test.md b/docs/first-steps/copilot-app/3-inspect-and-test.md new file mode 100644 index 00000000..d158d5ce --- /dev/null +++ b/docs/first-steps/copilot-app/3-inspect-and-test.md @@ -0,0 +1,52 @@ +--- +title: "Lesson 3 - Inspect the session and test the quiz" +description: "Read the session details to confirm what the agent is working on, then run a browser-level smoke test before Git writes anything." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Now that your session has done real work, there is something to inspect. Confirm what the agent is pointed at, then let it drive the quiz in the integrated browser and report what actually happened rather than what it intended. + +In this lesson, you will: + +- read the session details panel. +- check the session's project, path, branch, changes, and context usage. +- run a browser-level smoke test and fix any failures. + +## Read the session details + +The session details tell you exactly what the agent is working on. You do not need to watch this panel constantly, but everything in it matters when a result surprises you. + +![Illustration of the Copilot app session details panel for the Space Quiz build session. It shows the main branch from origin/main, the path, project, session name, session ID, and agent, one file changed, token counts, context usage at 27 percent, session spend, and options to enable remote control, rename, view insights, share as a secret gist, or archive the session.](../../_images/first-steps-app-session-details.svg) + +The panel shows where the work is happening, what has changed, and how full the context window is. There is no model row, because you choose the model for each request in the composer. + +1. Confirm that the **project**, **path**, and **branch** are the ones you think you are editing. +2. Read **Changes** to see whether this session has touched anything yet. +3. Check **context usage**. As it climbs, the agent has less room for your actual task, and that is your cue to start a fresh session. + +> [!TIP] +> **Most bad results are context problems** +> +> A wrong branch, a wrong folder, or a nearly full context window explains far more surprises than a bad prompt does. + +## Test before Git writes anything + +The integrated browser is a real browser, so the agent can drive the quiz and verify its behavior. Send the following prompt: + +```plaintext +Run a browser-level smoke test for the quiz in the integrated browser. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Watch the integrated browser as the agent runs through the questions. +2. If anything fails, let the agent fix it and rerun the test until everything passes. +3. Move on only when the build and test are green. + +Nothing has been written to Git yet. The next step is `/init`, which reads the project as it stands, so it is worth making sure the project works first. + +## Summary and next steps + +You confirmed what the session is working on and verified the quiz with a browser-level smoke test. Continue to [Lesson 4: Capture project instructions][next-lesson]. + +[next-lesson]: ../4-project-instructions/ diff --git a/docs/first-steps/copilot-app/4-project-instructions.md b/docs/first-steps/copilot-app/4-project-instructions.md new file mode 100644 index 00000000..229bed2e --- /dev/null +++ b/docs/first-steps/copilot-app/4-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lesson 4 - Capture project instructions" +description: "Run /init to generate agent instructions that describe the finished Space Quiz, then tailor them to how you work." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Now that the quiz is built, polished, and tested, capture how future sessions should treat this project. Agent instructions are read by every session before it starts work, so they save you from repeating the same guidance in every prompt. + +In this lesson, you will: + +- generate agent instructions with `/init`. +- review the generated file before accepting it. +- trim and personalize the instructions. + +## Capture the rules with `/init` + +1. Run `/init` in the app session. +2. Review the generated agent instructions file before accepting it. +3. Trim it to guidance that reflects this project: a single file, no dependencies, accessible, and browser-tested. + +> [!IMPORTANT] +> **Why after polishing?** +> +> `/init` reads the project as it exists right now. Running it after the quiz is built and tested produces instructions that describe real code instead of an empty folder. + +## Make it yours + +The instructions file is not only for facts about the project. Add the specifics you would otherwise repeat in every prompt, such as how you like code written, naming conventions, which libraries to avoid, and how much commenting you want. Every future session reads this file before it reads your prompt. + +## Summary and next steps + +Your project now has agent instructions grounded in real code. Continue to [Lesson 5: Publish the project][next-lesson]. + +[next-lesson]: ../5-publish/ diff --git a/docs/first-steps/copilot-app/5-publish.md b/docs/first-steps/copilot-app/5-publish.md new file mode 100644 index 00000000..0292392f --- /dev/null +++ b/docs/first-steps/copilot-app/5-publish.md @@ -0,0 +1,38 @@ +--- +title: "Lesson 5 - Publish the project" +description: "Turn the local Space Quiz experiment into a public GitHub repository." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Publish the Space Quiz so you can manage issues, use isolated worktrees, and complete a pull request workflow. + +In this lesson, you will: + +- initialize the folder as a Git repository. +- create and push a public GitHub repository. +- link the project to GitHub in the Copilot app. + +## Publish the repository + +Send the following prompt: + +```plaintext +Initialize this folder as a Git repository, create an initial commit, and create a new public GitHub repository named space-quiz in my account. Push the current branch and set it as the default branch. Refresh the project within this app so the GitHub project is linked. +``` + +> [!WARNING] +> The agent will ask for confirmation before it creates a repository or pushes code. Review the proposed action and destination before you approve it. + +After the agent finishes: + +1. Open the new repository on GitHub. +2. Confirm that `index.html` is present. +3. Return to the Copilot app and confirm that the project is linked to the repository. + +## Summary and next steps + +Your project is now a GitHub repository. Continue to [Lesson 6: Work with issues and sessions][next-lesson]. + +[next-lesson]: ../6-issues-and-sessions/ diff --git a/docs/first-steps/copilot-app/6-issues-and-sessions.md b/docs/first-steps/copilot-app/6-issues-and-sessions.md new file mode 100644 index 00000000..268c9ff3 --- /dev/null +++ b/docs/first-steps/copilot-app/6-issues-and-sessions.md @@ -0,0 +1,62 @@ +--- +title: "Lesson 6 - Work with issues and sessions" +description: "Create a focused backlog, select an issue, implement it in an isolated worktree, and review the diff yourself." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Ask the agent to suggest focused product improvements, turn those ideas into GitHub issues, and implement one issue in an isolated session. + +In this lesson, you will: + +- create three focused issues for the Space Quiz. +- browse the issues in **My work**. +- start a session from an issue in a new worktree. +- review the diff in the **Changes** tab and verify the feature. + +## Build a backlog in My work + +Send the following prompt: + +```plaintext +Review the space quiz and suggest three focused feature ideas that could each be completed in a short session. Create a separate GitHub issue for each idea with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +Open **My work**, review the three issues, and choose one that has clear value and a manageable scope. + +![Illustration of the Copilot app My work view. The sidebar lists New, My work, Automations, Customize, and the space-quiz project. The main area has All, Active, Review requests, and Done filters above a list of pull requests.](../../_images/first-steps-app-my-work.svg) + +**My work** pulls your GitHub issues and pull requests into the app, filtered by **All**, **Active**, **Review requests**, and **Done**. + +## Implement an issue + +1. Open the selected issue in **My work**. +2. Select **New session**. +3. Choose a **new worktree** when prompted. +4. Use **Interactive** mode and your preferred model. +5. Send the following prompt: + + ```plaintext + Implement this issue completely. Keep the single-file, dependency-free design, test the behavior in the integrated browser, and summarize the changes when finished. + ``` + +The new worktree keeps this feature isolated from your default branch until you are ready to review and merge it. + +## Review the diff yourself + +When the agent reports back, do not take its word for it. + +1. Open the right-side flyout and select the **Changes** tab. +2. Read the diff for every file the session touched. +3. Test the feature in the integrated browser and confirm that it meets the issue's acceptance criteria. + +![Illustration of the Copilot app session with the Changes tab open in the right-side flyout. It shows one file changed, index.html, with 142 lines added and 8 removed, and inline diff lines beside the session conversation.](../../_images/first-steps-app-changes-tab.svg) + +The **Changes** tab lists every file the session touched, with the diff inline. + +## Summary and next steps + +You created a backlog, implemented one issue in an isolated session, and reviewed the diff. Continue to [Lesson 7: Plan before you edit][next-lesson]. + +[next-lesson]: ../7-plan-mode/ diff --git a/docs/first-steps/copilot-app/7-plan-mode.md b/docs/first-steps/copilot-app/7-plan-mode.md new file mode 100644 index 00000000..1a9fd983 --- /dev/null +++ b/docs/first-steps/copilot-app/7-plan-mode.md @@ -0,0 +1,40 @@ +--- +title: "Lesson 7 - Plan before you edit" +description: "Use Plan mode on a second issue so the agent researches the project and proposes an approach before it changes any files." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Not every issue should start with edits. Plan mode researches the project, proposes an approach, and waits for your approval before any code changes. + +In this lesson, you will: + +- start a session for a second issue in Plan mode. +- review and refine the agent's proposed plan. +- approve the plan and choose how the session continues. + +## Agree on the approach before any code changes + +1. Open a **second issue** from **My work** and select **New session**. +2. In the session configuration, choose **Plan** instead of **Interactive** or **Autopilot**. +3. Send the following prompt and let the agent investigate without changing files: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Read the proposed plan and request changes if something is missing. +5. Approve the plan. +6. When prompted, choose whether the session continues in **Interactive** or **Autopilot** mode. + +> [!TIP] +> **When Plan mode pays off** +> +> Use Plan mode for anything ambiguous, cross-cutting, or expensive to undo. The cheapest place to fix a bad approach is before the first edit. + +## Summary and next steps + +You agreed on an approach with the agent before it wrote any code. Continue to [Lesson 8: Complete the Copilot review loop][next-lesson]. + +[next-lesson]: ../8-review-loop/ diff --git a/docs/first-steps/copilot-app/8-review-loop.md b/docs/first-steps/copilot-app/8-review-loop.md new file mode 100644 index 00000000..40e24def --- /dev/null +++ b/docs/first-steps/copilot-app/8-review-loop.md @@ -0,0 +1,44 @@ +--- +title: "Lesson 8 - Complete the Copilot review loop" +description: "Create a pull request, request a Copilot review, address actionable feedback, and let Agent Merge keep the pull request healthy." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Turn the implemented issue into a pull request, request a review from Copilot, and address the feedback before merging. + +In this lesson, you will: + +- inspect the session's changes one last time. +- create a pull request from the agent session. +- request a Copilot code review. +- review and apply actionable feedback. +- turn on Agent Merge to keep the pull request healthy until it merges. + +## Create and review the pull request + +1. Open the right-side flyout and select the **Changes** tab to inspect the files changed in the session. +2. Select **Create PR** in the session toolbar. +3. Review the generated title and description, then create the pull request. +4. Open the pull request on GitHub. +5. From the **Reviewers** menu, request a review from **Copilot**. +6. Open the **Files changed** tab and read every review comment. +7. For each actionable comment, use the Copilot **Fix** action in the app or make the change yourself. +8. Review each change and retest the feature. +9. Reply with a concise description of what changed, then resolve the conversation. + +> [!NOTE] +> If a suggestion is not applicable or is outside the scope of the pull request, reply with the reason instead of making an unnecessary change. Resolve every review conversation before merging. + +## Merge with Agent Merge + +Turn on **Agent Merge** for the pull request to let the agent keep it healthy. The agent addresses review comments, fixes failing checks, and resolves conflicts as they appear, then merges once everything is green. + +If you prefer to merge yourself, review the final diff, verify the feature, and merge the pull request after every check passes. + +## Summary and next steps + +You completed the development loop from issue to reviewed and merged pull request. Continue to [Lesson 9: Automate issue triage][next-lesson]. + +[next-lesson]: ../9-automations/ diff --git a/docs/first-steps/copilot-app/9-automations.md b/docs/first-steps/copilot-app/9-automations.md new file mode 100644 index 00000000..bf297a59 --- /dev/null +++ b/docs/first-steps/copilot-app/9-automations.md @@ -0,0 +1,42 @@ +--- +title: "Lesson 9 - Automate issue triage" +description: "Create and run a weekly automation that summarizes recent open issues." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Use an automation to turn a recurring issue-triage task into a scheduled agent workflow. + +In this lesson, you will: + +- create a weekly automation. +- connect the automation to the Space Quiz project. +- run the automation immediately and review its result. + +## Create the automation + +![Illustration of the Copilot app Automations view with All, Local, and Cloud filters, a search box, Templates and New automation buttons, and two weekly automation cards for the space-quiz project: Issue triage and Accessibility audit.](../../_images/first-steps-app-automations.svg) + +Automations run the same prompt on a schedule, each in its own session, so an automation never disturbs your work. You can filter by **All**, **Local**, or **Cloud**, and run any automation on demand. + +1. Open **Automations**. +2. Choose the template for a new weekly automation. +3. Enter the following prompt: + + ```plaintext + Review the latest GitHub issues created and still open in the last week, and provide a summary table ranked by severity and priority. + ``` + +4. Set the session mode to **Autopilot**. +5. Set the model to **Auto**. +6. Select the `space-quiz` project. +7. Open the **Create** dropdown, then select **Create and run**. + +Review the generated summary and confirm that it references the recent open issues in your repository. + +## Summary and next steps + +You created a reusable agent workflow that runs on a schedule. Continue to [Lesson 10: Continue a session remotely][next-lesson]. + +[next-lesson]: ../10-remote/ diff --git a/docs/first-steps/copilot-app/README.md b/docs/first-steps/copilot-app/README.md new file mode 100644 index 00000000..e8d83e36 --- /dev/null +++ b/docs/first-steps/copilot-app/README.md @@ -0,0 +1,54 @@ +--- +title: "GitHub Copilot app tour" +description: "Take a guided tour of the GitHub Copilot app by building and shipping a Space Quiz." +slug: first-steps/copilot-app +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Take a beginner-friendly, hands-on tour of the GitHub Copilot app. You will build a colorful Space Quiz from an empty folder and take it through the complete development loop, from your first prompt to a reviewed pull request. + +The workshop takes approximately 60 to 90 minutes. Your project uses a single HTML file with no runtime dependencies, so you can focus on learning the app and its agentic workflows. + +> [!NOTE] +> This workshop was created by [James Montemagno][james] and adapted from [First Steps with GitHub Copilot][source-lab]. The original content is available under the [MIT License][source-license]. + +## Lessons + +| Lesson | Topic | What you will do | +| ------ | ----- | ---------------- | +| [0. Prerequisites and setup][lesson-0] | Setup | Verify prerequisites, install the app, choose a model, and explore the workspace | +| [1. Create the workspace][lesson-1] | Create | Start an Interactive session in an empty local folder | +| [2. Build and polish][lesson-2] | Build | Create the quiz and refine it in the integrated browser | +| [3. Inspect and test][lesson-3] | Context and test | Read the session details and run a browser-level smoke test | +| [4. Capture project instructions][lesson-4] | Instructions | Generate and tailor agent instructions with `/init` | +| [5. Publish the project][lesson-5] | Publish | Create a public GitHub repository from the local project | +| [6. Work with issues and sessions][lesson-6] | Implement | Create a backlog, implement one issue in an isolated worktree, and review the diff | +| [7. Plan before you edit][lesson-7] | Plan | Use Plan mode to agree on an approach for a second issue | +| [8. Complete the review loop][lesson-8] | Review | Open a pull request, address Copilot review feedback, and use Agent Merge | +| [9. Automate issue triage][lesson-9] | Automate | Schedule and run a weekly issue-triage automation | +| [10. Continue a session remotely][lesson-10] | Remote (optional) | Continue an in-progress session on GitHub with `/remote` | +| [11. Explore a Canvas][lesson-11] | Canvas | Start work from a Repository Issues Kanban Canvas | +| [12. Review and next steps][lesson-12] | Review | Recap the workflow and continue learning | + +## Get started + +[Start with Lesson 0: Prerequisites and setup][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: 0-prerequisites/ +[lesson-1]: 1-create-workspace/ +[lesson-2]: 2-build-and-polish/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-project-instructions/ +[lesson-5]: 5-publish/ +[lesson-6]: 6-issues-and-sessions/ +[lesson-7]: 7-plan-mode/ +[lesson-8]: 8-review-loop/ +[lesson-9]: 9-automations/ +[lesson-10]: 10-remote/ +[lesson-11]: 11-canvas/ +[lesson-12]: 12-review/ diff --git a/docs/first-steps/copilot-cli/0-prerequisites.md b/docs/first-steps/copilot-cli/0-prerequisites.md new file mode 100644 index 00000000..59073929 --- /dev/null +++ b/docs/first-steps/copilot-cli/0-prerequisites.md @@ -0,0 +1,70 @@ +--- +title: "Lesson 0 - Prerequisites and setup" +description: "Verify the workshop prerequisites, install GitHub Copilot CLI, sign in, and choose a model from an empty project folder." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Put an agent in your terminal. Confirm that you have what you need, install GitHub Copilot CLI, sign in, and get ready to make your first request from an empty folder. + +In this lesson, you will: + +- verify the workshop prerequisites. +- install GitHub Copilot CLI and sign in. +- create and trust the project folder. +- choose a model for your session. + +## Prerequisites + +You need: + +- a GitHub account with a [Copilot plan][copilot-plans]. +- [Git][git] installed. Run `git --version` to verify it. +- a computer running macOS, Windows, or Linux. + +The [GitHub CLI][gh-cli] (`gh`) is optional but recommended, because it lets the agent create repositories and pull requests for you. + +> [!NOTE] +> If you use Copilot Business or Copilot Enterprise, your administrator must enable the **Copilot CLI** policy before agent sessions will work. + +## Set up the CLI + +1. Install [GitHub Copilot CLI][install-cli] for your platform. +2. Create and enter the project folder: + + ```bash + mkdir space-quiz && cd space-quiz + ``` + +3. Run `copilot`, sign in, and trust the folder when prompted. +4. Run `/model` and choose a model using the preference order in the next section. +5. Optionally, install the [GitHub CLI][gh-cli] if you have not already. + +![Illustration of Copilot CLI in a terminal window titled space-quiz. It asks whether to trust the files in this folder, with Yes, proceed selected, and suggests the /model command to choose the model for this session and /help to list every slash command. The prompt line reads Create a space exploration quiz.](../../_images/first-steps-cli-welcome.svg) + +The CLI opens with a trust prompt and a few starting commands, including `/model`. + +> [!TIP] +> Type `/` at any time to browse every available command, or run `/help` for the full reference. + +## Choose a model + +Use the following preference order when you run `/model`, and select the first option available to you: + +1. **GPT-6-Luna** (recommended). +2. **Auto**, as a balanced backup. +3. Any model from the [list of active models][active-models]. + +Model availability depends on your plan, organization policy, and product version. + +## Summary and next steps + +Copilot CLI is installed, signed in, and running in an empty `space-quiz` folder. Continue to [Lesson 1: Build the quiz from the terminal][next-lesson]. + +[copilot-plans]: https://github.com/features/copilot/plans +[git]: https://git-scm.com/downloads +[gh-cli]: https://cli.github.com/ +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: ../1-build/ diff --git a/docs/first-steps/copilot-cli/1-build.md b/docs/first-steps/copilot-cli/1-build.md new file mode 100644 index 00000000..649895f0 --- /dev/null +++ b/docs/first-steps/copilot-cli/1-build.md @@ -0,0 +1,43 @@ +--- +title: "Lesson 1 - Build the quiz from the terminal" +description: "Ask Copilot CLI for the whole Space Quiz in one detailed request, then make one focused refinement." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Ask for the whole project in one detailed request, review what the agent proposes before you approve it, then make one small, scoped change. + +In this lesson, you will: + +- build a dependency-free quiz in `index.html`. +- open the quiz in a browser from the session. +- make one focused change and verify it. + +## Build the quiz + +Send the following prompt in your Copilot CLI session: + +```plaintext +Create a space exploration quiz with 10 questions, a progress bar, score counter, and colorful animated feedback (green for correct, red shake for wrong). Show a results screen with an emoji reaction at the end. Single index.html, no server or dependencies. Accessible, keyboard-navigable, and respects prefers-color-scheme. +``` + +1. Read the proposed plan and approve the file changes. +2. Open `index.html` in a browser and play a few questions. To launch it from the session, run `!open index.html` on macOS, `!start index.html` on Windows, or `!xdg-open index.html` on Linux. + +## Make a small change, then check it + +Ask for one focused refinement so you can see how a scoped request behaves: + +```plaintext +The results screen feels flat. Give it a stronger sense of arrival: animate the score counting up and make the emoji reaction larger. Change nothing else. +``` + +1. Reload the page in your browser and play through to the end. +2. Notice that nothing is in Git yet, so there is nothing to diff against. That changes after you publish the project. + +## Summary and next steps + +You built the quiz and refined it with a scoped request. Continue to [Lesson 2: Capture project instructions][next-lesson]. + +[next-lesson]: ../2-project-instructions/ diff --git a/docs/first-steps/copilot-cli/10-review.md b/docs/first-steps/copilot-cli/10-review.md new file mode 100644 index 00000000..c50cb185 --- /dev/null +++ b/docs/first-steps/copilot-cli/10-review.md @@ -0,0 +1,46 @@ +--- +title: "Lesson 10 - Review and next steps" +description: "Review the Copilot CLI workflow and find resources for continued learning." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +You completed the terminal-first loop: you built the quiz, reviewed diffs, published, ran sessions in parallel, planned before editing, resumed sessions, merged a pull request, and delegated new work without leaving the terminal. + +## What you completed + +You: + +- installed Copilot CLI and chose a model with `/model`. +- built and refined a quiz from a single prompt. +- captured project rules with `/init`. +- published the project by prompt or by hand. +- added an issue to the chat from the side panel and reviewed the change with `/diff`. +- ran a second session in its own worktree with `/worktree`. +- planned the second issue with `/plan` before any code changed. +- inspected and managed context with `/context` and `/clear`. +- resumed sessions with `copilot --resume` and `/resume`. +- created and merged a pull request with `/pr create` and `/pr agentmerge`. +- delegated a new feature with `/delegate`. + +## Keep exploring + +- [Install Copilot CLI on macOS, Windows, and Linux][install-cli]. +- [Learn about Copilot CLI and its slash commands and flags][about-cli]. +- [Use the GitHub CLI for repositories and pull requests][gh-cli]. +- [Install Git][git]. +- [Follow best practices for writing prompts that hold up on real code][best-practices]. +- [Compare Copilot plans][copilot-plans]. + +Run the same Space Quiz through a different way of working with the [GitHub Copilot app first steps workshop][first-steps-app] or the [Visual Studio Code first steps workshop][first-steps-vscode]. If you are ready for a deeper scenario using a complete application and team backlog, continue with the [real-world Copilot CLI workshop][real-world-cli]. + +[install-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[about-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[gh-cli]: https://cli.github.com/ +[git]: https://git-scm.com/downloads +[best-practices]: https://docs.github.com/copilot/get-started/best-practices +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: ../../copilot-app/ +[first-steps-vscode]: ../../vscode/ +[real-world-cli]: ../../../real-world-development/cli/ diff --git a/docs/first-steps/copilot-cli/2-project-instructions.md b/docs/first-steps/copilot-cli/2-project-instructions.md new file mode 100644 index 00000000..79e05f1f --- /dev/null +++ b/docs/first-steps/copilot-cli/2-project-instructions.md @@ -0,0 +1,36 @@ +--- +title: "Lesson 2 - Capture project instructions" +description: "Run /init to generate agent instructions that describe the finished Space Quiz, then tailor them to how you work." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +With a working quiz on disk, generate agent instructions that describe the real project. Every future session reads these instructions before it starts work, so they save you from repeating the same guidance in every prompt. + +In this lesson, you will: + +- generate agent instructions with `/init`. +- review the generated file before accepting it. +- trim and personalize the instructions. + +## Capture the rules with `/init` + +1. Run `/init` in the session. +2. Review the generated instructions file before accepting it. +3. Keep only guidance that matches this project: a single file, no dependencies, accessible, and browser-tested. + +> [!IMPORTANT] +> **Order matters** +> +> `/init` reads the project as it exists right now. Running it after the quiz is built and polished produces instructions grounded in real code. + +## Make it yours + +The instructions file is not only for facts about the project. Add the specifics you would otherwise repeat in every prompt, such as how you like code written, naming conventions, which libraries to avoid, and how much commenting you want. Every future session reads this file before it reads your prompt. + +## Summary and next steps + +Your project now has agent instructions grounded in real code. Continue to [Lesson 3: Publish the project][next-lesson]. + +[next-lesson]: ../3-publish/ diff --git a/docs/first-steps/copilot-cli/3-publish.md b/docs/first-steps/copilot-cli/3-publish.md new file mode 100644 index 00000000..bc731481 --- /dev/null +++ b/docs/first-steps/copilot-cli/3-publish.md @@ -0,0 +1,50 @@ +--- +title: "Lesson 3 - Publish the project" +description: "Initialize, commit, and publish the Space Quiz to GitHub, either by prompt or by running the commands yourself." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Turn the experiment into a public GitHub repository. You can ask for this in one prompt, or run the commands yourself. Try both ways once, and you will know exactly what the agent does on your behalf. + +In this lesson, you will: + +- initialize a Git repository and create the first commit. +- create and push a public GitHub repository. +- confirm that the commit and file landed. + +## Option A: Ask for it + +Send the following prompt: + +```plaintext +Initialize this folder as a Git repository, create an initial commit, and create a new public GitHub repository named space-quiz in my account. Push the current branch and set it as the default branch. +``` + +Approve each Git and GitHub action as the agent requests it. + +## Option B: Run it yourself + +Prefix each command with `!` to run it from inside the session, or run the commands without the prefix in your own terminal: + +```plaintext +!git init -b main +!git add . +!git commit -m "Add space quiz" +!gh repo create space-quiz --public --source=. --push +``` + +The last command uses the [GitHub CLI][gh-cli]. If you do not have it, create the repository on GitHub, then run `!git remote add origin ` and `!git push -u origin main`. + +## Confirm the result + +1. Run `!git log --oneline` to confirm that the commit landed. +2. Open the repository on GitHub and confirm that `index.html` is present. + +## Summary and next steps + +Your project is now a GitHub repository with a known-good version to compare against. Continue to [Lesson 4: Work on issues in parallel][next-lesson]. + +[gh-cli]: https://cli.github.com/ +[next-lesson]: ../4-issues-and-sessions/ diff --git a/docs/first-steps/copilot-cli/4-issues-and-sessions.md b/docs/first-steps/copilot-cli/4-issues-and-sessions.md new file mode 100644 index 00000000..632280b3 --- /dev/null +++ b/docs/first-steps/copilot-cli/4-issues-and-sessions.md @@ -0,0 +1,60 @@ +--- +title: "Lesson 4 - Work on issues in parallel" +description: "Create a backlog, add an issue to the chat from the side panel, review changes with /diff, and start a second session in its own worktree." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Keep the backlog and the implementation loop in the terminal, and open separate sessions for independent work. + +In this lesson, you will: + +- create three focused GitHub issues. +- add an issue to the chat from the side panel and implement it. +- review the change with `/diff`. +- start a second session in an isolated worktree. + +## Create a backlog + +Send the following prompt: + +```plaintext +Review the space quiz and create three focused GitHub issues with clear titles, user-focused descriptions, and acceptance criteria. Do not implement them yet. +``` + +## Work the first issue in this session + +1. Press the Left arrow key to open the side panel, then press Tab to move across to the **Issues** tab. +2. Highlight the first issue and press c to add it to the chat as context. To read the full issue first, press Enter instead. +3. Ask the agent to implement the issue. + +![Illustration of the Copilot CLI side panel in a terminal. The Issues tab is selected among the Current, Sessions, Issues, Pull requests, and Gists tabs. A search filter for open issues in the space-quiz repository shows one issue, Add a score screen at the end of the quiz. Hints explain that the Left arrow key opens the panel and Tab moves between tabs, and the bottom row lists keys: slash to search, Enter for details, o to open, w for worktree, c for chat, and a for all.](../../_images/first-steps-cli-side-panel.svg) + +The side panel lists every tab across the top, and the hints along the bottom are the keys that act on whatever is highlighted. + +## Review the change with `/diff` + +The project is published, so there is a known-good version to compare against. `/diff` shows precisely what this issue changed on top of it, which is exactly what you are about to ask someone to review. + +1. Run `/diff` and read every changed file. +2. Ask for a fix for anything that looks wrong, then run `/diff` again. +3. Run `!git status` or `!git diff` whenever you want to inspect Git directly. + +## Work the second issue in parallel + +1. Open the side panel again and switch to the **Sessions** tab. +2. Start another session for the second issue without losing the first one. +3. In the new session, run `/worktree` so it gets an isolated worktree instead of branching in place. Both sessions can now run at once without interfering with each other. +4. Add the second issue to that session with c. +5. Leave the session there for now. The next lesson plans this issue before any code is written. + +![Illustration of Copilot CLI output after running /worktree. It reports that it created the worktree ../space-quiz-13 on the branch issue-13-review-screen, and that this session now works there while main is untouched.](../../_images/first-steps-cli-worktree.svg) + +`/worktree` moves the session into its own checkout on its own branch, so the first session keeps working undisturbed. + +## Summary and next steps + +You implemented the first issue, reviewed it with `/diff`, and started a second session in its own worktree. Continue to [Lesson 5: Plan before you edit][next-lesson]. + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/first-steps/copilot-cli/5-plan-mode.md b/docs/first-steps/copilot-cli/5-plan-mode.md new file mode 100644 index 00000000..f093b3a6 --- /dev/null +++ b/docs/first-steps/copilot-cli/5-plan-mode.md @@ -0,0 +1,39 @@ +--- +title: "Lesson 5 - Plan before you edit" +description: "Switch the second session into plan mode with /plan so the agent proposes an approach before it edits any files." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +You already have a second session running in its own worktree. Do not start with code there. Plan mode researches the project and proposes an approach while leaving your files untouched. + +In this lesson, you will: + +- switch the second session into plan mode. +- review and refine the agent's proposed plan. +- approve the plan and let the session implement it. + +## Agree on the approach before any edits + +1. Switch to the **second session** you opened in the previous lesson. +2. Run `/plan` to switch that session into plan mode. +3. Send the following prompt and let the agent investigate without editing anything: + + ```plaintext + Plan how to implement this issue. Investigate the existing quiz, list the files you would change, call out risks to accessibility and the single-file constraint, and stop before making any edits. + ``` + +4. Read the plan, push back on anything missing, then approve it. +5. The session continues into implementation with the approved plan as its brief. + +> [!TIP] +> **When plan mode pays off** +> +> Use plan mode for anything ambiguous, cross-cutting, or expensive to undo. The cheapest place to fix a bad approach is before the first edit. + +## Summary and next steps + +You agreed on an approach with the agent before it wrote any code. Continue to [Lesson 6: Know what the agent can see][next-lesson]. + +[next-lesson]: ../6-context/ diff --git a/docs/first-steps/copilot-cli/6-context.md b/docs/first-steps/copilot-cli/6-context.md new file mode 100644 index 00000000..e028b401 --- /dev/null +++ b/docs/first-steps/copilot-cli/6-context.md @@ -0,0 +1,32 @@ +--- +title: "Lesson 6 - Know what the agent can see" +description: "Use /context to inspect what fills the context window, and /clear to start fresh when a conversation drifts." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Terminal commands make context visible and intentional. Knowing what the agent can see helps you understand its results and decide when to start fresh. + +In this lesson, you will: + +- inspect the context window with `/context`. +- see how much of the window each part consumes. +- reset a drifting conversation with `/clear`. + +## Inspect the context + +1. Run `/context` to inspect files, instructions, and conversation history. +2. Check how much of the window each part is consuming. +3. Run `/clear` to start fresh when the conversation has drifted. +4. Add the right file back before you ask for another change. + +![Illustration of Copilot CLI output after running /context. A context window meter shows 61 percent used, split between conversation, files read, and instructions. A note suggests using /compact to summarize, or starting a fresh session, when running low.](../../_images/first-steps-cli-context.svg) + +`/context` shows exactly what is filling the context window and how much room is left. When you are running low, use `/compact` to summarize the conversation, or start a fresh session. + +## Summary and next steps + +You can now see and manage what the agent knows. Continue to [Lesson 7: Resume and go remote][next-lesson]. + +[next-lesson]: ../7-resume-and-remote/ diff --git a/docs/first-steps/copilot-cli/7-resume-and-remote.md b/docs/first-steps/copilot-cli/7-resume-and-remote.md new file mode 100644 index 00000000..4a1daa6f --- /dev/null +++ b/docs/first-steps/copilot-cli/7-resume-and-remote.md @@ -0,0 +1,35 @@ +--- +title: "Lesson 7 - Resume and go remote" +description: "Leave a Copilot CLI session and come back to it later with copilot --resume or /resume, and optionally continue it on GitHub with /remote." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Sessions can be paused without losing their conversation or workspace context. Leave a session, return to it later, and optionally continue it somewhere you can reach from any device. + +In this lesson, you will: + +- exit a session and resume it from the terminal. +- switch between sessions without leaving the CLI. +- optionally continue a session remotely. + +## Leave a session and come back later + +1. Exit the current Copilot CLI session when you are ready to switch tasks. +2. From a terminal, run `copilot --resume` to pick a previous session. +3. Inside Copilot CLI, use `/resume` to switch between sessions without leaving the CLI. +4. Confirm that the restored session still has the expected files, issue context, and model. + +## Optional: Continue a session remotely + +Suppose you are deep in one of these sessions and want to keep it going after you close your laptop. Run `/remote` to continue *that same session* on GitHub, then select the link it returns to open and browse the session in your browser. + +> [!NOTE] +> `/remote` is not delegation, and it is not required for this workshop. Try it once the local loop feels natural. + +## Summary and next steps + +You can pause, resume, and continue sessions wherever you work. Continue to [Lesson 8: Create, review, and merge from the CLI][next-lesson]. + +[next-lesson]: ../8-pull-request/ diff --git a/docs/first-steps/copilot-cli/8-pull-request.md b/docs/first-steps/copilot-cli/8-pull-request.md new file mode 100644 index 00000000..bab294a4 --- /dev/null +++ b/docs/first-steps/copilot-cli/8-pull-request.md @@ -0,0 +1,30 @@ +--- +title: "Lesson 8 - Create, review, and merge from the CLI" +description: "Inspect the final diff, create a pull request with /pr create, address feedback, and merge with /pr agentmerge." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Finish the development loop without switching to a desktop UI. + +In this lesson, you will: + +- inspect the changed files one last time. +- create a pull request from the current branch. +- review the pull request and address feedback. +- validate and merge the pull request with `/pr agentmerge`. + +## Create, review, and merge + +1. Run `/diff` to inspect the changed files one last time. +2. Ask Copilot to create a pull request from the current branch, or run `/pr create`. +3. Open the side panel's **Pull requests** tab to check the title, description, files, and status checks. +4. Fix actionable feedback, check the result in the browser, and reply with what changed. +5. When the pull request is ready, run `/pr agentmerge` to validate it and merge it after the required confirmations and checks pass. + +## Summary and next steps + +You created, reviewed, and merged a pull request without leaving the terminal. Continue to [Lesson 9: Delegate work once you trust the loop][next-lesson]. + +[next-lesson]: ../9-delegate/ diff --git a/docs/first-steps/copilot-cli/9-delegate.md b/docs/first-steps/copilot-cli/9-delegate.md new file mode 100644 index 00000000..90f41528 --- /dev/null +++ b/docs/first-steps/copilot-cli/9-delegate.md @@ -0,0 +1,33 @@ +--- +title: "Lesson 9 - Delegate work once you trust the loop" +description: "Hand a new Space Quiz feature to /delegate, keep working while it runs, and follow a cloud session from the CLI." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +You have shipped a feature. Now that you know what good output looks like, a whole new idea is worth running beside you rather than in front of you. In this lesson, you delegate a **shareable mission report** that turns a finished run into a card the player can post. + +In this lesson, you will: + +- delegate a new feature with `/delegate`. +- keep working in your primary session while the delegated work runs. +- compare the delegated result before accepting it. + +## Delegate a new feature + +Run `/delegate` and hand over the following task: + +```plaintext +Delegate this: add a shareable mission report to the space quiz. At the end of a run, generate a compact summary card with the score, a rank title based on the percentage, and the slowest question. Add a Copy result button that puts a short plain-text version on the clipboard. Keep it in the single index.html with no dependencies, keep it keyboard accessible, and report back with what changed. +``` + +1. Keep working in the primary session while the delegated task runs. +2. Compare the delegated result against your session before you accept it. +3. For a larger, well-specified issue, start a **cloud session** and follow its progress from the CLI. + +## Summary and next steps + +You delegated a complete feature and reviewed the result. Continue to [Lesson 10: Review and next steps][next-lesson]. + +[next-lesson]: ../10-review/ diff --git a/docs/first-steps/copilot-cli/README.md b/docs/first-steps/copilot-cli/README.md new file mode 100644 index 00000000..70bba804 --- /dev/null +++ b/docs/first-steps/copilot-cli/README.md @@ -0,0 +1,50 @@ +--- +title: "GitHub Copilot CLI first steps" +description: "Take a guided, terminal-first tour of GitHub Copilot CLI by building and shipping a Space Quiz." +slug: first-steps/copilot-cli +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Take a beginner-friendly, hands-on tour of GitHub Copilot CLI. You will build a colorful Space Quiz from an empty folder and learn the terminal-first loop: build and review diffs before Git writes anything, run sessions side by side, plan before you edit, then create and merge the pull request without leaving your shell. + +The workshop takes approximately 60 to 90 minutes. Your project uses a single HTML file with no runtime dependencies, so you can focus on learning the CLI and its agentic workflows. + +> [!NOTE] +> This workshop was created by [James Montemagno][james] and adapted from [First Steps with GitHub Copilot][source-lab]. The original content is available under the [MIT License][source-license]. + +## Lessons + +| Lesson | Topic | What you will do | +| ------ | ----- | ---------------- | +| [0. Prerequisites and setup][lesson-0] | Setup | Verify prerequisites, install Copilot CLI, sign in, and choose a model | +| [1. Build the quiz][lesson-1] | Build | Build the quiz from the terminal and make one focused change | +| [2. Capture project instructions][lesson-2] | Instructions | Generate and tailor agent instructions with `/init` | +| [3. Publish the project][lesson-3] | Publish | Initialize, commit, and publish by prompt or by hand | +| [4. Work on issues in parallel][lesson-4] | Implement | Create a backlog, add an issue to chat, review with `/diff`, and start a second session in a worktree | +| [5. Plan before you edit][lesson-5] | Plan | Use `/plan` to agree on an approach for the second issue | +| [6. Know what the agent can see][lesson-6] | Context | Inspect and reset context with `/context` and `/clear` | +| [7. Resume and go remote][lesson-7] | Resume | Leave and return to sessions with `/resume`, and optionally continue with `/remote` | +| [8. Create, review, and merge][lesson-8] | Review | Create and merge a pull request with `/pr create` and `/pr agentmerge` | +| [9. Delegate work][lesson-9] | Delegate | Hand a new feature to `/delegate` and follow a cloud session | +| [10. Review and next steps][lesson-10] | Review | Recap the workflow and continue learning | + +## Get started + +[Start with Lesson 0: Prerequisites and setup][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: 0-prerequisites/ +[lesson-1]: 1-build/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-publish/ +[lesson-4]: 4-issues-and-sessions/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-context/ +[lesson-7]: 7-resume-and-remote/ +[lesson-8]: 8-pull-request/ +[lesson-9]: 9-delegate/ +[lesson-10]: 10-review/ diff --git a/docs/first-steps/vscode/0-prerequisites.md b/docs/first-steps/vscode/0-prerequisites.md new file mode 100644 index 00000000..1cb97420 --- /dev/null +++ b/docs/first-steps/vscode/0-prerequisites.md @@ -0,0 +1,52 @@ +--- +title: "Lesson 0 - Prerequisites and setup" +description: "Verify the workshop prerequisites, confirm Copilot Chat in VS Code, add the GitHub Pull Requests and Issues extension, and choose a model." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Bring Copilot into the editor. Copilot ships with VS Code, so there is nothing to install for chat. Add the GitHub extension, then open an empty folder. + +In this lesson, you will: + +- verify the workshop prerequisites. +- confirm that Copilot Chat responds in VS Code. +- install the GitHub Pull Requests and Issues extension. +- open an empty project folder and choose a model. + +## Prerequisites + +You need: + +- a GitHub account with a [Copilot plan][copilot-plans]. +- [Visual Studio Code][vscode]. +- [Git][git] installed. Run `git --version` in a terminal to verify it. + +## Set up VS Code + +1. Install [VS Code][vscode] and sign in to GitHub. Copilot and Copilot Chat are built in, so open the **Chat** view from the title bar and confirm that it responds. +2. Open the **Extensions** view and install the official [GitHub Pull Requests and Issues][pr-extension] extension so issues and pull requests appear in the sidebar. +3. Create an empty folder named `space-quiz`, then select **File** > **Open Folder** and open it. +4. Choose a model with the model picker in the **Chat** view, using the preference order in the next section. + +## Choose a model + +Select the first option available to you: + +1. **GPT-6-Luna** (recommended). +2. **Auto**, as a balanced backup. +3. Any model from the [list of active models][active-models]. + +Model availability depends on your plan, organization policy, and product version. + +## Summary and next steps + +VS Code is ready with Copilot Chat, the GitHub extension, and an empty `space-quiz` folder. Continue to [Lesson 1: Build in the workspace][next-lesson]. + +[copilot-plans]: https://github.com/features/copilot/plans +[vscode]: https://code.visualstudio.com/ +[git]: https://git-scm.com/downloads +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[active-models]: https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing +[next-lesson]: ../1-build-and-polish/ diff --git a/docs/first-steps/vscode/1-build-and-polish.md b/docs/first-steps/vscode/1-build-and-polish.md new file mode 100644 index 00000000..79bbe8b7 --- /dev/null +++ b/docs/first-steps/vscode/1-build-and-polish.md @@ -0,0 +1,48 @@ +--- +title: "Lesson 1 - Build in the workspace" +description: "Build the Space Quiz in VS Code, preview it in the integrated browser, and polish a picked element." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Keep the editor, chat, files, and preview together. You will build the quiz, play it in the integrated browser, then hand a specific element straight to chat for a focused change. + +In this lesson, you will: + +- build the quiz in a single `index.html`. +- preview the quiz in the integrated browser. +- select an element in the browser and polish it. + +## Build the quiz + +Send the following prompt in Copilot Chat: + +```plaintext +Create a colorful, accessible space exploration quiz with 10 questions in a single index.html. Add a progress bar, score counter, animated correct and incorrect feedback, and a results screen. Use no server or dependencies. Open it in the VS Code integrated browser. +``` + +1. Review the generated file in the editor. +2. Open the integrated browser and play several questions. +3. Open **Source Control** at any point to see the changed files and diff. + +## Pick an element and polish it + +The integrated browser can hand a specific element straight to chat, so you never have to describe which button you mean. + +1. With the quiz open in the integrated browser, start an element selection from the browser toolbar. +2. Select the answer buttons to attach that element to your next chat message. +3. Send the following prompt and watch the preview reload: + + ```plaintext + Using the selected element, make the answer buttons feel more tactile: add a subtle press state, a clearer focus ring for keyboard users, and a smoother transition into the correct and incorrect colors. Change nothing else. + ``` + +4. Read the diff in **Source Control** before you keep it. +5. Press Tab to move through the answers and confirm that the focus ring is visible. + +## Summary and next steps + +You built, previewed, and polished the quiz without leaving the editor. Continue to [Lesson 2: Capture project instructions][next-lesson]. + +[next-lesson]: ../2-project-instructions/ diff --git a/docs/first-steps/vscode/10-review.md b/docs/first-steps/vscode/10-review.md new file mode 100644 index 00000000..affabfb4 --- /dev/null +++ b/docs/first-steps/vscode/10-review.md @@ -0,0 +1,44 @@ +--- +title: "Lesson 10 - Review and next steps" +description: "Review the VS Code workflow and find resources for continued learning." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +You completed the editor loop: you built in the editor, captured instructions, tested in the integrated browser, planned before editing, merged with GitHub tools, and delegated the next idea to a cloud session. + +## What you completed + +You: + +- confirmed Copilot Chat and added the GitHub Pull Requests and Issues extension. +- built the quiz and polished a picked element in the integrated browser. +- generated `.github/copilot-instructions.md` with `/init`. +- inspected chat context and smoke-tested before Git wrote anything. +- published with **Source Control** and a Copilot-drafted commit message. +- planned a feature in Plan mode before any edits. +- enabled GitHub MCP and created issues from chat. +- created, reviewed, and merged a pull request from VS Code. +- delegated a feature to a cloud session. + +## Keep exploring + +- [Learn about Copilot in VS Code, including chat, agent mode, and editor features][copilot-vscode]. +- [Manage issues and pull requests in the sidebar with the GitHub Pull Requests extension][pr-extension]. +- [Add tools your agent can call with MCP servers in VS Code][mcp-servers]. +- [Teach Copilot your project rules with custom instructions][custom-instructions]. +- [Install Git][git]. +- [Compare Copilot plans][copilot-plans]. + +Run the same Space Quiz through a different way of working with the [GitHub Copilot app first steps workshop][first-steps-app] or the [GitHub Copilot CLI first steps workshop][first-steps-cli]. If you are ready for a deeper scenario using a complete application and team backlog, continue with the [real-world VS Code workshop][real-world-vscode]. + +[copilot-vscode]: https://code.visualstudio.com/docs/copilot/overview +[pr-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[custom-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot +[git]: https://git-scm.com/downloads +[copilot-plans]: https://github.com/features/copilot/plans +[first-steps-app]: ../../copilot-app/ +[first-steps-cli]: ../../copilot-cli/ +[real-world-vscode]: ../../../real-world-development/vscode/ diff --git a/docs/first-steps/vscode/2-project-instructions.md b/docs/first-steps/vscode/2-project-instructions.md new file mode 100644 index 00000000..b15c3d59 --- /dev/null +++ b/docs/first-steps/vscode/2-project-instructions.md @@ -0,0 +1,40 @@ +--- +title: "Lesson 2 - Capture project instructions" +description: "Run /init in Copilot Chat to generate .github/copilot-instructions.md for the Space Quiz, then tailor it." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +With a working quiz in the workspace, generate repository custom instructions that describe the real project. Copilot reads these instructions with every chat request. + +In this lesson, you will: + +- generate repository custom instructions with `/init`. +- review `.github/copilot-instructions.md` before saving it. +- trim and personalize the instructions. + +## Capture the rules with `/init` + +1. Run `/init` in Copilot Chat. +2. Review the generated `.github/copilot-instructions.md` file before saving it. +3. Keep only guidance that matches this project: a single file, no dependencies, accessible, and browser-tested. + +![Illustration of VS Code with .github/copilot-instructions.md open in the editor and selected in the Explorer, next to index.html. The file is titled Space Quiz and lists rules: a single index.html with no dependencies and no build step, every answer reachable by keyboard, and respect for prefers-color-scheme in both themes. A section titled How I like code written asks for small functions, early returns, no clever one-liners, and comments only for what is genuinely surprising.](../../_images/first-steps-vscode-instructions.svg) + +Repository custom instructions live in `.github/copilot-instructions.md` and apply to every chat request. + +> [!IMPORTANT] +> **Order matters** +> +> `/init` reads the workspace as it exists right now. Running it after the quiz is built produces instructions grounded in real code. + +## Make it yours + +The instructions file is not only for facts about the project. Add the specifics you would otherwise repeat in every prompt, such as how you like code written, naming conventions, which libraries to avoid, and how much commenting you want. Every future session reads this file before it reads your prompt. + +## Summary and next steps + +Your workspace now has custom instructions grounded in real code. Continue to [Lesson 3: Inspect context and test][next-lesson]. + +[next-lesson]: ../3-inspect-and-test/ diff --git a/docs/first-steps/vscode/3-inspect-and-test.md b/docs/first-steps/vscode/3-inspect-and-test.md new file mode 100644 index 00000000..94adad87 --- /dev/null +++ b/docs/first-steps/vscode/3-inspect-and-test.md @@ -0,0 +1,41 @@ +--- +title: "Lesson 3 - Inspect context and test" +description: "Inspect the context attached to a Copilot Chat request, then run a browser-level smoke test before Git writes anything." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Before you publish anything, check what Copilot can see and prove that the quiz works. + +In this lesson, you will: + +- inspect the context included in a chat request. +- run a browser-level smoke test. +- fix failures before you move on to Git. + +## Inspect context from the bottom-right + +VS Code shows the active context at the bottom-right of the Copilot Chat input. + +1. Open the context indicator in the **bottom-right** of the chat input. +2. Inspect the files, custom instructions, and symbols included in the request. +3. Remove irrelevant context, or attach the quiz file, before you continue. + +## Build and test before Git writes + +Use the integrated browser and a smoke-test prompt before you initialize a repository or commit anything: + +```plaintext +Run a browser-level smoke test for the quiz. Check keyboard navigation, score updates, correct and incorrect feedback, and the results screen. Fix any failures, then report what passed. +``` + +1. Run the smoke test and check the integrated browser. +2. Fix any failures and rerun the test until everything passes. +3. Only after the build and test pass, move on to Git. + +## Summary and next steps + +You confirmed what Copilot can see and tested the quiz before publishing. Continue to [Lesson 4: Publish the project][next-lesson]. + +[next-lesson]: ../4-publish/ diff --git a/docs/first-steps/vscode/4-publish.md b/docs/first-steps/vscode/4-publish.md new file mode 100644 index 00000000..d8cccee6 --- /dev/null +++ b/docs/first-steps/vscode/4-publish.md @@ -0,0 +1,33 @@ +--- +title: "Lesson 4 - Publish the project" +description: "Initialize, commit, and publish the Space Quiz entirely through the built-in Source Control integration in VS Code." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Publish the tested quiz to GitHub entirely through the built-in Git integration, and let Copilot draft the commit message from what actually changed. + +In this lesson, you will: + +- initialize a repository from **Source Control**. +- generate a commit message from the staged diff. +- publish the branch to a new public GitHub repository. + +## Initialize, commit, and publish + +1. Open **Source Control** and select **Initialize Repository**. +2. Stage the files. +3. Select the **sparkle pencil** icon in the commit message box to have Copilot write the message from the staged diff. Read the message, edit anything that is wrong, then commit. +4. Select **Publish Branch** and create a public `space-quiz` repository on GitHub. +5. Confirm that the tested file is present on GitHub. + +![Illustration of the VS Code Source Control view. The Changes list shows index.html and .github/copilot-instructions.md. A callout on the sparkle button in the commit message box reads Copilot wrote your message, and the message reads Add per-question timer to the quiz. Below the Commit button, a Create Pull Request button is highlighted with the note Commit first, then this button appears right inside Source Control.](../../_images/first-steps-vscode-commit.svg) + +The sparkle button drafts a commit message from the staged diff. Once you commit, **Source Control** offers to create the pull request too. + +## Summary and next steps + +Your tested quiz is now published on GitHub. Continue to [Lesson 5: Plan before you edit][next-lesson]. + +[next-lesson]: ../5-plan-mode/ diff --git a/docs/first-steps/vscode/5-plan-mode.md b/docs/first-steps/vscode/5-plan-mode.md new file mode 100644 index 00000000..d43b815e --- /dev/null +++ b/docs/first-steps/vscode/5-plan-mode.md @@ -0,0 +1,38 @@ +--- +title: "Lesson 5 - Plan before you edit" +description: "Switch Copilot Chat to Plan mode so it researches the workspace and proposes an approach before editing any files." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Plan mode researches the workspace and writes an implementation plan without touching your files. + +In this lesson, you will: + +- switch Copilot Chat from Agent to Plan. +- review and refine a proposed plan. +- switch back to Agent to implement the plan. + +## Agree on the approach before any edits + +1. Open Copilot Chat and use the **mode dropdown** above the input. +2. Switch from **Agent** to **Plan**. +3. Describe the next feature with the following prompt and let Copilot investigate the workspace: + + ```plaintext + Plan how to add a review screen that shows every question with the answer I chose. Investigate the existing quiz, list the changes you would make, call out accessibility and single-file risks, and stop before editing. + ``` + +4. Read the plan and request changes, then switch back to **Agent** to implement it. + +> [!TIP] +> **When plan mode pays off** +> +> Use Plan mode for anything ambiguous, cross-cutting, or expensive to undo. The cheapest place to fix a bad approach is before the first edit. + +## Summary and next steps + +You agreed on an approach with Copilot before it wrote any code. Continue to [Lesson 6: Give Copilot GitHub-aware tools][next-lesson]. + +[next-lesson]: ../6-github-mcp/ diff --git a/docs/first-steps/vscode/6-github-mcp.md b/docs/first-steps/vscode/6-github-mcp.md new file mode 100644 index 00000000..7441866a --- /dev/null +++ b/docs/first-steps/vscode/6-github-mcp.md @@ -0,0 +1,29 @@ +--- +title: "Lesson 6 - Give Copilot GitHub-aware tools" +description: "Enable and review the GitHub MCP server in VS Code before asking Copilot to work with issues and pull requests." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Enable the GitHub MCP server *before* you ask Copilot to create issues or work with pull requests. With these tools, Copilot can read and write GitHub data directly from chat. + +In this lesson, you will: + +- enable the GitHub MCP server. +- review the tools and permissions the server requests. +- confirm that the GitHub tools are available in chat. + +## Enable GitHub MCP + +1. Open VS Code **Settings** and enable the built-in **GitHub MCP** server, if your version includes it. +2. Otherwise, install a trusted GitHub MCP server through the [MCP server configuration flow][mcp-servers]. +3. Review the tools and permissions the server requests before you approve it. +4. Confirm that the GitHub tools appear in the Copilot Chat tools picker. + +## Summary and next steps + +Copilot now has GitHub-aware tools. Continue to [Lesson 7: Plan and implement issues][next-lesson]. + +[mcp-servers]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers +[next-lesson]: ../7-issues-and-sessions/ diff --git a/docs/first-steps/vscode/7-issues-and-sessions.md b/docs/first-steps/vscode/7-issues-and-sessions.md new file mode 100644 index 00000000..53a867e7 --- /dev/null +++ b/docs/first-steps/vscode/7-issues-and-sessions.md @@ -0,0 +1,37 @@ +--- +title: "Lesson 7 - Plan and implement issues" +description: "Use GitHub tools to create issues from Copilot Chat, then implement one in a new chat session." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +With GitHub MCP enabled, Copilot can create and read issues directly from chat. + +In this lesson, you will: + +- create three focused GitHub issues from Copilot Chat. +- start a new chat session for one issue. +- implement and verify the issue. + +## Create issues + +Send the following prompt: + +```plaintext +Review the space quiz and suggest three focused feature ideas. Use the GitHub tools to create a separate issue for each with a clear title, user-focused description, and acceptance criteria. Do not implement them yet. +``` + +## Implement one issue + +1. Open the **GitHub** view in the Activity Bar and inspect the new issues. +2. Choose one issue, then select the **+** button in Copilot Chat to start a new session for it. +3. Use Agent mode to implement the issue while the original session stays available for comparison. +4. Run the integrated-browser smoke test from [Lesson 3][lesson-3] before you create a pull request. + +## Summary and next steps + +You created issues and implemented one in its own session. Continue to [Lesson 8: Review and merge][next-lesson]. + +[lesson-3]: ../3-inspect-and-test/ +[next-lesson]: ../8-review-and-merge/ diff --git a/docs/first-steps/vscode/8-review-and-merge.md b/docs/first-steps/vscode/8-review-and-merge.md new file mode 100644 index 00000000..ce52e022 --- /dev/null +++ b/docs/first-steps/vscode/8-review-and-merge.md @@ -0,0 +1,35 @@ +--- +title: "Lesson 8 - Review and merge" +description: "Create a pull request from Source Control, request a Copilot code review, address feedback with GitHub tools, and merge." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Inspect, review, and merge the new work with GitHub tools in VS Code. + +In this lesson, you will: + +- commit the new work and create a pull request from **Source Control**. +- request a Copilot code review. +- address feedback and failing checks with GitHub MCP. +- merge the pull request. + +## Inspect, review, and merge + +1. Open **Source Control** to inspect the changed files and diff before you create anything. +2. Commit the new work, using the **sparkle** button to write the message again. +3. Select the **Create Pull Request** button that appears in **Source Control**. Copilot drafts the title and description from your commits, so you get a better pull request than asking for one from scratch. +4. Request a **Copilot code review** while you create the pull request, from the **GitHub** view in VS Code, or on GitHub. +5. Ask Copilot, with GitHub MCP, to inspect the pull request, resolve merge conflicts, address review comments, and investigate failing CI checks. +6. Retest in the integrated browser, review every proposed change, and update the branch. +7. When checks and review are complete, ask the agent to merge, or merge from the GitHub integration. + +> [!NOTE] +> You can always ask Copilot to do this in chat instead. The **Source Control** path is worth learning first because it writes the commit and pull request text for you from what actually changed. + +## Summary and next steps + +You reviewed and merged a pull request without leaving VS Code. Continue to [Lesson 9: Hand the next idea to a cloud session][next-lesson]. + +[next-lesson]: ../9-cloud-session/ diff --git a/docs/first-steps/vscode/9-cloud-session.md b/docs/first-steps/vscode/9-cloud-session.md new file mode 100644 index 00000000..5ce23bc3 --- /dev/null +++ b/docs/first-steps/vscode/9-cloud-session.md @@ -0,0 +1,42 @@ +--- +title: "Lesson 9 - Hand the next idea to a cloud session" +description: "Switch the Copilot Chat harness from Local to Cloud and delegate a self-contained feature that arrives as a pull request." +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +You have done the whole loop locally, so you now know what good output looks like. That is the right moment to let something run without you. Copilot Chat can switch the harness it runs on from your machine to GitHub. + +In this lesson, you will: + +- switch the Copilot Chat harness from **Local** to **Cloud**. +- delegate a self-contained feature with clear acceptance criteria. +- review the resulting pull request. + +## Delegate to the cloud + +![Illustration of Copilot Chat in VS Code with the Harness picker open. Under Copilot, Cloud is selected instead of Local, and other harnesses such as Claude and Codex are listed. Above, a request to add three new color themes shows Working in the cloud with a link to follow the session on GitHub.](../../_images/first-steps-vscode-cloud-harness.svg) + +The **Harness** picker lists Copilot running **Local** or **Cloud**, alongside other harnesses. Switch to **Cloud** and the next request runs on GitHub instead of your machine. + +1. In Copilot Chat, open the **Harness** picker and switch Copilot from **Local** to **Cloud**. +2. Start a new session and give it a self-contained feature with clear acceptance criteria: + + ```plaintext + Add a theme picker to the space quiz with three named themes: Deep Space, Launch Pad, and Lunar. Persist the choice in localStorage, keep everything in the single index.html with no dependencies, keep contrast accessible in every theme, and open a pull request when the tests pass. + ``` + +3. Close your laptop. The work continues on GitHub and arrives as a pull request. +4. Review that pull request exactly as carefully as the one you wrote yourself. + +> [!TIP] +> **Delegate what you can describe** +> +> Cloud sessions reward a precise brief. If you cannot write the acceptance criteria, the task is not ready to leave your machine yet. + +## Summary and next steps + +You delegated a feature to a cloud session and reviewed the result. Continue to [Lesson 10: Review and next steps][next-lesson]. + +[next-lesson]: ../10-review/ diff --git a/docs/first-steps/vscode/README.md b/docs/first-steps/vscode/README.md new file mode 100644 index 00000000..fb797f82 --- /dev/null +++ b/docs/first-steps/vscode/README.md @@ -0,0 +1,50 @@ +--- +title: "Visual Studio Code first steps" +description: "Take a guided tour of GitHub Copilot in Visual Studio Code by building, testing, and shipping a Space Quiz." +slug: first-steps/vscode +authors: + - jamesmontemagno +lastUpdated: 2026-09-28 +--- + +Take a beginner-friendly, hands-on tour of GitHub Copilot in Visual Studio Code. You will build a colorful Space Quiz from an empty folder and learn the editor loop: build in a workspace, inspect context, test before Git writes anything, plan before you edit, and let GitHub tools handle issues and pull requests without leaving VS Code. + +The workshop takes approximately 60 to 90 minutes. Your project uses a single HTML file with no runtime dependencies, so you can focus on learning Copilot in the editor. + +> [!NOTE] +> This workshop was created by [James Montemagno][james] and adapted from [First Steps with GitHub Copilot][source-lab]. The original content is available under the [MIT License][source-license]. + +## Lessons + +| Lesson | Topic | What you will do | +| ------ | ----- | ---------------- | +| [0. Prerequisites and setup][lesson-0] | Setup | Verify prerequisites, add the GitHub extension, open a folder, and choose a model | +| [1. Build in the workspace][lesson-1] | Build | Build the quiz, preview it in the integrated browser, and polish an element you pick | +| [2. Capture project instructions][lesson-2] | Instructions | Generate and tailor `.github/copilot-instructions.md` with `/init` | +| [3. Inspect context and test][lesson-3] | Test | Inspect chat context and run a smoke test before Git writes anything | +| [4. Publish the project][lesson-4] | Publish | Initialize, commit, and publish with Source Control | +| [5. Plan before you edit][lesson-5] | Plan | Use Plan mode to agree on an approach for the next feature | +| [6. Give Copilot GitHub-aware tools][lesson-6] | Tools | Enable and review the GitHub MCP server | +| [7. Plan and implement issues][lesson-7] | Implement | Create issues with GitHub tools and implement one in a new session | +| [8. Review and merge][lesson-8] | Review | Create a pull request from Source Control, request a review, and merge | +| [9. Hand off to a cloud session][lesson-9] | Delegate | Switch the harness to Cloud and delegate a new feature | +| [10. Review and next steps][lesson-10] | Review | Recap the workflow and continue learning | + +## Get started + +[Start with Lesson 0: Prerequisites and setup][lesson-0]. + +[james]: https://github.com/jamesmontemagno +[source-lab]: https://github.com/jamesmontemagno/first-steps-with-github-copilot +[source-license]: https://github.com/jamesmontemagno/first-steps-with-github-copilot/blob/main/LICENSE +[lesson-0]: 0-prerequisites/ +[lesson-1]: 1-build-and-polish/ +[lesson-2]: 2-project-instructions/ +[lesson-3]: 3-inspect-and-test/ +[lesson-4]: 4-publish/ +[lesson-5]: 5-plan-mode/ +[lesson-6]: 6-github-mcp/ +[lesson-7]: 7-issues-and-sessions/ +[lesson-8]: 8-review-and-merge/ +[lesson-9]: 9-cloud-session/ +[lesson-10]: 10-review/ diff --git a/docs/ja-jp/README.md b/docs/ja-jp/README.md index 04db18c9..9cef4061 100644 --- a/docs/ja-jp/README.md +++ b/docs/ja-jp/README.md @@ -1,42 +1,43 @@ --- slug: ja-jp -title: "GitHub Copilot のエージェントを実践で学ぶ" +title: "GitHub Copilot ワークショップ" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-28 --- -GitHub Copilot に最近追加された機能は、ソフトウェア開発ライフサイクル (SDLC) 全体を通して開発者を支援する強力なツールです。GitHub の Issue や pull request を使った作業、外部サービスとの連携、そしてもちろんコードの作成も含まれます。このラボでは、実際のユースケースを通して機能を試し、ツールを最大限に活用するためのヒントを紹介します。 +学びたい内容と深さに合わせてワークショップを選びます。**はじめの一歩**では GitHub Copilot をガイドに沿って体験し、**実践的な開発**では完成したアプリケーションとチームのバックログを使って、本番環境を意識したワークフローを学びます。 -> [!CAUTION] -> GitHub Copilot は決定論的ではなく確率的に動作するため、生成されるコードや変更されるファイルなどは毎回異なる場合があります。そのため、ラボ内のスクリーンショットやコード スニペットと、実際の結果に多少の違いが生じることがあります。これは想定される動作であり、この種のツールが持つ特性によるものです。 -> -> 何かが壊れているように見える場合や正しく動作しない場合は、メンターに相談してください。 - -## 利用環境を選ぶ +## はじめの一歩 -GitHub Copilot は、どの環境で作業していても利用できます。希望する開発方法に合った利用環境を選び、共通の Tailspin Toys バックログに沿って演習を進めます。どの利用環境にも専用のセットアップ手順が用意されているため、選んだものからすぐに始められます。 +既存のコードベースを用意せずに、GitHub Copilot 製品の主要な機能を学べる、目的を絞ったガイド形式のワークショップです。 -### 🖥️ [VS Code](../vscode/) +### [GitHub Copilot app ツアー][first-steps-app] -**Visual Studio Code** と GitHub Codespaces 内で GitHub Copilot を使用します。普段使っているエディターを離れることなく、Copilot Chat のエージェント モード、MCP サーバー、カスタム エージェントを利用できます。AI 支援を IDE に直接組み込んで使いたい場合に最適です。 +空のフォルダーから Space Quiz を作成し、GitHub への公開、Issue の実装、Copilot レビュー、オートメーションのスケジュール設定、Canvas ワークフローの体験まで進めます。 -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot CLI のはじめの一歩][first-steps-cli] -**GitHub Copilot CLI** は、ターミナルで動作するエージェント型アシスタントです。インストールして MCP サーバーに接続し、プラン モードでコードを生成できます。さらに、独自のスキル、カスタム エージェント、スラッシュ コマンドをすべてコマンド ラインから構築できます。 +同じ Space Quiz をターミナルから作成し、差分のレビュー、worktree での並列セッション、編集前の計画、シェルを離れずに行うプル リクエストの作成、マージ、委任まで進めます。 -### 🤖 [Copilot App](app/) +### [Visual Studio Code のはじめの一歩][first-steps-vscode] -**GitHub Copilot app** は、Copilot CLI を基盤とするデスクトップ アプリケーションです。複数のエージェント セッションを並行して実行し、セッション モードの切り替え、キャンバスでの共同作業、GitHub Issue と pull request の管理をアプリ内で行えます。さらに **Agent Merge** を使用すると、リベース、レビュー フィードバックへの対応、CI の修正、マージまで、pull request の一連の作業を進められます。 +VS Code で Space Quiz を作成し、統合ブラウザーでのテスト、ソース管理での公開、GitHub ツールを使った Issue とプル リクエストの操作、クラウド セッションへの委任まで進めます。 -### ☁️ [Copilot Cloud Agent](../cloud/) +## 実践的な開発 -**Copilot cloud agent** は、GitHub Issue の作業をバックグラウンドで進める非同期のペア プログラマーです。作業の割り当て、カスタム エージェントによる指示、エージェント ダッシュボードでの進捗確認、作成された pull request のレビューを行えます。 +Tailspin Toys アプリケーションとバックログを使い、現実的なソフトウェア開発ライフサイクルで GitHub Copilot を実践します。作業環境を選び、意味のある変更を計画、実装、テスト、レビュー、リリースします。 -## シナリオ +### [実践的な開発ワークショップを見る][real-world-development] -架空の企業 Tailspin Toys に新しく参加した開発者として作業します。Tailspin Toys は、開発者をテーマにしたボード ゲームのクラウドファンディングを提供しています。これは巨大な市場です。チームのバックログはすでに GitHub Issue として登録されており、フィルタリングやページネーションなどの機能開発に加えて、アクセシビリティやコーディング規約などの品質改善にもすぐに取り組めます。サイトと Copilot の機能を確認しながら反復的に作業し、タスクを完了させます。 +GitHub Copilot CLI、GitHub Copilot app、GitHub Copilot cloud agent、Visual Studio Code から選択できます。 -## はじめる +> [!CAUTION] +> GitHub Copilot は決定論的ではなく確率的に動作するため、生成されるコードや変更されるファイルは例と異なる場合があります。多少の違いは想定される動作です。 +> +> 講師が進行するワークショップで正しく動作しない場合は、メンターに相談してください。 -上から利用環境を選んで開始します。どの利用環境も、開発に必要なセットアップから始まります。 \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[first-steps-cli]: ../first-steps/copilot-cli/ +[first-steps-vscode]: ../first-steps/vscode/ +[real-world-development]: ../real-world-development/ diff --git a/docs/ja-jp/app/0-prerequisites.md b/docs/ja-jp/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/ja-jp/app/0-prerequisites.md rename to docs/ja-jp/real-world-development/app/0-prerequisites.md index 10329a2d..8d15b22b 100644 --- a/docs/ja-jp/app/0-prerequisites.md +++ b/docs/ja-jp/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Tailspin Toys プロジェクトの自分用コピーを使って作業します 1. 新しいブラウザーウィンドウで、このラボの GitHub リポジトリ `https://github.com/github-samples/tailspin-toys` を開きます。 2. ラボ用リポジトリのページで **Use this template** ボタンを選択し、**Create a new repository** を選択して、リポジトリの自分用コピーを作成します。 - ![Use this template ボタンのドロップダウンで Create a new repository が選択されている画面](../../_images/app-0-use-template.png) + ![Use this template ボタンのドロップダウンで Create a new repository が選択されている画面](../../../_images/app-0-use-template.png) 3. GitHub または Microsoft が主催するイベントの一環としてワークショップに参加している場合は、メンターの指示に従ってください。それ以外の場合は、GitHub Copilot を利用できる Organization に新しいリポジトリを作成できます。 - ![github-samples/tailspin-toys がテンプレートに設定され、リポジトリ名が入力された Create a new repository フォーム](../../_images/app-0-create-repository.png) + ![github-samples/tailspin-toys がテンプレートに設定され、リポジトリ名が入力された Create a new repository フォーム](../../../_images/app-0-create-repository.png) 4. 作成したリポジトリのパス (**organization-or-user-name/repository-name**) を記録します。このラボで後ほど使用します。 diff --git a/docs/ja-jp/app/1-install-copilot-app.md b/docs/ja-jp/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/ja-jp/app/1-install-copilot-app.md rename to docs/ja-jp/real-world-development/app/1-install-copilot-app.md diff --git a/docs/ja-jp/app/2-add-star-rating.md b/docs/ja-jp/real-world-development/app/2-add-star-rating.md similarity index 98% rename from docs/ja-jp/app/2-add-star-rating.md rename to docs/ja-jp/real-world-development/app/2-add-star-rating.md index b1edad2c..a07a0422 100644 --- a/docs/ja-jp/app/2-add-star-rating.md +++ b/docs/ja-jp/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Tailspin Toys の各ゲームには星評価を設定でき、ゲーム詳細ペ 2. **Home screen** を選択します。 3. リポジトリに `tailspin-toys` が選択されていることを確認します。 - ![リポジトリセレクターに tailspin-toys が設定され、プロンプトの下にモデルセレクターが表示された GitHub Copilot app のプロンプトボックス](../../_images/app-2-start-session.png) + ![リポジトリセレクターに tailspin-toys が設定され、プロンプトの下にモデルセレクターが表示された GitHub Copilot app のプロンプトボックス](../../../_images/app-2-start-session.png) 4. 次のプロンプトを使って変更を依頼します。 @@ -55,7 +55,7 @@ AI が生成したすべての変更は、どれほど小さくてもマージ 1. アプリの右上隅にある **Toggle review panel** を選択します。Copilot が行った未処理の変更がすべて表示される差分画面が開きます。 - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../_images/app-2-review-panel.png) + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../../_images/app-2-review-panel.png) 2. ゲームの詳細表示に使用される中心的なファイル `GameCard.astro` にコードが追加されていることを確認します。次のような小さなブロックが追加されているはずです。評価がある場合は表示し、`starRating` が `null` の場合は "No rating yet" を表示します。 @@ -80,7 +80,7 @@ AI が生成したすべての変更は、どれほど小さくてもマージ 1. Copilot app の右側にあるレビューパネルで **Terminal** を選択します。**Terminal** ボタンがない場合は、**+** (**Open in panel** というラベルが付いています) を選択してから **Terminal** を選択します。 - ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../../_images/app-terminal-screenshot.png) 2. ターミナルウィンドウに次のコマンドを入力し、Web アプリの開発サーバーを起動します。 diff --git a/docs/ja-jp/app/3-custom-instructions.md b/docs/ja-jp/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/ja-jp/app/3-custom-instructions.md rename to docs/ja-jp/real-world-development/app/3-custom-instructions.md index 8b801657..3eebc88a 100644 --- a/docs/ja-jp/app/3-custom-instructions.md +++ b/docs/ja-jp/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ AI の使い方に唯一の方法がないのと同様に、指示ファイル 1. レビューパネルが表示されていない場合は、右上の **Toggle review panel** を選択して開きます。 - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../_images/app-2-review-panel.png) + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../../_images/app-2-review-panel.png) 2. **+** を選択し、レビューパネルに新しい項目を追加します。 3. **File** を選択します。 @@ -66,7 +66,7 @@ AI の使い方に唯一の方法がないのと同様に、指示ファイル 6. ファイルを確認します。プロジェクトの簡単な説明に加えて、**Agent notes**、**Code standards**、**Scripts**、**Repository Structure** などのセクションがあります。**Code standards** の下には、ネストされた **GitHub Actions Workflows** のガイダンスがあります。これらは Copilot とのすべてのやり取りに適用されます。 7. **Show folder view** を選択して、フォルダーナビゲーターを開きます。 - ![GitHub Copilot app でファイルを開いたレビューパネルにある Show folder view ボタン](../../_images/app-show-folder-view.png) + ![GitHub Copilot app でファイルを開いたレビューパネルにある Show folder view ボタン](../../../_images/app-show-folder-view.png) 8. `.github/instructions` フォルダーに移動し、ファイルを確認します。Astro ファイル、Drizzle データレイヤー、テストなどに対応する指示があります。 9. `.github/instructions/unit-tests.instructions.md` を開きます。先頭の `applyTo` フィールドに注目してください。これはリポジトリのルートを基準とする glob で、指示を適用するファイルを決定します。ここでは、TypeScript のテストファイル (`**/*.test.ts` に一致するファイルなど) が対象になります。 @@ -87,7 +87,7 @@ AI の使い方に唯一の方法がないのと同様に、指示ファイル 2. **Update our repository coding standards** というタイトルの Issue を選択して開きます。 3. 右上の **New session** を選択し、Issue に基づく新しいセッションを開始します。 - ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../../_images/app-new-session-from-issue.png) 4. 次のプロンプトを使い、Issue に記載された要件を満たすように指示ファイルを更新することを Copilot に依頼します。 @@ -103,7 +103,7 @@ Copilot が行った更新を読み、更新された指示に基づいて生成 1. 右上の **Changes** を選択してコードの変更を開きます。 - ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../_images/app-select-changes.png) + ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../../_images/app-select-changes.png) 2. 更新された指示ファイルをレビューします。コードにドキュメントとコメントを追加するためのガイドラインが含まれていることを確認します。 diff --git a/docs/ja-jp/app/4-build-filtering.md b/docs/ja-jp/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/ja-jp/app/4-build-filtering.md rename to docs/ja-jp/real-world-development/app/4-build-filtering.md index 781f83d0..2ccb5538 100644 --- a/docs/ja-jp/app/4-build-filtering.md +++ b/docs/ja-jp/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Issue を開いて新しいセッションを開始し、Plan モードに切り 2. **Allow users to filter games by category and publisher** というタイトルの Issue を選択します。 3. 右上の **New session** を選択します。 - ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app の Issue ビューで、右上の New session ボタンを矢印で示した画面](../../../_images/app-new-session-from-issue.png) 4. モードに **Plan** と表示されるまで Shift+Tab を選択します。 - ![モードセレクターが Plan に設定され、矢印で示された GitHub Copilot app のプロンプトボックス](../../_images/app-4-plan-mode.png) + ![モードセレクターが Plan に設定され、矢印で示された GitHub Copilot app のプロンプトボックス](../../../_images/app-4-plan-mode.png) 5. 次のプロンプトを送信します。Issue から開始したため、フィルター機能の Issue はすでにこのセッションのコンテキストに含まれています。 @@ -92,12 +92,12 @@ AI が生成したすべてのコードは、マージ前にレビューする 1. 右上の **Changes** を選択してコードの変更を開きます。 - ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../_images/app-select-changes.png) + ![GitHub Copilot app のセッションパネルにあるタブで、Changes タブを矢印で示した画面](../../../_images/app-select-changes.png) 2. 変更をレビューします。新しい TypeScript ファイル、Astro ファイル、テストファイルが表示されます。新しいヘルパー関数には、レッスン3でマージしたドキュメント標準に従い、依頼していなくても TSDoc doc comment とファイルヘッダーコメントが含まれていることを確認します。 3. Copilot app の右側にあるレビューパネルで **Terminal** を選択します。**Terminal** ボタンがない場合は、**+** (**Open in panel** というラベルが付いています) を選択してから **Terminal** を選択します。 - ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app のレビューパネルにある Terminal ボタン](../../../_images/app-terminal-screenshot.png) 4. ターミナルウィンドウに次のコマンドを入力し、Web アプリの開発サーバーを起動します。 @@ -138,7 +138,7 @@ description: Run the project's test suites and linter to verify code changes are 1. レビューパネルが表示されていない場合は、右上の **Toggle review panel** を選択して開きます。 - ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../_images/app-2-review-panel.png) + ![Create PR の右側にある Toggle review panel ボタンを矢印で示した GitHub Copilot app の上部ツールバー](../../../_images/app-2-review-panel.png) 2. **+** を選択し、レビューパネルに新しい項目を追加します。 3. **File** を選択します。 diff --git a/docs/ja-jp/app/5-mcp-playwright.md b/docs/ja-jp/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/ja-jp/app/5-mcp-playwright.md rename to docs/ja-jp/real-world-development/app/5-mcp-playwright.md index 4cfea9b8..4393819c 100644 --- a/docs/ja-jp/app/5-mcp-playwright.md +++ b/docs/ja-jp/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ lastUpdated: 2026-07-09 MCP server はアプリの設定から追加して管理します。アプリには一般的なサーバーのカタログが含まれているため、[Playwright MCP server][playwright-mcp-server] は数回の操作で追加できます。 -1. Ctrl+, を選択して、Copilot app の設定ページを開きます。 +1. Command+, (Mac) または Ctrl+, (Windows/Linux) を押して、Copilot app の設定ページを開きます。 2. **MCP servers** を選択します。 3. 検索ダイアログに `Playwright` と入力します。 4. **Popular MCP servers** の一覧から **Playwright** を選択します。 diff --git a/docs/ja-jp/app/6-agent-merge.md b/docs/ja-jp/real-world-development/app/6-agent-merge.md similarity index 98% rename from docs/ja-jp/app/6-agent-merge.md rename to docs/ja-jp/real-world-development/app/6-agent-merge.md index eefc96ae..2f265a33 100644 --- a/docs/ja-jp/app/6-agent-merge.md +++ b/docs/ja-jp/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ lastUpdated: 2026-07-09 2. 右上隅にある **Create PR** の横のドロップダウンを選択します。 3. **Agent merge** を選択して Agent Merge を有効にします。 - ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../../_images/app-enable-agent-merge.png) 4. ボタンのテキストが **Agent merge** に変わります。 5. **Agent merge** ボタンを選択し、Agent Merge のプロセスを開始します。 @@ -43,7 +43,7 @@ Copilot app が PR の作成と管理を開始します。最初にプロジェ 6. **Agent merge** の横にあるドロップダウンを選択してから **Merge pull request** を選択し、Agent Merge に pull request のマージを許可します。 - ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../../_images/app-agent-merge-merge.png) 7. すべての CI プロセスが成功すると、つまりテストに合格すると、Copilot が pull request をマージします。 diff --git a/docs/ja-jp/app/7-canvases.md b/docs/ja-jp/real-world-development/app/7-canvases.md similarity index 98% rename from docs/ja-jp/app/7-canvases.md rename to docs/ja-jp/real-world-development/app/7-canvases.md index 301cbc03..7c79ee18 100644 --- a/docs/ja-jp/app/7-canvases.md +++ b/docs/ja-jp/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/ja-jp/app/9-review/ + link: /copilot-workshops/ja-jp/real-world-development/app/9-review/ label: "振り返りと次のステップ" --- @@ -73,7 +73,7 @@ Copilot がキャンバスの作成を開始します。 2. Copilot がキャンバスファイルを保存したら、右上隅にある **Create PR** の横のドロップダウンを選択します。 3. **Agent merge** を選択して Agent Merge を有効にします。 - ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app で展開された Create PR ドロップダウンの Agent merge オプションを矢印で示した画面](../../../_images/app-enable-agent-merge.png) 4. ボタンのテキストが **Agent merge** に変わります。 5. **Agent merge** ボタンを選択し、Agent Merge のプロセスを開始します。 @@ -84,7 +84,7 @@ Copilot app が PR の作成と管理を開始します。最初にプロジェ 6. **Agent merge** の横にあるドロップダウンを選択してから **Merge pull request** を選択し、Agent Merge に pull request のマージを許可します。 - ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge ドロップダウンで、エージェントに許可された Address reviews、Fix CI failures、Resolve conflicts の操作と、矢印で示された Merge pull request](../../../_images/app-agent-merge-merge.png) 7. すべての CI プロセスが成功するまで待ちます。成功すると、Copilot が pull request を自動的にマージします。 diff --git a/docs/ja-jp/app/8-foundry-canvas/1-project-and-model.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 95% rename from docs/ja-jp/app/8-foundry-canvas/1-project-and-model.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 5400d446..f49234c3 100644 --- a/docs/ja-jp/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/ label: "オプション: Foundry を組み込む" next: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: エージェントを構築してデプロイする --- @@ -33,7 +33,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム 3. [Azure Developer CLI][install-azd] をインストールし、`azd version` でバージョン 1.27.1 以降がインストールされていることを確認します。 4. GitHub Copilot app を開き、**Customize** を開いてから **Plugins** を選択します。`microsoft-foundry` を検索し、Canvas と Foundry スキルを含む Microsoft Foundry プラグインの **Install** を選択します。 - ![Microsoft Foundry プラグインのインストール](../../../_images/app-8-install-foundry-plugin.png) + ![Microsoft Foundry プラグインのインストール](../../../../_images/app-8-install-foundry-plugin.png) 5. **Customize** で **Plugins** を選択し、`azure` を検索するか、**Featured** 一覧から選択します。次に、Azure プラグインの **Install** を選択します。 6. **My work** タブで、Tailspin Toys リポジトリの **Add a Backer Concierge assistant for catalog questions** というタイトルの Issue を探して開きます。**New session** を選択し、新しい worktree で Issue にリンクされたセッションを開始します。3 つのモジュールすべてで、このリポジトリ、worktree ブランチ、Issue セッションを使い続けてください。 @@ -57,11 +57,11 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム npm run db:export ``` - ![カタログのエクスポートの生成](../../../_images/app-8-generate-catalog-export.png) + ![カタログのエクスポートの生成](../../../../_images/app-8-generate-catalog-export.png) 10. `db/catalog.json` を開き、タイトル、説明、カテゴリ、パブリッシャー、星評価を持つ 21 個のゲームが含まれていることを確認します。`note` フィールドも確認してください。カタログには資金調達総額、支援者数、支援プラン、発売日は含まれていません。価格、プレイヤー数、プレイ時間も、記載がなければ外部知識で補わず、情報がないものとして扱います。エクスポートが失敗した場合や内容が異なる場合は、先に進む前に Copilot に調査と再実行を依頼します。 - ![Copilot app で開いたカタログのエクスポート](../../../_images/app-8-view-catalog.png) + ![Copilot app で開いたカタログのエクスポート](../../../../_images/app-8-view-catalog.png) ## Foundry プロジェクトとモデルを設定する @@ -95,7 +95,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Foundry プロジェクトの作成](../../../_images/app-8-foundry-project-created.png) + ![Foundry プロジェクトの作成](../../../../_images/app-8-foundry-project-created.png) 14. Copilot にモデルの推奨を依頼します。Issue からセッションを開始したため、Issue の受け入れ条件はすでにコンテキストに含まれています。 @@ -105,7 +105,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム 15. Copilot が `microsoft-foundry` スキルを読み込んだことを確認し、トレードオフを踏まえて利用可能なモデルを選びます。Microsoft Foundry のホステッド エージェントのクイックスタートでは、現在 `gpt-5.4-mini` を使用していますが、利用可否とクォータはリージョンによって異なります。 - ![モデルの選択](../../../_images/app-8-select-model.png) + ![モデルの選択](../../../../_images/app-8-select-model.png) 16. 選んだモデルのデプロイを Copilot に依頼し、承認前に対象プロジェクトとコストを確認します。 @@ -124,7 +124,7 @@ Tailspin Toys の支援者は、カテゴリやパブリッシャーでゲーム 18. Canvas の右上隅にある **More options** メニューを開き、**Sign in** を選択します。 19. **tailspin-toys** Foundry プロジェクトを選択します。**Models** を展開し、デプロイが想定どおりの名前とステータスで表示されることを確認します。 - ![Canvas でのプロジェクトとモデルの検証](../../../_images/app-8-validate-project-model.png) + ![Canvas でのプロジェクトとモデルの検証](../../../../_images/app-8-validate-project-model.png) 20. 同じセッションで、次のプロンプトを入力します。 diff --git a/docs/ja-jp/app/8-foundry-canvas/2-build-and-deploy.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 96% rename from docs/ja-jp/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index abf2e34f..30515ea2 100644 --- a/docs/ja-jp/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: プロジェクトとモデルを準備する next: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: エージェントをサイトに接続する --- @@ -49,7 +49,7 @@ Canvas は、Backer Concierge を既存のモデルデプロイに接続する Canvas は、プロンプトと現在のサブスクリプションおよび Foundry プロジェクトのコンテキストを Copilot に送信します。Agent Framework + Responses API のサンプルを探すため、**Agent with Local Tools (Responses, Agent Framework, Python)** などの選択肢が表示される場合があります。 - ![Canvas での Backer Concierge エージェントのひな形作成](../../../_images/app-8-scaffold-backer-concierge.png) + ![Canvas での Backer Concierge エージェントのひな形作成](../../../../_images/app-8-scaffold-backer-concierge.png) 5. **Files** タブで Copilot の変更を確認し、次のチェックポイントと照合します。`src` 内に生成されるファイル名は異なる場合がありますが、プロジェクトの構成範囲と `azure.yaml` の場所は一致するはずです。 @@ -90,7 +90,7 @@ Canvas は、Backer Concierge を既存のモデルデプロイに接続する 期待される結果: カタログに実在するタイトルだけを挙げ、それぞれの正しい情報を使用します。 - ![Agent Inspector でのカタログに基づく推奨](../../../_images/app-8-grounded-recommendation.png) + ![Agent Inspector でのカタログに基づく推奨](../../../../_images/app-8-grounded-recommendation.png) 10. **ハルシネーションを誘う質問**をテストします。 @@ -144,7 +144,7 @@ Canvas は `azd` を使ってテスト済みのエージェントをデプロイ 16. Canvas の **Deploy and test** で **Deploy to Foundry** を選択します。チャットに挿入されるプロンプトを確認します。 - ![Canvas の Deploy to Foundry プロンプト](../../../_images/app-8-deploy-to-foundry.png) + ![Canvas の Deploy to Foundry プロンプト](../../../../_images/app-8-deploy-to-foundry.png) 17. デプロイの完了通知、エージェントのバージョン、ステータス、Foundry のエージェントプレイグラウンドへのリンクを確認します。デプロイが失敗した場合は、エラーを Copilot に送り、同じプロジェクトで解決してから Canvas で再試行します。 18. Canvas で **Test in Foundry Portal** を選択し、デプロイしたエージェントのプレイグラウンドを開きます。このデプロイ済みバージョンに対して、手順 9～14 の 6 つの受け入れチェックをすべて再実行します。継続性を確認する 2 つのプロンプトは、同じ会話で送信してください。応答をカタログと照合し、いずれかのチェックに失敗した場合は、Copilot に修正を依頼してローカルテストを再実行し、Canvas で再デプロイして、ホストされたバージョンを再テストします。 diff --git a/docs/ja-jp/app/8-foundry-canvas/3-connect-to-site.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/ja-jp/app/8-foundry-canvas/3-connect-to-site.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 69bf712e..309e6d67 100644 --- a/docs/ja-jp/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: エージェントを構築してデプロイする next: - link: /copilot-workshops/ja-jp/app/9-review/ + link: /copilot-workshops/ja-jp/real-world-development/app/9-review/ label: 振り返りと次のステップ --- @@ -56,7 +56,7 @@ Azure の資格情報にアクセスできるコードは、プロキシだけ 7. 応答を確認します。カタログに価格が含まれていないことを説明するはずです。Foundry のトークン、資格情報、内部の会話識別子、プロジェクトのエンドポイント、スタックトレースが含まれていないことを確認します。Function に接続できない場合や、応答に内部情報の漏洩や価格の捏造がある場合は、機密情報を除去した失敗の内容を Copilot に送り、修正してプロキシのテストを再実行してから先に進みます。 - ![ローカルプロキシのテスト](../../../_images/app-8-local-proxy-test.png) + ![ローカルプロキシのテスト](../../../../_images/app-8-local-proxy-test.png) ## チャットウィジェットを構築してテストする @@ -77,7 +77,7 @@ Azure の資格情報にアクセスできるコードは、プロキシだけ 11. レポートを確認し、キーボード操作や[ホステッド エージェントの受け入れチェック][agent-checks]の 2 ターンの会話など、報告された動作をブラウザーで検証します。ブラウザーのリクエストが Foundry に直接送られず、不透明なハンドルとともに `/api/concierge` を経由し、応答に資格情報や Foundry の内部識別子が公開されていないことを確認します。推奨や情報不足への回答がカタログの範囲内に収まっていることも確認してください。Copilot とともに失敗したテストに対処し、必要に応じて影響のあるローカルサービスを再起動して、テストを再実行します。 - ![Backer Concierge ウィジェットのエンドツーエンドテスト結果](../../../_images/app-8-e2e-test-results.png) + ![Backer Concierge ウィジェットのエンドツーエンドテスト結果](../../../../_images/app-8-e2e-test-results.png) ## チェックポイントと次のステップ diff --git a/docs/ja-jp/app/8-foundry-canvas/README.md b/docs/ja-jp/real-world-development/app/8-foundry-canvas/README.md similarity index 96% rename from docs/ja-jp/app/8-foundry-canvas/README.md rename to docs/ja-jp/real-world-development/app/8-foundry-canvas/README.md index 184456cd..9bf1ddc0 100644 --- a/docs/ja-jp/app/8-foundry-canvas/README.md +++ b/docs/ja-jp/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "オプション: Foundry を組み込む" -slug: ja-jp/app/8-foundry-canvas +slug: ja-jp/real-world-development/app/8-foundry-canvas description: "Microsoft Foundry Canvas を使ってカタログに基づく Backer Concierge を構築します。各段階で安全に中断できます。" authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ja-jp/app/9-review/ + link: /copilot-workshops/ja-jp/real-world-development/app/9-review/ label: 振り返りと次のステップ next: - link: /copilot-workshops/ja-jp/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ja-jp/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: プロジェクトとモデルを準備する --- diff --git a/docs/ja-jp/app/9-review.md b/docs/ja-jp/real-world-development/app/9-review.md similarity index 100% rename from docs/ja-jp/app/9-review.md rename to docs/ja-jp/real-world-development/app/9-review.md diff --git a/docs/ja-jp/app/README.md b/docs/ja-jp/real-world-development/app/README.md similarity index 99% rename from docs/ja-jp/app/README.md rename to docs/ja-jp/real-world-development/app/README.md index 2608dc21..e374588b 100644 --- a/docs/ja-jp/app/README.md +++ b/docs/ja-jp/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/app +slug: ja-jp/real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/ja-jp/cli/0-prerequisites.md b/docs/ja-jp/real-world-development/cli/0-prerequisites.md similarity index 93% rename from docs/ja-jp/cli/0-prerequisites.md rename to docs/ja-jp/real-world-development/cli/0-prerequisites.md index eeda24e4..b9dfd022 100644 --- a/docs/ja-jp/cli/0-prerequisites.md +++ b/docs/ja-jp/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Copilot CLI の演習を始める前に、必要な準備を整えます。Tails 1. 新しいブラウザー ウィンドウで、このラボの GitHub リポジトリ `https://github.com/github-samples/tailspin-toys` に移動します。 2. ラボ用リポジトリ ページの **Use this template** ボタンを選択して、自分用のリポジトリ コピーを作成します。次に **Create a new repository** を選択します。 - ![「Use this template」ボタン](../../_images/ex0-use-template.png) + ![「Use this template」ボタン](../../../_images/ex0-use-template.png) 3. GitHub または Microsoft が主催するイベントの一環としてこのワークショップを進めている場合は、メンターから案内された手順に従ってください。そうでない場合は、GitHub Copilot にアクセスできる organization に新しいリポジトリを作成できます。 - ![リポジトリ テンプレートの設定を入力する画面](../../_images/ex0-repository-settings.png) + ![リポジトリ テンプレートの設定を入力する画面](../../../_images/ex0-repository-settings.png) 4. 後でラボ内で参照するため、作成したリポジトリ パス（**organization-or-user-name/repository-name**）を控えておいてください。 @@ -36,11 +36,11 @@ Copilot CLI の演習を始める前に、必要な準備を整えます。Tails 1. 新しく作成したリポジトリに移動します。 2. 緑色の **Code** ボタンを選択します。 - ![「Code」ボタンを選択する](../../_images/ex0-code-button.png) + ![「Code」ボタンを選択する](../../../_images/ex0-code-button.png) 3. **Codespaces** タブを選択し、**+** ボタンを選択して新しい codespace を作成します。 - ![新しい codespace を作成する](../../_images/ex0-create-codespace.png) + ![新しい codespace を作成する](../../../_images/ex0-create-codespace.png) Codespace の作成には数分かかりますが、すべてのサービスを手動でインストールするよりははるかに速く完了します。その間に、次に扱う GitHub Copilot のほかの機能を確認しておくこともできます。 diff --git a/docs/ja-jp/cli/1-install-copilot-cli.md b/docs/ja-jp/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/ja-jp/cli/1-install-copilot-cli.md rename to docs/ja-jp/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/ja-jp/cli/2-custom-instructions.md b/docs/ja-jp/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/ja-jp/cli/2-custom-instructions.md rename to docs/ja-jp/real-world-development/cli/2-custom-instructions.md diff --git a/docs/ja-jp/cli/3-generating-code.md b/docs/ja-jp/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/ja-jp/cli/3-generating-code.md rename to docs/ja-jp/real-world-development/cli/3-generating-code.md diff --git a/docs/ja-jp/cli/4-mcp.md b/docs/ja-jp/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/ja-jp/cli/4-mcp.md rename to docs/ja-jp/real-world-development/cli/4-mcp.md diff --git a/docs/ja-jp/cli/5-agent-skills.md b/docs/ja-jp/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/ja-jp/cli/5-agent-skills.md rename to docs/ja-jp/real-world-development/cli/5-agent-skills.md diff --git a/docs/ja-jp/cli/6-custom-agents.md b/docs/ja-jp/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/ja-jp/cli/6-custom-agents.md rename to docs/ja-jp/real-world-development/cli/6-custom-agents.md diff --git a/docs/ja-jp/cli/7-slash-commands.md b/docs/ja-jp/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/ja-jp/cli/7-slash-commands.md rename to docs/ja-jp/real-world-development/cli/7-slash-commands.md index e8ec62f2..2e0ae2a4 100644 --- a/docs/ja-jp/cli/7-slash-commands.md +++ b/docs/ja-jp/real-world-development/cli/7-slash-commands.md @@ -65,7 +65,7 @@ AI ツールを含め、どのツールでも使いこなすにはスキルが 2. 少し待つと、Copilot CLI が現在のコンテキストを視覚的に表現した表示を生成します。 - ![Copilot CLI の context window のスクリーンショット](../../_images/cli-7-context-window.png) + ![Copilot CLI の context window のスクリーンショット](../../../_images/cli-7-context-window.png) 3. 表示されているモデル名（画像と異なる場合があります）と、現在使用されている token の割合を確認します。その他の情報では、次の内容が示されています。 diff --git a/docs/ja-jp/cli/8-foundry-agent/1-project-and-model.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 97% rename from docs/ja-jp/cli/8-foundry-agent/1-project-and-model.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/1-project-and-model.md index bcd7622e..568de7c7 100644 --- a/docs/ja-jp/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ Azure で Backer Concierge をホストし、Copilot CLI の支援を受けな npm run db:export ``` - ![カタログのエクスポート結果の概要](../../../_images/cli-8-export-db-catalog.png) + ![カタログのエクスポート結果の概要](../../../../_images/cli-8-export-db-catalog.png) 2. `db/catalog.json` を開きます。21 個のゲームが含まれ、それぞれにタイトル、説明、カテゴリ、パブリッシャー、星評価があることを確認します。`note` フィールドには、カタログに資金調達総額、支援者数、支援プラン、発売日が含まれないと記載されています。価格、プレイ人数、プレイ時間のフィールドもありません。こうした情報の欠如が、エージェントが守るべき境界を定めます。 @@ -129,7 +129,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![パブリックな Foundry プロジェクトを作成する](../../../_images/cli-8-create-foundry-project.png) + ![パブリックな Foundry プロジェクトを作成する](../../../../_images/cli-8-create-foundry-project.png) 2. プロジェクトの準備ができたら、Copilot にモデルの提案を依頼します。 @@ -139,7 +139,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Copilot から、推奨された選択肢の中からモデルを選ぶよう求められる場合があります。 - ![推奨された選択肢の中からモデルを選択する](../../../_images/cli-8-select-foundry-model.png) + ![推奨された選択肢の中からモデルを選択する](../../../../_images/cli-8-select-foundry-model.png) 以降の手順では `gpt-5.4-mini` を使いますが、提供状況とクォータはリージョンによって異なります。 @@ -149,7 +149,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![選択したモデルをデプロイする](../../../_images/cli-8-deploy-foundry-model.png) + ![選択したモデルをデプロイする](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > モデルの提供状況は変わります。適切なのは、例に固定で指定されたモデルではなく、プロジェクトで利用可能だと Copilot が確認したモデルです。 @@ -198,7 +198,7 @@ Copilot が Azure リソースを作成したり、エージェントのコー Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![カタログに実在するゲームを勧め、資金調達データがないことを伝える Foundry モデルの回答](../../../_images/cli-8-foundry-agent-response.png) + ![カタログに実在するゲームを勧め、資金調達データがないことを伝える Foundry モデルの回答](../../../../_images/cli-8-foundry-agent-response.png) 5. 回答を確認します。カタログに実在するゲームだけを勧め、カタログの正しい詳細を使い、資金調達に関する情報がないことを説明している必要があります。モデルがタイトル、ゲームの詳細、資金調達総額を作り上げた場合は、続行する前に別の推奨モデルと比較してください。 diff --git a/docs/ja-jp/cli/8-foundry-agent/2-build-and-deploy.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 98% rename from docs/ja-jp/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index dc332692..13d0451c 100644 --- a/docs/ja-jp/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Microsoft Foundry Skill に、既存の Tailspin Toys リポジトリ内でホ 対象を絞ったテストがすべて成功するまでは、先に進まないでください。 - ![生成されたエージェントのひな形を検証する](../../../_images/cli-8-verify-generated-agent.png) + ![生成されたエージェントのひな形を検証する](../../../../_images/cli-8-verify-generated-agent.png) ## エージェントをローカルでテストする @@ -113,7 +113,7 @@ Microsoft Foundry Skill に、既存の Tailspin Toys リポジトリ内でホ 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![ホスト型エージェントのデプロイに向けたテストの成功結果](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![ホスト型エージェントのデプロイに向けたテストの成功結果](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. 結果を確認します。エージェントに接続できない場合は、2 つ目のターミナルでサービスがまだ実行中であることを確認します。テストが失敗した場合は、ローカルの不具合だけを修正し、対象を絞ったテストを実行して、`azd ai agent run` の再起動が必要なタイミングを知らせるよう Copilot に依頼します。変更するたびにサービスを再起動し、失敗した受け入れテストを再実行します。 @@ -130,7 +130,7 @@ Microsoft Foundry Skill に、既存の Tailspin Toys リポジトリ内でホ 3. 評価スイートのソースを選ぶよう求められた場合は、**No, set it up later** を選択します。 - ![ホスト型エージェントのデプロイ状況とプレイグラウンドへのリンク](../../../_images/cli-8-hosted-agent-deployment.png) + ![ホスト型エージェントのデプロイ状況とプレイグラウンドへのリンク](../../../../_images/cli-8-hosted-agent-deployment.png) 4. デプロイ状況とリモートからの回答を確認します。エージェントが実行中であり、カタログに実在するゲームだけを勧めていることを確認します。デプロイまたは呼び出しが失敗した場合は、続行する前に、Copilot に原因の診断を依頼してリモート テストを繰り返します。 diff --git a/docs/ja-jp/cli/8-foundry-agent/3-connect-to-site.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 97% rename from docs/ja-jp/cli/8-foundry-agent/3-connect-to-site.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 60ba3160..c203787b 100644 --- a/docs/ja-jp/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ Tailspin Toys は、すべて事前レンダリングされています。ブラ For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions ローカル プロキシのセットアップ](../../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions ローカル プロキシのセットアップ](../../../../_images/cli-8-azure-functions-proxy.png) 2. 別のターミナルを開き、Copilot が提示したコマンドでローカルの Function を起動します。Function は実行したままにします。 3. Copilot CLI に戻り、ローカル プロキシをテストするよう Copilot に依頼します。 @@ -54,7 +54,7 @@ Tailspin Toys は、すべて事前レンダリングされています。ブラ 4. 回答を確認します。カタログには価格が含まれないことを説明している必要があります。Foundry のトークン、資格情報、プロジェクトのエンドポイント、Foundry の会話識別子そのもの、スタック トレースが含まれていてはいけません。 - ![ローカルのコンシェルジュ エンドポイントから返された、機密情報を除去済みの JSON レスポンス](../../../_images/cli-8-sanitized-json-response.png) + ![ローカルのコンシェルジュ エンドポイントから返された、機密情報を除去済みの JSON レスポンス](../../../../_images/cli-8-sanitized-json-response.png) ## チャット ウィジェットを構築する @@ -73,7 +73,7 @@ Tailspin Toys は、すべて事前レンダリングされています。ブラ Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Tailspin Toys サイト内の Backer Concierge ウィジェットのスクリーンショット](../../../_images/cli-8-backer-concierge-widget.png) + ![Tailspin Toys サイト内の Backer Concierge ウィジェットのスクリーンショット](../../../../_images/cli-8-backer-concierge-widget.png) 4. 報告された根拠と照らし合わせて結果を確認します。失敗したチェックがある場合は、関連するプロキシやウィジェットの動作を修正するよう Copilot に依頼し、失敗したチェックを再実行してから終了してください。 diff --git a/docs/ja-jp/cli/8-foundry-agent/README.md b/docs/ja-jp/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/ja-jp/cli/8-foundry-agent/README.md rename to docs/ja-jp/real-world-development/cli/8-foundry-agent/README.md index 07d0f032..192da0b3 100644 --- a/docs/ja-jp/cli/8-foundry-agent/README.md +++ b/docs/ja-jp/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/cli/8-foundry-agent +slug: ja-jp/real-world-development/cli/8-foundry-agent title: "オプション: Foundry を組み込む" description: "モデルを準備し、カタログに基づくエージェントを構築してデプロイし、Tailspin Toys に接続する全 3 モジュールのシリーズです。" authors: diff --git a/docs/ja-jp/cli/9-review.md b/docs/ja-jp/real-world-development/cli/9-review.md similarity index 100% rename from docs/ja-jp/cli/9-review.md rename to docs/ja-jp/real-world-development/cli/9-review.md diff --git a/docs/ja-jp/cli/README.md b/docs/ja-jp/real-world-development/cli/README.md similarity index 99% rename from docs/ja-jp/cli/README.md rename to docs/ja-jp/real-world-development/cli/README.md index ff02387f..248de5b3 100644 --- a/docs/ja-jp/cli/README.md +++ b/docs/ja-jp/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/cli +slug: ja-jp/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/ja-jp/vscode/6-iterating.md b/docs/ja-jp/real-world-development/vscode/6-iterating.md similarity index 99% rename from docs/ja-jp/vscode/6-iterating.md rename to docs/ja-jp/real-world-development/vscode/6-iterating.md index 9de22894..b2f82e44 100644 --- a/docs/ja-jp/vscode/6-iterating.md +++ b/docs/ja-jp/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ next: false 9. **Conversation** タブに戻ります。 10. 承認待ちのワークフローがある場合は、**Approve and run workflows** を選択します。 - ![ワークフローの承認と実行を行う Approve and run workflows](../../_images/shared-approve-workflows.png) + ![ワークフローの承認と実行を行う Approve and run workflows](../../../_images/shared-approve-workflows.png) 11. ワークフローの完了を待ちます。問題がなければ、成功したことを確認できるはずです。 > [!TIP] diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/ja-jp/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index c566b01f..de856e26 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ Tailspin の支援者は、信頼できるおすすめを求めています。 1. アクティビティバーで **Foundry Toolkit** を選択し、**Help and Feedback** を展開して **Ask Copilot** を選択します。ドロップダウンで使いたいモデルを確認し、生成された `/foundrytk-quick-start` プロンプトを送信します。 - ![Foundry Toolkit のクイックスタートの流れを示すスクリーンショット。](../../../_images/vscode-foundry-setup.png) + ![Foundry Toolkit のクイックスタートの流れを示すスクリーンショット。](../../../../_images/vscode-foundry-setup.png) 2. 対話式ワークフローで、**Where are you starting from?** には **Set up Foundry**、続く **What do you have already?** には **I have an Azure subscription or Foundry resources** と回答します。 3. ツールの承認内容を確認します。提案されたコマンドとその対象範囲が適切であれば、このセッションで **Allow azmcp …** を選択し、繰り返し表示される承認プロンプトを減らします。 @@ -93,7 +93,7 @@ Tailspin の支援者は、信頼できるおすすめを求めています。 3. 承認する前に、プロジェクト、デプロイ、容量、費用を確認します。対象範囲を確認して適切であれば、このセッションで **Allow az …** を選択し、繰り返し表示されるプロンプトを減らします。 4. **Foundry Toolkit** を選択し、**My Resources** を展開して **Models** を選択します。デプロイ済みモデルが Foundry の下に表示されることを確認します。スクリーンショットは一例です。リージョンによっては別のモデルが提供されます。 - ![Foundry Toolkit でのモデルデプロイの例を示すスクリーンショット。](../../../_images/vscode-model-deployed.png) + ![Foundry Toolkit でのモデルデプロイの例を示すスクリーンショット。](../../../../_images/vscode-model-deployed.png) ## デプロイ済みモデルをテストする diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 95% rename from docs/ja-jp/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 772c3aad..399ac7a5 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ lastUpdated: 2026-09-16 1. **Foundry Toolkit** を選択し、**Developer Tools**、**+ Build** の順に展開して **+ Create Agent** を選択します。**Create Agent** で **Code an agent with Copilot** を選択します。 - ![エージェント作成ページを示すスクリーンショット。](../../../_images/vscode-create-agent.png) + ![エージェント作成ページを示すスクリーンショット。](../../../../_images/vscode-create-agent.png) 2. 新しいチャットで **AIAgentExpert** に切り替わっていることを確認します。生成されたプロンプトを次のカスタマイズ済みプロンプトに置き換え、送信します。 @@ -65,7 +65,7 @@ lastUpdated: 2026-09-16 5. [デプロイ済みモデルをテストする][model-tests]の 6 つのプロンプトをすべて再利用します。9 個のゲームの抜粋での順位がカタログ全体の順位だと思い込まず、`db/catalog.json` 全体に照らして回答を確認します。 6. **Input & Output**、**Events**、**Tools** を切り替え、ペイロード、セッションイベント、ツール呼び出しを調べます。動作が受け入れ基準に反する場合は、Copilot に修正を依頼し、デプロイ前に対象を絞ったテストと Inspector での確認を再実行します。 - ![ローカルでのエージェントのデバッグ手順を示すスクリーンショット。](../../../_images/vscode-agent-debug.png) + ![ローカルでのエージェントのデバッグ手順を示すスクリーンショット。](../../../../_images/vscode-agent-debug.png) ## ホスト型エージェントをデプロイしてテストする @@ -77,17 +77,17 @@ lastUpdated: 2026-09-16 /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![AIAgentExpert エージェントのハンドオフの選択肢を示すスクリーンショット。](../../../_images/vscode-go-production-handoff.png) + ![AIAgentExpert エージェントのハンドオフの選択肢を示すスクリーンショット。](../../../../_images/vscode-go-production-handoff.png) 2. チャットとターミナルでパラメーターとコマンドの承認内容を確認します。デプロイ先が既存の `tailspin-toys` プロジェクトであることを確認し、承認する前に課金対象のリソースを確認します。 3. Copilot が評価スイートを提案した場合は、必要に応じて受け入れ、追加の確認として実行します。 4. **Foundry Toolkit** を選択し、**My Resources** を展開して **Agents** を選択します。**Agents** タブで **Hosted Agent** に切り替えます。 - ![デプロイ済みのホスト型エージェントを示すスクリーンショット。](../../../_images/vscode-agent-deployed.png) + ![デプロイ済みのホスト型エージェントを示すスクリーンショット。](../../../../_images/vscode-agent-deployed.png) 5. エージェント名を選択し、デプロイ状態が **Running** であることを確認します。**Playground** に切り替え、デプロイしたカタログに照らして、根拠に基づく回答、不足しているデータ、カタログ外の情報、曖昧な依頼、順位付けの確認を繰り返します。 - ![デプロイ済みのホスト型エージェントからの回答を示すスクリーンショット。](../../../_images/vscode-agent-response.png) + ![デプロイ済みのホスト型エージェントからの回答を示すスクリーンショット。](../../../../_images/vscode-agent-response.png) 6. デプロイや回答に問題がある場合は、Copilot とともに報告された状態とログを調べ、既存のプロジェクト内で問題を修正して、確認を繰り返します。デプロイの検証が済むまで先に進まないでください。 diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/ja-jp/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 479a2bc0..3f813b3b 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ next: false Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Backer Concierge のチャットウィジェットの動作を示すスクリーンショット](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Backer Concierge のチャットウィジェットの動作を示すスクリーンショット](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Function とサイトを実行したまま、体験全体を検証します。 diff --git a/docs/ja-jp/vscode/7-foundry-toolkit/README.md b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 99% rename from docs/ja-jp/vscode/7-foundry-toolkit/README.md rename to docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/README.md index 78134ca4..56e72784 100644 --- a/docs/ja-jp/vscode/7-foundry-toolkit/README.md +++ b/docs/ja-jp/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/vscode/7-foundry-toolkit +slug: ja-jp/real-world-development/vscode/7-foundry-toolkit title: "省略可能: Foundry を組み込む" description: "VS Code と Microsoft Foundry Toolkit を使い、根拠に基づいて回答する Backer Concierge を 3 つのモジュールで構築します。" authors: diff --git a/docs/ja-jp/vscode/README.md b/docs/ja-jp/real-world-development/vscode/README.md similarity index 98% rename from docs/ja-jp/vscode/README.md rename to docs/ja-jp/real-world-development/vscode/README.md index 8783d480..bed5681a 100644 --- a/docs/ja-jp/vscode/README.md +++ b/docs/ja-jp/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: ja-jp/vscode +slug: ja-jp/real-world-development/vscode title: "VS Code" authors: - geektrainer diff --git a/docs/ko-kr/README.md b/docs/ko-kr/README.md index 2960a995..7aa0c15c 100644 --- a/docs/ko-kr/README.md +++ b/docs/ko-kr/README.md @@ -1,42 +1,43 @@ --- slug: ko-kr -title: "GitHub Copilot 에이전트 실습" +title: "GitHub Copilot 워크숍" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-28 --- -최근 GitHub Copilot에 추가된 기능은 소프트웨어 개발 수명 주기(SDLC) 전반에서 개발자에게 강력한 도구를 제공합니다. 여기에는 GitHub의 이슈 및 끌어오기 요청 작업, 외부 서비스와의 상호 작용, 그리고 코드 작성이 포함됩니다. 이 랩에서는 이러한 기능을 살펴보고, 실제 사용 사례와 도구를 최대한 활용하는 방법을 소개합니다. +학습 목표와 원하는 깊이에 따라 워크숍을 선택합니다. **첫 단계**에서는 GitHub Copilot을 따라 하며 익히고, **실제 개발**에서는 완성된 애플리케이션과 팀 백로그를 사용해 프로덕션 중심의 워크플로를 연습합니다. -> [!CAUTION] -> GitHub Copilot은 결정론적이 아니라 확률론적으로 작동하므로 정확한 코드와 변경되는 파일 등이 달라질 수 있습니다. 따라서 랩의 스크린샷 및 코드 조각과 실제 환경에서 약간의 차이가 나타날 수 있습니다. 이는 예상된 결과이며, 이러한 유형의 도구가 작동하는 방식에서 비롯됩니다. -> -> 무언가 제대로 작동하지 않거나 올바르게 실행되지 않는다면 멘토에게 문의하십시오! - -## 하네스(Harness) 선택 +## 첫 단계 -GitHub Copilot은 어떤 작업 환경에서든 함께할 수 있습니다. 원하는 개발 방식에 맞는 하네스를 선택하고, Tailspin Toys의 공통 백로그를 바탕으로 연습을 진행합니다. 각 하네스는 자체 설정 과정으로 시작하므로 원하는 하네스를 선택해 바로 시작할 수 있습니다. +기존 코드베이스 없이도 GitHub Copilot 제품의 주요 기능을 익힐 수 있는 집중형 가이드 환경으로 시작합니다. -### 🖥️ [VS Code](../vscode/) +### [GitHub Copilot 앱 둘러보기][first-steps-app] -**Visual Studio Code**와 GitHub Codespaces에서 GitHub Copilot을 사용합니다. 익숙한 편집기를 벗어나지 않고 Copilot Chat 에이전트 모드, MCP 서버, 사용자 지정 에이전트를 활용합니다. AI 지원을 IDE에 직접 통합하고 싶을 때 적합합니다. +빈 폴더에서 Space Quiz를 만들고 GitHub에 게시한 다음, 이슈 구현, Copilot 검토, 자동화 예약, Canvas 워크플로 탐색까지 진행합니다. -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot CLI 첫 단계][first-steps-cli] -**GitHub Copilot CLI**는 터미널에서 실행되는 에이전트형 도우미입니다. 이를 설치하고, MCP 서버를 연결하고, 계획 모드로 코드를 생성하고, 명령줄에서 직접 스킬, 사용자 지정 에이전트, 슬래시 명령을 만듭니다. +터미널에서 같은 Space Quiz를 만들고, diff를 검토하고, worktree에서 병렬 세션을 실행하고, 편집 전에 계획하며, 셸을 벗어나지 않고 끌어오기 요청을 만들고 병합하고 위임합니다. -### 🤖 [Copilot 앱](app/) +### [Visual Studio Code 첫 단계][first-steps-vscode] -**GitHub Copilot 앱**은 Copilot CLI를 기반으로 구축된 데스크톱 애플리케이션입니다. 여러 에이전트 세션을 병렬로 실행하고, 세션 모드를 전환하고, 캔버스에서 협업하고, GitHub 이슈와 끌어오기 요청을 기본 기능으로 관리합니다. 여기에는 끌어오기 요청의 리베이스, 검토 피드백, CI 수정, 병합 과정을 관리하는 **Agent Merge**도 포함됩니다. +VS Code에서 Space Quiz를 만들고, 통합 브라우저에서 테스트하고, 소스 제어로 게시하고, GitHub 도구로 이슈와 끌어오기 요청을 다루고, 클라우드 세션에 작업을 넘깁니다. -### ☁️ [Copilot 클라우드 에이전트](../cloud/) +## 실제 개발 -**Copilot 클라우드 에이전트**는 백그라운드에서 GitHub 이슈를 처리하는 비동기 동료 프로그래머입니다. 작업을 할당하고, 사용자 지정 에이전트로 작업 방향을 안내하고, 에이전트 대시보드에서 진행 상황을 모니터링하고, 에이전트가 생성한 끌어오기 요청을 검토합니다. +Tailspin Toys 애플리케이션과 백로그를 사용해 현실적인 소프트웨어 개발 수명 주기에서 GitHub Copilot을 연습합니다. 작업 환경을 선택한 다음 의미 있는 변경 사항을 계획하고, 빌드하고, 테스트하고, 검토하고, 제공합니다. -## 시나리오 +### [실제 개발 워크숍 찾아보기][real-world-development] -여러분은 개발자 테마의 보드게임 크라우드펀딩을 제공하는 가상 기업 Tailspin Toys에 새로 합류한 개발자입니다. 아주 큰 시장입니다! 팀의 백로그는 이미 GitHub 이슈로 등록되어 있어 바로 작업을 시작할 수 있습니다. 필터링 및 페이지 매김과 같은 기능 작업과 접근성 및 코딩 표준과 같은 품질 개선 작업이 함께 준비되어 있습니다. 사이트와 Copilot의 기능을 모두 살펴보면서 반복적으로 작업을 진행해 과제를 완료합니다. +GitHub Copilot CLI, GitHub Copilot 앱, GitHub Copilot 클라우드 에이전트 또는 Visual Studio Code 중에서 선택합니다. -## 시작하기 +> [!CAUTION] +> GitHub Copilot은 결정론적이 아니라 확률론적으로 작동하므로 정확한 코드와 변경되는 파일이 예제와 다를 수 있습니다. 약간의 차이는 예상된 결과입니다. +> +> 강사가 진행하는 워크숍에서 무언가 제대로 작동하지 않는다면 멘토에게 문의하십시오. -위에서 하네스를 선택해 시작합니다. 각 하네스는 개발을 시작하는 데 필요한 설정 과정으로 시작합니다. \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[first-steps-cli]: ../first-steps/copilot-cli/ +[first-steps-vscode]: ../first-steps/vscode/ +[real-world-development]: ../real-world-development/ diff --git a/docs/ko-kr/app/0-prerequisites.md b/docs/ko-kr/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/ko-kr/app/0-prerequisites.md rename to docs/ko-kr/real-world-development/app/0-prerequisites.md index 5296f49c..2ca5b069 100644 --- a/docs/ko-kr/app/0-prerequisites.md +++ b/docs/ko-kr/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Tailspin Toys 프로젝트의 복사본에서 작업합니다. 지금 [템플릿 1. 새 브라우저 창에서 이 실습의 GitHub 리포지토리인 `https://github.com/github-samples/tailspin-toys`로 이동합니다. 2. 실습 리포지토리 페이지에서 **Use this template** 버튼을 선택한 다음 **Create a new repository**를 선택하여 리포지토리 복사본을 만듭니다. - ![드롭다운에서 Create a new repository가 선택된 Use this template 버튼](../../_images/app-0-use-template.png) + ![드롭다운에서 Create a new repository가 선택된 Use this template 버튼](../../../_images/app-0-use-template.png) 3. GitHub 또는 Microsoft가 진행하는 이벤트에서 워크숍을 수행하는 경우 멘토가 제공한 지침을 따릅니다. 그렇지 않으면 GitHub Copilot에 접근할 수 있는 조직에 새 리포지토리를 만들 수 있습니다. - ![github-samples/tailspin-toys가 템플릿으로 설정되고 리포지토리 이름이 입력된 Create a new repository 양식](../../_images/app-0-create-repository.png) + ![github-samples/tailspin-toys가 템플릿으로 설정되고 리포지토리 이름이 입력된 Create a new repository 양식](../../../_images/app-0-create-repository.png) 4. 이 실습에서 나중에 참조할 수 있도록 만든 리포지토리 경로(**organization-or-user-name/repository-name**)를 기록합니다. diff --git a/docs/ko-kr/app/1-install-copilot-app.md b/docs/ko-kr/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/ko-kr/app/1-install-copilot-app.md rename to docs/ko-kr/real-world-development/app/1-install-copilot-app.md diff --git a/docs/ko-kr/app/2-add-star-rating.md b/docs/ko-kr/real-world-development/app/2-add-star-rating.md similarity index 98% rename from docs/ko-kr/app/2-add-star-rating.md rename to docs/ko-kr/real-world-development/app/2-add-star-rating.md index 1bb6fc6f..1203bd2a 100644 --- a/docs/ko-kr/app/2-add-star-rating.md +++ b/docs/ko-kr/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Tailspin Toys의 각 게임에는 별점이 있을 수 있으며, 별점은 이 2. **Home screen**을 선택합니다. 3. 리포지토리로 `tailspin-toys`가 선택되어 있는지 확인합니다. - ![리포지토리 선택기가 tailspin-toys로 설정되고 프롬프트 아래에 모델 선택기가 표시된 GitHub Copilot app 프롬프트 상자](../../_images/app-2-start-session.png) + ![리포지토리 선택기가 tailspin-toys로 설정되고 프롬프트 아래에 모델 선택기가 표시된 GitHub Copilot app 프롬프트 상자](../../../_images/app-2-start-session.png) 4. 다음 프롬프트를 사용하여 변경을 요청합니다. @@ -55,7 +55,7 @@ AI가 생성한 모든 변경 내용은 작더라도 병합하기 전에 검토 1. 앱 오른쪽 위에서 **Toggle review panel**을 선택합니다. Copilot이 적용한 보류 중인 모든 변경 내용을 보여 주는 diff 화면이 열립니다. - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../_images/app-2-review-panel.png) + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../../_images/app-2-review-panel.png) 2. 게임 세부 정보를 표시하는 핵심 파일인 `GameCard.astro`에 코드가 추가된 것을 확인합니다. 다음 코드와 비슷해야 합니다. 별점이 있으면 표시하고 `starRating`이 `null`이면 "No rating yet"으로 대체하는 작은 블록입니다. @@ -80,7 +80,7 @@ AI가 생성한 모든 변경 내용은 작더라도 병합하기 전에 검토 1. Copilot app 오른쪽의 검토 패널에서 **Terminal**을 선택합니다. **Terminal** 버튼이 없으면 **+**(**Open in panel** 레이블)를 선택한 다음 **Terminal**을 선택합니다. - ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../../_images/app-terminal-screenshot.png) 2. 터미널 창에 다음 명령을 입력하여 웹앱의 개발 서버를 시작합니다. diff --git a/docs/ko-kr/app/3-custom-instructions.md b/docs/ko-kr/real-world-development/app/3-custom-instructions.md similarity index 98% rename from docs/ko-kr/app/3-custom-instructions.md rename to docs/ko-kr/real-world-development/app/3-custom-instructions.md index a8dad33c..77ece63b 100644 --- a/docs/ko-kr/app/3-custom-instructions.md +++ b/docs/ko-kr/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ AI를 사용하는 방식이 하나로 정해져 있지 않듯 지침 파일을 1. 검토 패널이 표시되지 않으면 오른쪽 위의 **Toggle review panel**을 선택하여 엽니다. - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../_images/app-2-review-panel.png) + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../../_images/app-2-review-panel.png) 2. 검토 패널에 새 항목을 추가하려면 **+**를 선택합니다. 3. **File**을 선택합니다. @@ -66,7 +66,7 @@ AI를 사용하는 방식이 하나로 정해져 있지 않듯 지침 파일을 6. 파일을 살펴봅니다. 프로젝트에 관한 간단한 설명과 **Agent notes**, **Code standards**, **Scripts**, **Repository Structure** 같은 섹션을 확인합니다. **Code standards** 아래에서 중첩된 **GitHub Actions Workflows** 지침을 확인합니다. 이 내용은 Copilot과의 모든 상호 작용에 적용됩니다. 7. 폴더 탐색기를 열려면 **Show folder view**를 선택합니다. - ![GitHub Copilot app에서 파일이 열린 검토 패널의 Show folder view 버튼](../../_images/app-show-folder-view.png) + ![GitHub Copilot app에서 파일이 열린 검토 패널의 Show folder view 버튼](../../../_images/app-show-folder-view.png) 8. `.github/instructions` 폴더로 이동하여 파일을 살펴봅니다. Astro 파일, Drizzle 데이터 계층, 테스트 등에 관한 지침이 있습니다. 9. `.github/instructions/unit-tests.instructions.md`를 엽니다. 위쪽의 `applyTo` 필드는 지침이 적용되는 파일을 결정하는 glob을 리포지토리 루트 기준으로 설정합니다. 여기서는 TypeScript 테스트 파일(예: `**/*.test.ts`와 일치하는 파일)이 모두 일치합니다. @@ -87,7 +87,7 @@ AI를 사용하는 방식이 하나로 정해져 있지 않듯 지침 파일을 2. **Update our repository coding standards** 이슈를 선택하여 엽니다. 3. 오른쪽 위의 **New session**을 선택하여 이슈를 바탕으로 새 세션을 시작합니다. - ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../_images/app-new-session-from-issue.png) + ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../../_images/app-new-session-from-issue.png) 4. 다음 프롬프트를 사용하여 이슈에 문서화된 요구 사항에 맞게 지침 파일을 업데이트하도록 Copilot에 요청합니다. @@ -103,7 +103,7 @@ Copilot이 적용한 업데이트를 읽고, 업데이트된 지침을 바탕으 1. 오른쪽 위의 **Changes**를 선택하여 코드 변경 내용을 엽니다. - ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../_images/app-select-changes.png) + ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../../_images/app-select-changes.png) 2. 업데이트된 지침 파일을 검토합니다. 코드에 문서와 주석을 추가하는 지침이 있는지 확인합니다. diff --git a/docs/ko-kr/app/4-build-filtering.md b/docs/ko-kr/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/ko-kr/app/4-build-filtering.md rename to docs/ko-kr/real-world-development/app/4-build-filtering.md index 1bf692d4..a8fcc3eb 100644 --- a/docs/ko-kr/app/4-build-filtering.md +++ b/docs/ko-kr/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ AI 코딩 에이전트를 개발 흐름에 도입해도 기본 원칙은 달라 2. **Allow users to filter games by category and publisher** 이슈를 선택합니다. 3. 오른쪽 위의 **New session**을 선택합니다. - ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../_images/app-new-session-from-issue.png) + ![오른쪽 위의 New session 버튼을 화살표로 가리키는 GitHub Copilot app 이슈 보기](../../../_images/app-new-session-from-issue.png) 4. 모드에 **Plan**이 표시될 때까지 Shift+Tab을 선택합니다. - ![Plan으로 설정된 모드 선택기를 화살표로 가리키는 GitHub Copilot app 프롬프트 상자](../../_images/app-4-plan-mode.png) + ![Plan으로 설정된 모드 선택기를 화살표로 가리키는 GitHub Copilot app 프롬프트 상자](../../../_images/app-4-plan-mode.png) 5. 다음 프롬프트를 보냅니다. 이슈에서 세션을 시작했으므로 필터링 이슈는 이미 세션의 컨텍스트에 있습니다. @@ -92,12 +92,12 @@ AI가 생성한 모든 코드는 병합 전에 검토해야 합니다. 코드를 1. 오른쪽 위의 **Changes**를 선택하여 코드 변경 내용을 엽니다. - ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../_images/app-select-changes.png) + ![Changes 탭을 화살표로 가리키는 GitHub Copilot app 세션 패널 탭](../../../_images/app-select-changes.png) 2. 변경 내용을 검토합니다. 새 TypeScript, Astro, 테스트 파일이 표시되어야 합니다. 새 도우미 함수에 TSDoc doc comments와 파일 헤더 주석이 있는지 확인합니다. 레슨 3에서 병합한 문서화 표준이 요청 없이 자동으로 적용된 것입니다. 3. Copilot app 오른쪽의 검토 패널에서 **Terminal**을 선택합니다. **Terminal** 버튼이 없으면 **+**(**Open in panel** 레이블)를 선택한 다음 **Terminal**을 선택합니다. - ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 검토 패널의 Terminal 버튼](../../../_images/app-terminal-screenshot.png) 4. 터미널 창에 다음 명령을 입력하여 웹앱의 개발 서버를 시작합니다. @@ -138,7 +138,7 @@ description: Run the project's test suites and linter to verify code changes are 1. 검토 패널이 표시되지 않으면 오른쪽 위의 **Toggle review panel**을 선택하여 엽니다. - ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../_images/app-2-review-panel.png) + ![Create PR 오른쪽의 Toggle review panel 버튼을 화살표로 가리키는 GitHub Copilot app 위쪽 도구 모음](../../../_images/app-2-review-panel.png) 2. 검토 패널에 새 항목을 추가하려면 **+**를 선택합니다. 3. **File**을 선택합니다. diff --git a/docs/ko-kr/app/5-mcp-playwright.md b/docs/ko-kr/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/ko-kr/app/5-mcp-playwright.md rename to docs/ko-kr/real-world-development/app/5-mcp-playwright.md index 40a21566..41d4a60d 100644 --- a/docs/ko-kr/app/5-mcp-playwright.md +++ b/docs/ko-kr/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ lastUpdated: 2026-07-09 앱 설정에서 MCP 서버를 추가하고 관리합니다. 앱에는 인기 서버 카탈로그가 포함되어 있으므로 몇 번의 선택만으로 [Playwright MCP 서버][playwright-mcp-server]를 추가할 수 있습니다. -1. Ctrl+,를 선택하여 Copilot app 설정 페이지를 엽니다. +1. Command+,(Mac) 또는 Ctrl+,(Windows/Linux)를 눌러 Copilot app 설정 페이지를 엽니다. 2. **MCP servers**를 선택합니다. 3. 검색 대화 상자에 `Playwright`를 입력합니다. 4. **Popular MCP servers** 목록에서 **Playwright**를 선택합니다. diff --git a/docs/ko-kr/app/6-agent-merge.md b/docs/ko-kr/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/ko-kr/app/6-agent-merge.md rename to docs/ko-kr/real-world-development/app/6-agent-merge.md index f29b33ed..93dd59ff 100644 --- a/docs/ko-kr/app/6-agent-merge.md +++ b/docs/ko-kr/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ lastUpdated: 2026-07-09 2. 오른쪽 위에서 **Create PR** 옆의 드롭다운을 선택합니다. 3. **Agent merge**를 선택하여 Agent Merge를 활성화합니다. - ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../_images/app-enable-agent-merge.png) + ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../../_images/app-enable-agent-merge.png) 4. 이제 버튼 텍스트가 **Agent merge**로 바뀝니다. 5. **Agent merge** 버튼을 선택하여 Agent Merge 프로세스를 시작합니다. @@ -43,7 +43,7 @@ Copilot app이 PR을 만들고 관리하는 프로세스를 시작합니다. 먼 6. **Agent merge** 옆의 드롭다운을 선택한 다음 **Merge pull request**를 선택하여 Agent Merge가 끌어오기 요청을 병합하도록 허용합니다. - ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../_images/app-agent-merge-merge.png) + ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../../_images/app-agent-merge-merge.png) 7. 모든 CI 프로세스가 통과하면, 즉 테스트가 성공하면 Copilot이 끌어오기 요청을 병합합니다. diff --git a/docs/ko-kr/app/7-canvases.md b/docs/ko-kr/real-world-development/app/7-canvases.md similarity index 97% rename from docs/ko-kr/app/7-canvases.md rename to docs/ko-kr/real-world-development/app/7-canvases.md index 599052db..2be4dd22 100644 --- a/docs/ko-kr/app/7-canvases.md +++ b/docs/ko-kr/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/ko-kr/app/9-review/ + link: /copilot-workshops/ko-kr/real-world-development/app/9-review/ label: "검토 및 다음 단계" --- @@ -73,7 +73,7 @@ Copilot이 캔버스를 만들기 시작합니다. 2. Copilot이 캔버스 파일을 저장하면 오른쪽 위에서 **Create PR** 옆의 드롭다운을 선택합니다. 3. **Agent merge**를 선택하여 Agent Merge를 활성화합니다. - ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../_images/app-enable-agent-merge.png) + ![Agent merge 옵션을 화살표로 가리키는 펼쳐진 GitHub Copilot app Create PR 드롭다운](../../../_images/app-enable-agent-merge.png) 4. 이제 버튼 텍스트가 **Agent merge**로 바뀝니다. 5. **Agent merge** 버튼을 선택하여 Agent Merge 프로세스를 시작합니다. @@ -84,7 +84,7 @@ Copilot app이 PR을 만들고 관리하는 프로세스를 시작합니다. 먼 6. **Agent merge** 옆의 드롭다운을 선택한 다음 **Merge pull request**를 선택하여 Agent Merge가 끌어오기 요청을 병합하도록 허용합니다. - ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../_images/app-agent-merge-merge.png) + ![에이전트에 허용된 작업인 Address reviews, Fix CI failures, Resolve conflicts와 화살표로 강조된 Merge pull request를 보여 주는 Agent merge 드롭다운](../../../_images/app-agent-merge-merge.png) 7. 모든 CI 프로세스가 통과할 때까지 기다립니다. 모두 통과하면 Copilot이 끌어오기 요청을 자동으로 병합합니다. diff --git a/docs/ko-kr/app/8-foundry-canvas/1-project-and-model.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 93% rename from docs/ko-kr/app/8-foundry-canvas/1-project-and-model.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 7ef87d0c..6812143f 100644 --- a/docs/ko-kr/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/ label: "선택 사항: Foundry 통합" next: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 에이전트 빌드 및 배포 --- @@ -33,7 +33,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 3. [Azure Developer CLI][install-azd]를 설치한 다음 `azd version`으로 1.27.1 이상 버전이 설치되었는지 확인합니다. 4. GitHub Copilot app에서 **Customize**를 연 다음 **Plugins**를 선택합니다. `microsoft-foundry`를 검색하고 Canvas와 Foundry 스킬이 포함된 Microsoft Foundry 플러그인의 **Install**을 선택합니다. - ![Microsoft Foundry 플러그인 설치](../../../_images/app-8-install-foundry-plugin.png) + ![Microsoft Foundry 플러그인 설치](../../../../_images/app-8-install-foundry-plugin.png) 5. **Customize**에서 **Plugins**를 선택하고 `azure`를 검색하거나 **Featured** 목록에서 선택한 다음, Azure 플러그인의 **Install**을 선택합니다. 6. **My work** 탭에서 Tailspin Toys 리포지토리의 **Add a Backer Concierge assistant for catalog questions** 이슈를 찾아 엽니다. **New session**을 선택하여 새 워크트리(Worktree)에서 이슈에 연결된 세션을 시작합니다. 세 모듈 모두에서 이 리포지토리, 워크트리 브랜치, 이슈 세션을 유지합니다. @@ -57,11 +57,11 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 npm run db:export ``` - ![카탈로그 내보내기 파일 생성](../../../_images/app-8-generate-catalog-export.png) + ![카탈로그 내보내기 파일 생성](../../../../_images/app-8-generate-catalog-export.png) 10. `db/catalog.json`을 열고 제목, 설명, 카테고리, 퍼블리셔, 별점을 포함한 게임 21개가 있는지 확인합니다. `note` 필드를 확인합니다. 카탈로그에는 펀딩 총액, 후원자 수, 후원 등급, 출시일이 없습니다. 가격, 플레이어 수, 플레이 시간도 누락되어 있다면 외부 지식으로 채우지 말고 제공되지 않는 정보로 취급합니다. 내보내기가 실패하거나 내용이 다르면 계속하기 전에 Copilot에 원인을 조사하고 다시 실행하도록 요청합니다. - ![Copilot app에서 연 카탈로그 내보내기 파일](../../../_images/app-8-view-catalog.png) + ![Copilot app에서 연 카탈로그 내보내기 파일](../../../../_images/app-8-view-catalog.png) ## Foundry 프로젝트와 모델 설정 @@ -95,7 +95,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Foundry 프로젝트 생성](../../../_images/app-8-foundry-project-created.png) + ![Foundry 프로젝트 생성](../../../../_images/app-8-foundry-project-created.png) 14. Copilot에 모델을 추천하도록 요청합니다. 이슈에서 시작한 세션이므로 이슈의 승인 기준이 이미 컨텍스트에 포함되어 있습니다. @@ -105,7 +105,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 15. Copilot이 `microsoft-foundry` 스킬을 로드하는지 확인한 다음, 장단점을 고려하여 사용 가능한 모델을 선택합니다. Microsoft Foundry 호스팅 에이전트 빠른 시작에서는 현재 `gpt-5.4-mini`를 사용하지만, 가용성과 할당량은 지역에 따라 다릅니다. - ![모델 선택](../../../_images/app-8-select-model.png) + ![모델 선택](../../../../_images/app-8-select-model.png) 16. Copilot에 선택한 모델을 배포하도록 요청하고, 승인하기 전에 대상 프로젝트와 비용을 검토합니다. @@ -124,7 +124,7 @@ Tailspin Toys 후원자는 카테고리와 퍼블리셔로 게임을 필터링 18. Canvas 오른쪽 위의 **More options** 메뉴를 연 다음 **Sign in**을 선택합니다. 19. **tailspin-toys** Foundry 프로젝트를 선택합니다. **Models**를 펼치고 배포가 예상한 이름과 상태로 표시되는지 확인합니다. - ![Canvas에서 프로젝트와 모델 검증](../../../_images/app-8-validate-project-model.png) + ![Canvas에서 프로젝트와 모델 검증](../../../../_images/app-8-validate-project-model.png) 20. 동일한 세션에 다음 프롬프트를 입력합니다. diff --git a/docs/ko-kr/app/8-foundry-canvas/2-build-and-deploy.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 96% rename from docs/ko-kr/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index 8c14d4e4..14816142 100644 --- a/docs/ko-kr/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 프로젝트와 모델 준비 next: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: 에이전트를 사이트에 연결 --- @@ -49,7 +49,7 @@ Canvas는 Backer Concierge를 기존 모델 배포에 연결하는 코드, 폴 Canvas는 프롬프트와 현재 구독 및 Foundry 프로젝트 컨텍스트를 Copilot에 전달합니다. Agent Framework + Responses API 샘플을 검색하며, **Agent with Local Tools (Responses, Agent Framework, Python)** 같은 선택 항목이 나타날 수 있습니다. - ![Canvas에서 Backer Concierge 에이전트 기본 구조 생성](../../../_images/app-8-scaffold-backer-concierge.png) + ![Canvas에서 Backer Concierge 에이전트 기본 구조 생성](../../../../_images/app-8-scaffold-backer-concierge.png) 5. **Files** 탭에서 다음 체크포인트를 기준으로 Copilot의 변경 내용을 검토합니다. `src` 안에 생성된 파일 이름은 다를 수 있지만 프로젝트 경계와 `azure.yaml` 위치는 일치해야 합니다. @@ -90,7 +90,7 @@ Canvas는 Backer Concierge를 기존 모델 배포에 연결하는 코드, 폴 예상 결과: 카탈로그에 실제로 존재하는 게임만 언급하고 각 게임에 대해 올바른 정보를 사용합니다. - ![Agent Inspector에서 카탈로그에 근거한 추천](../../../_images/app-8-grounded-recommendation.png) + ![Agent Inspector에서 카탈로그에 근거한 추천](../../../../_images/app-8-grounded-recommendation.png) 10. **환각(Hallucination) 유도 질문**을 테스트합니다. @@ -144,7 +144,7 @@ Canvas는 `azd`로 테스트를 마친 에이전트를 배포합니다. Foundry 16. Canvas의 **Deploy and test**에서 **Deploy to Foundry**를 선택합니다. 채팅에 삽입된 프롬프트를 검토합니다. - ![Canvas의 Deploy to Foundry 프롬프트](../../../_images/app-8-deploy-to-foundry.png) + ![Canvas의 Deploy to Foundry 프롬프트](../../../../_images/app-8-deploy-to-foundry.png) 17. 배포 확인 메시지, 에이전트 버전, 상태, Foundry 에이전트 플레이그라운드(Playground) 링크를 확인합니다. 배포에 실패하면 오류를 Copilot에 전달하고 동일한 프로젝트에서 문제를 해결한 다음 Canvas를 통해 다시 시도합니다. 18. Canvas에서 **Test in Foundry Portal**을 선택하여 배포된 에이전트 플레이그라운드를 엽니다. 이 배포 버전에 대해 9~14단계의 승인 검사 여섯 가지를 모두 다시 실행합니다. 연속성을 확인하는 두 프롬프트는 하나의 대화에서 유지합니다. 응답을 카탈로그와 비교합니다. 실패한 검사가 있으면 Copilot에 수정하도록 요청하고 로컬 테스트를 다시 실행한 다음, Canvas로 다시 배포하고 호스팅 버전을 다시 테스트합니다. diff --git a/docs/ko-kr/app/8-foundry-canvas/3-connect-to-site.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/ko-kr/app/8-foundry-canvas/3-connect-to-site.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index e30472f8..47ef4b36 100644 --- a/docs/ko-kr/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 에이전트 빌드 및 배포 next: - link: /copilot-workshops/ko-kr/app/9-review/ + link: /copilot-workshops/ko-kr/real-world-development/app/9-review/ label: 검토 및 다음 단계 --- @@ -56,7 +56,7 @@ Azure 자격 증명에 액세스할 수 있는 코드는 프록시뿐입니다. 7. 응답을 검사합니다. 카탈로그에 가격 정보가 없음을 설명해야 합니다. Foundry 토큰, 자격 증명, 내부 대화 식별자, 프로젝트 엔드포인트, 스택 추적이 포함되어 있지 않은지 확인합니다. Function에 연결할 수 없거나 응답이 세부 정보를 유출하거나 가격을 지어내면, 민감한 정보를 제거한 실패 내용을 Copilot에 전달하고 수정한 다음, 계속하기 전에 프록시 테스트를 다시 실행합니다. - ![로컬 프록시 테스트](../../../_images/app-8-local-proxy-test.png) + ![로컬 프록시 테스트](../../../../_images/app-8-local-proxy-test.png) ## 채팅 위젯 빌드 및 테스트 @@ -77,7 +77,7 @@ Azure 자격 증명에 액세스할 수 있는 코드는 프록시뿐입니다. 11. 보고서를 검토하고 키보드 사용과 [호스팅 에이전트 승인 검사][agent-checks]의 두 턴 대화를 포함하여 보고된 동작을 브라우저에서 검증합니다. 브라우저 요청이 Foundry로 직접 전송되지 않고 불투명한 핸들과 함께 `/api/concierge`를 거치는지, 응답에 자격 증명이나 내부 Foundry 식별자가 노출되지 않는지 확인합니다. 추천과 누락된 정보에 대한 답변이 카탈로그 범위 안에 머무르는지 확인합니다. 실패한 테스트를 Copilot과 함께 해결하고 필요한 경우 영향을 받는 로컬 서비스를 다시 시작한 다음 테스트를 다시 실행합니다. - ![Backer Concierge 위젯의 엔드투엔드 테스트 결과](../../../_images/app-8-e2e-test-results.png) + ![Backer Concierge 위젯의 엔드투엔드 테스트 결과](../../../../_images/app-8-e2e-test-results.png) ## 체크포인트 및 다음 단계 diff --git a/docs/ko-kr/app/8-foundry-canvas/README.md b/docs/ko-kr/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/ko-kr/app/8-foundry-canvas/README.md rename to docs/ko-kr/real-world-development/app/8-foundry-canvas/README.md index ee90a70b..5d268bdf 100644 --- a/docs/ko-kr/app/8-foundry-canvas/README.md +++ b/docs/ko-kr/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "선택 사항: Foundry 통합" -slug: ko-kr/app/8-foundry-canvas +slug: ko-kr/real-world-development/app/8-foundry-canvas description: "Microsoft Foundry Canvas로 카탈로그에 근거한 Backer Concierge를 구축하고, 각 단계에서 안전하게 작업을 마치는 방법을 알아봅니다." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/ko-kr/app/9-review/ + link: /copilot-workshops/ko-kr/real-world-development/app/9-review/ label: 검토 및 다음 단계 next: - link: /copilot-workshops/ko-kr/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/ko-kr/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 프로젝트와 모델 준비 --- diff --git a/docs/ko-kr/app/9-review.md b/docs/ko-kr/real-world-development/app/9-review.md similarity index 100% rename from docs/ko-kr/app/9-review.md rename to docs/ko-kr/real-world-development/app/9-review.md diff --git a/docs/ko-kr/app/README.md b/docs/ko-kr/real-world-development/app/README.md similarity index 99% rename from docs/ko-kr/app/README.md rename to docs/ko-kr/real-world-development/app/README.md index f8b5a50a..0e2a00b4 100644 --- a/docs/ko-kr/app/README.md +++ b/docs/ko-kr/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/app +slug: ko-kr/real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/ko-kr/cli/0-prerequisites.md b/docs/ko-kr/real-world-development/cli/0-prerequisites.md similarity index 93% rename from docs/ko-kr/cli/0-prerequisites.md rename to docs/ko-kr/real-world-development/cli/0-prerequisites.md index 555bd1cd..a51eff7a 100644 --- a/docs/ko-kr/cli/0-prerequisites.md +++ b/docs/ko-kr/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Copilot CLI 연습을 시작하기 전에 모든 것을 준비해야 합니다. 1. 새 브라우저 창에서 이 실습의 GitHub 리포지토리로 이동합니다: `https://github.com/github-samples/tailspin-toys`. 2. 실습용 리포지토리 페이지에서 **Use this template** 버튼을 선택해 리포지토리 복사본을 만듭니다. 그런 다음 **Create a new repository**를 선택합니다. - ![Use this template 버튼](../../_images/ex0-use-template.png) + ![Use this template 버튼](../../../_images/ex0-use-template.png) 3. GitHub 또는 Microsoft가 진행하는 행사에서 이 워크숍을 수행하는 경우에는 멘토가 제공하는 안내를 따릅니다. 그렇지 않다면 GitHub Copilot에 액세스할 수 있는 조직에 새 리포지토리를 만들어도 됩니다. - ![리포지토리 템플릿 설정 입력 화면](../../_images/ex0-repository-settings.png) + ![리포지토리 템플릿 설정 입력 화면](../../../_images/ex0-repository-settings.png) 4. 이후 실습에서 참조할 수 있도록 생성한 리포지토리 경로(**organization-or-user-name/repository-name**)를 기록해 둡니다. @@ -36,11 +36,11 @@ Copilot CLI 연습을 시작하기 전에 모든 것을 준비해야 합니다. 1. 방금 만든 리포지토리로 이동합니다. 2. 초록색 **Code** 버튼을 선택합니다. - ![Code 버튼 선택 화면](../../_images/ex0-code-button.png) + ![Code 버튼 선택 화면](../../../_images/ex0-code-button.png) 3. **Codespaces** 탭을 선택한 다음 **+** 버튼을 선택해 새 Codespace를 만듭니다. - ![새 codespace 만들기](../../_images/ex0-create-codespace.png) + ![새 codespace 만들기](../../../_images/ex0-create-codespace.png) 코드스페이스를 만드는 데는 몇 분 정도 걸리지만, 모든 서비스를 수동으로 설치하는 것보다 훨씬 빠릅니다. 기다리는 동안에는 GitHub Copilot의 다른 기능을 살펴볼 수 있으며, 다음 단계에서 그 부분을 이어서 알아봅니다. diff --git a/docs/ko-kr/cli/1-install-copilot-cli.md b/docs/ko-kr/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/ko-kr/cli/1-install-copilot-cli.md rename to docs/ko-kr/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/ko-kr/cli/2-custom-instructions.md b/docs/ko-kr/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/ko-kr/cli/2-custom-instructions.md rename to docs/ko-kr/real-world-development/cli/2-custom-instructions.md diff --git a/docs/ko-kr/cli/3-generating-code.md b/docs/ko-kr/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/ko-kr/cli/3-generating-code.md rename to docs/ko-kr/real-world-development/cli/3-generating-code.md diff --git a/docs/ko-kr/cli/4-mcp.md b/docs/ko-kr/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/ko-kr/cli/4-mcp.md rename to docs/ko-kr/real-world-development/cli/4-mcp.md diff --git a/docs/ko-kr/cli/5-agent-skills.md b/docs/ko-kr/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/ko-kr/cli/5-agent-skills.md rename to docs/ko-kr/real-world-development/cli/5-agent-skills.md diff --git a/docs/ko-kr/cli/6-custom-agents.md b/docs/ko-kr/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/ko-kr/cli/6-custom-agents.md rename to docs/ko-kr/real-world-development/cli/6-custom-agents.md diff --git a/docs/ko-kr/cli/7-slash-commands.md b/docs/ko-kr/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/ko-kr/cli/7-slash-commands.md rename to docs/ko-kr/real-world-development/cli/7-slash-commands.md index 377a0f0a..ce75d611 100644 --- a/docs/ko-kr/cli/7-slash-commands.md +++ b/docs/ko-kr/real-world-development/cli/7-slash-commands.md @@ -65,7 +65,7 @@ AI 도구를 포함해 어떤 도구든 잘 활용하는 것은 하나의 기술 2. 잠시 후 Copilot CLI가 현재 컨텍스트를 시각적으로 표현한 결과를 생성합니다. - ![Copilot CLI의 context window 화면](../../_images/cli-7-context-window.png) + ![Copilot CLI의 context window 화면](../../../_images/cli-7-context-window.png) 3. 표시된 모델(이미지와 다를 수 있음)과 현재 사용된 token 비율을 확인합니다. 나머지 정보는 다음을 보여 줍니다. diff --git a/docs/ko-kr/cli/8-foundry-agent/1-project-and-model.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/ko-kr/cli/8-foundry-agent/1-project-and-model.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 04107bd3..99e9459e 100644 --- a/docs/ko-kr/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ Azure를 사용해 Backer Concierge를 호스팅하고 Copilot CLI로 작업을 npm run db:export ``` - ![카탈로그 내보내기 요약](../../../_images/cli-8-export-db-catalog.png) + ![카탈로그 내보내기 요약](../../../../_images/cli-8-export-db-catalog.png) 2. `db/catalog.json`을 엽니다. 제목, 설명, 카테고리, 퍼블리셔, 별점이 있는 게임 21개가 포함되어 있는지 확인합니다. `note` 필드에는 카탈로그에 총 모금액, 후원자 수, 후원 등급, 출시일이 없다고 명시되어 있습니다. 가격, 플레이어 수, 플레이 시간 필드도 없습니다. 이러한 누락 항목이 에이전트가 지켜야 할 정보의 경계를 정의합니다. @@ -129,7 +129,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![공개 Foundry 프로젝트 생성하기](../../../_images/cli-8-create-foundry-project.png) + ![공개 Foundry 프로젝트 생성하기](../../../../_images/cli-8-create-foundry-project.png) 2. 프로젝트가 준비되면 Copilot에 모델 추천을 요청합니다. @@ -139,7 +139,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Copilot이 추천 옵션 중에서 모델을 선택하도록 요청할 수 있습니다. - ![추천 옵션 중에서 모델 선택하기](../../../_images/cli-8-select-foundry-model.png) + ![추천 옵션 중에서 모델 선택하기](../../../../_images/cli-8-select-foundry-model.png) 나머지 단계에서는 `gpt-5.4-mini`를 사용하지만, 가용성과 할당량은 지역에 따라 다릅니다. @@ -149,7 +149,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![선택한 모델 배포하기](../../../_images/cli-8-deploy-foundry-model.png) + ![선택한 모델 배포하기](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > 모델 가용성은 시간이 지남에 따라 달라집니다. 예제에 하드코딩된 모델이 아니라, Copilot이 프로젝트에서 사용할 수 있다고 확인한 모델을 선택하는 것이 올바른 방법입니다. @@ -198,7 +198,7 @@ Copilot이 Azure 리소스를 만들거나 에이전트 코드를 추가하기 Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![실제 카탈로그 게임을 추천하고 모금 데이터가 없다고 안내하는 Foundry 모델 응답](../../../_images/cli-8-foundry-agent-response.png) + ![실제 카탈로그 게임을 추천하고 모금 데이터가 없다고 안내하는 Foundry 모델 응답](../../../../_images/cli-8-foundry-agent-response.png) 5. 응답을 검토합니다. 카탈로그에 실제로 있는 게임만 추천하고, 올바른 카탈로그 정보를 사용하며, 모금 정보를 확인할 수 없다고 설명해야 합니다. 모델이 제목, 게임 정보, 총 모금액을 지어낸다면 계속 진행하기 전에 다른 추천 모델과 비교합니다. diff --git a/docs/ko-kr/cli/8-foundry-agent/2-build-and-deploy.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 98% rename from docs/ko-kr/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index 94074d34..a2427931 100644 --- a/docs/ko-kr/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Tailspin Toys에는 모델의 일회성 답변 이상이 필요합니다. 후원 해당 테스트를 통과하기 전에는 다음으로 진행하지 않습니다. - ![에이전트 스캐폴딩 검증하기](../../../_images/cli-8-verify-generated-agent.png) + ![에이전트 스캐폴딩 검증하기](../../../../_images/cli-8-verify-generated-agent.png) ## 에이전트 로컬 테스트하기 @@ -113,7 +113,7 @@ Tailspin Toys에는 모델의 일회성 답변 이상이 필요합니다. 후원 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![호스트된 에이전트 배포 테스트 통과](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![호스트된 에이전트 배포 테스트 통과](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. 결과를 검토합니다. 에이전트에 연결할 수 없다면 두 번째 터미널에서 서비스가 계속 실행 중인지 확인합니다. 테스트가 실패하면 Copilot에 로컬 결함만 수정하고, 관련 기능에 집중한 테스트를 실행한 뒤 `azd ai agent run`을 언제 다시 시작해야 하는지 알려 달라고 요청합니다. 변경할 때마다 서비스를 다시 시작하고 실패한 인수 테스트(Acceptance test)를 다시 실행합니다. @@ -130,7 +130,7 @@ Tailspin Toys에는 모델의 일회성 답변 이상이 필요합니다. 후원 3. 평가 모음 소스를 선택하라는 메시지가 표시되면 **No, set it up later**를 선택합니다. - ![호스트된 에이전트 배포 상태와 플레이그라운드 링크](../../../_images/cli-8-hosted-agent-deployment.png) + ![호스트된 에이전트 배포 상태와 플레이그라운드 링크](../../../../_images/cli-8-hosted-agent-deployment.png) 4. 배포 상태와 원격 응답을 검토합니다. 에이전트가 실행 중이고 실제 카탈로그 게임만 추천하는지 확인합니다. 배포나 호출이 실패하면 계속 진행하기 전에 Copilot에 실패 원인을 진단하고 원격 테스트를 반복하도록 요청합니다. diff --git a/docs/ko-kr/cli/8-foundry-agent/3-connect-to-site.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 96% rename from docs/ko-kr/cli/8-foundry-agent/3-connect-to-site.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 680be62b..cb8dbee3 100644 --- a/docs/ko-kr/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ Tailspin Toys는 전체를 사전 렌더링합니다. 브라우저 코드는 호 For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions 로컬 프록시 설정](../../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions 로컬 프록시 설정](../../../../_images/cli-8-azure-functions-proxy.png) 2. 다른 터미널을 열고 Copilot이 제공한 명령으로 로컬 Function을 시작합니다. Function을 실행 상태로 둡니다. 3. Copilot CLI로 돌아가 로컬 프록시 테스트를 요청합니다. @@ -54,7 +54,7 @@ Tailspin Toys는 전체를 사전 렌더링합니다. 브라우저 코드는 호 4. 응답을 살펴봅니다. 카탈로그에 가격 정보가 없다고 설명해야 합니다. Foundry 토큰, 자격 증명, 프로젝트 엔드포인트, 원본 Foundry 대화 식별자, 스택 추적이 포함되어서는 안 됩니다. - ![로컬 컨시어지 엔드포인트에서 받은 민감 정보를 제거한 JSON 응답](../../../_images/cli-8-sanitized-json-response.png) + ![로컬 컨시어지 엔드포인트에서 받은 민감 정보를 제거한 JSON 응답](../../../../_images/cli-8-sanitized-json-response.png) ## 채팅 위젯 빌드하기 @@ -73,7 +73,7 @@ Tailspin Toys는 전체를 사전 렌더링합니다. 브라우저 코드는 호 Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Tailspin Toys 사이트의 Backer Concierge 위젯 화면](../../../_images/cli-8-backer-concierge-widget.png) + ![Tailspin Toys 사이트의 Backer Concierge 위젯 화면](../../../../_images/cli-8-backer-concierge-widget.png) 4. 보고된 증거와 결과를 대조해 검토합니다. 실패한 검사가 있다면 마무리하기 전에 Copilot에 해당 프록시나 위젯 동작을 수정하고 실패한 검사를 다시 실행하도록 요청합니다. diff --git a/docs/ko-kr/cli/8-foundry-agent/README.md b/docs/ko-kr/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/ko-kr/cli/8-foundry-agent/README.md rename to docs/ko-kr/real-world-development/cli/8-foundry-agent/README.md index dabcd467..330e65df 100644 --- a/docs/ko-kr/cli/8-foundry-agent/README.md +++ b/docs/ko-kr/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/cli/8-foundry-agent +slug: ko-kr/real-world-development/cli/8-foundry-agent title: "선택 사항: Foundry 통합하기" description: "모델을 준비하고, 카탈로그에 근거한 에이전트를 빌드 및 배포한 뒤 Tailspin Toys에 연결하는 3개 모듈 시리즈입니다." authors: diff --git a/docs/ko-kr/cli/9-review.md b/docs/ko-kr/real-world-development/cli/9-review.md similarity index 100% rename from docs/ko-kr/cli/9-review.md rename to docs/ko-kr/real-world-development/cli/9-review.md diff --git a/docs/ko-kr/cli/README.md b/docs/ko-kr/real-world-development/cli/README.md similarity index 98% rename from docs/ko-kr/cli/README.md rename to docs/ko-kr/real-world-development/cli/README.md index d054b04a..198ff574 100644 --- a/docs/ko-kr/cli/README.md +++ b/docs/ko-kr/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/cli +slug: ko-kr/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/ko-kr/vscode/6-iterating.md b/docs/ko-kr/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/ko-kr/vscode/6-iterating.md rename to docs/ko-kr/real-world-development/vscode/6-iterating.md index c05c9a7e..2fc8d5f5 100644 --- a/docs/ko-kr/vscode/6-iterating.md +++ b/docs/ko-kr/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ next: false 9. **Conversation** 탭으로 돌아갑니다. 10. 승인을 기다리는 워크플로가 있다면 **Approve and run workflows**를 선택합니다. - ![워크플로 승인 및 실행](../../_images/shared-approve-workflows.png) + ![워크플로 승인 및 실행](../../../_images/shared-approve-workflows.png) 11. 워크플로가 완료될 때까지 기다립니다. 문제가 없다면 통과한 결과가 표시됩니다. > [!TIP] diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 99% rename from docs/ko-kr/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 18073680..b4f8d9de 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ Tailspin 후원자는 신뢰할 수 있는 추천을 원합니다. 퍼즐 게임 1. 작업 표시줄에서 **Foundry Toolkit**을 선택하고 **Help and Feedback**을 펼친 뒤 **Ask Copilot**을 선택합니다. 드롭다운에서 원하는 모델을 확인하고 생성된 `/foundrytk-quick-start` 프롬프트를 보냅니다. - ![Foundry Toolkit 빠른 시작 순서를 보여 주는 스크린샷.](../../../_images/vscode-foundry-setup.png) + ![Foundry Toolkit 빠른 시작 순서를 보여 주는 스크린샷.](../../../../_images/vscode-foundry-setup.png) 2. 대화형 워크플로에서 **Where are you starting from?**에 **Set up Foundry**로 답한 뒤 **What do you have already?**에 **I have an Azure subscription or Foundry resources**로 답합니다. 3. 도구 승인 요청을 검토합니다. 제안한 명령과 범위가 적절하다면 이 세션에 대해 **Allow azmcp …**를 선택하여 반복되는 승인 요청을 줄입니다. @@ -93,7 +93,7 @@ Tailspin 후원자는 신뢰할 수 있는 추천을 원합니다. 퍼즐 게임 3. 승인하기 전에 프로젝트, 배포, 용량, 비용을 확인합니다. 범위를 검토한 결과 적절하다면 이 세션에 대해 **Allow az …**를 선택하여 반복되는 요청을 줄입니다. 4. **Foundry Toolkit**을 선택하고 **My Resources**를 펼친 뒤 **Models**를 선택합니다. 배포한 모델이 Foundry 아래에 나타나는지 확인합니다. 스크린샷은 예시이며 지역에 따라 다른 모델을 제공할 수 있습니다. - ![Foundry Toolkit의 모델 배포 예시를 보여 주는 스크린샷.](../../../_images/vscode-model-deployed.png) + ![Foundry Toolkit의 모델 배포 예시를 보여 주는 스크린샷.](../../../../_images/vscode-model-deployed.png) ## 배포한 모델 테스트 diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 96% rename from docs/ko-kr/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index e686042d..3713c0ce 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ lastUpdated: 2026-09-16 1. **Foundry Toolkit**을 선택하고 **Developer Tools**, **+ Build**를 차례로 펼친 뒤 **+ Create Agent**를 선택합니다. **Create Agent**에서 **Code an agent with Copilot**을 선택합니다. - ![에이전트 생성 페이지를 보여 주는 스크린샷.](../../../_images/vscode-create-agent.png) + ![에이전트 생성 페이지를 보여 주는 스크린샷.](../../../../_images/vscode-create-agent.png) 2. 새 채팅이 **AIAgentExpert**로 전환되는지 확인합니다. 생성된 프롬프트를 다음의 사용자 지정 프롬프트로 바꾸고 전송합니다. @@ -65,7 +65,7 @@ lastUpdated: 2026-09-16 5. [배포한 모델 테스트][model-tests]의 프롬프트 여섯 개를 모두 재사용합니다. 게임 9개로 구성된 하위 집합의 순위가 전체 카탈로그 순위와 같다고 가정하지 말고 전체 `db/catalog.json`을 기준으로 답변을 점검합니다. 6. **Input & Output**, **Events**, **Tools** 사이를 전환하여 페이로드(Payload), 세션 이벤트, 도구 호출을 살펴봅니다. 수락 기준을 위반하는 동작이 있다면 Copilot에 수정을 요청하고 배포하기 전에 관련 테스트와 Inspector 점검을 다시 실행합니다. - ![로컬 에이전트 디버깅 워크플로를 보여 주는 스크린샷.](../../../_images/vscode-agent-debug.png) + ![로컬 에이전트 디버깅 워크플로를 보여 주는 스크린샷.](../../../../_images/vscode-agent-debug.png) ## 호스팅 에이전트 배포 및 테스트 @@ -77,17 +77,17 @@ lastUpdated: 2026-09-16 /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![AIAgentExpert 에이전트의 핸드오프 옵션을 보여 주는 스크린샷.](../../../_images/vscode-go-production-handoff.png) + ![AIAgentExpert 에이전트의 핸드오프 옵션을 보여 주는 스크린샷.](../../../../_images/vscode-go-production-handoff.png) 2. 채팅과 터미널에서 매개 변수와 명령 승인 요청을 검토합니다. 배포 대상이 기존 `tailspin-toys` 프로젝트인지 확인하고 승인하기 전에 유료 리소스를 검토합니다. 3. Copilot이 평가 테스트 모음을 제안하면 추가 점검으로 수락하여 진행할 수 있습니다. 4. **Foundry Toolkit**을 선택하고 **My Resources**를 펼친 뒤 **Agents**를 선택합니다. **Agents** 탭에서 **Hosted Agent**로 전환합니다. - ![배포한 호스팅 에이전트를 보여 주는 스크린샷.](../../../_images/vscode-agent-deployed.png) + ![배포한 호스팅 에이전트를 보여 주는 스크린샷.](../../../../_images/vscode-agent-deployed.png) 5. 에이전트 이름을 선택하고 배포 상태가 **Running**인지 확인합니다. **Playground**로 전환하고 배포된 카탈로그를 기준으로 그라운딩(Grounding), 누락된 정보, 카탈로그 외부 항목, 모호한 요청, 순위 점검을 반복합니다. - ![배포한 호스팅 에이전트의 답변을 보여 주는 스크린샷.](../../../_images/vscode-agent-response.png) + ![배포한 호스팅 에이전트의 답변을 보여 주는 스크린샷.](../../../../_images/vscode-agent-response.png) 6. 배포나 답변에 문제가 있다면 Copilot과 함께 보고된 상태 및 로그를 살펴보고, 기존 프로젝트에서 문제를 수정한 뒤 점검을 반복합니다. 배포를 검증하지 않은 채로 계속하지 않습니다. diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/ko-kr/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 492b5b3b..2de4cd1c 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ next: false Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Backer Concierge 채팅 위젯이 동작하는 모습을 보여 주는 스크린샷](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Backer Concierge 채팅 위젯이 동작하는 모습을 보여 주는 스크린샷](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Function과 사이트를 계속 실행한 상태에서 전체 사용자 경험을 검증합니다. diff --git a/docs/ko-kr/vscode/7-foundry-toolkit/README.md b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/ko-kr/vscode/7-foundry-toolkit/README.md rename to docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/README.md index 44cb8bfb..397eb121 100644 --- a/docs/ko-kr/vscode/7-foundry-toolkit/README.md +++ b/docs/ko-kr/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/vscode/7-foundry-toolkit +slug: ko-kr/real-world-development/vscode/7-foundry-toolkit title: "선택 사항: Foundry 통합" description: "VS Code와 Microsoft Foundry Toolkit으로 세 가지 집중 모듈에 걸쳐 카탈로그에 근거한 Backer Concierge를 만듭니다." authors: diff --git a/docs/ko-kr/vscode/README.md b/docs/ko-kr/real-world-development/vscode/README.md similarity index 98% rename from docs/ko-kr/vscode/README.md rename to docs/ko-kr/real-world-development/vscode/README.md index 73c6407e..b95584bc 100644 --- a/docs/ko-kr/vscode/README.md +++ b/docs/ko-kr/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: ko-kr/vscode +slug: ko-kr/real-world-development/vscode title: "VS Code" authors: - geektrainer diff --git a/docs/pt-br/README.md b/docs/pt-br/README.md index 6e3709b9..2a1c0f6a 100644 --- a/docs/pt-br/README.md +++ b/docs/pt-br/README.md @@ -1,42 +1,43 @@ --- slug: pt-br -title: "Mãos à obra com os agentes do GitHub Copilot" +title: "Workshops do GitHub Copilot" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-28 --- -As adições recentes aos recursos do GitHub Copilot oferecem ferramentas avançadas para apoiar pessoas desenvolvedoras durante todo o ciclo de vida de desenvolvimento de software (SDLC). Isso inclui trabalhar com problemas e solicitações de pull no GitHub, interagir com serviços externos e, é claro, criar código. Este laboratório explora esses recursos e apresenta casos de uso reais e dicas para aproveitar as ferramentas ao máximo. +Escolha um workshop de acordo com o que deseja aprender e com o nível de profundidade que procura. **Primeiros passos** oferece uma introdução guiada ao GitHub Copilot, enquanto **Desenvolvimento em cenários reais** usa um aplicativo completo e o backlog de uma equipe para praticar fluxos de trabalho voltados à produção. -> [!CAUTION] -> Como o GitHub Copilot é probabilístico, e não determinístico, o código exato, os arquivos alterados e outros detalhes podem variar. Por isso, talvez você perceba pequenas diferenças entre as capturas de tela e os trechos de código do laboratório e o que aparece em sua experiência. Isso é esperado e faz parte da natureza do trabalho com essa categoria de ferramentas. -> -> Se algo parecer quebrado ou não estiver funcionando corretamente, peça ajuda a uma pessoa mentora! - -## Escolha seu ambiente +## Primeiros passos -O GitHub Copilot acompanha você onde quer que trabalhe. Escolha o ambiente que corresponde à forma como você quer desenvolver e conclua os exercícios usando um backlog compartilhado da Tailspin Toys. Cada ambiente começa com sua própria configuração, para que você possa ir direto ao que escolheu. +Comece com uma experiência guiada e objetiva que apresenta os principais recursos de um produto do GitHub Copilot sem exigir uma base de código existente. -### 🖥️ [VS Code](../vscode/) +### [Tour pelo aplicativo GitHub Copilot][first-steps-app] -GitHub Copilot no **Visual Studio Code** e no GitHub Codespaces. Trabalhe com o modo de agente do Copilot Chat, servidores MCP e agentes personalizados sem sair do editor que você já usa — ideal para integrar a assistência de IA diretamente ao seu IDE. +Crie um Space Quiz a partir de uma pasta vazia, publique-o no GitHub, implemente um problema, conclua uma revisão do Copilot, agende uma automação e explore um fluxo de trabalho com Canvas. -### 💻 [Copilot CLI](cli/) +### [Primeiros passos com o GitHub Copilot CLI][first-steps-cli] -**GitHub Copilot CLI** — um assistente baseado em agentes que é executado no terminal. Instale-o, conecte servidores MCP, gere código com o modo de planejamento e crie suas próprias habilidades, agentes personalizados e comandos de barra, tudo pela linha de comando. +Crie o mesmo Space Quiz pelo terminal, revise as diferenças, execute sessões em paralelo em worktrees, planeje antes de editar e crie, mescle e delegue pull requests sem sair do shell. -### 🤖 [Aplicativo Copilot](app/) +### [Primeiros passos com o Visual Studio Code][first-steps-vscode] -O **aplicativo GitHub Copilot** — um aplicativo para desktop criado com base no Copilot CLI. Execute sessões paralelas de agentes, alterne entre modos de sessão, colabore em telas e gerencie problemas e solicitações de pull do GitHub de forma nativa — incluindo o **Agent Merge**, que conduz uma solicitação de pull por rebases, comentários de revisão, correções de CI e mesclagem. +Crie o Space Quiz no VS Code, teste-o no navegador integrado, publique-o com o Controle do Código-Fonte, trabalhe com problemas e pull requests usando as ferramentas do GitHub e delegue trabalho a uma sessão na nuvem. -### ☁️ [Agente de nuvem do Copilot](../cloud/) +## Desenvolvimento em cenários reais -**Agente de nuvem do Copilot** — um programador parceiro assíncrono que trabalha em problemas do GitHub em segundo plano. Atribua tarefas, oriente-o com agentes personalizados, acompanhe o progresso no painel de agentes e revise as solicitações de pull que ele abre. +Pratique o GitHub Copilot em um ciclo de vida de desenvolvimento de software realista usando o aplicativo Tailspin Toys e o backlog correspondente. Escolha o ambiente em que deseja trabalhar e planeje, desenvolva, teste, revise e entregue mudanças significativas. -## Cenário +### [Explore os workshops de desenvolvimento em cenários reais][real-world-development] -Você é uma nova pessoa desenvolvedora na Tailspin Toys, uma empresa fictícia que oferece financiamento coletivo para jogos de tabuleiro com tema de desenvolvimento — um mercado enorme! O backlog da sua equipe já está registrado como problemas do GitHub e pronto para você começar — com trabalhos em funcionalidades, como filtragem e paginação, além de melhorias de qualidade, como acessibilidade e padrões de codificação. Você trabalhará de forma iterativa, explorando tanto o site quanto os recursos do Copilot para concluir as tarefas. +Escolha entre o GitHub Copilot CLI, o aplicativo GitHub Copilot, o agente de nuvem do GitHub Copilot ou o Visual Studio Code. -## Comece agora +> [!CAUTION] +> Como o GitHub Copilot é probabilístico, e não determinístico, o código exato e os arquivos alterados podem ser diferentes dos exemplos. Pequenas diferenças são esperadas. +> +> Se algo não funcionar corretamente durante um workshop conduzido por uma pessoa instrutora, peça ajuda a uma pessoa mentora. -Escolha um dos ambientes acima para começar — cada um é aberto com a configuração necessária para você iniciar o desenvolvimento. \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[first-steps-cli]: ../first-steps/copilot-cli/ +[first-steps-vscode]: ../first-steps/vscode/ +[real-world-development]: ../real-world-development/ diff --git a/docs/pt-br/app/0-prerequisites.md b/docs/pt-br/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/pt-br/app/0-prerequisites.md rename to docs/pt-br/real-world-development/app/0-prerequisites.md index 13492034..9c8855e2 100644 --- a/docs/pt-br/app/0-prerequisites.md +++ b/docs/pt-br/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ Você trabalhará na sua própria cópia do projeto Tailspin Toys. Crie-a agora 1. Em uma nova janela do navegador, acesse o repositório do GitHub deste laboratório: `https://github.com/github-samples/tailspin-toys`. 2. Crie sua própria cópia do repositório selecionando o botão **Use this template** na página do repositório do laboratório. Em seguida, selecione **Create a new repository**. - ![Botão Use this template com a opção Create a new repository selecionada no menu suspenso](../../_images/app-0-use-template.png) + ![Botão Use this template com a opção Create a new repository selecionada no menu suspenso](../../../_images/app-0-use-template.png) 3. Se você estiver fazendo o workshop como parte de um evento conduzido pelo GitHub ou pela Microsoft, siga as instruções dos mentores. Caso contrário, crie o novo repositório em uma organização na qual você tenha acesso ao GitHub Copilot. - ![Formulário Create a new repository com github-samples/tailspin-toys definido como modelo e o nome do repositório preenchido](../../_images/app-0-create-repository.png) + ![Formulário Create a new repository com github-samples/tailspin-toys definido como modelo e o nome do repositório preenchido](../../../_images/app-0-create-repository.png) 4. Anote o caminho do repositório que você criou (**organization-or-user-name/repository-name**), pois ele será usado mais adiante no laboratório. diff --git a/docs/pt-br/app/1-install-copilot-app.md b/docs/pt-br/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/pt-br/app/1-install-copilot-app.md rename to docs/pt-br/real-world-development/app/1-install-copilot-app.md diff --git a/docs/pt-br/app/2-add-star-rating.md b/docs/pt-br/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/pt-br/app/2-add-star-rating.md rename to docs/pt-br/real-world-development/app/2-add-star-rating.md index 3a546d52..7058e265 100644 --- a/docs/pt-br/app/2-add-star-rating.md +++ b/docs/pt-br/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Vamos iniciar uma nova sessão para começar a explorar o projeto e implementar 2. Selecione **Home screen**. 3. Verifique se `tailspin-toys` está selecionado como repositório. - ![Caixa de prompt do aplicativo GitHub Copilot com o seletor de repositório definido como tailspin-toys e o seletor de modelo exibido abaixo do prompt](../../_images/app-2-start-session.png) + ![Caixa de prompt do aplicativo GitHub Copilot com o seletor de repositório definido como tailspin-toys e o seletor de modelo exibido abaixo do prompt](../../../_images/app-2-start-session.png) 4. Use o prompt a seguir para solicitar a alteração: @@ -55,7 +55,7 @@ Todas as alterações geradas por IA devem ser revisadas antes do merge, mesmo a 1. No canto superior direito do aplicativo, selecione **Toggle review panel**. A tela de diff será aberta com todas as alterações pendentes feitas pelo Copilot. - ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../_images/app-2-review-panel.png) + ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../../_images/app-2-review-panel.png) 2. Você verá código adicionado a `GameCard.astro`, o arquivo principal usado para exibir os detalhes do jogo. Ele deve ser semelhante ao exemplo a seguir: um pequeno bloco que renderiza a avaliação quando ela existe e usa "No rating yet" quando `starRating` é `null`: @@ -80,7 +80,7 @@ Não devemos apenas ler o código e presumir que ele funciona. Também precisamo 1. No painel de revisão à direita do aplicativo Copilot, selecione **Terminal**. Se não houver um botão **Terminal**, selecione **+** (identificado como **Open in panel**) e depois selecione **Terminal**. - ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../../_images/app-terminal-screenshot.png) 2. Digite o comando a seguir na janela do terminal para iniciar o servidor de desenvolvimento do aplicativo Web: diff --git a/docs/pt-br/app/3-custom-instructions.md b/docs/pt-br/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/pt-br/app/3-custom-instructions.md rename to docs/pt-br/real-world-development/app/3-custom-instructions.md index 91363726..99fe5eee 100644 --- a/docs/pt-br/app/3-custom-instructions.md +++ b/docs/pt-br/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ Reserve um momento para ler os arquivos de instruções incluídos no repositór 1. Se o painel de revisão ainda não estiver visível, abra-o selecionando **Toggle review panel** no canto superior direito. - ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../_images/app-2-review-panel.png) + ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../../_images/app-2-review-panel.png) 2. Selecione **+** para adicionar um novo item ao painel de revisão. 3. Selecione **File**. @@ -66,7 +66,7 @@ Reserve um momento para ler os arquivos de instruções incluídos no repositór 6. Explore o arquivo. Observe a breve descrição do projeto e seções como **Agent notes**, **Code standards**, **Scripts** e **Repository Structure**. Em **Code standards**, observe a orientação aninhada **GitHub Actions Workflows**. Essas instruções se aplicam a qualquer interação com o Copilot. 7. Selecione **Show folder view** para abrir o navegador de pastas. - ![Botão Show folder view no painel de revisão com um arquivo aberto no aplicativo GitHub Copilot](../../_images/app-show-folder-view.png) + ![Botão Show folder view no painel de revisão com um arquivo aberto no aplicativo GitHub Copilot](../../../_images/app-show-folder-view.png) 8. Acesse a pasta `.github/instructions` e explore os arquivos. Observe que há instruções para arquivos Astro, a camada de dados Drizzle, testes e muito mais. 9. Abra `.github/instructions/unit-tests.instructions.md`. Observe o campo `applyTo` na parte superior. Ele define um glob, relativo à raiz do repositório, que determina a quais arquivos as instruções se aplicam. Nesse caso, qualquer arquivo de teste TypeScript, por exemplo um arquivo correspondente a `**/*.test.ts`, será incluído. @@ -87,7 +87,7 @@ Na lição anterior, você iniciou uma sessão com um prompt direto. No entanto, 2. Selecione a issue intitulada **Update our repository coding standards** para abri-la. 3. Selecione **New session** no canto superior direito para iniciar uma nova sessão com base na issue. - ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../_images/app-new-session-from-issue.png) + ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../../_images/app-new-session-from-issue.png) 4. Use o prompt a seguir para solicitar que o Copilot atualize os arquivos de instruções de acordo com os requisitos documentados na issue: @@ -103,7 +103,7 @@ Vamos ler as atualizações feitas pelo Copilot e também pedir um exemplo do c 1. Selecione **Changes** no canto superior direito para abrir as alterações no código. - ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../_images/app-select-changes.png) + ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../../_images/app-select-changes.png) 2. Revise o arquivo de instruções atualizado. Confirme se ele contém as diretrizes para adicionar documentação e comentários ao código. diff --git a/docs/pt-br/app/4-build-filtering.md b/docs/pt-br/real-world-development/app/4-build-filtering.md similarity index 97% rename from docs/pt-br/app/4-build-filtering.md rename to docs/pt-br/real-world-development/app/4-build-filtering.md index d36228c4..071e058d 100644 --- a/docs/pt-br/app/4-build-filtering.md +++ b/docs/pt-br/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Vamos abrir a issue, iniciar uma nova sessão e criar um plano alternando para o 2. Selecione a issue intitulada **Allow users to filter games by category and publisher**. 3. Selecione **New session** no canto superior direito. - ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../_images/app-new-session-from-issue.png) + ![Visualização da issue no aplicativo GitHub Copilot com uma seta apontando para o botão New session no canto superior direito](../../../_images/app-new-session-from-issue.png) 4. Selecione Shift+Tab até que o modo exibido seja **Plan**. - ![Caixa de prompt do aplicativo GitHub Copilot com uma seta apontando para o seletor de modo definido como Plan](../../_images/app-4-plan-mode.png) + ![Caixa de prompt do aplicativo GitHub Copilot com uma seta apontando para o seletor de modo definido como Plan](../../../_images/app-4-plan-mode.png) 5. Envie o prompt a seguir. A issue de filtragem já está no contexto da sessão porque você iniciou a partir dela: @@ -92,12 +92,12 @@ Todo código gerado por IA precisa ser revisado antes do merge. Vamos revisar o 1. Selecione **Changes** no canto superior direito para abrir as alterações no código. - ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../_images/app-select-changes.png) + ![Abas do painel da sessão no aplicativo GitHub Copilot com uma seta apontando para a aba Changes](../../../_images/app-select-changes.png) 2. Revise as alterações. Você deverá ver novos arquivos TypeScript e Astro, além de arquivos de teste. Observe que as novas funções auxiliares incluem comentários de documentação TSDoc e um comentário de cabeçalho do arquivo. O padrão de documentação integrado na Lição 3 foi aplicado automaticamente, sem que você precisasse solicitá-lo. 3. No painel de revisão à direita do aplicativo Copilot, selecione **Terminal**. Se não houver um botão **Terminal**, selecione **+** (identificado como **Open in panel**) e depois selecione **Terminal**. - ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../_images/app-terminal-screenshot.png) + ![Botão Terminal no painel de revisão do aplicativo GitHub Copilot](../../../_images/app-terminal-screenshot.png) 4. Digite o comando a seguir na janela do terminal para iniciar o servidor de desenvolvimento do aplicativo Web: @@ -138,7 +138,7 @@ Vamos explorar a skill para entender o que ela faz. 1. Se o painel de revisão ainda não estiver visível, abra-o selecionando **Toggle review panel** no canto superior direito. - ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../_images/app-2-review-panel.png) + ![Barra de ferramentas superior do aplicativo GitHub Copilot com uma seta apontando para o botão Toggle review panel à direita de Create PR](../../../_images/app-2-review-panel.png) 2. Selecione **+** para adicionar um novo item ao painel de revisão. 3. Selecione **File**. diff --git a/docs/pt-br/app/5-mcp-playwright.md b/docs/pt-br/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/pt-br/app/5-mcp-playwright.md rename to docs/pt-br/real-world-development/app/5-mcp-playwright.md index 1f9ea34e..dbc94a05 100644 --- a/docs/pt-br/app/5-mcp-playwright.md +++ b/docs/pt-br/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ Há muitos outros servidores MCP que fornecem acesso a diferentes ferramentas e Você adiciona e gerencia servidores MCP nas configurações do aplicativo. O aplicativo inclui um catálogo de servidores conhecidos, portanto o [servidor MCP do Playwright][playwright-mcp-server] está a poucas seleções de distância. -1. Selecione Ctrl+, para abrir a página de configurações do aplicativo Copilot. +1. Pressione Command+, (Mac) ou Ctrl+, (Windows/Linux) para abrir a página de configurações do aplicativo Copilot. 2. Selecione **MCP servers**. 3. Na caixa de diálogo de pesquisa, digite `Playwright`. 4. Selecione **Playwright** na lista de **Popular MCP servers**. diff --git a/docs/pt-br/app/6-agent-merge.md b/docs/pt-br/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/pt-br/app/6-agent-merge.md rename to docs/pt-br/real-world-development/app/6-agent-merge.md index 44e61b3d..6f811ec1 100644 --- a/docs/pt-br/app/6-agent-merge.md +++ b/docs/pt-br/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ Você revisou o código manualmente, executou testes e permitiu que o Copilot va 2. No canto superior direito, selecione o menu suspenso ao lado de **Create PR**. 3. Selecione **Agent merge** para habilitá-lo. - ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../_images/app-enable-agent-merge.png) + ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../../_images/app-enable-agent-merge.png) 4. O texto do botão mudará para **Agent merge**. 5. Selecione o botão **Agent merge** para iniciar o processo. @@ -43,7 +43,7 @@ Após alguns instantes, você verá que o Copilot voltou a trabalhar, agora anal 6. Permita que o Agent Merge faça o merge do pull request selecionando o menu suspenso ao lado de **Agent merge** e depois **Merge pull request**. - ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Quando todos os processos de CI estiverem verdes, indicando que os testes passaram, o Copilot fará o merge do pull request. diff --git a/docs/pt-br/app/7-canvases.md b/docs/pt-br/real-world-development/app/7-canvases.md similarity index 96% rename from docs/pt-br/app/7-canvases.md rename to docs/pt-br/real-world-development/app/7-canvases.md index 2e5371e5..caf3c7f0 100644 --- a/docs/pt-br/app/7-canvases.md +++ b/docs/pt-br/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/pt-br/app/9-review/ + link: /copilot-workshops/pt-br/real-world-development/app/9-review/ label: "Revisão e próximos passos" --- @@ -73,7 +73,7 @@ Os canvases podem se tornar ativos do repositório, assim como arquivos de instr 2. Depois que o Copilot salvar os arquivos do canvas, selecione o menu suspenso ao lado de **Create PR** no canto superior direito. 3. Selecione **Agent merge** para habilitá-lo. - ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../_images/app-enable-agent-merge.png) + ![Menu suspenso Create PR expandido no aplicativo GitHub Copilot, com uma seta apontando para a opção Agent merge](../../../_images/app-enable-agent-merge.png) 4. O texto do botão mudará para **Agent merge**. 5. Selecione o botão **Agent merge** para iniciar o processo. @@ -84,7 +84,7 @@ Após alguns instantes, você verá que o Copilot voltou a trabalhar, agora anal 6. Permita que o Agent Merge faça o merge do pull request selecionando o menu suspenso ao lado de **Agent merge** e depois **Merge pull request**. - ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../_images/app-agent-merge-merge.png) + ![Menu suspenso Agent merge mostrando as ações permitidas ao agente — Address reviews, Fix CI failures, Resolve conflicts — com uma seta apontando para Merge pull request](../../../_images/app-agent-merge-merge.png) 7. Aguarde até que todos os processos de CI sejam concluídos com êxito e fiquem verdes. Quando isso acontecer, o Copilot fará o merge do pull request automaticamente. diff --git a/docs/pt-br/app/8-foundry-canvas/1-project-and-model.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 93% rename from docs/pt-br/app/8-foundry-canvas/1-project-and-model.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model.md index 12554caf..4465e733 100644 --- a/docs/pt-br/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/ label: "Opcional: Incorporar o Foundry" next: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Criar e implantar o agente --- @@ -33,7 +33,7 @@ A configuração conecta o aplicativo GitHub Copilot ao Azure e mantém todo o t 3. Instale a [Azure Developer CLI][install-azd] e use `azd version` para verificar se a versão instalada é a 1.27.1 ou posterior. 4. Abra o aplicativo GitHub Copilot, abra **Customize** e selecione **Plugins**. Pesquise por `microsoft-foundry` e selecione **Install** para o plugin Microsoft Foundry, que inclui o Canvas e as skills do Foundry. - ![Instalar o plugin Microsoft Foundry](../../../_images/app-8-install-foundry-plugin.png) + ![Instalar o plugin Microsoft Foundry](../../../../_images/app-8-install-foundry-plugin.png) 5. Em **Customize**, selecione **Plugins**, pesquise por `azure` ou selecione-o na lista **Featured** e selecione **Install** para o plugin Azure. 6. Na aba **My work**, encontre e abra a issue intitulada **Add a Backer Concierge assistant for catalog questions** no repositório Tailspin Toys. Selecione **New session** para iniciar uma sessão vinculada à issue em um novo worktree. Mantenha este repositório, branch do worktree e sessão da issue nos três módulos. @@ -57,11 +57,11 @@ O repositório de exemplo inclui um script de exportação que fornece ao agente npm run db:export ``` - ![Gerar a exportação do catálogo](../../../_images/app-8-generate-catalog-export.png) + ![Gerar a exportação do catálogo](../../../../_images/app-8-generate-catalog-export.png) 10. Abra `db/catalog.json` e confirme que ele contém 21 jogos com título, descrição, categoria, editora e avaliação por estrelas. Verifique o campo `note`: o catálogo não contém totais arrecadados, números de apoiadores, faixas de contribuição nem datas de lançamento. Considere também como indisponíveis os preços, números de jogadores e durações de partidas ausentes, em vez de preencher as lacunas com conhecimento externo. Se a exportação falhar ou apresentar diferenças, peça ao Copilot que investigue e execute-a novamente antes de continuar. - ![Exportação do catálogo aberta no aplicativo Copilot](../../../_images/app-8-view-catalog.png) + ![Exportação do catálogo aberta no aplicativo Copilot](../../../../_images/app-8-view-catalog.png) ## Configurar um projeto e um modelo do Foundry @@ -95,7 +95,7 @@ Criar primeiro o projeto e a implantação no chat garante que o Canvas se conec Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Criar o projeto do Foundry](../../../_images/app-8-foundry-project-created.png) + ![Criar o projeto do Foundry](../../../../_images/app-8-foundry-project-created.png) 14. Peça ao Copilot que recomende um modelo. Os critérios de aceitação da issue já estão no contexto porque a sessão foi iniciada a partir da issue: @@ -105,7 +105,7 @@ Criar primeiro o projeto e a implantação no chat garante que o Canvas se conec 15. Confirme que o Copilot carrega a skill `microsoft-foundry` e escolha um modelo disponível com base nas vantagens e limitações de cada opção. O guia de início rápido de agentes hospedados do Microsoft Foundry usa atualmente `gpt-5.4-mini`, mas a disponibilidade e a cota variam de acordo com a região. - ![Selecionar o modelo](../../../_images/app-8-select-model.png) + ![Selecionar o modelo](../../../../_images/app-8-select-model.png) 16. Peça ao Copilot que implante sua seleção, revisando o projeto de destino e o custo antes de aprovar: @@ -124,7 +124,7 @@ Esta verificação valida o projeto e o modelo antes de existir qualquer código 18. Abra o menu **More options** no canto superior direito do Canvas e selecione **Sign in**. 19. Selecione o projeto **tailspin-toys** do Foundry. Expanda **Models** e confirme que a implantação aparece com o nome e o status esperados. - ![Validar o projeto e o modelo no Canvas](../../../_images/app-8-validate-project-model.png) + ![Validar o projeto e o modelo no Canvas](../../../../_images/app-8-validate-project-model.png) 20. Na mesma sessão, insira: diff --git a/docs/pt-br/app/8-foundry-canvas/2-build-and-deploy.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 95% rename from docs/pt-br/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index 0d8d0a23..27f9a4c6 100644 --- a/docs/pt-br/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar o projeto e o modelo next: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: Conectar o agente ao site --- @@ -49,7 +49,7 @@ O Canvas gera o código, a estrutura de pastas e o `azure.yaml` na raiz que cone O Canvas envia ao Copilot o prompt e o contexto da assinatura atual e do projeto do Foundry. Ele procura exemplos de Agent Framework + Responses API; pode aparecer uma opção como **Agent with Local Tools (Responses, Agent Framework, Python)**. - ![Gerar a estrutura inicial do agente Backer Concierge no Canvas](../../../_images/app-8-scaffold-backer-concierge.png) + ![Gerar a estrutura inicial do agente Backer Concierge no Canvas](../../../../_images/app-8-scaffold-backer-concierge.png) 5. Revise as alterações do Copilot na aba **Files** com base neste ponto de verificação. Os nomes dos arquivos gerados dentro de `src` podem variar, mas os limites do projeto e a localização de `azure.yaml` devem corresponder ao seguinte: @@ -90,7 +90,7 @@ O Canvas gera o código, a estrutura de pastas e o `azure.yaml` na raiz que cone Resultado esperado: menciona somente títulos reais do catálogo e usa as informações corretas para cada título. - ![Recomendação fundamentada no catálogo no Agent Inspector](../../../_images/app-8-grounded-recommendation.png) + ![Recomendação fundamentada no catálogo no Agent Inspector](../../../../_images/app-8-grounded-recommendation.png) 10. Teste uma **armadilha de alucinação**: @@ -144,7 +144,7 @@ O Canvas usa `azd` para implantar o agente testado. O Foundry empacota o código 16. No Canvas, em **Deploy and test**, selecione **Deploy to Foundry**. Revise o prompt que ele insere no chat. - ![Prompt Deploy to Foundry no Canvas](../../../_images/app-8-deploy-to-foundry.png) + ![Prompt Deploy to Foundry no Canvas](../../../../_images/app-8-deploy-to-foundry.png) 17. Verifique se há uma confirmação de implantação, a versão do agente, o status e um link para o playground do agente no Foundry. Se a implantação falhar, envie o erro ao Copilot e resolva-o no mesmo projeto antes de tentar novamente pelo Canvas. 18. Selecione **Test in Foundry Portal** no Canvas para abrir o playground do agente implantado. Execute novamente todas as seis verificações de aceitação das etapas 9–14 nesta versão implantada, mantendo o par de prompts em uma única conversa para testar a continuidade. Compare as respostas com o catálogo; se alguma verificação falhar, peça ao Copilot que corrija o problema, execute novamente os testes locais, reimplante pelo Canvas e teste novamente a versão hospedada. diff --git a/docs/pt-br/app/8-foundry-canvas/3-connect-to-site.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/pt-br/app/8-foundry-canvas/3-connect-to-site.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 2bc4ff94..b82d4ca4 100644 --- a/docs/pt-br/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Criar e implantar o agente next: - link: /copilot-workshops/pt-br/app/9-review/ + link: /copilot-workshops/pt-br/real-world-development/app/9-review/ label: Revisão e próximos passos --- @@ -56,7 +56,7 @@ O proxy é a única parte do código que tem permissão para acessar suas creden 7. Inspecione a resposta: ela deve explicar que o catálogo não contém preços. Confirme que ela não contém token do Foundry, credencial, identificador interno de conversa, endpoint do projeto nem rastreamento de pilha. Se não for possível acessar a Function ou se a resposta expuser detalhes ou inventar preços, envie ao Copilot as informações da falha sem dados sensíveis, corrija o problema e execute novamente os testes do proxy antes de continuar. - ![Teste do proxy local](../../../_images/app-8-local-proxy-test.png) + ![Teste do proxy local](../../../../_images/app-8-local-proxy-test.png) ## Criar e testar o widget de chat @@ -77,7 +77,7 @@ Com o proxy em execução, o widget apresenta a conversa no site sem expor detal 11. Revise o relatório e verifique o comportamento relatado no navegador, incluindo o uso do teclado e a conversa de duas interações das [verificações de aceitação do agente hospedado][agent-checks]. Confirme que as solicitações do navegador passam por `/api/concierge` com uma referência opaca, e não diretamente pelo Foundry, e que as respostas não expõem credenciais nem identificadores internos do Foundry. Verifique se as recomendações e as respostas sobre dados ausentes permanecem dentro dos limites do catálogo. Corrija os testes que falharam com o Copilot, reinicie o serviço local afetado se necessário e execute os testes novamente. - ![Resultados dos testes de ponta a ponta do widget Backer Concierge](../../../_images/app-8-e2e-test-results.png) + ![Resultados dos testes de ponta a ponta do widget Backer Concierge](../../../../_images/app-8-e2e-test-results.png) ## Ponto de verificação e próximos passos diff --git a/docs/pt-br/app/8-foundry-canvas/README.md b/docs/pt-br/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/pt-br/app/8-foundry-canvas/README.md rename to docs/pt-br/real-world-development/app/8-foundry-canvas/README.md index 0274ebae..3ebe366e 100644 --- a/docs/pt-br/app/8-foundry-canvas/README.md +++ b/docs/pt-br/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "Opcional: Incorporar o Foundry" -slug: pt-br/app/8-foundry-canvas +slug: pt-br/real-world-development/app/8-foundry-canvas description: "Crie um Backer Concierge baseado no catálogo com o Microsoft Foundry Canvas, com pontos seguros para encerrar ao longo do percurso." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/pt-br/app/9-review/ + link: /copilot-workshops/pt-br/real-world-development/app/9-review/ label: Revisão e próximos passos next: - link: /copilot-workshops/pt-br/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/pt-br/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Preparar o projeto e o modelo --- diff --git a/docs/pt-br/app/9-review.md b/docs/pt-br/real-world-development/app/9-review.md similarity index 100% rename from docs/pt-br/app/9-review.md rename to docs/pt-br/real-world-development/app/9-review.md diff --git a/docs/pt-br/app/README.md b/docs/pt-br/real-world-development/app/README.md similarity index 99% rename from docs/pt-br/app/README.md rename to docs/pt-br/real-world-development/app/README.md index 23241e44..43531e1a 100644 --- a/docs/pt-br/app/README.md +++ b/docs/pt-br/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/app +slug: pt-br/real-world-development/app title: "Aplicativo GitHub Copilot" authors: - geektrainer diff --git a/docs/pt-br/cli/0-prerequisites.md b/docs/pt-br/real-world-development/cli/0-prerequisites.md similarity index 93% rename from docs/pt-br/cli/0-prerequisites.md rename to docs/pt-br/real-world-development/cli/0-prerequisites.md index a3ee88c9..0ac43a67 100644 --- a/docs/pt-br/cli/0-prerequisites.md +++ b/docs/pt-br/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ Para criar uma cópia do repositório para o código que você desenvolverá, cr 1. Em uma nova janela do navegador, acesse o repositório do GitHub deste laboratório: `https://github.com/github-samples/tailspin-toys`. 2. Crie sua própria cópia do repositório selecionando o botão **Use this template** na página do repositório do laboratório. Em seguida, selecione **Create a new repository**. - ![Botão Use this template](../../_images/ex0-use-template.png) + ![Botão Use this template](../../../_images/ex0-use-template.png) 3. Se você estiver fazendo o workshop como parte de um evento conduzido pelo GitHub ou pela Microsoft, siga as instruções fornecidas pelas pessoas mentoras. Caso contrário, crie o novo repositório em uma organização na qual você tenha acesso ao GitHub Copilot. - ![Preencha as configurações do repositório criado a partir do modelo](../../_images/ex0-repository-settings.png) + ![Preencha as configurações do repositório criado a partir do modelo](../../../_images/ex0-repository-settings.png) 4. Anote o caminho do repositório que você criou (**organization-or-user-name/repository-name**), pois você o usará mais adiante no laboratório. @@ -36,11 +36,11 @@ O [GitHub Codespaces][codespaces] é um ambiente de desenvolvimento baseado em n 1. Acesse o repositório que você acabou de criar. 2. Selecione o botão verde **Code**. - ![Selecione o botão Code](../../_images/ex0-code-button.png) + ![Selecione o botão Code](../../../_images/ex0-code-button.png) 3. Selecione a guia **Codespaces** e depois selecione o botão **+** para criar um novo codespace. - ![Criar um novo codespace](../../_images/ex0-create-codespace.png) + ![Criar um novo codespace](../../../_images/ex0-create-codespace.png) A criação do codespace levará alguns minutos, embora ainda seja muito mais rápida do que instalar todos os serviços manualmente. Enquanto isso, você pode explorar outros recursos do GitHub Copilot, que veremos a seguir. diff --git a/docs/pt-br/cli/1-install-copilot-cli.md b/docs/pt-br/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/pt-br/cli/1-install-copilot-cli.md rename to docs/pt-br/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/pt-br/cli/2-custom-instructions.md b/docs/pt-br/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/pt-br/cli/2-custom-instructions.md rename to docs/pt-br/real-world-development/cli/2-custom-instructions.md diff --git a/docs/pt-br/cli/3-generating-code.md b/docs/pt-br/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/pt-br/cli/3-generating-code.md rename to docs/pt-br/real-world-development/cli/3-generating-code.md diff --git a/docs/pt-br/cli/4-mcp.md b/docs/pt-br/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/pt-br/cli/4-mcp.md rename to docs/pt-br/real-world-development/cli/4-mcp.md diff --git a/docs/pt-br/cli/5-agent-skills.md b/docs/pt-br/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/pt-br/cli/5-agent-skills.md rename to docs/pt-br/real-world-development/cli/5-agent-skills.md diff --git a/docs/pt-br/cli/6-custom-agents.md b/docs/pt-br/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/pt-br/cli/6-custom-agents.md rename to docs/pt-br/real-world-development/cli/6-custom-agents.md diff --git a/docs/pt-br/cli/7-slash-commands.md b/docs/pt-br/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/pt-br/cli/7-slash-commands.md rename to docs/pt-br/real-world-development/cli/7-slash-commands.md index 22f4803b..e3b7030b 100644 --- a/docs/pt-br/cli/7-slash-commands.md +++ b/docs/pt-br/real-world-development/cli/7-slash-commands.md @@ -66,7 +66,7 @@ Ao trabalhar em tarefas maiores ou mais complexas, você pode atingir o limite d 2. Em poucos instantes, o Copilot CLI gerará uma representação visual do contexto atual: - ![Captura de tela da janela de contexto do Copilot CLI](../../_images/cli-7-context-window.png) + ![Captura de tela da janela de contexto do Copilot CLI](../../../_images/cli-7-context-window.png) 3. Observe o modelo exibido, que pode ser diferente do mostrado na imagem, e a porcentagem atual de tokens usados. O restante das informações destaca: diff --git a/docs/pt-br/cli/8-foundry-agent/1-project-and-model.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/pt-br/cli/8-foundry-agent/1-project-and-model.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 070070f1..22557d28 100644 --- a/docs/pt-br/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ O agente precisa do catálogo em um arquivo que possa ler. O exemplo do Tailspin npm run db:export ``` - ![Resumo da exportação do catálogo](../../../_images/cli-8-export-db-catalog.png) + ![Resumo da exportação do catálogo](../../../../_images/cli-8-export-db-catalog.png) 2. Abra `db/catalog.json`. Confirme que ele contém 21 jogos com título, descrição, categoria, editora e avaliação em estrelas. O campo `note` informa que o catálogo não contém totais arrecadados, quantidades de apoiadores, níveis de apoio ou datas de lançamento. Também não há campos de preço, número de jogadores ou tempo de jogo. Essas ausências definem o limite que o agente deve respeitar. @@ -129,7 +129,7 @@ O agente precisa de um projeto do Foundry e de um modelo implantado. Você usar Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![Criação de um projeto público do Foundry](../../../_images/cli-8-create-foundry-project.png) + ![Criação de um projeto público do Foundry](../../../../_images/cli-8-create-foundry-project.png) 2. Quando o projeto estiver pronto, peça ao Copilot para recomendar um modelo: @@ -139,7 +139,7 @@ O agente precisa de um projeto do Foundry e de um modelo implantado. Você usar O Copilot pode solicitar que você selecione um modelo entre as opções recomendadas. - ![Seleção de um modelo entre as opções recomendadas](../../../_images/cli-8-select-foundry-model.png) + ![Seleção de um modelo entre as opções recomendadas](../../../../_images/cli-8-select-foundry-model.png) Continuaremos com `gpt-5.4-mini` nas próximas etapas, mas a disponibilidade e a cota variam por região. @@ -149,7 +149,7 @@ O agente precisa de um projeto do Foundry e de um modelo implantado. Você usar Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![Implantação do modelo selecionado](../../../_images/cli-8-deploy-foundry-model.png) + ![Implantação do modelo selecionado](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > A disponibilidade dos modelos muda ao longo do tempo. A escolha certa é um modelo cuja disponibilidade no projeto seja confirmada pelo Copilot, não um modelo fixado em um exemplo. @@ -198,7 +198,7 @@ Primeiro, você atribuirá à conta conectada a função **Foundry Project Manag Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Resposta do modelo do Foundry recomendando um jogo real do catálogo e informando que os dados de arrecadação não estão disponíveis](../../../_images/cli-8-foundry-agent-response.png) + ![Resposta do modelo do Foundry recomendando um jogo real do catálogo e informando que os dados de arrecadação não estão disponíveis](../../../../_images/cli-8-foundry-agent-response.png) 5. Revise a resposta. Ela deve recomendar apenas um jogo real do catálogo, usar os detalhes corretos do catálogo e explicar que as informações de arrecadação não estão disponíveis. Se o modelo inventar um título, detalhes do jogo ou um total arrecadado, compare outro modelo recomendado antes de continuar. diff --git a/docs/pt-br/cli/8-foundry-agent/2-build-and-deploy.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 97% rename from docs/pt-br/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index 6fcccdbf..126234a6 100644 --- a/docs/pt-br/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Agora, você pedirá à skill do Microsoft Foundry para gerar a estrutura do age Não continue até que os testes específicos sejam aprovados. - ![Verificação da estrutura gerada do agente](../../../_images/cli-8-verify-generated-agent.png) + ![Verificação da estrutura gerada do agente](../../../../_images/cli-8-verify-generated-agent.png) ## Teste o agente localmente @@ -113,7 +113,7 @@ Agora, você verificará a fundamentação das respostas e o comportamento de co 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![Testes da implantação do agente hospedado aprovados](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![Testes da implantação do agente hospedado aprovados](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. Revise os resultados. Se o agente não conseguir se conectar, confirme que o segundo terminal ainda está executando o serviço. Se um teste falhar, peça ao Copilot para corrigir apenas o defeito local, executar os testes específicos e informar quando reiniciar `azd ai agent run`. Reinicie o serviço e execute novamente o teste de aceitação que falhou após cada alteração. @@ -130,7 +130,7 @@ Com os testes de aceitação locais aprovados, você está pronto para implantar 3. Se for solicitado que você selecione uma fonte para a suíte de avaliação, escolha **Não, configurar mais tarde**. - ![Status da implantação do agente hospedado e link do playground](../../../_images/cli-8-hosted-agent-deployment.png) + ![Status da implantação do agente hospedado e link do playground](../../../../_images/cli-8-hosted-agent-deployment.png) 4. Revise o status da implantação e a resposta remota. Confirme que o agente está em execução e recomenda apenas jogos reais do catálogo. Se a implantação ou a invocação falhar, peça ao Copilot para diagnosticar a falha e repetir o teste remoto antes de continuar. diff --git a/docs/pt-br/cli/8-foundry-agent/3-connect-to-site.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 97% rename from docs/pt-br/cli/8-foundry-agent/3-connect-to-site.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 88c7986a..9628c2a3 100644 --- a/docs/pt-br/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ A skill `microsoft-foundry` é responsável pelo fluxo de trabalho do agente hos For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Configuração do proxy local do Azure Functions](../../../_images/cli-8-azure-functions-proxy.png) + ![Configuração do proxy local do Azure Functions](../../../../_images/cli-8-azure-functions-proxy.png) 2. Abra outro terminal e inicie a Function local usando o comando fornecido pelo Copilot. Deixe a Function em execução. 3. Volte ao Copilot CLI e peça ao Copilot para testar o proxy local: @@ -54,7 +54,7 @@ A skill `microsoft-foundry` é responsável pelo fluxo de trabalho do agente hos 4. Inspecione a resposta. Ela deve explicar que o catálogo não contém preços. Não pode conter um token do Foundry, uma credencial, um endpoint de projeto, um identificador bruto de conversa do Foundry ou um rastreamento de pilha. - ![Resposta JSON sanitizada do endpoint local do concierge](../../../_images/cli-8-sanitized-json-response.png) + ![Resposta JSON sanitizada do endpoint local do concierge](../../../../_images/cli-8-sanitized-json-response.png) ## Crie o widget de chat @@ -73,7 +73,7 @@ O proxy oferece ao navegador uma forma segura de acessar o concierge. Agora, voc Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Captura de tela do widget Backer Concierge no site do Tailspin Toys](../../../_images/cli-8-backer-concierge-widget.png) + ![Captura de tela do widget Backer Concierge no site do Tailspin Toys](../../../../_images/cli-8-backer-concierge-widget.png) 4. Revise os resultados com base nas evidências apresentadas. Se alguma verificação falhar, peça ao Copilot para corrigir o comportamento correspondente do proxy ou do widget e executar novamente as verificações que falharam antes de concluir. diff --git a/docs/pt-br/cli/8-foundry-agent/README.md b/docs/pt-br/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/pt-br/cli/8-foundry-agent/README.md rename to docs/pt-br/real-world-development/cli/8-foundry-agent/README.md index af8b0e8c..c1b03207 100644 --- a/docs/pt-br/cli/8-foundry-agent/README.md +++ b/docs/pt-br/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/cli/8-foundry-agent +slug: pt-br/real-world-development/cli/8-foundry-agent title: "Opcional: Incorpore o Foundry" description: "Uma série de três módulos para preparar um modelo, criar e implantar um agente baseado no catálogo e conectá-lo ao Tailspin Toys." authors: diff --git a/docs/pt-br/cli/9-review.md b/docs/pt-br/real-world-development/cli/9-review.md similarity index 100% rename from docs/pt-br/cli/9-review.md rename to docs/pt-br/real-world-development/cli/9-review.md diff --git a/docs/pt-br/cli/README.md b/docs/pt-br/real-world-development/cli/README.md similarity index 98% rename from docs/pt-br/cli/README.md rename to docs/pt-br/real-world-development/cli/README.md index fb0a22de..c40b82ac 100644 --- a/docs/pt-br/cli/README.md +++ b/docs/pt-br/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/cli +slug: pt-br/real-world-development/cli title: "CLI do GitHub Copilot" authors: - geektrainer diff --git a/docs/pt-br/vscode/6-iterating.md b/docs/pt-br/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/pt-br/vscode/6-iterating.md rename to docs/pt-br/real-world-development/vscode/6-iterating.md index f0a44dce..1fca4bf7 100644 --- a/docs/pt-br/vscode/6-iterating.md +++ b/docs/pt-br/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ Os controles de alto contraste e modo claro que você implementou com o agente p 9. Retorne à guia **Conversation**. 10. Se houver fluxos de trabalho aguardando aprovação, selecione **Approve and run workflows**. - ![Aprovar e executar fluxos de trabalho](../../_images/shared-approve-workflows.png) + ![Aprovar e executar fluxos de trabalho](../../../_images/shared-approve-workflows.png) 11. Aguarde a conclusão dos fluxos de trabalho. Se tudo correr bem, eles deverão passar. > [!TIP] diff --git a/docs/pt-br/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/pt-br/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 5a05e05d..6ca138d6 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ O projeto contém o modelo e, posteriormente, o agente hospedado. Ao retomar est 1. Selecione **Foundry Toolkit** na barra de atividades, expanda **Help and Feedback** e selecione **Ask Copilot**. Confirme o modelo de sua escolha no menu suspenso e envie o prompt `/foundrytk-quick-start` gerado. - ![Captura de tela mostrando a sequência de início rápido do Foundry Toolkit.](../../../_images/vscode-foundry-setup.png) + ![Captura de tela mostrando a sequência de início rápido do Foundry Toolkit.](../../../../_images/vscode-foundry-setup.png) 2. No fluxo interativo, responda a **Where are you starting from?** com **Set up Foundry** e, em seguida, a **What do you have already?** com **I have an Azure subscription or Foundry resources**. 3. Revise as aprovações de ferramentas. Se os comandos propostos e seu escopo forem adequados, selecione **Allow azmcp …** para esta sessão para reduzir as solicitações repetidas de aprovação. @@ -93,7 +93,7 @@ Seguir regras e fundamentar as respostas importa mais aqui do que escolher o mai 3. Confirme o projeto, a implantação, a capacidade e o custo antes de aprovar. Se for adequado após revisar o escopo, selecione **Allow az …** para esta sessão para reduzir as solicitações repetidas. 4. Selecione **Foundry Toolkit**, expanda **My Resources** e selecione **Models**. Confirme que o modelo implantado aparece no Foundry. A captura de tela é um exemplo; sua região pode oferecer um modelo diferente. - ![Captura de tela mostrando um exemplo de implantação de modelo no Foundry Toolkit.](../../../_images/vscode-model-deployed.png) + ![Captura de tela mostrando um exemplo de implantação de modelo no Foundry Toolkit.](../../../../_images/vscode-model-deployed.png) ## Testar o modelo implantado diff --git a/docs/pt-br/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 96% rename from docs/pt-br/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index bbfe158f..c7eb585e 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ O toolkit gera a estrutura inicial do código no repositório atual e abre uma c 1. Selecione **Foundry Toolkit**, expanda **Developer Tools**, expanda **+ Build** e selecione **+ Create Agent**. Em **Create Agent**, selecione **Code an agent with Copilot**. - ![Captura de tela mostrando a página de criação de agente.](../../../_images/vscode-create-agent.png) + ![Captura de tela mostrando a página de criação de agente.](../../../../_images/vscode-create-agent.png) 2. Na nova conversa, confirme que ela muda para **AIAgentExpert**. Substitua o prompt gerado pelo prompt personalizado e envie-o: @@ -65,7 +65,7 @@ O toolkit gera a estrutura inicial do código no repositório atual e abre uma c 5. Reutilize os seis prompts de [Testar o modelo implantado][model-tests]. Verifique as respostas em relação ao `db/catalog.json` completo, em vez de presumir que a classificação do subconjunto de nove jogos corresponde à classificação do catálogo completo. 6. Alterne entre **Input & Output**, **Events** e **Tools** para inspecionar os dados das solicitações e respostas, os eventos da sessão e as chamadas de ferramentas. Se o comportamento violar os critérios de aceitação, peça ao Copilot para corrigi-lo e execute novamente os testes específicos e as verificações do Inspector antes de implantar. - ![Captura de tela mostrando o fluxo de depuração local do agente.](../../../_images/vscode-agent-debug.png) + ![Captura de tela mostrando o fluxo de depuração local do agente.](../../../../_images/vscode-agent-debug.png) ## Implantar e testar o agente hospedado @@ -77,17 +77,17 @@ A transferência **Go production** empacota o agente existente para o Foundry. E /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![Captura de tela mostrando as opções de transferência do agente AIAgentExpert.](../../../_images/vscode-go-production-handoff.png) + ![Captura de tela mostrando as opções de transferência do agente AIAgentExpert.](../../../../_images/vscode-go-production-handoff.png) 2. Revise a conversa e o terminal para conferir os parâmetros e as aprovações de comandos. Confirme que a implantação tem como destino o projeto `tailspin-toys` existente e revise os recursos sujeitos a cobrança antes de aprovar. 3. Se o Copilot oferecer uma suíte de avaliação, você pode aceitá-la e executá-la como verificação adicional. 4. Selecione **Foundry Toolkit**, expanda **My Resources** e selecione **Agents**. Na guia **Agents**, mude para **Hosted Agent**. - ![Captura de tela mostrando o agente hospedado implantado.](../../../_images/vscode-agent-deployed.png) + ![Captura de tela mostrando o agente hospedado implantado.](../../../../_images/vscode-agent-deployed.png) 5. Selecione o nome do agente e confirme que o status da implantação é **Running**. Mude para **Playground** e repita as verificações de fundamentação, dados ausentes, itens fora do catálogo, falta de especificidade e classificação em relação ao catálogo implantado. - ![Captura de tela mostrando uma resposta do agente hospedado implantado.](../../../_images/vscode-agent-response.png) + ![Captura de tela mostrando uma resposta do agente hospedado implantado.](../../../../_images/vscode-agent-response.png) 6. Se a implantação ou as respostas falharem, inspecione o status informado e os logs com o Copilot, corrija a falha no projeto existente e repita as verificações. Não prossiga com uma implantação não verificada. diff --git a/docs/pt-br/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/pt-br/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 336e8d83..d9708bca 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ A interface agora tem um backend verificado. Os testes de ponta a ponta verifica Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Captura de tela mostrando o widget de chat Backer Concierge em ação](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Captura de tela mostrando o widget de chat Backer Concierge em ação](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Mantenha a função e o site em execução e verifique a experiência completa: diff --git a/docs/pt-br/vscode/7-foundry-toolkit/README.md b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/pt-br/vscode/7-foundry-toolkit/README.md rename to docs/pt-br/real-world-development/vscode/7-foundry-toolkit/README.md index ea55841e..0f103455 100644 --- a/docs/pt-br/vscode/7-foundry-toolkit/README.md +++ b/docs/pt-br/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/vscode/7-foundry-toolkit +slug: pt-br/real-world-development/vscode/7-foundry-toolkit title: "Opcional: Incorporar o Foundry" description: "Crie um Backer Concierge fundamentado no catálogo com o VS Code e o Microsoft Foundry Toolkit em três módulos focados." authors: diff --git a/docs/pt-br/vscode/README.md b/docs/pt-br/real-world-development/vscode/README.md similarity index 98% rename from docs/pt-br/vscode/README.md rename to docs/pt-br/real-world-development/vscode/README.md index b9345bf2..603be414 100644 --- a/docs/pt-br/vscode/README.md +++ b/docs/pt-br/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: pt-br/vscode +slug: pt-br/real-world-development/vscode title: "VS Code" authors: - geektrainer diff --git a/docs/real-world-development/README.md b/docs/real-world-development/README.md new file mode 100644 index 00000000..287bf29c --- /dev/null +++ b/docs/real-world-development/README.md @@ -0,0 +1,38 @@ +--- +title: "Real-world development" +slug: real-world-development +authors: + - geektrainer +lastUpdated: 2026-09-16 +--- + +Explore GitHub Copilot across the software development lifecycle using realistic scenarios, a complete application, and a shared backlog. You will work iteratively to plan changes, create code, test behavior, review pull requests, and manage work with agents. + +## Scenario + +You are a new developer for Tailspin Toys, a fictional company that provides crowdfunding for board games with a developer theme. Your team's backlog is already filed as GitHub issues, ready for you to pick up. It includes feature work such as filtering and pagination alongside quality improvements such as accessibility and coding standards. + +## Choose your environment + +GitHub Copilot meets you wherever you work. Choose the environment that matches how you want to build. Each workshop starts with its own setup and uses the shared Tailspin Toys scenario. + +### [GitHub Copilot CLI][cli] + +Use the agentic assistant in your terminal. Connect MCP servers, generate code with plan mode, and build skills, custom agents, and slash commands. + +### [GitHub Copilot app][app] + +Run parallel agent sessions, switch session modes, collaborate on canvases, and manage GitHub issues and pull requests in the desktop app. + +### [GitHub Copilot cloud agent][cloud] + +Assign GitHub issues to an asynchronous agent, guide its work, monitor progress, and review the pull requests it opens. + +### [Visual Studio Code][vscode] + +Use GitHub Copilot in Visual Studio Code and GitHub Codespaces. Work with Copilot Chat agent mode, MCP servers, and custom agents without leaving your editor. + +[cli]: cli/ +[app]: app/ +[cloud]: cloud/ +[vscode]: vscode/ diff --git a/docs/app/0-prerequisites.md b/docs/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/app/0-prerequisites.md rename to docs/real-world-development/app/0-prerequisites.md index 7e9a4050..0000f616 100644 --- a/docs/app/0-prerequisites.md +++ b/docs/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ You'll work against your own copy of the Tailspin Toys project. Create it now fr 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**. - ![The Use this template button with Create a new repository selected from the dropdown](../_images/app-0-use-template.png) + ![The Use this template button with Create a new repository selected from the dropdown](../../_images/app-0-use-template.png) 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. - ![The Create a new repository form with github-samples/tailspin-toys set as the template and the repository name filled in](../_images/app-0-create-repository.png) + ![The Create a new repository form with github-samples/tailspin-toys set as the template and the repository name filled in](../../_images/app-0-create-repository.png) 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/app/1-install-copilot-app.md b/docs/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/app/1-install-copilot-app.md rename to docs/real-world-development/app/1-install-copilot-app.md diff --git a/docs/app/2-add-star-rating.md b/docs/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/app/2-add-star-rating.md rename to docs/real-world-development/app/2-add-star-rating.md index 0ac7a9e3..4f12f310 100644 --- a/docs/app/2-add-star-rating.md +++ b/docs/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Let's start a new session to begin exploring the project and implementing our fe 2. Select the **Home screen**. 3. Ensure `tailspin-toys` is selected for the repo. - ![The GitHub Copilot app prompt box with the repository selector set to tailspin-toys and the model selector shown beneath the prompt](../_images/app-2-start-session.png) + ![The GitHub Copilot app prompt box with the repository selector set to tailspin-toys and the model selector shown beneath the prompt](../../_images/app-2-start-session.png) 4. Use the following prompt to request the change: @@ -55,7 +55,7 @@ All AI-generated changes deserve a review before they're merged, even small ones 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. - ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../_images/app-2-review-panel.png) + ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../../_images/app-2-review-panel.png) 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`: @@ -80,7 +80,7 @@ Of course we shouldn't just read the code and assume it works. We should visuall 1. In the review panel on the right side of Copilot app, select **Terminal**. If there is no **Terminal** button, select the **+** (labeled as **Open in panel**), then select **Terminal**. - ![The Terminal button in the review panel of the GitHub Copilot app](../_images/app-terminal-screenshot.png) + ![The Terminal button in the review panel of the GitHub Copilot app](../../_images/app-terminal-screenshot.png) 2. Enter the following command in the terminal window to start the web app's dev server: diff --git a/docs/app/3-custom-instructions.md b/docs/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/app/3-custom-instructions.md rename to docs/real-world-development/app/3-custom-instructions.md index 4711afd4..5a6dcf74 100644 --- a/docs/app/3-custom-instructions.md +++ b/docs/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ Take a moment to read the instruction files this repository ships with — there 1. If the review panel is not already visible, open it by selecting **Toggle review panel** in the upper right. - ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../_images/app-2-review-panel.png) + ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../../_images/app-2-review-panel.png) 2. Select the **+** to add a new item to the review panel. 3. Select **File**. @@ -66,7 +66,7 @@ Take a moment to read the instruction files this repository ships with — there 6. 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. 7. Select **Show folder view** to open the folder navigator. - ![The Show folder view button in the review panel with a file open in the GitHub Copilot app](../_images/app-show-folder-view.png) + ![The Show folder view button in the review panel with a file open in the GitHub Copilot app](../../_images/app-show-folder-view.png) 8. Navigate to the `.github/instructions` folder and explore the files. Note there are instructions for Astro files, the Drizzle data layer, tests, and more. 9. 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. @@ -87,7 +87,7 @@ In the previous lesson you started a session from a direct prompt. Most work, ho 2. Select the issue titled **Update our repository coding standards** to open the issue. 3. Select **New session** in the upper right to start a new session based on the issue. - ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../_images/app-new-session-from-issue.png) + ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../../_images/app-new-session-from-issue.png) 4. Use the following prompt to request Copilot update the instructions files to meet the requirements documented in the issue: @@ -103,7 +103,7 @@ Let's both read through the updates Copilot made, but also ask it to provide an 1. Select **Changes** in the upper right to open the code changes. - ![The session panel tabs in the GitHub Copilot app with an arrow pointing to the Changes tab](../_images/app-select-changes.png) + ![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 updated instructions file. Confirm it has the guidelines about adding documentation and comments to the code. diff --git a/docs/app/4-build-filtering.md b/docs/real-world-development/app/4-build-filtering.md similarity index 96% rename from docs/app/4-build-filtering.md rename to docs/real-world-development/app/4-build-filtering.md index 328b1edd..31b71321 100644 --- a/docs/app/4-build-filtering.md +++ b/docs/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ Let's open the issue, start a new session, and create a plan by switching into p 2. Select the issue titled **Allow users to filter games by category and publisher**. 3. Select **New session** in the upper right. - ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../_images/app-new-session-from-issue.png) + ![The issue view in the GitHub Copilot app with an arrow pointing to the New session button in the upper right](../../_images/app-new-session-from-issue.png) 4. Select Shift+Tab until the mode displays **Plan**. - ![The GitHub Copilot app prompt box with an arrow pointing to the mode selector set to Plan](../_images/app-4-plan-mode.png) + ![The GitHub Copilot app prompt box with an arrow pointing to the mode selector set to Plan](../../_images/app-4-plan-mode.png) 5. Send the following prompt. The filtering issue is already in this session's context because you started from it: @@ -92,12 +92,12 @@ All AI-generated code needs review before it's merged. Let's both review the cod 1. Select **Changes** in the upper right to open the code changes. - ![The session panel tabs in the GitHub Copilot app with an arrow pointing to the Changes tab](../_images/app-select-changes.png) + ![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 review panel on the right side of Copilot app, select **Terminal**. If there is no **Terminal** button, select the **+** (labeled as **Open in panel**), then select **Terminal**. - ![The Terminal button in the review panel of the GitHub Copilot app](../_images/app-terminal-screenshot.png) + ![The Terminal button in the review panel of the GitHub Copilot app](../../_images/app-terminal-screenshot.png) 4. Enter the following command in the terminal window to start the web app's dev server: @@ -138,7 +138,7 @@ Let's explore the skill to see what it does. 1. If the review panel is not already visible, open it by selecting **Toggle review panel** in the upper right. - ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../_images/app-2-review-panel.png) + ![The GitHub Copilot app top toolbar with an arrow pointing to the Toggle review panel button to the right of Create PR](../../_images/app-2-review-panel.png) 2. Select the **+** to add a new item to the review panel. 3. Select **File**. diff --git a/docs/app/5-mcp-playwright.md b/docs/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/app/5-mcp-playwright.md rename to docs/real-world-development/app/5-mcp-playwright.md index 202d83bd..3f47d21f 100644 --- a/docs/app/5-mcp-playwright.md +++ b/docs/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ There are many other MCP servers available that provide access to different tool 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 Ctrl+, to open the Copilot app settings page. +1. Press Command+, (Mac) or Ctrl+, (Windows/Linux) 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**. diff --git a/docs/app/6-agent-merge.md b/docs/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/app/6-agent-merge.md rename to docs/real-world-development/app/6-agent-merge.md index 55aff8bb..6acd496b 100644 --- a/docs/app/6-agent-merge.md +++ b/docs/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ You've reviewed the code manually, run tests, and even allowed Copilot to valida 2. In the upper right-hand corner, select the dropdown next to **Create PR**. 3. Select **Agent merge** to enable agent merge. - ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../_images/app-enable-agent-merge.png) + ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../../_images/app-enable-agent-merge.png) 4. The button text now changes to **Agent merge**. 5. Select the **Agent merge** button to start the agent merge process. @@ -43,7 +43,7 @@ After a few moments, you'll notice Copilot starts work again, looking at the PR 6. Allow agent merge to merge the pull request by selecting the dropdown next to **Agent merge** then **Merge pull request**. - ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../_images/app-agent-merge-merge.png) + ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../../_images/app-agent-merge-merge.png) 7. Once all CI processes are green (meaning the tests passed), Copilot will merge the pull request! diff --git a/docs/app/7-canvases.md b/docs/real-world-development/app/7-canvases.md similarity index 96% rename from docs/app/7-canvases.md rename to docs/real-world-development/app/7-canvases.md index e9844a3a..146b9bdf 100644 --- a/docs/app/7-canvases.md +++ b/docs/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/app/9-review/ + link: /copilot-workshops/real-world-development/app/9-review/ label: "Review and next steps" --- @@ -73,7 +73,7 @@ Canvases can become assets in the repository, just like instructions files and s 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. - ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../_images/app-enable-agent-merge.png) + ![The Create PR dropdown in the GitHub Copilot app expanded, with an arrow pointing to the Agent merge option](../../_images/app-enable-agent-merge.png) 4. The button text now changes to **Agent merge**. 5. Select the **Agent merge** button to start the agent merge process. @@ -84,7 +84,7 @@ After a few moments, you'll notice Copilot starts work again, looking at the PR 6. Allow agent merge to merge the pull request by selecting the dropdown next to **Agent merge** then **Merge pull request**. - ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../_images/app-agent-merge-merge.png) + ![The Agent merge dropdown showing the agent's allowed actions — Address reviews, Fix CI failures, Resolve conflicts — with an arrow pointing to Merge pull request](../../_images/app-agent-merge-merge.png) 7. Wait for all CI processes to pass (go green). Once they do, Copilot will merge the pull request automatically! diff --git a/docs/app/8-foundry-canvas/1-project-and-model.md b/docs/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 92% rename from docs/app/8-foundry-canvas/1-project-and-model.md rename to docs/real-world-development/app/8-foundry-canvas/1-project-and-model.md index bf26fbf3..f5602b09 100644 --- a/docs/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/8-foundry-canvas/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/ label: "Optional: Incorporate Foundry" next: - link: /copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Build and deploy the agent --- @@ -33,7 +33,7 @@ The setup connects the GitHub Copilot app to Azure while keeping all feature wor 3. Install the [Azure Developer CLI][install-azd], then verify that version 1.27.1 or later is installed using `azd version`. 4. Open the GitHub Copilot app, open **Customize**, then select **Plugins**. Search for `microsoft-foundry` and select **Install** for the Microsoft Foundry plugin, which bundles Canvas and the Foundry skills. - ![Install Microsoft Foundry plugin](../../_images/app-8-install-foundry-plugin.png) + ![Install Microsoft Foundry plugin](../../../_images/app-8-install-foundry-plugin.png) 5. In **Customize**, select **Plugins**, search for `azure` or select it from the **Featured** list, then select **Install** for the Azure plugin. 6. On the **My work** tab, find and open the issue titled **Add a Backer Concierge assistant for catalog questions** in your Tailspin Toys repository. Select **New session** to start an issue-linked session in a new worktree. Keep this repository, worktree branch, and issue session for all three modules. @@ -57,11 +57,11 @@ The sample repository includes an export script that gives the agent a file it c npm run db:export ``` - ![Generate catalog export](../../_images/app-8-generate-catalog-export.png) + ![Generate catalog export](../../../_images/app-8-generate-catalog-export.png) 10. Open `db/catalog.json` and confirm it contains 21 games with a title, description, category, publisher, and star rating. Check its `note` field: the catalog doesn't contain funding totals, backer counts, pledge tiers, or release dates. Treat missing prices, player counts, and play times as unavailable too, rather than filling gaps from outside knowledge. If the export fails or differs, ask Copilot to investigate and rerun it before continuing. - ![Catalog export open in the Copilot app](../../_images/app-8-view-catalog.png) + ![Catalog export open in the Copilot app](../../../_images/app-8-view-catalog.png) ## Set up a Foundry project and model @@ -95,7 +95,7 @@ Creating the project and deployment in chat first means Canvas connects only to Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![Create Foundry project](../../_images/app-8-foundry-project-created.png) + ![Create Foundry project](../../../_images/app-8-foundry-project-created.png) 14. Ask Copilot to recommend a model. The issue's acceptance criteria are already in context because the session started from the issue: @@ -105,7 +105,7 @@ Creating the project and deployment in chat first means Canvas connects only to 15. Confirm Copilot loads the `microsoft-foundry` skill, then choose an available model based on its tradeoffs. The Microsoft Foundry hosted-agent quickstart currently uses `gpt-5.4-mini`, but availability and quota vary by region. - ![Select model](../../_images/app-8-select-model.png) + ![Select model](../../../_images/app-8-select-model.png) 16. Ask Copilot to deploy your selection, reviewing the target project and cost before approval: @@ -124,7 +124,7 @@ This check verifies the project and model before any agent code exists. A model 18. Open the **More options** menu in the top-right corner of Canvas, then select **Sign in**. 19. Select the **tailspin-toys** Foundry project. Expand **Models** and confirm your deployment appears with the expected name and status. - ![Validate project and model in Canvas](../../_images/app-8-validate-project-model.png) + ![Validate project and model in Canvas](../../../_images/app-8-validate-project-model.png) 20. In the same session, enter: diff --git a/docs/app/8-foundry-canvas/2-build-and-deploy.md b/docs/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 94% rename from docs/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index 12716333..2809addd 100644 --- a/docs/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Prepare project and model next: - link: /copilot-workshops/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: Connect the agent to the site --- @@ -50,7 +50,7 @@ Canvas scaffolds the code, folder structure, and root `azure.yaml` that connect Canvas sends the prompt and current subscription and Foundry project context to Copilot. It looks for Agent Framework + Responses API samples; a selection such as **Agent with Local Tools (Responses, Agent Framework, Python)** may appear. - ![Scaffold Backer Concierge agent in Canvas](../../_images/app-8-scaffold-backer-concierge.png) + ![Scaffold Backer Concierge agent in Canvas](../../../_images/app-8-scaffold-backer-concierge.png) 5. Review Copilot's changes in the **Files** tab against this checkpoint. Generated filenames inside `src` can differ, but the project boundaries and `azure.yaml` location should match: @@ -91,7 +91,7 @@ Canvas scaffolds the code, folder structure, and root `azure.yaml` that connect Expected: Names only real titles from the catalog and uses the correct information for each title. - ![Grounded recommendation in Agent Inspector](../../_images/app-8-grounded-recommendation.png) + ![Grounded recommendation in Agent Inspector](../../../_images/app-8-grounded-recommendation.png) 10. Test a **hallucination trap**: @@ -145,7 +145,7 @@ Canvas uses `azd` to deploy the tested agent. Foundry packages the service sourc 16. On Canvas, in **Deploy and test**, select **Deploy to Foundry**. Review the prompt it drops into chat. - ![Deploy to Foundry prompt on the canvas](../../_images/app-8-deploy-to-foundry.png) + ![Deploy to Foundry prompt on the canvas](../../../_images/app-8-deploy-to-foundry.png) 17. Check for a deployment confirmation, agent version, status, and link to the agent playground in Foundry. If deployment fails, send the error to Copilot and resolve it in the same project before retrying through Canvas. 18. Select **Test in Foundry Portal** from Canvas to open the deployed agent playground. Rerun all six acceptance checks from steps 9–14 against this deployed version, retaining the paired prompts in one conversation for continuity. Compare its responses with the catalog; if any check fails, ask Copilot to fix it, rerun local tests, redeploy through Canvas, and retest the hosted version. diff --git a/docs/app/8-foundry-canvas/3-connect-to-site.md b/docs/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 96% rename from docs/app/8-foundry-canvas/3-connect-to-site.md rename to docs/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 33ce7cd5..cb011ef5 100644 --- a/docs/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: Build and deploy the agent next: - link: /copilot-workshops/app/9-review/ + link: /copilot-workshops/real-world-development/app/9-review/ label: Review and next steps --- @@ -56,7 +56,7 @@ The proxy is the only piece of code allowed to access your Azure credentials. Fo 7. Inspect the response: it should explain that the catalog doesn't contain prices. Confirm it contains no Foundry token, credential, internal conversation identifier, project endpoint, or stack trace. If the Function cannot be reached or the response leaks details or invents prices, send the sanitized failure to Copilot, fix it, and rerun the proxy tests before continuing. - ![Local proxy test](../../_images/app-8-local-proxy-test.png) + ![Local proxy test](../../../_images/app-8-local-proxy-test.png) ## Build and test the chat widget @@ -77,7 +77,7 @@ With the proxy running, the widget provides the visible conversation on the site 11. Review the report and verify the claimed behavior in the browser, including keyboard use and the two-turn conversation from the [hosted-agent acceptance checks][agent-checks]. Confirm browser requests go through `/api/concierge` with an opaque handle, not directly to Foundry, and responses expose no credentials or internal Foundry identifiers. Check that recommendations and missing-data answers stay within the catalog boundary. Address failing tests with Copilot, restart the affected local service if needed, and rerun the tests. - ![End-to-end test results for the Backer Concierge widget](../../_images/app-8-e2e-test-results.png) + ![End-to-end test results for the Backer Concierge widget](../../../_images/app-8-e2e-test-results.png) ## Checkpoint and next steps diff --git a/docs/app/8-foundry-canvas/README.md b/docs/real-world-development/app/8-foundry-canvas/README.md similarity index 95% rename from docs/app/8-foundry-canvas/README.md rename to docs/real-world-development/app/8-foundry-canvas/README.md index 849725c9..a6285973 100644 --- a/docs/app/8-foundry-canvas/README.md +++ b/docs/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "Optional: Incorporate Foundry" -slug: app/8-foundry-canvas +slug: real-world-development/app/8-foundry-canvas description: "Build a catalog-grounded Backer Concierge with Microsoft Foundry Canvas, with safe stopping points along the way." authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/app/9-review/ + link: /copilot-workshops/real-world-development/app/9-review/ label: Review and next steps next: - link: /copilot-workshops/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: Prepare project and model --- diff --git a/docs/app/9-review.md b/docs/real-world-development/app/9-review.md similarity index 100% rename from docs/app/9-review.md rename to docs/real-world-development/app/9-review.md diff --git a/docs/app/README.md b/docs/real-world-development/app/README.md similarity index 99% rename from docs/app/README.md rename to docs/real-world-development/app/README.md index ba58de46..57ee9df2 100644 --- a/docs/app/README.md +++ b/docs/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: app +slug: real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/cli/0-prerequisites.md b/docs/real-world-development/cli/0-prerequisites.md similarity index 92% rename from docs/cli/0-prerequisites.md rename to docs/real-world-development/cli/0-prerequisites.md index b75cccb2..284f0c9c 100644 --- a/docs/cli/0-prerequisites.md +++ b/docs/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ To create a copy of the repository for the code you'll create, you'll make an in 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**. - ![Use this template button](../_images/ex0-use-template.png) + ![Use this template button](../../_images/ex0-use-template.png) 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. - ![Input the repository template settings](../_images/ex0-repository-settings.png) + ![Input the repository template settings](../../_images/ex0-repository-settings.png) 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. @@ -35,11 +35,11 @@ Next up, you'll use a codespace to complete the lab exercises. 1. Navigate to your newly created repository. 2. Select the green **Code** button. - ![Select the Code button](../_images/ex0-code-button.png) + ![Select the Code button](../../_images/ex0-code-button.png) 3. Select the **Codespaces** tab and select the **+** button to create a new Codespace. - ![Create a new codespace](../_images/ex0-create-codespace.png) + ![Create a new codespace](../../_images/ex0-create-codespace.png) 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. diff --git a/docs/cli/1-install-copilot-cli.md b/docs/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/cli/1-install-copilot-cli.md rename to docs/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/cli/2-custom-instructions.md b/docs/real-world-development/cli/2-custom-instructions.md similarity index 98% rename from docs/cli/2-custom-instructions.md rename to docs/real-world-development/cli/2-custom-instructions.md index e1bfab7d..83cc6b22 100644 --- a/docs/cli/2-custom-instructions.md +++ b/docs/real-world-development/cli/2-custom-instructions.md @@ -107,7 +107,7 @@ To see the impact of custom instructions, start by generating code with the curr Running Copilot CLI from the **repository root** ensures it picks up `.github/copilot-instructions.md` automatically. `--enable-all-github-mcp-tools` turns on the read/write GitHub MCP tools so Copilot can read your backlog and open pull requests later in the workshop. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. At the Copilot CLI prompt, ask it to generate the publishers helper that the filtering UI will use: ```plaintext diff --git a/docs/cli/3-generating-code.md b/docs/real-world-development/cli/3-generating-code.md similarity index 95% rename from docs/cli/3-generating-code.md rename to docs/real-world-development/cli/3-generating-code.md index 7a71d1f2..d1d632e6 100644 --- a/docs/cli/3-generating-code.md +++ b/docs/real-world-development/cli/3-generating-code.md @@ -25,7 +25,7 @@ One of the best uses of AI is planning. Oftentimes you'll have a good concept of You'll start the process of creating the new functionality by utilizing plan mode in Copilot CLI. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. Enter the following prompt into Copilot CLI to create a plan based on the filtering issue: ``` diff --git a/docs/cli/4-mcp.md b/docs/real-world-development/cli/4-mcp.md similarity index 97% rename from docs/cli/4-mcp.md rename to docs/real-world-development/cli/4-mcp.md index 35bc2649..52a13944 100644 --- a/docs/cli/4-mcp.md +++ b/docs/real-world-development/cli/4-mcp.md @@ -37,7 +37,7 @@ There are many other MCP servers available that provide access to different tool 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. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. In your Copilot CLI session, enter: ```text diff --git a/docs/cli/5-agent-skills.md b/docs/real-world-development/cli/5-agent-skills.md similarity index 95% rename from docs/cli/5-agent-skills.md rename to docs/real-world-development/cli/5-agent-skills.md index 5eecd846..6dc30cdb 100644 --- a/docs/cli/5-agent-skills.md +++ b/docs/real-world-development/cli/5-agent-skills.md @@ -62,7 +62,7 @@ Because Tailspin Toys has a set of requirements for creating PRs, they created a As highlighted previously, skills are automatically invoked by Copilot CLI. As a result, all we need to do is ask Copilot to create a PR! 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. Ask Copilot to create a PR by using the following prompt: ``` diff --git a/docs/cli/6-custom-agents.md b/docs/real-world-development/cli/6-custom-agents.md similarity index 96% rename from docs/cli/6-custom-agents.md rename to docs/real-world-development/cli/6-custom-agents.md index e7f81dce..467f9b2f 100644 --- a/docs/cli/6-custom-agents.md +++ b/docs/real-world-development/cli/6-custom-agents.md @@ -52,7 +52,7 @@ A custom agent has already been created for you for accessibility. Let's review You can start a custom agent in Copilot CLI by using the `/agent` command. Let's perform an accessibility pass on our website. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/models` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. Bring up the list of agents by typing `/agent` in the prompt window in Copilot CLI and selecting Enter. 4. Select the **Accessibility agent** from the list of available agents. 5. Use the following prompt to ask the accessibility agent to perform a review and generate fixes for the accessibility backlog item: diff --git a/docs/cli/7-slash-commands.md b/docs/real-world-development/cli/7-slash-commands.md similarity index 96% rename from docs/cli/7-slash-commands.md rename to docs/real-world-development/cli/7-slash-commands.md index 57ed3854..2359e829 100644 --- a/docs/cli/7-slash-commands.md +++ b/docs/real-world-development/cli/7-slash-commands.md @@ -25,7 +25,7 @@ Using any tool, including an AI tool, is a skill. Working together as a team, sh Let's create a GitHub gist we could share with our team. 1. Return to your codespace. If you closed it, navigate to your repository on GitHub.com, select **Code** > **Codespaces**, then reopen your existing codespace. -2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Ctrl+\`, then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. +2. Return to your open Copilot CLI session. If the terminal is closed or you exited Copilot CLI, open a terminal by selecting Control+\` (Mac) or Ctrl+\` (Windows/Linux), then start it from the repository root by running `copilot --yolo --enable-all-github-mcp-tools`. Trust the project folder if prompted, then run `/model` and select **Auto**. 3. In the prompt window for Copilot CLI, send the following command: ``` @@ -50,7 +50,7 @@ When working on larger or more complex tasks you may bump into the maximum conte 2. In just a couple of moments, Copilot CLI will generate a visual representation of its current context: - ![Screenshot of context window from Copilot CLI](../_images/cli-7-context-window.png) + ![Screenshot of context window from Copilot CLI](../../_images/cli-7-context-window.png) 3. Note the model displayed (which may be different than the one in the image), and the current percentage of tokens used. The rest of the information highlights: diff --git a/docs/cli/8-foundry-agent/1-project-and-model.md b/docs/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/cli/8-foundry-agent/1-project-and-model.md rename to docs/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 93baa56e..1839fc35 100644 --- a/docs/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ The agent needs the catalog as a file it can read. The Tailspin Toys sample incl npm run db:export ``` - ![Summary of the catalog export](../../_images/cli-8-export-db-catalog.png) + ![Summary of the catalog export](../../../_images/cli-8-export-db-catalog.png) 2. Open `db/catalog.json`. Confirm that it contains 21 games with a title, description, category, publisher, and star rating. Its `note` field states that the catalog doesn't contain funding totals, backer counts, pledge tiers, or release dates. It also has no price, player count, or play-time fields. Those omissions define the boundary your agent must respect. @@ -129,7 +129,7 @@ The agent needs a Foundry project and a deployed model. You'll use the Microsoft Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![Create a public Foundry project](../../_images/cli-8-create-foundry-project.png) + ![Create a public Foundry project](../../../_images/cli-8-create-foundry-project.png) 2. After the project is ready, ask Copilot to recommend a model: @@ -139,7 +139,7 @@ The agent needs a Foundry project and a deployed model. You'll use the Microsoft Copilot may prompt you to select a model from the recommended options. - ![Select a model from the recommended options](../../_images/cli-8-select-foundry-model.png) + ![Select a model from the recommended options](../../../_images/cli-8-select-foundry-model.png) We'll continue with `gpt-5.4-mini` in the remaining steps, but availability and quota vary by region. @@ -149,7 +149,7 @@ The agent needs a Foundry project and a deployed model. You'll use the Microsoft Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![Deploy the selected model](../../_images/cli-8-deploy-foundry-model.png) + ![Deploy the selected model](../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > Model availability changes over time. The right choice is a model that Copilot confirms is available in your project, not a hardcoded model from an example. @@ -198,7 +198,7 @@ You'll first grant your signed-in account the **Foundry Project Manager** role f Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Foundry model response recommending a real catalog game and noting that funding data isn't available](../../_images/cli-8-foundry-agent-response.png) + ![Foundry model response recommending a real catalog game and noting that funding data isn't available](../../../_images/cli-8-foundry-agent-response.png) 5. Review the response. It should recommend only a real game from the catalog, use the correct catalog details, and explain that funding information isn't available. If the model invents a title, game details, or a funding total, compare another recommended model before continuing. diff --git a/docs/cli/8-foundry-agent/2-build-and-deploy.md b/docs/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 97% rename from docs/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index 3081801a..9338a6a1 100644 --- a/docs/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ You'll now ask the Microsoft Foundry Skill to scaffold the hosted agent inside t Don't continue until the focused tests pass. - ![Verify the agent scaffolding](../../_images/cli-8-verify-generated-agent.png) + ![Verify the agent scaffolding](../../../_images/cli-8-verify-generated-agent.png) ## Test the agent locally @@ -113,7 +113,7 @@ You'll now check the agent's grounding and conversation behavior through its loc 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![Hosted Agent Deployment tests pass](../../_images/cli-8-passing-acceptance-scenarios.png) + ![Hosted Agent Deployment tests pass](../../../_images/cli-8-passing-acceptance-scenarios.png) 4. Review the results. If the agent can't connect, confirm that the second terminal is still running the service. If a test fails, ask Copilot to fix only the local defect, run the focused tests, and tell you when to restart `azd ai agent run`. Restart the service and rerun the failed acceptance test after each change. @@ -130,7 +130,7 @@ With the local acceptance tests passing, you're ready to deploy the agent to Mic 3. If prompted to select an evaluation suite source, choose **No, set it up later**. - ![Hosted Agent Deployment status and playground link](../../_images/cli-8-hosted-agent-deployment.png) + ![Hosted Agent Deployment status and playground link](../../../_images/cli-8-hosted-agent-deployment.png) 4. Review the deployment status and remote response. Confirm that the agent is running and recommends only real catalog games. If deployment or invocation fails, ask Copilot to diagnose the failure and repeat the remote test before continuing. diff --git a/docs/cli/8-foundry-agent/3-connect-to-site.md b/docs/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 96% rename from docs/cli/8-foundry-agent/3-connect-to-site.md rename to docs/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index 3eeada38..518f0a2d 100644 --- a/docs/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ The `microsoft-foundry` skill owns the hosted-agent workflow, while the broader For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions local proxy setup](../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions local proxy setup](../../../_images/cli-8-azure-functions-proxy.png) 2. Open another terminal, then start the local Function using the command provided by Copilot. Leave the Function running. 3. Return to Copilot CLI and ask Copilot to test the local proxy: @@ -54,7 +54,7 @@ The `microsoft-foundry` skill owns the hosted-agent workflow, while the broader 4. Inspect the response. It should explain that the catalog doesn't contain prices. It must not contain a Foundry token, credential, project endpoint, raw Foundry conversation identifier, or stack trace. - ![Sanitized JSON response from the local concierge endpoint](../../_images/cli-8-sanitized-json-response.png) + ![Sanitized JSON response from the local concierge endpoint](../../../_images/cli-8-sanitized-json-response.png) ## Build the chat widget @@ -73,7 +73,7 @@ The proxy gives the browser a safe way to reach the concierge. You'll now add a Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Screenshot of the Backer Concierge widget in the Tailspin Toys site](../../_images/cli-8-backer-concierge-widget.png) + ![Screenshot of the Backer Concierge widget in the Tailspin Toys site](../../../_images/cli-8-backer-concierge-widget.png) 4. Review the results against the reported evidence. If any checks fail, ask Copilot to fix the relevant proxy or widget behavior and rerun the failed checks before finishing. diff --git a/docs/cli/8-foundry-agent/README.md b/docs/real-world-development/cli/8-foundry-agent/README.md similarity index 99% rename from docs/cli/8-foundry-agent/README.md rename to docs/real-world-development/cli/8-foundry-agent/README.md index 3440bfab..284ccce6 100644 --- a/docs/cli/8-foundry-agent/README.md +++ b/docs/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: cli/8-foundry-agent +slug: real-world-development/cli/8-foundry-agent title: "Optional: Incorporate Foundry" description: "A three-module series to prepare a model, build and deploy a catalog-grounded agent, and connect it to Tailspin Toys." authors: diff --git a/docs/cli/9-review.md b/docs/real-world-development/cli/9-review.md similarity index 100% rename from docs/cli/9-review.md rename to docs/real-world-development/cli/9-review.md diff --git a/docs/cli/README.md b/docs/real-world-development/cli/README.md similarity index 98% rename from docs/cli/README.md rename to docs/real-world-development/cli/README.md index 0aa1511f..d5d65bc9 100644 --- a/docs/cli/README.md +++ b/docs/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: cli +slug: real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/cli/images/.gitkeep b/docs/real-world-development/cli/images/.gitkeep similarity index 100% rename from docs/cli/images/.gitkeep rename to docs/real-world-development/cli/images/.gitkeep diff --git a/docs/cloud/0-prerequisites.md b/docs/real-world-development/cloud/0-prerequisites.md similarity index 92% rename from docs/cloud/0-prerequisites.md rename to docs/real-world-development/cloud/0-prerequisites.md index 4abd67cd..2fabf9c7 100644 --- a/docs/cloud/0-prerequisites.md +++ b/docs/real-world-development/cloud/0-prerequisites.md @@ -14,11 +14,11 @@ To create a copy of the repository for the code you'll create, you'll make an in 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**. - ![Use this template button](../_images/ex0-use-template.png) + ![Use this template button](../../_images/ex0-use-template.png) 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. - ![Input the repository template settings](../_images/ex0-repository-settings.png) + ![Input the repository template settings](../../_images/ex0-repository-settings.png) 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 @@ -30,11 +30,11 @@ Next up, you'll use a codespace to complete the lab exercises. 1. Navigate to your newly created repository. 2. Select the green **Code** button. - ![Select the Code button](../_images/ex0-code-button.png) + ![Select the Code button](../../_images/ex0-code-button.png) 3. Select the **Codespaces** tab and select the **+** button to create a new Codespace. - ![Create a new codespace](../_images/ex0-create-codespace.png) + ![Create a new codespace](../../_images/ex0-create-codespace.png) 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. diff --git a/docs/cloud/1-custom-instructions.md b/docs/real-world-development/cloud/1-custom-instructions.md similarity index 100% rename from docs/cloud/1-custom-instructions.md rename to docs/real-world-development/cloud/1-custom-instructions.md diff --git a/docs/cloud/2-cloud-agent.md b/docs/real-world-development/cloud/2-cloud-agent.md similarity index 97% rename from docs/cloud/2-cloud-agent.md rename to docs/real-world-development/cloud/2-cloud-agent.md index 581dfbb8..f2e06506 100644 --- a/docs/cloud/2-cloud-agent.md +++ b/docs/real-world-development/cloud/2-cloud-agent.md @@ -110,11 +110,11 @@ While everyone understands the importance of documentation, most projects have e 7. Select **Create** to create the issue. 8. On the right side, select **Assign to Copilot** to open the assignment dialog. - ![Assigning Copilot to an issue](../_images/shared-assign-copilot.png) + ![Assigning Copilot to an issue](../../_images/shared-assign-copilot.png) 9. Select **Assign**. - ![Copilot assignment details](../_images/ex4-assign-copilot-details.png) + ![Copilot assignment details](../../_images/ex4-assign-copilot-details.png) 10. Select the **Pull Requests** tab. 11. Open the newly generated pull request (PR), which will be titled something similar to `[WIP]: Code lacks documentation`. If a new PR doesn't appear on the list, wait for a moment or two and refresh the browser window. @@ -127,7 +127,7 @@ While everyone understands the importance of documentation, most projects have e 14. Scroll down the pull request timeline, and you should see an update that Copilot has started working on the issue. 15. Select the **View session** button. - ![Copilot session view](../_images/ex4-view-session.png) + ![Copilot session view](../../_images/ex4-view-session.png) > [!CAUTION] > You may need to refresh the window to see the updated indicator. @@ -160,13 +160,13 @@ As has been highlighted, one of the great advantages of GitHub Copilot cloud age 7. Select **Create** to create the issue. 8. On the right side, select **Assign to Copilot** to open the assignment dialog. - ![Assigning Copilot to an issue](../_images/shared-assign-copilot.png) + ![Assigning Copilot to an issue](../../_images/shared-assign-copilot.png) 9. Select **Assign**. Shortly after, you should see a set of 👀 on the first comment in the issue, indicating Copilot is on the job! -![Copilot uses the eyes emoji to indicate it's working on the issue](../_images/ex4-issue-eyes-emoji.png) +![Copilot uses the eyes emoji to indicate it's working on the issue](../../_images/ex4-issue-eyes-emoji.png) Copilot is now diligently working on your second request! Copilot cloud agent works in a similar fashion to a SWE, so you don't need to actively monitor it, but instead review once it's completed. Let's turn your attention to creating and using custom agents. diff --git a/docs/cloud/3-custom-agents.md b/docs/real-world-development/cloud/3-custom-agents.md similarity index 98% rename from docs/cloud/3-custom-agents.md rename to docs/real-world-development/cloud/3-custom-agents.md index cda3be2a..b362c66f 100644 --- a/docs/cloud/3-custom-agents.md +++ b/docs/real-world-development/cloud/3-custom-agents.md @@ -69,7 +69,7 @@ Mission control is the central location for working with all agents for your env 8. On the right side, select **Assign to Copilot** to open the assignment dialog. 9. Select **Accessibility agent** from the list of custom agents. - ![Screenshot of cloud agent assignment, with custom agent and accessibility highlighted](../_images/ex5-select-custom-agent.png) + ![Screenshot of cloud agent assignment, with custom agent and accessibility highlighted](../../_images/ex5-select-custom-agent.png) 10. Select **Assign**. 11. Copilot gets to work on the task in the background! diff --git a/docs/cloud/4-managing-agents.md b/docs/real-world-development/cloud/4-managing-agents.md similarity index 97% rename from docs/cloud/4-managing-agents.md rename to docs/real-world-development/cloud/4-managing-agents.md index 5aed8fca..dd60f4ec 100644 --- a/docs/cloud/4-managing-agents.md +++ b/docs/real-world-development/cloud/4-managing-agents.md @@ -44,7 +44,7 @@ Now that you've seen the tasks which are active, let's request Copilot include t 1. Select the session which refers to adding a high contrast mode. The exact title will vary depending on the name Copilot uses and the current state of work. - ![Accessibility session in mission control](../_images/ex6-accessibility-session.png) + ![Accessibility session in mission control](../../_images/ex6-accessibility-session.png) 2. Watch the session for a few minutes, until it indicates it's completed the setup and begun its work. You'll know this has happened when you start seeing messages similar to the ones below. 3. In the **Steer active session while Copilot is working** dialog, add the following prompt: @@ -53,7 +53,7 @@ Now that you've seen the tasks which are active, let's request Copilot include t While we are working on a high contrast mode, let's also add a light mode. There should be a switch for this mode as well where users can select their desired display mode. ``` - ![Screenshot of the cloud agent task in the agents page with the steer active session while copilot is working dialog highlighted](../_images/ex6-steer-cloud-agent-task.png) + ![Screenshot of the cloud agent task in the agents page with the steer active session while copilot is working dialog highlighted](../../_images/ex6-steer-cloud-agent-task.png) 4. Press Enter to send the prompt. 5. Notice how Copilot acknowledges the prompt and includes it in its flow. diff --git a/docs/cloud/5-iterating.md b/docs/real-world-development/cloud/5-iterating.md similarity index 96% rename from docs/cloud/5-iterating.md rename to docs/real-world-development/cloud/5-iterating.md index d2793824..09a95b05 100644 --- a/docs/cloud/5-iterating.md +++ b/docs/real-world-development/cloud/5-iterating.md @@ -39,7 +39,7 @@ Let's start by exploring the first pull request (PR) generated by GitHub Copilot 4. Once the pull request is ready, select the **Files changed** tab and review the changes. - ![Files changed tab](../_images/shared-pr-files-changed.png) + ![Files changed tab](../../_images/shared-pr-files-changed.png) 5. Explore the newly updated code, which includes the newly created TSDoc doc comments and other documentation. The exact changes will vary. @@ -49,7 +49,7 @@ Let's start by exploring the first pull request (PR) generated by GitHub Copilot 7. You should see an indicator that some workflows are waiting for approval. 8. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 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 @@ -64,14 +64,14 @@ Working with Copilot on a pull request is not just a one-way street. You can als 2. Select **View Session** to watch Copilot perform its work. Notice how Copilot starts a new session to make the updates. 3. You can select **Back to pull request** to return to the pull request. - ![Back to pull request](../_images/ex7-back-to-pr.png) + ![Back to pull request](../../_images/ex7-back-to-pr.png) 4. Once Copilot has completed the changes, you should see a new commit in the pull request. 5. Select the **Files changed** tab to review the changes. Feel free to continue iterating until you are happy. Once happy, you can convert the PR to ready from a draft, and merge it into the main branch. -![Convert PR to ready](../_images/ex7-ready-for-review.png) +![Convert PR to ready](../../_images/ex7-ready-for-review.png) ## Review the related games feature @@ -85,7 +85,7 @@ Let's return to the PR Copilot generated for resolving our issue about showing r 6. You should see an indicator that some workflows are waiting for approval. 7. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 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**.): @@ -119,7 +119,7 @@ Finally, let's review the accessibility features that were implemented using the 7. You should see an indicator that some workflows are waiting for approval. 8. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 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): diff --git a/docs/cloud/README.md b/docs/real-world-development/cloud/README.md similarity index 97% rename from docs/cloud/README.md rename to docs/real-world-development/cloud/README.md index faeea7f4..ab3ccc37 100644 --- a/docs/cloud/README.md +++ b/docs/real-world-development/cloud/README.md @@ -1,6 +1,6 @@ --- -slug: cloud -title: "Copilot cloud agent" +slug: real-world-development/cloud +title: "GitHub Copilot cloud agent" authors: - geektrainer lastUpdated: 2026-06-30 diff --git a/docs/cloud/images/.gitkeep b/docs/real-world-development/cloud/images/.gitkeep similarity index 100% rename from docs/cloud/images/.gitkeep rename to docs/real-world-development/cloud/images/.gitkeep diff --git a/docs/vscode/0-prerequisites.md b/docs/real-world-development/vscode/0-prerequisites.md similarity index 92% rename from docs/vscode/0-prerequisites.md rename to docs/real-world-development/vscode/0-prerequisites.md index f874d605..8d5e2656 100644 --- a/docs/vscode/0-prerequisites.md +++ b/docs/real-world-development/vscode/0-prerequisites.md @@ -14,11 +14,11 @@ To create a copy of the repository for the code you'll create, you'll make an in 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**. - ![Use this template button](../_images/ex0-use-template.png) + ![Use this template button](../../_images/ex0-use-template.png) 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. - ![Input the repository template settings](../_images/ex0-repository-settings.png) + ![Input the repository template settings](../../_images/ex0-repository-settings.png) 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. @@ -35,11 +35,11 @@ Next up, you'll use a codespace to complete the lab exercises. 1. Navigate to your newly created repository. 2. Select the green **Code** button. - ![Select the Code button](../_images/ex0-code-button.png) + ![Select the Code button](../../_images/ex0-code-button.png) 3. Select the **Codespaces** tab and select the **+** button to create a new Codespace. - ![Create a new codespace](../_images/ex0-create-codespace.png) + ![Create a new codespace](../../_images/ex0-create-codespace.png) 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. @@ -65,7 +65,7 @@ Once you have the extension installed, you may need to authenticate with your Gi 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. - ![Example of Copilot Chat authentication prompt](../_images/ex1-copilot-authentication.png) + ![Example of Copilot Chat authentication prompt](../../_images/ex1-copilot-authentication.png) 5. After authentication, you should see the Copilot Chat window appear. diff --git a/docs/vscode/1-custom-instructions.md b/docs/real-world-development/vscode/1-custom-instructions.md similarity index 99% rename from docs/vscode/1-custom-instructions.md rename to docs/real-world-development/vscode/1-custom-instructions.md index dbe1939e..b17afdec 100644 --- a/docs/vscode/1-custom-instructions.md +++ b/docs/real-world-development/vscode/1-custom-instructions.md @@ -107,7 +107,7 @@ To see the impact of custom instructions, start by sending a prompt with the cur 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. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 4. Send the following prompt: diff --git a/docs/vscode/2-agent-mode.md b/docs/real-world-development/vscode/2-agent-mode.md similarity index 96% rename from docs/vscode/2-agent-mode.md rename to docs/real-world-development/vscode/2-agent-mode.md index c9993a3a..b1f2cbea 100644 --- a/docs/vscode/2-agent-mode.md +++ b/docs/real-world-development/vscode/2-agent-mode.md @@ -83,7 +83,7 @@ The initial implementation of the website is functional, but we want to enhance 1. Select **Agent** from the agents dropdown in the Chat view. The **Agent** agent autonomously plans and implements changes across files, runs terminal commands, and invokes tools. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 2. Select **Claude Sonnet 4.5** from the list of available models. @@ -132,11 +132,11 @@ In addition, the tests need to run (and pass) before you merge everything into y 1. You can continue in the current conversation with Copilot, or start a new one by selecting **New Chat**. 2. Select **Add Context**, **Instructions**, and **ui** as the instructions file. - ![Screenshot showing an example of selecting the UI instructions file](../_images/ex3-select-instructions-file.png) + ![Screenshot showing an example of selecting the UI instructions file](../../_images/ex3-select-instructions-file.png) 3. Ensure **Agent** is still selected from the agents dropdown in the Chat view. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 4. Ensure **Claude Sonnet 4.5** is still selected for the model. 5. Prompt Copilot to implement the functionality based on the related issue in your backlog by using the following prompt: @@ -147,18 +147,18 @@ In addition, the tests need to run (and pass) before you merge everything into y 6. Watch as Copilot begins by exploring the project, locating the files associated with the desired functionality. You should see it finding both the data-layer helpers and UI, as well as the tests. It then begins modifying the files and running the tests. - ![Screenshot showing Copilot exploring the project files](../_images/ex3-agent-mode-explores.png) + ![Screenshot showing Copilot exploring the project files](../../_images/ex3-agent-mode-explores.png) > [!NOTE] > You will notice that Copilot will perform several tasks, like exploring the project, modifying files, and running tests. It may take a few minutes depending on the complexity of the task and the codebase. During that process, you may notice **Keep** and **Undo** buttons appear in the code editor. When Copilot is finished, you will have a **Keep** or **Undo** for all of the changes, so you do not need to select them while work is in progress. 7. As prompted by Copilot, select **Continue** to run the tests. - ![Screenshot showing a dialog in the Copilot Chat pane asking the user to confirm they are happy to run tests](../_images/ex3-agent-mode-run-tests.png) + ![Screenshot showing a dialog in the Copilot Chat pane asking the user to confirm they are happy to run tests](../../_images/ex3-agent-mode-run-tests.png) 8. You may experience some pauses and even see some tests fail throughout the process. That's okay! Copilot works back and forth between code generation and tests until it completes the task and doesn't detect any errors. - ![Screenshot showing a complete Chat session with Copilot Agent Mode](../_images/ex3-agent-mode-proposed-changes.png) + ![Screenshot showing a complete Chat session with Copilot Agent Mode](../../_images/ex3-agent-mode-proposed-changes.png) 9. Explore the generated code for any potential issues. diff --git a/docs/vscode/3-mcp.md b/docs/real-world-development/vscode/3-mcp.md similarity index 98% rename from docs/vscode/3-mcp.md rename to docs/real-world-development/vscode/3-mcp.md index 2f97efbb..a840380b 100644 --- a/docs/vscode/3-mcp.md +++ b/docs/real-world-development/vscode/3-mcp.md @@ -20,7 +20,7 @@ In this exercise, you will: Agent mode becomes far more powerful when it can reach beyond your editor. Model Context Protocol (MCP) is how Copilot does that — it's a standard way for the agent to talk to external tools and services. -![Diagram showing the inner works of agent mode and how it interacts with context, LLM and tools - including tools contributed by MCP servers and VS Code extensions](../_images/ex1-mcp-diagram.png) +![Diagram showing the inner works of agent mode and how it interacts with context, LLM and tools - including tools contributed by MCP servers and VS Code extensions](../../_images/ex1-mcp-diagram.png) [Model Context Protocol (MCP)](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/) 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). @@ -125,7 +125,7 @@ Now that you've confirmed the feature works, you're ready to open a pull request 2. Stage the changes by selecting the **+** icon. 3. Generate a commit message using the **Sparkle** button. - ![Screenshot of the Source Control panel showing the changes made](../_images/ex3-source-control-changes.png) + ![Screenshot of the Source Control panel showing the changes made](../../_images/ex3-source-control-changes.png) 4. Select **Publish** to push the branch to your repository. diff --git a/docs/vscode/4-custom-agents.md b/docs/real-world-development/vscode/4-custom-agents.md similarity index 98% rename from docs/vscode/4-custom-agents.md rename to docs/real-world-development/vscode/4-custom-agents.md index 7a762452..cf8f5e63 100644 --- a/docs/vscode/4-custom-agents.md +++ b/docs/real-world-development/vscode/4-custom-agents.md @@ -66,7 +66,7 @@ VS Code surfaces every custom agent defined in `.github/agents` in the agents dr > Before you start the exercises below, return to your codespace, open the Copilot Chat panel, and select **New Chat** to start a clean conversation. Mode and model selection vary per exercise — each step calls those out where it matters. 1. Select **Agent** from the agents dropdown in the Chat view if it isn't already selected. - ![Screenshot showing the agent picker in the Chat view.](../_images/shared-chat-mode-selector.png) + ![Screenshot showing the agent picker in the Chat view.](../../_images/shared-chat-mode-selector.png) 2. Select the agents dropdown at the bottom of the chat view (it shows the active agent — by default, this is **default**). 3. Select **Accessibility agent** from the list of available agents. diff --git a/docs/vscode/5-managing-agents.md b/docs/real-world-development/vscode/5-managing-agents.md similarity index 98% rename from docs/vscode/5-managing-agents.md rename to docs/real-world-development/vscode/5-managing-agents.md index 0af014e6..82e42b3a 100644 --- a/docs/vscode/5-managing-agents.md +++ b/docs/real-world-development/vscode/5-managing-agents.md @@ -5,6 +5,9 @@ authors: lastUpdated: 2026-06-30 --- +| [← Previous lesson: Custom agents][previous-lesson] | +|:--| + When you put GitHub Copilot in agent mode, it works autonomously — exploring your codebase, proposing changes, editing files, and running commands. Because that work is happening on your machine in real time, Copilot Chat in VS Code gives you a running view of every tool call and every file edit as it happens. You can review each diff inline, accept or reject individual changes, and steer the conversation with follow-up prompts to refine or extend the work without leaving your editor. In this exercise, you will: diff --git a/docs/vscode/6-iterating.md b/docs/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/vscode/6-iterating.md rename to docs/real-world-development/vscode/6-iterating.md index 8b9a78ea..60eab0b3 100644 --- a/docs/vscode/6-iterating.md +++ b/docs/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ The high-contrast and light-mode toggles you implemented with the accessibility 9. Return to the **Conversation** tab. 10. If workflows are waiting for approval, select **Approve and run workflows**. - ![Approve and run workflows](../_images/shared-approve-workflows.png) + ![Approve and run workflows](../../_images/shared-approve-workflows.png) 11. Wait for the workflows to complete. All being well, you should see them pass. > [!TIP] diff --git a/docs/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 98% rename from docs/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index cfbcad78..fdfc2ac2 100644 --- a/docs/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ The project holds the model and, later, the hosted agent. Resuming this module u 1. Select **Foundry Toolkit** in the Activity Bar, expand **Help and Feedback**, and select **Ask Copilot**. Confirm your model of choice in the dropdown and send the generated `/foundrytk-quick-start` prompt. - ![Screenshot showing the Foundry Toolkit quickstart sequence.](../../_images/vscode-foundry-setup.png) + ![Screenshot showing the Foundry Toolkit quickstart sequence.](../../../_images/vscode-foundry-setup.png) 2. In the interactive workflow, answer **Where are you starting from?** with **Set up Foundry**, then **What do you have already?** with **I have an Azure subscription or Foundry resources**. 3. Review tool approvals. If the proposed commands and their scope are appropriate, select **Allow azmcp …** for this session to reduce repeated approval prompts. @@ -93,7 +93,7 @@ Rule following and grounding matter more here than choosing the biggest or newes 3. Confirm the project, deployment, capacity, and cost before approving. If appropriate after reviewing scope, select **Allow az …** for this session to reduce repeated prompts. 4. Select **Foundry Toolkit**, expand **My Resources**, then select **Models**. Confirm the deployed model appears under Foundry. The screenshot is an example; your region may offer a different model. - ![Screenshot showing an example model deployment in the Foundry Toolkit.](../../_images/vscode-model-deployed.png) + ![Screenshot showing an example model deployment in the Foundry Toolkit.](../../../_images/vscode-model-deployed.png) ## Test the deployed model diff --git a/docs/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 94% rename from docs/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 176f7b85..f149c0d9 100644 --- a/docs/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ The toolkit scaffolds code in the current repository and opens a specialized Cop 1. Select **Foundry Toolkit**, expand **Developer Tools**, expand **+ Build**, and select **+ Create Agent**. On **Create Agent**, select **Code an agent with Copilot**. - ![Screenshot showing the create agent page.](../../_images/vscode-create-agent.png) + ![Screenshot showing the create agent page.](../../../_images/vscode-create-agent.png) 2. In the new chat, confirm it switches to **AIAgentExpert**. Replace the generated prompt with the customized prompt and submit it: @@ -65,7 +65,7 @@ The toolkit scaffolds code in the current repository and opens a specialized Cop 5. Reuse all six prompts from [Test the deployed model][model-tests]. Check answers against the full `db/catalog.json`, rather than assuming the nine-game subset's ranking is the full catalog ranking. 6. Switch between **Input & Output**, **Events**, and **Tools** to inspect payloads, session events, and tool calls. If behavior violates the acceptance criteria, ask Copilot to fix it and rerun focused tests and Inspector checks before deploying. - ![Screenshot showing local Agent debug workflow.](../../_images/vscode-agent-debug.png) + ![Screenshot showing local Agent debug workflow.](../../../_images/vscode-agent-debug.png) ## Deploy and test the hosted agent @@ -77,17 +77,17 @@ The **Go production** handoff packages the existing agent for Foundry. It does n /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![Screenshot showing hand off options from the AIAgentExpert agent.](../../_images/vscode-go-production-handoff.png) + ![Screenshot showing hand off options from the AIAgentExpert agent.](../../../_images/vscode-go-production-handoff.png) 2. Review the chat and terminal for parameters and command approvals. Confirm deployment targets the existing `tailspin-toys` project and review billable resources before approving. 3. If Copilot offers an evaluation suite, optionally accept and work through it as an additional check. 4. Select **Foundry Toolkit**, expand **My Resources**, and select **Agents**. On the **Agents** tab, switch to **Hosted Agent**. - ![Screenshot showing the deployed hosted agent.](../../_images/vscode-agent-deployed.png) + ![Screenshot showing the deployed hosted agent.](../../../_images/vscode-agent-deployed.png) 5. Select the agent name and confirm deployment status is **Running**. Switch to **Playground** and repeat the grounding, missing-data, out-of-catalog, vagueness, and ranking checks against the deployed catalog. - ![Screenshot showing a response from the deployed hosted agent.](../../_images/vscode-agent-response.png) + ![Screenshot showing a response from the deployed hosted agent.](../../../_images/vscode-agent-response.png) 6. If deployment or responses fail, inspect the reported status and logs with Copilot, correct the failure in the existing project, and repeat the checks. Do not proceed with an unverified deployment. diff --git a/docs/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 2e3a0be4..f7fdb454 100644 --- a/docs/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ The UI now has a verified backend. End-to-end tests check both usability and the Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Screenshot showing the Backer Concierge chat widget in action](../../_images/tailspin-toys-backer-concierge-agent.png) + ![Screenshot showing the Backer Concierge chat widget in action](../../../_images/tailspin-toys-backer-concierge-agent.png) 2. Keep the Function and site running, then verify the complete experience: diff --git a/docs/vscode/7-foundry-toolkit/README.md b/docs/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/vscode/7-foundry-toolkit/README.md rename to docs/real-world-development/vscode/7-foundry-toolkit/README.md index 4549ad9a..8b09cd64 100644 --- a/docs/vscode/7-foundry-toolkit/README.md +++ b/docs/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: vscode/7-foundry-toolkit +slug: real-world-development/vscode/7-foundry-toolkit title: "Optional: Incorporate Foundry" description: "Build a grounded Backer Concierge with VS Code and Microsoft Foundry Toolkit in three focused modules." authors: diff --git a/docs/vscode/README.md b/docs/real-world-development/vscode/README.md similarity index 97% rename from docs/vscode/README.md rename to docs/real-world-development/vscode/README.md index 00cd80d5..e5dfe06a 100644 --- a/docs/vscode/README.md +++ b/docs/real-world-development/vscode/README.md @@ -1,6 +1,6 @@ --- -slug: vscode -title: "VS Code" +slug: real-world-development/vscode +title: "Visual Studio Code" authors: - geektrainer lastUpdated: 2026-06-30 diff --git a/docs/vscode/images/.gitkeep b/docs/real-world-development/vscode/images/.gitkeep similarity index 100% rename from docs/vscode/images/.gitkeep rename to docs/real-world-development/vscode/images/.gitkeep diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index d3fc1484..33869e0d 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -1,42 +1,43 @@ --- slug: zh-cn -title: "动手实践 GitHub Copilot 智能体" +title: "GitHub Copilot 研讨会" authors: - geektrainer -lastUpdated: 2026-06-30 +lastUpdated: 2026-09-28 --- -GitHub Copilot 最近新增的功能为开发人员提供了贯穿整个软件开发生命周期 (SDLC) 的强大工具，包括处理 GitHub 上的议题和拉取请求、与外部服务交互，当然也包括创建代码。本实验将探索这些功能，并通过实际用例和技巧，帮助你充分发挥这些工具的价值。 +根据学习目标和期望的深入程度选择研讨会。**入门体验**提供 GitHub Copilot 引导式介绍，**真实场景开发**则使用完整应用程序和团队待办事项，练习面向生产环境的工作流。 -> [!CAUTION] -> GitHub Copilot 具有概率性而非确定性，因此生成的具体代码、修改的文件等可能有所不同。因此，实验中的屏幕截图和代码片段可能与你的实际体验略有差异。这是正常现象，也是使用此类工具的固有特点。 -> -> 如果内容似乎有误或无法正常运行，请向导师求助！ - -## 选择操作环境 +## 入门体验 -无论在哪里工作，都可以使用 GitHub Copilot。请选择符合开发方式的操作环境，并基于共用的 Tailspin Toys 待办事项完成相应练习。每种操作环境都有专属的设置步骤，可以直接开始所选路径。 +从聚焦的引导式体验开始，无需现有代码库即可了解 GitHub Copilot 产品的主要功能。 -### 🖥️ [VS Code](../vscode/) +### [GitHub Copilot app 导览][first-steps-app] -在 **Visual Studio Code** 和 GitHub Codespaces 中使用 GitHub Copilot。无需离开熟悉的编辑器，即可使用 Copilot Chat 智能体模式、MCP 服务器和自定义智能体。如果希望将 AI 辅助直接融入 IDE，这是理想选择。 +从空文件夹创建 Space Quiz，将其发布到 GitHub，实现一个议题，完成 Copilot 审查，安排自动化任务，并探索 Canvas 工作流。 -### 💻 [Copilot CLI](cli/) +### [GitHub Copilot CLI 入门][first-steps-cli] -**GitHub Copilot CLI** 是一款在终端中运行的智能体助手。安装后，可以连接 MCP 服务器、使用计划模式生成代码，还能完全通过命令行构建自己的技能、自定义智能体和斜杠命令。 +在终端中构建同一个 Space Quiz，审查差异，在工作树中并行运行会话，先规划再编辑，并在不离开 shell 的情况下创建、合并和委派拉取请求。 -### 🤖 [Copilot App](app/) +### [Visual Studio Code 入门][first-steps-vscode] -**GitHub Copilot app** 是一款基于 Copilot CLI 构建的桌面应用。它支持并行运行智能体会话、切换会话模式、在画布上协作，以及直接管理 GitHub 议题和拉取请求。其中包括 **Agent Merge**，可引导拉取请求完成变基、处理审查反馈、修复 CI 问题并最终合并。 +在 VS Code 中构建 Space Quiz，在集成浏览器中测试，通过源代码管理发布，使用 GitHub 工具处理议题和拉取请求，并将工作交给云会话。 -### ☁️ [Copilot Cloud Agent](../cloud/) +## 真实场景开发 -**Copilot 云智能体** 是一位异步结对编程伙伴，可在后台处理 GitHub 议题。可以分配工作、通过自定义智能体提供指导、在智能体仪表板中监控进度，并审查它创建的拉取请求。 +使用 Tailspin Toys 应用程序及其待办事项，在真实的软件开发生命周期中练习 GitHub Copilot。选择工作环境，然后规划、构建、测试、审查并交付有意义的更改。 -## 场景 +### [浏览真实场景开发研讨会][real-world-development] -你是 Tailspin Toys 的新开发人员。这是一家虚构公司，为开发人员主题的桌游提供众筹服务，而这可是一个巨大的市场！团队的待办事项已经创建为 GitHub 议题，等待处理。其中既有筛选和分页等功能开发，也有无障碍支持和编码标准等质量改进。你将通过迭代完成这些任务，同时探索网站和 Copilot 的功能。 +可以选择 GitHub Copilot CLI、GitHub Copilot app、GitHub Copilot 云智能体或 Visual Studio Code。 -## 开始使用 +> [!CAUTION] +> GitHub Copilot 具有概率性而非确定性，因此具体代码和修改的文件可能与示例不同。出现细微差异属于正常现象。 +> +> 如果在讲师指导的研讨会中遇到无法正常运行的内容，请向导师求助。 -选择上述操作环境即可开始。每种环境都会先引导完成所需设置，让你立即开始构建。 \ No newline at end of file +[first-steps-app]: ../first-steps/copilot-app/ +[first-steps-cli]: ../first-steps/copilot-cli/ +[first-steps-vscode]: ../first-steps/vscode/ +[real-world-development]: ../real-world-development/ diff --git a/docs/zh-cn/app/0-prerequisites.md b/docs/zh-cn/real-world-development/app/0-prerequisites.md similarity index 97% rename from docs/zh-cn/app/0-prerequisites.md rename to docs/zh-cn/real-world-development/app/0-prerequisites.md index b23c75d0..79cf760f 100644 --- a/docs/zh-cn/app/0-prerequisites.md +++ b/docs/zh-cn/real-world-development/app/0-prerequisites.md @@ -53,11 +53,11 @@ GitHub Copilot app 是一款桌面应用，作为 Copilot 和 GitHub 的中央 1. 在新的浏览器窗口中，转到本实验的 GitHub 存储库：`https://github.com/github-samples/tailspin-toys`。 2. 在实验存储库页面选择 **Use this template** 按钮，再选择 **Create a new repository**，创建自己的存储库副本。 - ![展开 Use this template 下拉菜单并选中 Create a new repository](../../_images/app-0-use-template.png) + ![展开 Use this template 下拉菜单并选中 Create a new repository](../../../_images/app-0-use-template.png) 3. 如果在 GitHub 或 Microsoft 主办的活动中参加本研讨会，请遵循导师提供的说明。否则，可在有权使用 GitHub Copilot 的组织中创建新存储库。 - ![Create a new repository 表单，其中 github-samples/tailspin-toys 被设为模板，且已填写存储库名称](../../_images/app-0-create-repository.png) + ![Create a new repository 表单，其中 github-samples/tailspin-toys 被设为模板，且已填写存储库名称](../../../_images/app-0-create-repository.png) 4. 记下所创建的存储库路径 (**organization-or-user-name/repository-name**)，后续实验会用到该路径。 diff --git a/docs/zh-cn/app/1-install-copilot-app.md b/docs/zh-cn/real-world-development/app/1-install-copilot-app.md similarity index 100% rename from docs/zh-cn/app/1-install-copilot-app.md rename to docs/zh-cn/real-world-development/app/1-install-copilot-app.md diff --git a/docs/zh-cn/app/2-add-star-rating.md b/docs/zh-cn/real-world-development/app/2-add-star-rating.md similarity index 97% rename from docs/zh-cn/app/2-add-star-rating.md rename to docs/zh-cn/real-world-development/app/2-add-star-rating.md index 632d0194..11d6a69e 100644 --- a/docs/zh-cn/app/2-add-star-rating.md +++ b/docs/zh-cn/real-world-development/app/2-add-star-rating.md @@ -34,7 +34,7 @@ Tailspin Toys 中的每款游戏都可以有星级评分，该评分已显示在 2. 选择 **Home screen**。 3. 确保为存储库选择了 `tailspin-toys`。 - ![GitHub Copilot app 提示框，其中存储库选择器设为 tailspin-toys，提示框下方显示模型选择器](../../_images/app-2-start-session.png) + ![GitHub Copilot app 提示框，其中存储库选择器设为 tailspin-toys，提示框下方显示模型选择器](../../../_images/app-2-start-session.png) 4. 使用以下提示词请求更改： @@ -55,7 +55,7 @@ Copilot app 首先创建新的工作树，即项目的隔离副本。随后， 1. 在应用右上角选择 **Toggle review panel**。差异屏幕会打开，显示 Copilot 所做的所有待处理更改。 - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../_images/app-2-review-panel.png) + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../../_images/app-2-review-panel.png) 2. 应会看到核心游戏详情显示文件 `GameCard.astro` 中新增了代码。代码应与以下示例类似：一个小代码块，在评分存在时呈现评分，在 `starRating` 为 `null` 时回退到 "No rating yet"： @@ -80,7 +80,7 @@ Copilot app 首先创建新的工作树，即项目的隔离副本。随后， 1. 在 Copilot app 右侧的审查面板中选择 **Terminal**。如果没有 **Terminal** 按钮，请选择 **+**（标记为 **Open in panel**），再选择 **Terminal**。 - ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../../_images/app-terminal-screenshot.png) 2. 在终端窗口中输入以下命令，启动 Web 应用的开发服务器： diff --git a/docs/zh-cn/app/3-custom-instructions.md b/docs/zh-cn/real-world-development/app/3-custom-instructions.md similarity index 97% rename from docs/zh-cn/app/3-custom-instructions.md rename to docs/zh-cn/real-world-development/app/3-custom-instructions.md index 5ab57279..4f6a64ff 100644 --- a/docs/zh-cn/app/3-custom-instructions.md +++ b/docs/zh-cn/real-world-development/app/3-custom-instructions.md @@ -57,7 +57,7 @@ lastUpdated: 2026-07-09 1. 如果审查面板尚不可见，请选择右上角的 **Toggle review panel** 将其打开。 - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../_images/app-2-review-panel.png) + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../../_images/app-2-review-panel.png) 2. 选择 **+**，向审查面板添加新项目。 3. 选择 **File**。 @@ -66,7 +66,7 @@ lastUpdated: 2026-07-09 6. 探索该文件，注意项目的简要说明，以及 **Agent notes**、**Code standards**、**Scripts** 和 **Repository Structure** 等部分。在 **Code standards** 下，注意嵌套的 **GitHub Actions Workflows** 指导。这些内容适用于与 Copilot 的所有交互。 7. 选择 **Show folder view** 打开文件夹导航器。 - ![GitHub Copilot app 审查面板中打开了一个文件，并显示 Show folder view 按钮](../../_images/app-show-folder-view.png) + ![GitHub Copilot app 审查面板中打开了一个文件，并显示 Show folder view 按钮](../../../_images/app-show-folder-view.png) 8. 转到 `.github/instructions` 文件夹并探索其中的文件。注意，其中包含针对 Astro 文件、Drizzle 数据层和测试等内容的指令。 9. 打开 `.github/instructions/unit-tests.instructions.md`。注意顶部的 `applyTo` 字段，它设置了一个相对于存储库根目录的 glob，用于确定指令适用的文件。此处会匹配任何 TypeScript 测试文件，例如匹配 `**/*.test.ts` 的文件。 @@ -87,7 +87,7 @@ lastUpdated: 2026-07-09 2. 选择标题为 **Update our repository coding standards** 的议题，将其打开。 3. 选择右上角的 **New session**，根据该议题启动新会话。 - ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../../_images/app-new-session-from-issue.png) 4. 使用以下提示词，请求 Copilot 更新指令文件以满足议题中记录的要求： @@ -103,7 +103,7 @@ Copilot 会进行更新。 1. 选择右上角的 **Changes**，打开代码更改。 - ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../_images/app-select-changes.png) + ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../../_images/app-select-changes.png) 2. 审查更新后的指令文件，确认其中包含有关向代码添加文档和注释的准则。 diff --git a/docs/zh-cn/app/4-build-filtering.md b/docs/zh-cn/real-world-development/app/4-build-filtering.md similarity index 96% rename from docs/zh-cn/app/4-build-filtering.md rename to docs/zh-cn/real-world-development/app/4-build-filtering.md index 653e19d1..b29c66cd 100644 --- a/docs/zh-cn/app/4-build-filtering.md +++ b/docs/zh-cn/real-world-development/app/4-build-filtering.md @@ -54,11 +54,11 @@ lastUpdated: 2026-07-13 2. 选择标题为 **Allow users to filter games by category and publisher** 的议题。 3. 选择右上角的 **New session**。 - ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../_images/app-new-session-from-issue.png) + ![GitHub Copilot app 的议题视图，箭头指向右上角的 New session 按钮](../../../_images/app-new-session-from-issue.png) 4. 选择 Shift+Tab，直到模式显示为 **Plan**。 - ![GitHub Copilot app 提示框，箭头指向设为 Plan 的模式选择器](../../_images/app-4-plan-mode.png) + ![GitHub Copilot app 提示框，箭头指向设为 Plan 的模式选择器](../../../_images/app-4-plan-mode.png) 5. 发送以下提示词。由于会话从筛选议题启动，因此该议题已在会话上下文中： @@ -92,12 +92,12 @@ Copilot 将开始实现。 1. 选择右上角的 **Changes**，打开代码更改。 - ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../_images/app-select-changes.png) + ![GitHub Copilot app 会话面板选项卡，箭头指向 Changes 选项卡](../../../_images/app-select-changes.png) 2. 审查更改。应会看到新的 TypeScript、Astro 和测试文件。注意，新辅助函数包含 TSDoc 文档注释和文件标头注释。这是第 3 课中合并的文档标准，无需提示便已自动应用。 3. 在 Copilot app 右侧的审查面板中选择 **Terminal**。如果没有 **Terminal** 按钮，请选择 **+**（标记为 **Open in panel**），再选择 **Terminal**。 - ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../_images/app-terminal-screenshot.png) + ![GitHub Copilot app 审查面板中的 Terminal 按钮](../../../_images/app-terminal-screenshot.png) 4. 在终端窗口中输入以下命令，启动 Web 应用的开发服务器： @@ -138,7 +138,7 @@ description: Run the project's test suites and linter to verify code changes are 1. 如果审查面板尚不可见，请选择右上角的 **Toggle review panel** 将其打开。 - ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../_images/app-2-review-panel.png) + ![GitHub Copilot app 顶部工具栏，箭头指向 Create PR 右侧的 Toggle review panel 按钮](../../../_images/app-2-review-panel.png) 2. 选择 **+**，向审查面板添加新项目。 3. 选择 **File**。 diff --git a/docs/zh-cn/app/5-mcp-playwright.md b/docs/zh-cn/real-world-development/app/5-mcp-playwright.md similarity index 97% rename from docs/zh-cn/app/5-mcp-playwright.md rename to docs/zh-cn/real-world-development/app/5-mcp-playwright.md index 5e288516..0cc84c6e 100644 --- a/docs/zh-cn/app/5-mcp-playwright.md +++ b/docs/zh-cn/real-world-development/app/5-mcp-playwright.md @@ -38,7 +38,7 @@ lastUpdated: 2026-07-09 可以在应用设置中添加和管理 MCP 服务器。应用内置了常用服务器目录，只需几个步骤即可添加 [Playwright MCP 服务器][playwright-mcp-server]。 -1. 选择 Ctrl+, 打开 Copilot app 设置页面。 +1. 按 Command+, (Mac) 或 Ctrl+, (Windows/Linux) 打开 Copilot app 设置页面。 2. 选择 **MCP servers**。 3. 在搜索对话框中输入 `Playwright`。 4. 从 **Popular MCP servers** 列表中选择 **Playwright**。 diff --git a/docs/zh-cn/app/6-agent-merge.md b/docs/zh-cn/real-world-development/app/6-agent-merge.md similarity index 96% rename from docs/zh-cn/app/6-agent-merge.md rename to docs/zh-cn/real-world-development/app/6-agent-merge.md index 6001d43d..23803809 100644 --- a/docs/zh-cn/app/6-agent-merge.md +++ b/docs/zh-cn/real-world-development/app/6-agent-merge.md @@ -32,7 +32,7 @@ lastUpdated: 2026-07-09 2. 在右上角选择 **Create PR** 旁的下拉菜单。 3. 选择 **Agent merge** 以启用 agent merge。 - ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../../_images/app-enable-agent-merge.png) 4. 按钮文本现在会变为 **Agent merge**。 5. 选择 **Agent merge** 按钮，启动 agent merge 流程。 @@ -43,7 +43,7 @@ Copilot app 随即开始创建并管理 PR。它先探索项目以确定创建 P 6. 选择 **Agent merge** 旁的下拉菜单，再选择 **Merge pull request**，允许 agent merge 合并拉取请求。 - ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../../_images/app-agent-merge-merge.png) 7. 所有 CI 流程变为绿色（表示测试通过）后，Copilot 会合并拉取请求。 diff --git a/docs/zh-cn/app/7-canvases.md b/docs/zh-cn/real-world-development/app/7-canvases.md similarity index 96% rename from docs/zh-cn/app/7-canvases.md rename to docs/zh-cn/real-world-development/app/7-canvases.md index e273e26c..1ac18073 100644 --- a/docs/zh-cn/app/7-canvases.md +++ b/docs/zh-cn/real-world-development/app/7-canvases.md @@ -5,7 +5,7 @@ authors: - geektrainer lastUpdated: 2026-07-09 next: - link: /copilot-workshops/zh-cn/app/9-review/ + link: /copilot-workshops/zh-cn/real-world-development/app/9-review/ label: "回顾与后续步骤" --- @@ -73,7 +73,7 @@ Copilot 将开始创建画布。 2. Copilot 保存画布文件后，选择右上角 **Create PR** 旁的下拉菜单。 3. 选择 **Agent merge** 以启用 agent merge。 - ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../_images/app-enable-agent-merge.png) + ![GitHub Copilot app 中展开的 Create PR 下拉菜单，箭头指向 Agent merge 选项](../../../_images/app-enable-agent-merge.png) 4. 按钮文本现在会变为 **Agent merge**。 5. 选择 **Agent merge** 按钮，启动 agent merge 流程。 @@ -84,7 +84,7 @@ Copilot app 会开始创建并管理 PR。它先探索项目以确定创建 PR 6. 选择 **Agent merge** 旁的下拉菜单，再选择 **Merge pull request**，允许 agent merge 合并拉取请求。 - ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../_images/app-agent-merge-merge.png) + ![Agent merge 下拉菜单显示智能体获准执行的操作：Address reviews、Fix CI failures 和 Resolve conflicts，箭头指向 Merge pull request](../../../_images/app-agent-merge-merge.png) 7. 等待所有 CI 流程通过（变为绿色）。全部通过后，Copilot 会自动合并拉取请求。 diff --git a/docs/zh-cn/app/8-foundry-canvas/1-project-and-model.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model.md similarity index 92% rename from docs/zh-cn/app/8-foundry-canvas/1-project-and-model.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model.md index a9b5c463..a1f3d4d8 100644 --- a/docs/zh-cn/app/8-foundry-canvas/1-project-and-model.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/ label: "可选：集成 Foundry" next: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 构建并部署代理 --- @@ -33,7 +33,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 3. 安装 [Azure Developer CLI][install-azd]，然后使用 `azd version` 验证已安装 1.27.1 或更高版本。 4. 打开 GitHub Copilot app，打开 **Customize**，然后选择 **Plugins**。搜索 `microsoft-foundry`，为 Microsoft Foundry 插件选择 **Install**。该插件包含 Canvas 和 Foundry 技能。 - ![安装 Microsoft Foundry 插件](../../../_images/app-8-install-foundry-plugin.png) + ![安装 Microsoft Foundry 插件](../../../../_images/app-8-install-foundry-plugin.png) 5. 在 **Customize** 中选择 **Plugins**，搜索 `azure` 或从 **Featured** 列表中选择它，然后为 Azure 插件选择 **Install**。 6. 在 **My work** 选项卡中，找到并打开 Tailspin Toys 存储库中标题为 **Add a Backer Concierge assistant for catalog questions** 的议题。选择 **New session**，在新工作树中启动关联该议题的会话。三个模块均使用此存储库、工作树分支和议题会话。 @@ -57,11 +57,11 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 npm run db:export ``` - ![生成目录导出文件](../../../_images/app-8-generate-catalog-export.png) + ![生成目录导出文件](../../../../_images/app-8-generate-catalog-export.png) 10. 打开 `db/catalog.json`，确认其中包含 21 款游戏，每款游戏都有标题、描述、类别、发行商和星级评分。检查其 `note` 字段：目录不包含筹款总额、支持者人数、支持档位或发布日期。对于缺失的价格、玩家人数和游戏时长，也应视为不可用信息，而不是用外部知识填补空白。如果导出失败或内容不符，请先要求 Copilot 调查并重新运行，再继续。 - ![在 Copilot app 中打开的目录导出文件](../../../_images/app-8-view-catalog.png) + ![在 Copilot app 中打开的目录导出文件](../../../../_images/app-8-view-catalog.png) ## 设置 Foundry 项目和模型 @@ -95,7 +95,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 Use the Microsoft Foundry skill to create a resource group named rg-tailspin-toys and a Foundry project named tailspin-toys. ``` - ![创建 Foundry 项目](../../../_images/app-8-foundry-project-created.png) + ![创建 Foundry 项目](../../../../_images/app-8-foundry-project-created.png) 14. 要求 Copilot 推荐模型。由于会话从议题启动，议题的验收标准已包含在上下文中： @@ -105,7 +105,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 15. 确认 Copilot 加载了 `microsoft-foundry` 技能，然后根据各模型的优缺点选择一个可用模型。Microsoft Foundry 托管代理快速入门目前使用 `gpt-5.4-mini`，但可用性和配额因区域而异。 - ![选择模型](../../../_images/app-8-select-model.png) + ![选择模型](../../../../_images/app-8-select-model.png) 16. 要求 Copilot 部署所选模型，并在批准前审查目标项目和费用： @@ -124,7 +124,7 @@ Tailspin Toys 的支持者可以按类别和发行商筛选游戏，但*哪些 18. 打开 Canvas 右上角的 **More options** 菜单，然后选择 **Sign in**。 19. 选择 **tailspin-toys** Foundry 项目。展开 **Models**，确认部署已显示，且名称和状态符合预期。 - ![在 Canvas 中验证项目和模型](../../../_images/app-8-validate-project-model.png) + ![在 Canvas 中验证项目和模型](../../../../_images/app-8-validate-project-model.png) 20. 在同一会话中输入： diff --git a/docs/zh-cn/app/8-foundry-canvas/2-build-and-deploy.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md similarity index 94% rename from docs/zh-cn/app/8-foundry-canvas/2-build-and-deploy.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md index e9e4a72c..a5b91e59 100644 --- a/docs/zh-cn/app/8-foundry-canvas/2-build-and-deploy.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 准备项目和模型 next: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/3-connect-to-site/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site/ label: 将代理连接到网站 --- @@ -49,7 +49,7 @@ Canvas 会生成代码、文件夹结构以及根目录下的 `azure.yaml`，将 Canvas 会将提示词以及当前订阅和 Foundry 项目的上下文发送给 Copilot。它会查找 Agent Framework + Responses API 示例；可能会出现 **Agent with Local Tools (Responses, Agent Framework, Python)** 等选项。 - ![在 Canvas 中生成 Backer Concierge 代理的初始框架](../../../_images/app-8-scaffold-backer-concierge.png) + ![在 Canvas 中生成 Backer Concierge 代理的初始框架](../../../../_images/app-8-scaffold-backer-concierge.png) 5. 在 **Files** 选项卡中，按照以下检查点审查 Copilot 的更改。`src` 中生成的文件名可能不同，但项目边界和 `azure.yaml` 位置应符合以下要求： @@ -90,7 +90,7 @@ Canvas 会生成代码、文件夹结构以及根目录下的 `azure.yaml`，将 预期结果：只提及目录中真实存在的游戏名称，并使用每款游戏的正确信息。 - ![Agent Inspector 中以目录为依据的推荐](../../../_images/app-8-grounded-recommendation.png) + ![Agent Inspector 中以目录为依据的推荐](../../../../_images/app-8-grounded-recommendation.png) 10. 测试**幻觉陷阱**： @@ -144,7 +144,7 @@ Canvas 使用 `azd` 部署经过测试的代理。Foundry 会打包服务源代 16. 在 Canvas 的 **Deploy and test** 中选择 **Deploy to Foundry**。审查自动填入聊天的提示词。 - ![画布上的 Deploy to Foundry 提示词](../../../_images/app-8-deploy-to-foundry.png) + ![画布上的 Deploy to Foundry 提示词](../../../../_images/app-8-deploy-to-foundry.png) 17. 检查是否收到部署确认、代理版本、状态及 Foundry 中代理试验场的链接。如果部署失败，请将错误发送给 Copilot，在同一项目中解决问题后，再通过 Canvas 重试。 18. 在 Canvas 中选择 **Test in Foundry Portal**，打开已部署代理的试验场。针对这个已部署版本，重新运行第 9–14 步中的全部六项验收检查；连续性检查中的两个提示词仍须在同一段对话中发送。将回答与目录对比；如果有任何检查失败，请要求 Copilot 修复，重新运行本地测试，通过 Canvas 重新部署，并再次测试托管版本。 diff --git a/docs/zh-cn/app/8-foundry-canvas/3-connect-to-site.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site.md similarity index 95% rename from docs/zh-cn/app/8-foundry-canvas/3-connect-to-site.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site.md index 31a9abde..a5cafafb 100644 --- a/docs/zh-cn/app/8-foundry-canvas/3-connect-to-site.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/3-connect-to-site.md @@ -5,10 +5,10 @@ authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/2-build-and-deploy/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/2-build-and-deploy/ label: 构建并部署代理 next: - link: /copilot-workshops/zh-cn/app/9-review/ + link: /copilot-workshops/zh-cn/real-world-development/app/9-review/ label: 回顾与后续步骤 --- @@ -56,7 +56,7 @@ Tailspin Toys 完全采用预渲染。浏览器代码绝不能直接调用托管 7. 检查响应：它应说明目录不包含价格。确认其中没有 Foundry 令牌、凭据、内部对话标识符、项目端点或堆栈跟踪。如果无法访问 Function，或响应泄露了详情或编造了价格，请将脱敏后的失败信息发送给 Copilot，修复问题，并在继续前重新运行代理服务测试。 - ![本地代理服务测试](../../../_images/app-8-local-proxy-test.png) + ![本地代理服务测试](../../../../_images/app-8-local-proxy-test.png) ## 构建并测试聊天组件 @@ -77,7 +77,7 @@ Tailspin Toys 完全采用预渲染。浏览器代码绝不能直接调用托管 11. 审查报告，并在浏览器中验证报告所描述的行为，包括键盘操作以及[托管代理验收检查][agent-checks]中的两轮对话。确认浏览器请求携带不透明句柄，通过 `/api/concierge` 发送，而不是直接发送到 Foundry；响应也不暴露凭据或 Foundry 内部标识符。检查推荐和信息缺失时的回答是否保持在目录范围内。与 Copilot 一起解决失败的测试，必要时重启受影响的本地服务，然后重新运行测试。 - ![Backer Concierge 聊天组件的端到端测试结果](../../../_images/app-8-e2e-test-results.png) + ![Backer Concierge 聊天组件的端到端测试结果](../../../../_images/app-8-e2e-test-results.png) ## 检查点与后续步骤 diff --git a/docs/zh-cn/app/8-foundry-canvas/README.md b/docs/zh-cn/real-world-development/app/8-foundry-canvas/README.md similarity index 94% rename from docs/zh-cn/app/8-foundry-canvas/README.md rename to docs/zh-cn/real-world-development/app/8-foundry-canvas/README.md index f3dade3e..9c33ede7 100644 --- a/docs/zh-cn/app/8-foundry-canvas/README.md +++ b/docs/zh-cn/real-world-development/app/8-foundry-canvas/README.md @@ -1,15 +1,15 @@ --- title: "可选：集成 Foundry" -slug: zh-cn/app/8-foundry-canvas +slug: zh-cn/real-world-development/app/8-foundry-canvas description: "使用 Microsoft Foundry Canvas 构建以目录为依据的 Backer Concierge，并在各阶段设置可安全暂停的位置。" authors: - juliamuiruri4 lastUpdated: 2026-09-16 prev: - link: /copilot-workshops/zh-cn/app/9-review/ + link: /copilot-workshops/zh-cn/real-world-development/app/9-review/ label: 回顾与后续步骤 next: - link: /copilot-workshops/zh-cn/app/8-foundry-canvas/1-project-and-model/ + link: /copilot-workshops/zh-cn/real-world-development/app/8-foundry-canvas/1-project-and-model/ label: 准备项目和模型 --- diff --git a/docs/zh-cn/app/9-review.md b/docs/zh-cn/real-world-development/app/9-review.md similarity index 100% rename from docs/zh-cn/app/9-review.md rename to docs/zh-cn/real-world-development/app/9-review.md diff --git a/docs/zh-cn/app/README.md b/docs/zh-cn/real-world-development/app/README.md similarity index 99% rename from docs/zh-cn/app/README.md rename to docs/zh-cn/real-world-development/app/README.md index 0ec99a89..0cbc1a7a 100644 --- a/docs/zh-cn/app/README.md +++ b/docs/zh-cn/real-world-development/app/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/app +slug: zh-cn/real-world-development/app title: "GitHub Copilot app" authors: - geektrainer diff --git a/docs/zh-cn/cli/0-prerequisites.md b/docs/zh-cn/real-world-development/cli/0-prerequisites.md similarity index 91% rename from docs/zh-cn/cli/0-prerequisites.md rename to docs/zh-cn/real-world-development/cli/0-prerequisites.md index 0bc2d6a8..d674ec37 100644 --- a/docs/zh-cn/cli/0-prerequisites.md +++ b/docs/zh-cn/real-world-development/cli/0-prerequisites.md @@ -14,11 +14,11 @@ lastUpdated: 2026-06-30 1. 在新的浏览器窗口中，访问本实验的 GitHub 存储库：`https://github.com/github-samples/tailspin-toys`。 2. 在实验存储库页面上，选择 **Use this template** 按钮创建自己的存储库副本。然后选择 **Create a new repository**。 - ![“Use this template”按钮](../../_images/ex0-use-template.png) + ![“Use this template”按钮](../../../_images/ex0-use-template.png) 3. 如果参加的是由 GitHub 或 Microsoft 主办的活动，请按照导师提供的说明操作。否则，可以在已启用 GitHub Copilot 访问权限的组织中创建这个新存储库。 - ![输入存储库模板设置](../../_images/ex0-repository-settings.png) + ![输入存储库模板设置](../../../_images/ex0-repository-settings.png) 4. 记下创建的存储库路径（**organization-or-user-name/repository-name**），后续实验会用到它。 @@ -36,11 +36,11 @@ lastUpdated: 2026-06-30 1. 打开刚创建的存储库。 2. 选择绿色的 **Code** 按钮。 - ![选择 Code 按钮](../../_images/ex0-code-button.png) + ![选择 Code 按钮](../../../_images/ex0-code-button.png) 3. 选择 **Codespaces** 选项卡，再选择 **+** 按钮创建新的 Codespace。 - ![创建新的 codespace](../../_images/ex0-create-codespace.png) + ![创建新的 codespace](../../../_images/ex0-create-codespace.png) codespace 的创建需要几分钟，但仍然比手动安装所有服务快得多。等待期间，可以先了解 GitHub Copilot 的其他功能，接下来就会用到。 diff --git a/docs/zh-cn/cli/1-install-copilot-cli.md b/docs/zh-cn/real-world-development/cli/1-install-copilot-cli.md similarity index 100% rename from docs/zh-cn/cli/1-install-copilot-cli.md rename to docs/zh-cn/real-world-development/cli/1-install-copilot-cli.md diff --git a/docs/zh-cn/cli/2-custom-instructions.md b/docs/zh-cn/real-world-development/cli/2-custom-instructions.md similarity index 100% rename from docs/zh-cn/cli/2-custom-instructions.md rename to docs/zh-cn/real-world-development/cli/2-custom-instructions.md diff --git a/docs/zh-cn/cli/3-generating-code.md b/docs/zh-cn/real-world-development/cli/3-generating-code.md similarity index 100% rename from docs/zh-cn/cli/3-generating-code.md rename to docs/zh-cn/real-world-development/cli/3-generating-code.md diff --git a/docs/zh-cn/cli/4-mcp.md b/docs/zh-cn/real-world-development/cli/4-mcp.md similarity index 100% rename from docs/zh-cn/cli/4-mcp.md rename to docs/zh-cn/real-world-development/cli/4-mcp.md diff --git a/docs/zh-cn/cli/5-agent-skills.md b/docs/zh-cn/real-world-development/cli/5-agent-skills.md similarity index 100% rename from docs/zh-cn/cli/5-agent-skills.md rename to docs/zh-cn/real-world-development/cli/5-agent-skills.md diff --git a/docs/zh-cn/cli/6-custom-agents.md b/docs/zh-cn/real-world-development/cli/6-custom-agents.md similarity index 100% rename from docs/zh-cn/cli/6-custom-agents.md rename to docs/zh-cn/real-world-development/cli/6-custom-agents.md diff --git a/docs/zh-cn/cli/7-slash-commands.md b/docs/zh-cn/real-world-development/cli/7-slash-commands.md similarity index 99% rename from docs/zh-cn/cli/7-slash-commands.md rename to docs/zh-cn/real-world-development/cli/7-slash-commands.md index 908e57aa..cadb3719 100644 --- a/docs/zh-cn/cli/7-slash-commands.md +++ b/docs/zh-cn/real-world-development/cli/7-slash-commands.md @@ -66,7 +66,7 @@ lastUpdated: 2026-06-30 2. 稍等片刻后，Copilot CLI 会生成当前上下文的可视化表示： - ![Copilot CLI 上下文窗口截图](../../_images/cli-7-context-window.png) + ![Copilot CLI 上下文窗口截图](../../../_images/cli-7-context-window.png) 3. 注意显示的模型（可能与图片中不同）以及当前已使用的 token 百分比。其余信息展示了以下内容： diff --git a/docs/zh-cn/cli/8-foundry-agent/1-project-and-model.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/1-project-and-model.md similarity index 96% rename from docs/zh-cn/cli/8-foundry-agent/1-project-and-model.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/1-project-and-model.md index 1cfec351..3249ae30 100644 --- a/docs/zh-cn/cli/8-foundry-agent/1-project-and-model.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/1-project-and-model.md @@ -102,7 +102,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 npm run db:export ``` - ![目录导出摘要](../../../_images/cli-8-export-db-catalog.png) + ![目录导出摘要](../../../../_images/cli-8-export-db-catalog.png) 2. 打开 `db/catalog.json`。确认其中包含 21 款游戏，每款游戏都有名称、描述、类别、发行商和星级评分。其 `note` 字段说明目录不包含筹款总额、支持者人数、支持档位或发布日期。目录也没有价格、玩家人数或游戏时长字段。这些缺失的信息界定了智能体必须遵守的边界。 @@ -129,7 +129,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Use the Microsoft Foundry Skill to create a public Foundry project for this project. Use the resource group rg-tailspin-toys and project name tailspin-toys. ``` - ![创建公共 Foundry 项目](../../../_images/cli-8-create-foundry-project.png) + ![创建公共 Foundry 项目](../../../../_images/cli-8-create-foundry-project.png) 2. 项目准备就绪后，让 Copilot 推荐模型： @@ -139,7 +139,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Copilot 可能会提示从推荐选项中选择模型。 - ![从推荐选项中选择模型](../../../_images/cli-8-select-foundry-model.png) + ![从推荐选项中选择模型](../../../../_images/cli-8-select-foundry-model.png) 后续步骤将使用 `gpt-5.4-mini`，但可用情况和配额因区域而异。 @@ -149,7 +149,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Deploy the model we selected to the tailspin-toys Foundry project and use the model name as the deployment name. Choose an SKU with available quota, ask me to confirm the capacity before deployment. After deployment, show me the deployment status. ``` - ![部署所选模型](../../../_images/cli-8-deploy-foundry-model.png) + ![部署所选模型](../../../../_images/cli-8-deploy-foundry-model.png) > [!TIP] > 模型可用情况会随时间变化。应选择 Copilot 确认在项目中可用的模型，而不是照搬示例中写死的模型。 @@ -198,7 +198,7 @@ Tailspin Toys 需要一个能够区分目录事实和公司未提供信息的礼 Use the Microsoft Foundry Skill to test my deployed model directly in the tailspin-toys project without creating an agent. Ground it with content from @db/catalog.json and ask: "I love puzzle games about tracking down bugs. What should I back, and how much funding has it raised?" Show me the response and useful metadata like tokens used and response time (only if you can obtain it). Do not change files or create resources. ``` - ![Foundry 模型的回答推荐目录中真实存在的游戏，并指出没有筹款数据](../../../_images/cli-8-foundry-agent-response.png) + ![Foundry 模型的回答推荐目录中真实存在的游戏，并指出没有筹款数据](../../../../_images/cli-8-foundry-agent-response.png) 5. 查看回答。它应仅推荐目录中真实存在的游戏，使用正确的目录细节，并说明没有筹款信息。如果模型编造游戏名称、游戏细节或筹款总额，请先对比另一个推荐模型，再继续。 diff --git a/docs/zh-cn/cli/8-foundry-agent/2-build-and-deploy.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md similarity index 96% rename from docs/zh-cn/cli/8-foundry-agent/2-build-and-deploy.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md index ac1cdc37..fb67337a 100644 --- a/docs/zh-cn/cli/8-foundry-agent/2-build-and-deploy.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/2-build-and-deploy.md @@ -84,7 +84,7 @@ Tailspin Toys 需要的不只是模型的一次性回答。支持者希望礼宾 只有针对性测试通过后，才能继续。 - ![验证智能体脚手架](../../../_images/cli-8-verify-generated-agent.png) + ![验证智能体脚手架](../../../../_images/cli-8-verify-generated-agent.png) ## 在本地测试智能体 @@ -113,7 +113,7 @@ Tailspin Toys 需要的不只是模型的一次性回答。支持者希望礼宾 7. In one conversation, send "Show me two highly rated strategy games." followed by "Which of those has the higher rating?" Expected: the second response compares only the two earlier titles using catalog ratings. ``` - ![托管智能体部署测试通过](../../../_images/cli-8-passing-acceptance-scenarios.png) + ![托管智能体部署测试通过](../../../../_images/cli-8-passing-acceptance-scenarios.png) 4. 查看结果。如果无法连接智能体，请确认第二个终端中的服务仍在运行。如果测试失败，让 Copilot 仅修复本地缺陷、运行针对性测试，并告知何时需要重启 `azd ai agent run`。每次更改后，都要重启服务并重新运行失败的验收测试。 @@ -130,7 +130,7 @@ Tailspin Toys 需要的不只是模型的一次性回答。支持者希望礼宾 3. 如果系统提示选择评估套件来源，请选择 **No, set it up later**（否，稍后设置）。 - ![托管智能体部署状态和操练场链接](../../../_images/cli-8-hosted-agent-deployment.png) + ![托管智能体部署状态和操练场链接](../../../../_images/cli-8-hosted-agent-deployment.png) 4. 查看部署状态和远程回答。确认智能体正在运行，且仅推荐目录中真实存在的游戏。如果部署或调用失败，请让 Copilot 诊断故障，并在继续之前重复远程测试。 diff --git a/docs/zh-cn/cli/8-foundry-agent/3-connect-to-site.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/3-connect-to-site.md similarity index 96% rename from docs/zh-cn/cli/8-foundry-agent/3-connect-to-site.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/3-connect-to-site.md index b2b55d02..640e1aed 100644 --- a/docs/zh-cn/cli/8-foundry-agent/3-connect-to-site.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/3-connect-to-site.md @@ -43,7 +43,7 @@ Tailspin Toys 采用完全预渲染方式。浏览器代码绝不能直接调用 For conversation state, generate a high-entropy handle on the server, map it to the Foundry conversation server-side with an expiration, and never expose a raw Foundry conversation or thread identifier. Reject malformed, expired, and unknown handles. Add focused unit tests. ``` - ![Azure Functions 本地代理设置](../../../_images/cli-8-azure-functions-proxy.png) + ![Azure Functions 本地代理设置](../../../../_images/cli-8-azure-functions-proxy.png) 2. 打开另一个终端，然后使用 Copilot 提供的命令启动本地 Function。保持 Function 运行。 3. 返回 Copilot CLI，让 Copilot 测试本地代理： @@ -54,7 +54,7 @@ Tailspin Toys 采用完全预渲染方式。浏览器代码绝不能直接调用 4. 查看响应。它应说明目录不包含价格。响应中不得包含 Foundry 令牌、凭据、项目终结点、原始 Foundry 对话标识符或堆栈跟踪。 - ![本地礼宾助手终结点返回的已移除敏感信息的 JSON 响应](../../../_images/cli-8-sanitized-json-response.png) + ![本地礼宾助手终结点返回的已移除敏感信息的 JSON 响应](../../../../_images/cli-8-sanitized-json-response.png) ## 构建聊天组件 @@ -73,7 +73,7 @@ Tailspin Toys 采用完全预渲染方式。浏览器代码绝不能直接调用 Use the Playwright MCP server to test the Backer Concierge widget end to end in the running Tailspin Toys site. Verify its core chat flow, conversation continuity, accessibility, error handling, grounding boundaries, and secure use of the local proxy. Report the results and include evidence for any failures. ``` - ![Tailspin Toys 网站中的 Backer Concierge 聊天组件截图](../../../_images/cli-8-backer-concierge-widget.png) + ![Tailspin Toys 网站中的 Backer Concierge 聊天组件截图](../../../../_images/cli-8-backer-concierge-widget.png) 4. 根据报告中的证据检查结果。如果有任何检查失败，请让 Copilot 修复相关代理或组件的行为，并在结束前重新运行失败的检查。 diff --git a/docs/zh-cn/cli/8-foundry-agent/README.md b/docs/zh-cn/real-world-development/cli/8-foundry-agent/README.md similarity index 98% rename from docs/zh-cn/cli/8-foundry-agent/README.md rename to docs/zh-cn/real-world-development/cli/8-foundry-agent/README.md index 0aeed993..3364c7ec 100644 --- a/docs/zh-cn/cli/8-foundry-agent/README.md +++ b/docs/zh-cn/real-world-development/cli/8-foundry-agent/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/cli/8-foundry-agent +slug: zh-cn/real-world-development/cli/8-foundry-agent title: "可选：集成 Foundry" description: "通过三个模块准备模型、构建并部署基于目录的智能体，以及将其连接到 Tailspin Toys。" authors: diff --git a/docs/zh-cn/cli/9-review.md b/docs/zh-cn/real-world-development/cli/9-review.md similarity index 100% rename from docs/zh-cn/cli/9-review.md rename to docs/zh-cn/real-world-development/cli/9-review.md diff --git a/docs/zh-cn/cli/README.md b/docs/zh-cn/real-world-development/cli/README.md similarity index 98% rename from docs/zh-cn/cli/README.md rename to docs/zh-cn/real-world-development/cli/README.md index 6b0693da..27d27cd0 100644 --- a/docs/zh-cn/cli/README.md +++ b/docs/zh-cn/real-world-development/cli/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/cli +slug: zh-cn/real-world-development/cli title: "GitHub Copilot CLI" authors: - geektrainer diff --git a/docs/zh-cn/vscode/6-iterating.md b/docs/zh-cn/real-world-development/vscode/6-iterating.md similarity index 98% rename from docs/zh-cn/vscode/6-iterating.md rename to docs/zh-cn/real-world-development/vscode/6-iterating.md index 8bb83837..45b6b197 100644 --- a/docs/zh-cn/vscode/6-iterating.md +++ b/docs/zh-cn/real-world-development/vscode/6-iterating.md @@ -37,7 +37,7 @@ next: false 9. 返回 **Conversation** 选项卡。 10. 如果工作流正在等待批准，选择 **Approve and run workflows**。 - ![批准并运行工作流](../../_images/shared-approve-workflows.png) + ![批准并运行工作流](../../../_images/shared-approve-workflows.png) 11. 等待工作流完成。如果一切正常，所有工作流都应通过。 > [!TIP] diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/1-project-and-model.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md similarity index 99% rename from docs/zh-cn/vscode/7-foundry-toolkit/1-project-and-model.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md index 58b7bcf4..925c52a4 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/1-project-and-model.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/1-project-and-model.md @@ -67,7 +67,7 @@ Tailspin 的支持者希望获得可信的推荐。解谜游戏爱好者期待 1. 在活动栏中选择 **Foundry Toolkit**，展开 **Help and Feedback**，然后选择 **Ask Copilot**。在下拉列表中确认所选模型，并发送生成的 `/foundrytk-quick-start` 提示。 - ![Foundry Toolkit 快速入门操作流程截图。](../../../_images/vscode-foundry-setup.png) + ![Foundry Toolkit 快速入门操作流程截图。](../../../../_images/vscode-foundry-setup.png) 2. 在交互式工作流中，对 **Where are you starting from?** 选择 **Set up Foundry**，然后对 **What do you have already?** 选择 **I have an Azure subscription or Foundry resources**。 3. 检查工具批准请求。如果建议的命令及其作用范围合适，为本会话选择 **Allow azmcp …**，以减少重复的批准提示。 @@ -93,7 +93,7 @@ Tailspin 的支持者希望获得可信的推荐。解谜游戏爱好者期待 3. 批准前确认项目、部署、容量和费用。检查作用范围后，如果合适，为本会话选择 **Allow az …**，以减少重复提示。 4. 选择 **Foundry Toolkit**，展开 **My Resources**，然后选择 **Models**。确认已部署的模型显示在 Foundry 下。截图仅为示例；所在区域可能提供不同模型。 - ![Foundry Toolkit 中的模型部署示例截图。](../../../_images/vscode-model-deployed.png) + ![Foundry Toolkit 中的模型部署示例截图。](../../../../_images/vscode-model-deployed.png) ## 测试已部署的模型 diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/2-build-and-deploy.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md similarity index 94% rename from docs/zh-cn/vscode/7-foundry-toolkit/2-build-and-deploy.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md index 23f187df..a4c118b0 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/2-build-and-deploy.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy.md @@ -52,7 +52,7 @@ lastUpdated: 2026-09-16 1. 选择 **Foundry Toolkit**，展开 **Developer Tools**，再展开 **+ Build**，然后选择 **+ Create Agent**。在 **Create Agent** 上，选择 **Code an agent with Copilot**。 - ![创建代理页面的截图。](../../../_images/vscode-create-agent.png) + ![创建代理页面的截图。](../../../../_images/vscode-create-agent.png) 2. 在新聊天中，确认已切换为 **AIAgentExpert**。将生成的提示替换为以下定制提示并提交： @@ -65,7 +65,7 @@ lastUpdated: 2026-09-16 5. 复用[测试已部署的模型][model-tests]中的全部六个提示。根据完整的 `db/catalog.json` 检查回答，不要将九款游戏子集的排名当作完整目录的排名。 6. 在 **Input & Output**、**Events** 和 **Tools** 之间切换，检查请求与响应数据、会话事件和工具调用。如果行为违反验收标准，让 Copilot 修复，并在部署前重新运行针对性测试和 Inspector 检查。 - ![本地代理调试工作流截图。](../../../_images/vscode-agent-debug.png) + ![本地代理调试工作流截图。](../../../../_images/vscode-agent-debug.png) ## 部署并测试托管代理 @@ -77,17 +77,17 @@ lastUpdated: 2026-09-16 /foundrytk-quick-start Review this agent for deployment readiness, run its tests, then deploy it to my existing tailspin-toys Foundry project. Show me the deployment status and test the deployed agent. ``` - ![AIAgentExpert 代理提供的交接选项截图。](../../../_images/vscode-go-production-handoff.png) + ![AIAgentExpert 代理提供的交接选项截图。](../../../../_images/vscode-go-production-handoff.png) 2. 在聊天和终端中检查参数及命令批准请求。确认部署目标为现有的 `tailspin-toys` 项目，并在批准前检查计费资源。 3. 如果 Copilot 提供评估套件，可以选择接受并执行，作为额外检查。 4. 选择 **Foundry Toolkit**，展开 **My Resources**，再选择 **Agents**。在 **Agents** 选项卡中，切换到 **Hosted Agent**。 - ![已部署的托管代理截图。](../../../_images/vscode-agent-deployed.png) + ![已部署的托管代理截图。](../../../../_images/vscode-agent-deployed.png) 5. 选择代理名称，确认部署状态为 **Running**。切换到 **Playground**，根据已部署的目录，重复检查回答的数据依据、缺失数据、目录外内容、模糊请求和排名。 - ![已部署的托管代理返回回答的截图。](../../../_images/vscode-agent-response.png) + ![已部署的托管代理返回回答的截图。](../../../../_images/vscode-agent-response.png) 6. 如果部署或回答未通过检查，与 Copilot 一起检查报告的状态和日志，在现有项目中修复问题，然后重复检查。不要在部署未经验证的情况下继续。 diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/3-connect-to-site.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md similarity index 98% rename from docs/zh-cn/vscode/7-foundry-toolkit/3-connect-to-site.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md index 7f8f56e5..6ff4912e 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/3-connect-to-site.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site.md @@ -62,7 +62,7 @@ UI 现在有了经过验证的后端。端到端测试将同时检查可用性 Add an accessible Backer Concierge chat widget to the Astro site. Connect it to /api/concierge, preserve the conversation using the returned opaque handle, follow the existing design guidance, support keyboard use, and make it testable. ``` - ![Backer Concierge 聊天小组件运行中的截图](../../../_images/tailspin-toys-backer-concierge-agent.png) + ![Backer Concierge 聊天小组件运行中的截图](../../../../_images/tailspin-toys-backer-concierge-agent.png) 2. 保持 Function 和网站运行，然后验证完整体验： diff --git a/docs/zh-cn/vscode/7-foundry-toolkit/README.md b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/README.md similarity index 98% rename from docs/zh-cn/vscode/7-foundry-toolkit/README.md rename to docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/README.md index 47d5b771..a98aef75 100644 --- a/docs/zh-cn/vscode/7-foundry-toolkit/README.md +++ b/docs/zh-cn/real-world-development/vscode/7-foundry-toolkit/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/vscode/7-foundry-toolkit +slug: zh-cn/real-world-development/vscode/7-foundry-toolkit title: "可选：集成 Foundry" description: "通过三个聚焦的模块，使用 VS Code 和 Microsoft Foundry Toolkit 构建基于目录数据的 Backer Concierge。" authors: diff --git a/docs/zh-cn/vscode/README.md b/docs/zh-cn/real-world-development/vscode/README.md similarity index 98% rename from docs/zh-cn/vscode/README.md rename to docs/zh-cn/real-world-development/vscode/README.md index 61eed9cd..2d604726 100644 --- a/docs/zh-cn/vscode/README.md +++ b/docs/zh-cn/real-world-development/vscode/README.md @@ -1,5 +1,5 @@ --- -slug: zh-cn/vscode +slug: zh-cn/real-world-development/vscode title: "VS Code" authors: - geektrainer diff --git a/website/astro.config.mjs b/website/astro.config.mjs index afc6b567..450baa62 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -53,212 +53,277 @@ export default defineConfig({ sidebar: [ { label: 'Home', link: '/' }, { - label: 'VS Code', + label: 'First steps', items: [ - { label: 'Overview', link: '/vscode/' }, - { 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: 'Overview', link: '/first-steps/' }, { - label: 'Optional: Incorporate Foundry', - translations: { - 'es-ES': 'Opcional: Incorporar Foundry', - 'ja-JP': '省略可能: Foundry を組み込む', - 'ko-KR': '선택 사항: Foundry 통합', - 'pt-BR': 'Opcional: Incorporar o Foundry', - 'zh-CN': '可选：集成 Foundry', - }, + label: 'GitHub Copilot app', items: [ - { label: 'Overview', link: '/vscode/7-foundry-toolkit/' }, - { - label: 'Prepare a project and model', - link: '/vscode/7-foundry-toolkit/1-project-and-model/', - translations: { - 'es-ES': 'Preparar un proyecto y un modelo', - 'ja-JP': 'プロジェクトとモデルを準備する', - 'ko-KR': '프로젝트 및 모델 준비', - 'pt-BR': 'Preparar um projeto e um modelo', - 'zh-CN': '准备项目和模型', - }, - }, - { - label: 'Build and deploy an agent', - link: '/vscode/7-foundry-toolkit/2-build-and-deploy/', - translations: { - 'es-ES': 'Crear e implementar un agente', - 'ja-JP': 'エージェントを構築してデプロイする', - 'ko-KR': '에이전트 빌드 및 배포', - 'pt-BR': 'Criar e implantar um agente', - 'zh-CN': '构建并部署代理', - }, - }, - { - label: 'Connect the agent to the site', - link: '/vscode/7-foundry-toolkit/3-connect-to-site/', - translations: { - 'es-ES': 'Conectar el agente al sitio', - 'ja-JP': 'エージェントをサイトに接続する', - 'ko-KR': '사이트에 에이전트 연결', - 'pt-BR': 'Conectar o agente ao site', - 'zh-CN': '将代理连接到网站', - }, - }, + { label: 'Overview', link: '/first-steps/copilot-app/' }, + { label: '0. Prerequisites and setup', link: '/first-steps/copilot-app/0-prerequisites/' }, + { label: '1. Create the workspace', link: '/first-steps/copilot-app/1-create-workspace/' }, + { label: '2. Build and polish', link: '/first-steps/copilot-app/2-build-and-polish/' }, + { label: '3. Inspect and test', link: '/first-steps/copilot-app/3-inspect-and-test/' }, + { label: '4. Project instructions', link: '/first-steps/copilot-app/4-project-instructions/' }, + { label: '5. Publish the project', link: '/first-steps/copilot-app/5-publish/' }, + { label: '6. Issues and sessions', link: '/first-steps/copilot-app/6-issues-and-sessions/' }, + { label: '7. Plan before you edit', link: '/first-steps/copilot-app/7-plan-mode/' }, + { label: '8. Complete the review loop', link: '/first-steps/copilot-app/8-review-loop/' }, + { label: '9. Automate issue triage', link: '/first-steps/copilot-app/9-automations/' }, + { label: '10. Continue remotely (optional)', link: '/first-steps/copilot-app/10-remote/' }, + { label: '11. Explore a Canvas', link: '/first-steps/copilot-app/11-canvas/' }, + { label: '12. Review and next steps', link: '/first-steps/copilot-app/12-review/' }, ], }, - ], - }, - { - 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. 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/' }, - { label: '9. Review', link: '/cli/9-review/' }, { - label: 'Optional: Incorporate Foundry', - translations: { - 'es-ES': 'Opcional: incorpora Foundry', - 'ja-JP': 'オプション: Foundry を組み込む', - 'ko-KR': '선택 사항: Foundry 통합하기', - 'pt-BR': 'Opcional: Incorpore o Foundry', - 'zh-CN': '可选：集成 Foundry', - }, - collapsed: true, + label: 'GitHub Copilot CLI', items: [ - { - label: 'Overview', - link: '/cli/8-foundry-agent/', - translations: { - 'es-ES': 'Descripción general', - 'ja-JP': '概要', - 'ko-KR': '개요', - 'pt-BR': 'Visão geral', - 'zh-CN': '概述', - }, - }, - { - label: '1. Prepare the project and model', - link: '/cli/8-foundry-agent/1-project-and-model/', - translations: { - 'es-ES': '1. Prepara el proyecto y el modelo', - 'ja-JP': '1. プロジェクトとモデルを準備する', - 'ko-KR': '1. 프로젝트와 모델 준비하기', - 'pt-BR': '1. Prepare o projeto e o modelo', - 'zh-CN': '1. 准备项目和模型', - }, - }, - { - label: '2. Build and deploy the agent', - link: '/cli/8-foundry-agent/2-build-and-deploy/', - translations: { - 'es-ES': '2. Crea y despliega el agente', - 'ja-JP': '2. エージェントを構築してデプロイする', - 'ko-KR': '2. 에이전트 빌드 및 배포하기', - 'pt-BR': '2. Crie e implante o agente', - 'zh-CN': '2. 构建并部署智能体', - }, - }, - { - label: '3. Connect the agent to the website', - link: '/cli/8-foundry-agent/3-connect-to-site/', - translations: { - 'es-ES': '3. Conecta el agente al sitio web', - 'ja-JP': '3. エージェントを Web サイトに接続する', - 'ko-KR': '3. 에이전트를 웹사이트에 연결하기', - 'pt-BR': '3. Conecte o agente ao site', - 'zh-CN': '3. 将智能体连接到网站', - }, - }, + { label: 'Overview', link: '/first-steps/copilot-cli/' }, + { label: '0. Prerequisites and setup', link: '/first-steps/copilot-cli/0-prerequisites/' }, + { label: '1. Build the quiz', link: '/first-steps/copilot-cli/1-build/' }, + { label: '2. Project instructions', link: '/first-steps/copilot-cli/2-project-instructions/' }, + { label: '3. Publish the project', link: '/first-steps/copilot-cli/3-publish/' }, + { label: '4. Issues in parallel', link: '/first-steps/copilot-cli/4-issues-and-sessions/' }, + { label: '5. Plan before you edit', link: '/first-steps/copilot-cli/5-plan-mode/' }, + { label: '6. Manage context', link: '/first-steps/copilot-cli/6-context/' }, + { label: '7. Resume and go remote', link: '/first-steps/copilot-cli/7-resume-and-remote/' }, + { label: '8. Create and merge a PR', link: '/first-steps/copilot-cli/8-pull-request/' }, + { label: '9. Delegate work', link: '/first-steps/copilot-cli/9-delegate/' }, + { label: '10. Review and next steps', link: '/first-steps/copilot-cli/10-review/' }, + ], + }, + { + label: 'Visual Studio Code', + items: [ + { label: 'Overview', link: '/first-steps/vscode/' }, + { label: '0. Prerequisites and setup', link: '/first-steps/vscode/0-prerequisites/' }, + { label: '1. Build and polish', link: '/first-steps/vscode/1-build-and-polish/' }, + { label: '2. Project instructions', link: '/first-steps/vscode/2-project-instructions/' }, + { label: '3. Inspect context and test', link: '/first-steps/vscode/3-inspect-and-test/' }, + { label: '4. Publish the project', link: '/first-steps/vscode/4-publish/' }, + { label: '5. Plan before you edit', link: '/first-steps/vscode/5-plan-mode/' }, + { label: '6. GitHub MCP', link: '/first-steps/vscode/6-github-mcp/' }, + { label: '7. Issues and sessions', link: '/first-steps/vscode/7-issues-and-sessions/' }, + { label: '8. Review and merge', link: '/first-steps/vscode/8-review-and-merge/' }, + { label: '9. Cloud session', link: '/first-steps/vscode/9-cloud-session/' }, + { label: '10. Review and next steps', link: '/first-steps/vscode/10-review/' }, ], }, ], }, { - label: 'Copilot App', + label: 'Real-world development', 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: '9. Review', link: '/app/9-review/' }, + { label: 'Overview', link: '/real-world-development/' }, { - label: 'Optional: Incorporate Foundry', - translations: { - 'es-ES': 'Opcional: Incorporar Foundry', - 'ja-JP': 'オプション: Foundry を組み込む', - 'ko-KR': '선택 사항: Foundry 통합', - 'pt-BR': 'Opcional: Incorporar o Foundry', - 'zh-CN': '可选：集成 Foundry', - }, + label: 'GitHub Copilot CLI', items: [ + { label: 'Overview', link: '/real-world-development/cli/' }, + { label: '0. Prerequisites', link: '/real-world-development/cli/0-prerequisites/' }, + { label: '1. Install Copilot CLI', link: '/real-world-development/cli/1-install-copilot-cli/' }, + { label: '2. Custom instructions', link: '/real-world-development/cli/2-custom-instructions/' }, + { label: '3. Generating code', link: '/real-world-development/cli/3-generating-code/' }, + { label: '4. Testing with Playwright MCP', link: '/real-world-development/cli/4-mcp/' }, + { label: '5. Agent skills', link: '/real-world-development/cli/5-agent-skills/' }, + { label: '6. Custom agents', link: '/real-world-development/cli/6-custom-agents/' }, + { label: '7. Slash commands', link: '/real-world-development/cli/7-slash-commands/' }, + { label: '9. Review', link: '/real-world-development/cli/9-review/' }, { - label: 'Overview', - link: '/app/8-foundry-canvas/', - }, - { - label: '1. Prepare the project and model', - link: '/app/8-foundry-canvas/1-project-and-model/', + label: 'Optional: Incorporate Foundry', translations: { - 'es-ES': '1. Preparar el proyecto y el modelo', - 'ja-JP': '1. プロジェクトとモデルを準備する', - 'ko-KR': '1. 프로젝트와 모델 준비', - 'pt-BR': '1. Preparar o projeto e o modelo', - 'zh-CN': '1. 准备项目和模型', + 'es-ES': 'Opcional: incorpora Foundry', + 'ja-JP': 'オプション: Foundry を組み込む', + 'ko-KR': '선택 사항: Foundry 통합하기', + 'pt-BR': 'Opcional: Incorpore o Foundry', + 'zh-CN': '可选：集成 Foundry', }, + collapsed: true, + items: [ + { + label: 'Overview', + link: '/real-world-development/cli/8-foundry-agent/', + translations: { + 'es-ES': 'Descripción general', + 'ja-JP': '概要', + 'ko-KR': '개요', + 'pt-BR': 'Visão geral', + 'zh-CN': '概述', + }, + }, + { + label: '1. Prepare the project and model', + link: '/real-world-development/cli/8-foundry-agent/1-project-and-model/', + translations: { + 'es-ES': '1. Prepara el proyecto y el modelo', + 'ja-JP': '1. プロジェクトとモデルを準備する', + 'ko-KR': '1. 프로젝트와 모델 준비하기', + 'pt-BR': '1. Prepare o projeto e o modelo', + 'zh-CN': '1. 准备项目和模型', + }, + }, + { + label: '2. Build and deploy the agent', + link: '/real-world-development/cli/8-foundry-agent/2-build-and-deploy/', + translations: { + 'es-ES': '2. Crea y despliega el agente', + 'ja-JP': '2. エージェントを構築してデプロイする', + 'ko-KR': '2. 에이전트 빌드 및 배포하기', + 'pt-BR': '2. Crie e implante o agente', + 'zh-CN': '2. 构建并部署智能体', + }, + }, + { + label: '3. Connect the agent to the website', + link: '/real-world-development/cli/8-foundry-agent/3-connect-to-site/', + translations: { + 'es-ES': '3. Conecta el agente al sitio web', + 'ja-JP': '3. エージェントを Web サイトに接続する', + 'ko-KR': '3. 에이전트를 웹사이트에 연결하기', + 'pt-BR': '3. Conecte o agente ao site', + 'zh-CN': '3. 将智能体连接到网站', + }, + }, + ], }, + ], + }, + { + label: 'GitHub Copilot app', + items: [ + { label: 'Overview', link: '/real-world-development/app/' }, + { label: '0. Prerequisites', link: '/real-world-development/app/0-prerequisites/' }, + { label: '1. Install the Copilot app', link: '/real-world-development/app/1-install-copilot-app/' }, + { label: '2. Running your first agent session', link: '/real-world-development/app/2-add-star-rating/' }, + { label: '3. Guiding Copilot with custom instructions', link: '/real-world-development/app/3-custom-instructions/' }, + { label: '4. Building a feature with Autopilot', link: '/real-world-development/app/4-build-filtering/' }, + { label: '5. Testing with Playwright MCP', link: '/real-world-development/app/5-mcp-playwright/' }, + { label: '6. Merging with Agent Merge', link: '/real-world-development/app/6-agent-merge/' }, + { label: '7. Planning with canvases', link: '/real-world-development/app/7-canvases/' }, + { label: '9. Review', link: '/real-world-development/app/9-review/' }, { - label: '2. Build and deploy the agent', - link: '/app/8-foundry-canvas/2-build-and-deploy/', + label: 'Optional: Incorporate Foundry', translations: { - 'es-ES': '2. Crear e implementar el agente', - 'ja-JP': '2. エージェントを構築してデプロイする', - 'ko-KR': '2. 에이전트 빌드 및 배포', - 'pt-BR': '2. Criar e implantar o agente', - 'zh-CN': '2. 构建并部署代理', + 'es-ES': 'Opcional: Incorporar Foundry', + 'ja-JP': 'オプション: Foundry を組み込む', + 'ko-KR': '선택 사항: Foundry 통합', + 'pt-BR': 'Opcional: Incorporar o Foundry', + 'zh-CN': '可选：集成 Foundry', }, + items: [ + { + label: 'Overview', + link: '/real-world-development/app/8-foundry-canvas/', + }, + { + label: '1. Prepare the project and model', + link: '/real-world-development/app/8-foundry-canvas/1-project-and-model/', + translations: { + 'es-ES': '1. Preparar el proyecto y el modelo', + 'ja-JP': '1. プロジェクトとモデルを準備する', + 'ko-KR': '1. 프로젝트와 모델 준비', + 'pt-BR': '1. Preparar o projeto e o modelo', + 'zh-CN': '1. 准备项目和模型', + }, + }, + { + label: '2. Build and deploy the agent', + link: '/real-world-development/app/8-foundry-canvas/2-build-and-deploy/', + translations: { + 'es-ES': '2. Crear e implementar el agente', + 'ja-JP': '2. エージェントを構築してデプロイする', + 'ko-KR': '2. 에이전트 빌드 및 배포', + 'pt-BR': '2. Criar e implantar o agente', + 'zh-CN': '2. 构建并部署代理', + }, + }, + { + label: '3. Connect the agent to the site', + link: '/real-world-development/app/8-foundry-canvas/3-connect-to-site/', + translations: { + 'es-ES': '3. Conectar el agente al sitio', + 'ja-JP': '3. エージェントをサイトに接続する', + 'ko-KR': '3. 에이전트를 사이트에 연결', + 'pt-BR': '3. Conectar o agente ao site', + 'zh-CN': '3. 将代理连接到网站', + }, + }, + ], }, + ], + }, + { + label: 'GitHub Copilot cloud agent', + items: [ + { label: 'Overview', link: '/real-world-development/cloud/' }, + { label: '0. Prerequisites', link: '/real-world-development/cloud/0-prerequisites/' }, + { label: '1. Custom instructions', link: '/real-world-development/cloud/1-custom-instructions/' }, + { label: '2. Cloud agent', link: '/real-world-development/cloud/2-cloud-agent/' }, + { label: '3. Custom agents', link: '/real-world-development/cloud/3-custom-agents/' }, + { label: '4. Managing agents', link: '/real-world-development/cloud/4-managing-agents/' }, + { label: '5. Iterating', link: '/real-world-development/cloud/5-iterating/' }, + ], + }, + { + label: 'Visual Studio Code', + items: [ + { label: 'Overview', link: '/real-world-development/vscode/' }, + { label: '0. Prerequisites', link: '/real-world-development/vscode/0-prerequisites/' }, + { label: '1. Custom instructions', link: '/real-world-development/vscode/1-custom-instructions/' }, + { label: '2. Agent mode', link: '/real-world-development/vscode/2-agent-mode/' }, + { label: '3. Testing with Playwright MCP', link: '/real-world-development/vscode/3-mcp/' }, + { label: '4. Custom agents', link: '/real-world-development/vscode/4-custom-agents/' }, + { label: '5. Managing agents', link: '/real-world-development/vscode/5-managing-agents/' }, + { label: '6. Iterating', link: '/real-world-development/vscode/6-iterating/' }, { - label: '3. Connect the agent to the site', - link: '/app/8-foundry-canvas/3-connect-to-site/', + label: 'Optional: Incorporate Foundry', translations: { - 'es-ES': '3. Conectar el agente al sitio', - 'ja-JP': '3. エージェントをサイトに接続する', - 'ko-KR': '3. 에이전트를 사이트에 연결', - 'pt-BR': '3. Conectar o agente ao site', - 'zh-CN': '3. 将代理连接到网站', + 'es-ES': 'Opcional: Incorporar Foundry', + 'ja-JP': '省略可能: Foundry を組み込む', + 'ko-KR': '선택 사항: Foundry 통합', + 'pt-BR': 'Opcional: Incorporar o Foundry', + 'zh-CN': '可选：集成 Foundry', }, + items: [ + { label: 'Overview', link: '/real-world-development/vscode/7-foundry-toolkit/' }, + { + label: 'Prepare a project and model', + link: '/real-world-development/vscode/7-foundry-toolkit/1-project-and-model/', + translations: { + 'es-ES': 'Preparar un proyecto y un modelo', + 'ja-JP': 'プロジェクトとモデルを準備する', + 'ko-KR': '프로젝트 및 모델 준비', + 'pt-BR': 'Preparar um projeto e um modelo', + 'zh-CN': '准备项目和模型', + }, + }, + { + label: 'Build and deploy an agent', + link: '/real-world-development/vscode/7-foundry-toolkit/2-build-and-deploy/', + translations: { + 'es-ES': 'Crear e implementar un agente', + 'ja-JP': 'エージェントを構築してデプロイする', + 'ko-KR': '에이전트 빌드 및 배포', + 'pt-BR': 'Criar e implantar um agente', + 'zh-CN': '构建并部署代理', + }, + }, + { + label: 'Connect the agent to the site', + link: '/real-world-development/vscode/7-foundry-toolkit/3-connect-to-site/', + translations: { + 'es-ES': 'Conectar el agente al sitio', + 'ja-JP': 'エージェントをサイトに接続する', + 'ko-KR': '사이트에 에이전트 연결', + 'pt-BR': 'Conectar o agente ao site', + 'zh-CN': '将代理连接到网站', + }, + }, + ], }, ], }, ], }, - { - 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/' }, - { label: '4. Managing agents', link: '/cloud/4-managing-agents/' }, - { label: '5. Iterating', link: '/cloud/5-iterating/' }, - ], - }, ], }), ],