',
+ '
+
+4. At **Connect your repositories**, leave every repository unselected, then select **Continue**. You'll connect your fork of the GitHub Copilot app for Beginners repository in the next section.
+
+The app opens the **New** view. If it shows a short tip about a new feature, you can close the tip. Next, connect your copy of the course repository.
+
+## Connect to Your Repository
+
+> [!NOTE]
+> If the Copilot app reports that Git is missing when you connect your repository, [install Git](https://git-scm.com/install), then retry the connection.
+
+1. [Fork the course repository on GitHub][fork-repo-link]. A fork is your own copy of the repository that lives on GitHub.
+
+2. In the Copilot app, select **+** next to **Projects**, then select **Add GitHub repository**.
+
+ 
+
+3. Type `copilot-app-for-beginners` in the search box. Select your fork, the result that starts with your GitHub username, not `github/copilot-app-for-beginners`. The app downloads a local copy (clones it) and adds the project to the sidebar.
+
+
+
+1. Submit this short prompt to create the session and test it out.
+
+ ```text
+ Name the top-level folders in this repository. Do not change any files.
+ ```
+
+1. Select **View** > **Toggle Review Panel** to open the side panel if it is not already visible.
+
+1. Select **Terminal**. If you don't see it, select **+**, then **Terminal**.
+
+1. In **Terminal**, run each of these version checks to ensure that the prerequisites are installed correctly.
+
+ ```bash
+ git --version
+ node -v
+ npm -v
+ gh --version
+ ```
+
+ Each command should display a version number. For `node -v`, the sample app requires [Node.js LTS](https://nodejs.org) or later.
+
+
+
+A finished take still needs to move through production. The producer tracks the brief, feedback, quality checks, and final approval. That's the **outer loop**: use issues and pull requests to move validated work through GitHub.
+
+
+
+## Core Concept: Trust the Evidence
+
+A confident response from Copilot isn't the same as validated software. Use these surfaces to decide whether a change is ready:
+
+| Evidence | Where to find it | What to check |
+|---|---|---|
+| Diff | Review panel **Changes** tab | The change is focused and understandable |
+| Tests and build | Review panel **Terminal** tab | The relevant tests and build complete successfully |
+| Running app | Review panel **Browser** tab | The behavior works as expected (in the case of a web app) |
+| GitHub checks | Pull request in the **Pull requests** view | Continuous integration (CI) agrees with your local results |
+
+
+
+Human judgment applies to both loops. In the inner loop, you decide whether the diff, tests, build, and preview show that the change is ready. In the outer loop, you review the pull request, its comments, and its checks, and you decide when it is ready to merge.
+
+## Confirm the Sample App Is Ready
+
+The repository includes `.github/copilot-instructions.md`, which gives Copilot project-specific guidance. It describes the sample app, its beginner-friendly conventions, and its validation commands.
+
+
+
+| Context layer | What it includes |
+|---|---|
+| Prompt | What you ask in the current turn, including files, folders, issues, or pull requests attached with `@` and `#` |
+| Settings | App instructions that apply to every session, and instructions for one project |
+| Instructions | Shared repository guidance such as `.github/copilot-instructions.md` or `AGENTS.md` |
+| Repo files | The code, tests, documentation, and other files Copilot can access |
+
+Attach only the context that helps with the current task. Focused context makes it easier for Copilot to understand your goal and follow the repository's conventions.
+
+
+
+ The view now lists only the practice issues from your fork.
+
+ 
+
+1. Select **Pull requests** in the sidebar, then select your fork in its repository picker too. Each view keeps its own repository selection. The practice pull requests appear on the **Authored by me** tab.
+
+> [!TIP]
+> You can filter with a query instead. Select the filter icon at the right end of the tab row to show the query box, then add `repo:YOUR-OWNER/copilot-app-for-beginners` to the query. Replace `YOUR-OWNER` with the username or organization that owns your fork. The repository picker then shows **Custom**. A typed query resets when you change tabs, so the picker is easier for this course.
+
+Confirm that opening an item shows its title, repository, number, and current status. If an expected item is missing, check the selected tab and repository, your repository access, and organization policy.
+
+### 5. Start from an Issue and Open a Pull Request
+
+Issue 1 asks you to make search in the book app case-insensitive. The intentional bug exists only on the `practice-search-case-bug` branch. You'll attach the issue with `#`, as in Chapter 02, and this time finish with a pull request.
+
+1. In **Issues**, open the **Make search case-insensitive** issue and review the details. If needed, review the scenario in [`samples/app-course-issues.md`](https://github.com/github/copilot-app-for-beginners/blob/main/samples/app-course-issues.md#issue-1-make-search-case-insensitive).
+
+ 
+
+1. Start the session from the practice branch so the bug is present. The issue's **New session** button starts from `main`, where search already works, so select **Create from** next to the course project instead.
+1. Choose **Branches**, then select `practice-search-case-bug`.
+1. In the prompt box, type `#1`, then select **Make search case-insensitive** to attach the issue. If your issue has a different number, type `#` and select it by title.
+1. Set the mode to **Plan**, add the following prompt after the attached issue, then submit:
+
+ ```text
+ Use the attached issue as the source of truth. Create a small implementation and validation plan. Name the files you expect to change and the tests or browser checks that should prove the fix. Don't edit files yet.
+ ```
+
+1. Review the plan, then select **Exit plan mode and I will prompt myself**. The mode returns to **Interactive**. Submit:
+
+ ```text
+ Implement the plan. Include a focused regression test that proves uppercase and lowercase searches return the same result.
+ ```
+
+1. Follow the inner loop:
+ - Inspect the diff in the **Changes** tab.
+ - In **Terminal**, change to `samples/book-app-web` and run `npm install`.
+ - Run `npm test -- --run` and `npm run build`.
+ - Start the app with `npm run dev`.
+ - Open a **Browser** tab and confirm that searches such as `hobbit` and `HOBBIT` return the same result.
+ - Return to **Terminal** and press `Ctrl+C` to stop the development server.
+1. Confirm that the **Changes** tab contains only the focused search fix and its test.
+1. Ask Copilot for help with the description:
+
+ ```text
+ Draft a pull request summary for this session. Include what changed, why it changed, and the validation performed. Don't claim a check passed unless it appears in the terminal or CI output.
+ ```
+
+1. Review the draft, then select **Create PR** at the top of the session.
+1. After the pull request is created, select it above the prompt box to view its details.
+1. You can also find the pull request in the **Pull requests** view.
+
+Don't merge this practice pull request. The correct search behavior is already on `main`.
+
+Your local evidence should show that the behavior works. The pull request now gives reviewers and CI a chance to check the same change on GitHub.
+
+### 6. Address Review Comments and Failing Checks
+
+The setup script created two separate pull requests for this exercise. They aren't the search-fix pull request you just opened.
+
+Select **Pull requests** in the sidebar. Your fork should still be selected in the repository picker, and the practice pull requests appear on the **Authored by me** tab.
+
+#### Respond to a Review Comment
+
+1. Open the pull request titled **Improve empty-state copy**.
+1. Find the conversation comment asking for more helpful guidance.
+
+ 
+
+1. Select **New session** at the top of the pull request to start a session for the pull request.
+1. Ask Copilot:
+
+ ```text
+ Address this PR conversation comment with the smallest useful change. Show me the diff and validation plan before I accept the fix.
+ ```
+
+1. Inspect the diff and confirm that the revised message addresses the complete comment.
+1. Ask Copilot to commit and push the change, then return to the pull request and confirm the update.
+
+#### Fix a Failing Check
+
+A **CI check** is an automated validation run on a pull request, often through GitHub Actions.
+
+1. Open the pull request titled **Failing stats check practice** and review the failed **Book app web** check.
+
+ 
+
+1. Select **New session** at the top of the pull request, then submit the prompt below. The new session's **PR** tab also has a **Fix failing checks** button, but this exercise uses your own prompt so that you can see and steer each step.
+
+ ```text
+ Analyze the failing check. Explain the root cause, identify the likely file in samples/book-app-web, and propose the smallest fix. Don't weaken the failing test.
+ ```
+
+1. Inspect the diff. Confirm that the fix restores favorite counting for both read and unread favorites and does not change the test.
+
+1. In **Terminal**, run `npm install`, `npm test -- --run`, and `npm run build` in `samples/book-app-web`.
+
+1. Start `npm run dev` and confirm in the **Browser** tab that the favorite count includes both read and unread favorites. Then press `Ctrl+C` to stop the server.
+
+1. Ask Copilot to commit and push the change.
+
+1. Return to the pull request and confirm that the **Book app web** check reruns successfully.
+
+Don't mark a pull request ready until the diff is focused and the local and GitHub evidence agree.
+
+
+
+Find skills in the **Customize** view in the sidebar. Select custom agents with `/agent` or the agent picker in the prompt box.
+
+> [!TIP]
+> **Optional exploration:** After you complete this chapter's exercises, browse the Awesome Copilot directories for examples of community-created [agents][awesome-agents] and [skills][awesome-skills]. Before you add or use another customization, review the agent's tools or the skill's instructions.
+
+> [!IMPORTANT]
+> A skill tells Copilot how to approach a task, but its instructions do not enforce what Copilot is allowed to do. For example, a skill that says "review without editing" does not disable file-editing tools. Skills can also include scripts or tell Copilot to use tools, so read unfamiliar skills before enabling them. The course review skill contains instructions only.
+
+## Create a Practice Session
+
+1. Select **Create from** next to your course project.
+2. Select **Branches**, then `main`, to start a session in a new worktree.
+3. Set the mode to **Interactive**.
+4. Submit the following prompt:
+
+ ```text
+ Show this session's branch and worktree path. Confirm that .github/skills/book-app-reviewer/SKILL.md and samples/book-app-web exist here. Do not edit files, commit, or push.
+ ```
+
+Keep this session for all the exercises. When you open a file in your editor, use the session's worktree, not the original clone.
+
+**Expected Output:** The session shows a worktree path separate from your original clone and finds both paths.
+
+> [!NOTE]
+> File edits belong to this worktree. Installed tools can have a wider scope and affect other sessions. A new worktree from `main` will not contain uncommitted edits from this session.
+
+## Skills: Save a Review Checklist
+
+A skill is a folder with a `SKILL.md` file. For the Book App, the course includes a review checklist skill at:
+
+```text
+.github/skills/book-app-reviewer/SKILL.md
+```
+
+The file starts with metadata between two `---` lines. This block is called **YAML frontmatter**. The `description` helps the Copilot app decide when to load the skill:
+
+```markdown
+---
+name: book-app-reviewer
+description: Review changes in samples/book-app-web for accessibility, responsive layout, tests/build validation, and small beginner-safe changes.
+---
+```
+
+The Markdown below the frontmatter contains the instructions. This skill covers the stack, tests, build, accessibility, responsive layout, and change size.
+
+Repository skills can be shared through Git. Personal skills apply across projects on your machine. See [About agent skills][agent-skills] for the supported locations.
+
+### Exercise: Update and Use the Course Skill
+
+You will add two specific review rules, then use the updated skill. You will not change the sample app yet.
+
+HTML heading levels (`h1`, `h2`, and `h3`) describe the page structure, not just text size. Text alternatives convey the meaning of images and icons to people who cannot see them. A screen reader can read these alternatives aloud.
+
+1. Select **Customize**, then **Skills**.
+
+1. Filter to **Project** and search for `book-app-reviewer`.
+
+1. Confirm that the skill is enabled for the course project. Ignore the course-authoring skills.
+
+ - **All** shows every installed skill
+ - **Project** shows repository skills
+ - **Built-in** shows skills supplied with the app
+
+ 
+
+1. Return to your chapter session and submit:
+
+ ```text
+ Read @.github/skills/book-app-reviewer/SKILL.md. Explain the frontmatter and summarize the Review focus list. Do not edit files or run checks.
+ ```
+
+1. Submit this bounded edit request:
+
+ ```text
+ Edit only @.github/skills/book-app-reviewer/SKILL.md. Append these two items to Review focus:
+
+ - Check that headings describe the page structure: one page-level h1, section headings below it, and book titles below the results heading.
+ - Check that informative images and icons have text alternatives. Decorative images should use empty alt text, and decorative icons should be hidden from assistive technology.
+
+ Keep all existing rules and frontmatter unchanged. Do not edit the sample app, commit, or push.
+ ```
+
+1. Inspect the **Changes** tab. Confirm that only the two rules were added to `SKILL.md`.
+
+1. Submit `/skills reload` to load the edited skill.
+
+1. Set the mode to **Plan** and submit:
+
+ ```text
+ Use the book-app-reviewer skill to inspect @samples/book-app-web/src. Focus on the results heading, book-title headings, and empty state.
+
+ Apply the two rules we added. Propose at most one small improvement and name the files it would affect. If no change is needed, explain why.
+
+ List the review rules you applied. Separate code observations from tests or browser checks that still need to run. Do not edit files or run commands.
+ ```
+
+1. Expand the skill activity in the response and confirm that the Copilot app loaded `book-app-reviewer`. Compare the plan with the rules in the file. Stop before implementation.
+
+**Expected Output:** The plan cites the added heading or text-alternative rules and points to specific code. In the original sample, the book titles and results heading both use `h2`. If the Copilot app proposes `h3` for book titles, its plan must also account for the `.book-card h2` CSS selector. The plan must not claim that tests or browser checks passed.
+
+**How It Works:** The changed file supplies a reusable checklist. Naming the skill makes your intent explicit. It does not guarantee correct findings. Check the activity and the code, not only the Copilot app's statement that it followed the rules.
+
+> [!TIP]
+> Type `/` to find available commands. The skill should appear as `/book-app-reviewer`. A general review prompt can also load a matching skill automatically, so different answers are not proof that one review used a skill and another did not.
+
+The checklist defines how to review the code. Next, you'll define a different role: an agent that can explain code but doesn't have tools to change it.
+
+## Custom Agents: Define a Role and Its Tools
+
+You don't call one general helper for every repair on a house. You call a plumber, an electrician, or a roofer. Custom agents apply the same idea to code review, testing, security, and documentation: define the role once, then select that agent when you need it.
+
+
+
+A **custom agent** has a name, instructions, and a set of available tools. A skill supplies a workflow to an agent; a custom agent defines the role that performs work. Custom agents are not a different session mode or necessarily a different AI model.
+
+For example, a reviewer may need a checklist and test tools. An explainer only needs to read and search files. You will create that smaller role here.
+
+The agent profile is a Markdown file with YAML frontmatter, like a skill:
+
+| Profile part | Purpose |
+| --- | --- |
+| `name` | Identifies the agent in the agent picker |
+| `description` | Describes the agent's purpose |
+| `tools` | Limits the available tools; `read` and `search` allow file inspection without editing or running commands |
+| Markdown below the frontmatter | Defines the agent's behavior and answer format |
+
+### Exercise: Create a Read-Only Book App Explainer
+
+1. Return to the chapter session in **Interactive** mode. If an agent picker appears below the prompt box, select **Default agent**.
+2. Copy the instruction and the complete Markdown block into one message, then send it:
+
+ ```text
+ Create .github/agents/book-app-explainer.agent.md with exactly the Markdown below. Create the agents folder if it is missing. If the file exists, show it and stop instead of replacing it. Do not edit other files, commit, or push.
+ ```
+
+ ```markdown
+ ---
+ name: book-app-explainer
+ description: Explain the Book App's code and tests to a beginner without changing files.
+ tools: ["read", "search"]
+ ---
+
+ Explain files in samples/book-app-web.
+ Read the relevant code before answering. Do not guess from file names.
+ Use short sentences and define new technical terms.
+ Do not edit files, run commands, or use external services.
+ Do not claim that tests passed; you can inspect tests but cannot run them.
+
+ Structure each answer as:
+ 1. What it does.
+ 2. How the data moves, with file paths and function names.
+ 3. One small example from the current book data.
+ 4. What the existing tests cover and one useful manual check.
+ ```
+
+1. Inspect the new file in **Changes**. Confirm that `tools` contains only `read` and `search`.
+1. Load the new agent. The app loads custom agents when it starts. Wait for active work in all sessions to finish, then quit the GitHub Copilot app and open it again. Closing the window is not the same as quitting the app. Then select this chapter's session in the sidebar.
+2. Type `/agent` in the prompt box.
+3. Select **book-app-explainer** from the agent list, then send the completed `/agent book-app-explainer` command. Confirm that the agent picker below the prompt box shows `book-app-explainer`. If `/agent` or the agent is still not listed, follow [A changed skill or new agent is missing](#a-changed-skill-or-new-agent-is-missing), then try again.
+
+
+
+ The screenshot shows the selection before the command is sent, so the agent picker still shows **Default agent**. After you send the command, use the live agent picker as the check: it should show **book-app-explainer**. The agent picker appears below the prompt box only when a custom agent is available.
+
+1. With the agent selected, submit:
+
+ ```text
+ Explain how @samples/book-app-web/src/App.tsx keeps reading statistics aligned with filtered books. Use the Unread filter as your example. Follow your four-part answer format.
+ ```
+
+1. Compare the answer with `App.tsx`, `ReadingStats.tsx`, and the existing tests. Confirm that the agent did not change files or run commands.
+2. Use `/agent` or the agent picker to return to the default agent before the assignment.
+
+**Expected Output:** The answer traces `filters` through `filterBooks` to `filteredBooks`, then shows how that list reaches `ReadingStats` and the book cards. It separates test coverage from a suggested manual check. No files change after the profile is created.
+
+**How It Works:** The Markdown defines the role and answer format. The `tools` list limits available tools; omitting it would allow all available tools. The folder scope in the instructions guides the agent, but it is not a file-system sandbox.
+
+This agent cannot run the tests or save its own report. That restriction is intentional: match an agent's tools to its task, and add nothing beyond that. Use the default agent when you need those actions.
+
+### Checkpoint
+
+After these exercises, you should have:
+
+- An updated `book-app-reviewer` skill with your added review rules.
+- A `book-app-explainer` custom-agent profile that limits the agent to read and search tools.
+
+---
+
+## Troubleshooting
+
+If something does not work as expected, check the problems below. The [Troubleshooting Reference](https://github.com/github/copilot-app-for-beginners/blob/main/appendices/troubleshooting-reference.md) lists problems and fixes for all chapters.
+
+
+
+## Core Concepts
+
+### MCP Server Versus Plugin
+
+| Feature | What it adds | Example in this chapter |
+|---|---|---|
+| MCP server | Tools that connect the Copilot app to a service or data source | Retrieve React's input-label guidance with Context7 |
+| Plugin | An installable package of skills, agents, or other capabilities | Use Modern Web Guidance to plan a small CSS improvement |
+
+A plugin can include an MCP server, but the two aren't interchangeable. You can connect a server directly, and a plugin can supply a skill without adding a server.
+
+Find both in the **Customize** view in the sidebar. Start with the tools you already have; add an integration only when it supplies something the task needs. Every extra tool is more noise for the agent and more access to review.
+
+
+
+## Create a Practice Session
+
+1. Select **Create from** next to your course project.
+2. Select **Branches**, then `main`, to start a session in a new worktree.
+3. Set the mode to **Interactive**. If an agent picker appears below the prompt box, confirm that it shows **Default agent**, not the read-only explainer agent from Chapter 04.
+4. Submit:
+
+ ```text
+ Show this session's branch and worktree path. Confirm that samples/book-app-web/src/components/BookFilters.tsx, samples/book-app-web/src/components/BookCard.tsx, and samples/book-app-web/src/styles/app.css exist here. Do not edit files, run app checks, commit, or push.
+ ```
+
+**Expected Output:** The session identifies its worktree and finds the three files.
+
+Keep this session for both exercises and the assignment. You don't need to install the Book App's dependencies or run its development server for these read-only comparisons.
+
+> [!NOTE]
+> A worktree separates file changes, not installed tools. MCP connections and plugins can affect other sessions. Before adding either, check whether it's already installed and enabled; don't create a duplicate.
+
+## MCP Servers: Get Information from Another Service
+
+A browser extension can connect your browser to a service, such as a password vault. An MCP server gives the Copilot app a similar connection to tools and data. Here, Context7 provides access to React documentation.
+
+
+
+Model Context Protocol defines how an AI application connects to tools and data. An **MCP server** supplies those tools. The server can run on your machine or at a remote service.
+
+The graphic shows example connections, not required installations. The app already has tools to read and search local files. Configure MCP connections under **Customize > MCP**, not the app's **Extensions** tab.
+
+Use MCP when the task needs information or actions that the current tools don't supply. You don't need to add another GitHub server for the issue and pull request work from Chapter 03.
+
+[Context7][context7] is a documentation service with an MCP server. In this example, it supplies React documentation. It doesn't become a dependency of the Book App.
+
+
+
+The screenshot shows one Context7 connection after setup. Your **Installed** list can be empty before this exercise. Use one connection per service.
+
+### Exercise: Check the Book App's Input Labels with Context7
+
+In React, a label's `htmlFor` value can match an input's `id` to connect the label to that input.
+
+Start by getting the Context7 MCP server configured in the GitHub Copilot app. If it's already connected, skip the add-server steps.
+
+1. Open **Customize**, then **MCP**.
+2. Search for `context7`, then select **Add server** on the **Context7** row.
+3. Review the values in the **Context7** configuration dialog:
+
+ | Setting | Value |
+ |---|---|
+ | Server name | `context7` |
+ | Server type | `HTTP` |
+ | URL | `https://mcp.context7.com/mcp` |
+
+ The `HTTP` server type means the Copilot app connects to a hosted server instead of starting a local process.
+
+
+
+1. Select **Add server**.
+2. Confirm that **Context7** appears under **Installed** in the **MCP** tab, with its connected icon and enabled toggle.
+3. Return to the chapter session you created earlier. Use **Interactive** mode with the default agent.
+4. Submit:
+
+ ```text
+ Use the Context7 MCP tools to find the official React documentation for input labels.
+
+ Ask only this general question: How do nested labels compare with htmlFor and id when labeling an input?
+
+ Summarize both patterns and include the source links. Do not send repository code or paths to Context7. If the MCP tools are unavailable, report that and stop.
+ ```
+
+1. Expand the tool activity. Confirm that a **Context7** tool returned documentation. Open a source link and compare it with the summary.
+2. Submit:
+
+ ```text
+ Compare the retrieved guidance with @samples/book-app-web/src/components/BookFilters.tsx. Keep this comparison local. Explain whether Search, Genre, and Status have associated labels. Do not edit files or make more external requests.
+ ```
+
+**Expected Output:** The MCP activity contains documentation results. The local comparison identifies the inputs and selects nested inside `