diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 9beeb4e7..af1a647a 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -13,9 +13,9 @@ This is a crowdfunding platform for games with a developer theme. The applicatio - When adding new functionality, make sure you update the README - Make sure all guidance in the Copilot Instructions file is updated with any relevant changes, including to project structure and scripts, and programming guidance -### Global language guidance +### Code formatting requirements -- Use type hints for function parameters and return values for all languages which support them +- When writing Python, you must use type hints for return values and function parameters. ### Python and Flask Patterns diff --git a/.github/instructions/flask-endpoint.instructions.md b/.github/instructions/flask-endpoint.instructions.md index 52d2578c..59bdce93 100644 --- a/.github/instructions/flask-endpoint.instructions.md +++ b/.github/instructions/flask-endpoint.instructions.md @@ -7,15 +7,15 @@ - All endpoints require tests - Use the `unittest` module for testing - All tests must pass - - A script is provided to run tests at `scripts/run-server-tests.sh` + - [A script is provided to run tests](../../scripts/run-server-tests.sh) ## Project notes - The Python virtual environment is located in the root of the project in a **venv** folder -- Register all blueprints in `server/app.py` -- Use the [test instructions](.github/instructions/python-tests.instructions.md) when creating tests +- Register all blueprints in [the app entrypoint](../../server/app.py) +- Use the [test instructions](./python-tests.instructions.md) when creating tests ## Prototype files -- [Endpoint prototype](server/routes/games.py) -- [Tests prototype](server/tests/test_games.py) +- [Endpoint prototype](../../server/routes/games.py) +- [Tests prototype](../../server/tests/test_games.py) diff --git a/.gitignore b/.gitignore index cbf220cb..5ec07d29 100644 --- a/.gitignore +++ b/.gitignore @@ -66,3 +66,6 @@ bld/ msbuild.log msbuild.err msbuild.wrn + +# SQLite +*.db \ No newline at end of file diff --git a/.vscode/mcp.json b/.vscode/mcp.json index 506a5225..812bee25 100644 --- a/.vscode/mcp.json +++ b/.vscode/mcp.json @@ -1,26 +1,8 @@ { - "inputs": [ - { - "type": "promptString", - "id": "github_token", - "description": "GitHub Personal Access Token", - "password": true - } - ], - "servers": { - "github": { - "command": "docker", - "args": [ - "run", - "-i", - "--rm", - "-e", - "GITHUB_PERSONAL_ACCESS_TOKEN", - "ghcr.io/github/github-mcp-server" - ], - "env": { - "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}" - } - } + "servers": { + "github": { + "type": "http", + "url": "https://api.githubcopilot.com/mcp/" } + } } \ No newline at end of file diff --git a/docs/0-prereqs.md b/docs/0-prereqs.md index 628e1bb8..299a91f3 100644 --- a/docs/0-prereqs.md +++ b/docs/0-prereqs.md @@ -14,11 +14,11 @@ To create a copy of the repository for the code you'll create an instance from t > [!IMPORTANT] > If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors for naming the repository. -3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to either GitHub Copilot Pro+ or GitHub Copilot Enterprise. +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 Copilot coding agent and can assign issues to Copilot. ![Input the repository template settings](images/repository-template-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. +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 diff --git a/docs/1-copilot-coding-agent.md b/docs/1-copilot-coding-agent.md index ada04d98..d0092d3e 100644 --- a/docs/1-copilot-coding-agent.md +++ b/docs/1-copilot-coding-agent.md @@ -34,7 +34,7 @@ As a result, we want to [be mindful about how we approach assigning tasks to Cop Creating code, regardless of who's involved, typically requires a specific environment and some setup scripts to be run to ensure everything is in a good state. This holds true when assigning tasks to Copilot, which is performing tasks in a similar fashion to a SWE. -[Copilot coding agent supports a special workflow][setup-workflow], set in the `.github/workflows/copilot-setup-steps.yml` file, to run before it gets to work. This enables it to have access to the required development tools and dependencies. We pre-configured this ahead of the lab to help the lab flow and allow this learning opportunity. It makes sure that Copilot had access to Python, Node.JS, and the required dependencies for the client and server: +[Copilot coding agent supports a special workflow][setup-workflow], set in the **.github/workflows/copilot-setup-steps.yml** file, to run before it gets to work. This enables it to have access to the required development tools and dependencies. We pre-configured this ahead of the lab to help the lab flow and allow this learning opportunity. It makes sure that Copilot had access to Python, Node.JS, and the required dependencies for the client and server: ```yaml name: "Copilot Setup Steps" @@ -79,8 +79,8 @@ jobs: It looks like any other GitHub workflow file, but it has a few key points: -- It contains a single job called `copilot-setup-steps`. This job is executed in GitHub Actions before Copilot starts working on the pull request. -- We've also added a `workflow_dispatch` trigger, which allows you to run the workflow manually from the Actions tab of your repository. This is useful for testing that the workflow runs successfully instead of waiting for Copilot to run it. +- It contains a single job called **copilot-setup-steps**. This job is executed in GitHub Actions before Copilot starts working on the pull request. +- We've also added a **workflow_dispatch** trigger, which allows you to run the workflow manually from the Actions tab of your repository. This is useful for testing that the workflow runs successfully instead of waiting for Copilot to run it. ## Improving code documentation @@ -109,13 +109,17 @@ While every developer and organization understands the importance of documentati 11. Select the **Pull Requests** tab. 12. Open the newly generated issue, which will be titled something similar to **[WIP]: Code lacks documentation**. -13. Notice how Copilot has created a todo list. +13. After a few minutes, you should see that Copilot has created a todo list. 14. Review the list and the tasks it's going to complete. 15. Scroll down the pull request timeline, and you should see an update that Copilot has started working on the issue. 16. Select the **View session** button. ![Copilot session view](images/ex4-view-session.png) + +> [!IMPORTANT] +> You may need to refresh the window to see the updated indicator. + 17. Notice that you can scroll through the live session, and how Copilot is solving the problem. That includes exploring the code and understanding the state, how Copilot pauses to think and decide on the appropriate plan and also creating code. This will likely take several minutes. One of the primary goals of Copilot coding agent is to allow it to perform tasks asynchronously, freeing us to focus on other tasks. We're going to take advantage of that very feature by both assigning another task to Copilot coding agent, then turning our attention to writing some code to add features to our application. @@ -180,7 +184,7 @@ You explored the these concepts: - the importance of clearly scoped issues. - assigning issues to Copilot. -With coding agent working diligently in the background, we can now turn our attention to our next lesson, [using MCP servers to interact with external services][next-lesson]. +With coding agent working diligently in the background, we can now turn our attention to our next lesson, [using MCP servers to interact with external services][next-lesson]. [Copilot coding agent can also use MCP servers][coding-agent-mcp], but we're going to switch back to our Codespace and try use MCP with Copilot agent mode. ## Resources @@ -194,6 +198,7 @@ With coding agent working diligently in the background, we can now turn our atte |:--|--:| [coding-agent-overview]: https://docs.github.com/en/copilot/using-github-copilot/coding-agent/about-assigning-tasks-to-copilot#overview-of-copilot-coding-agent +[coding-agent-mcp]: https://docs.github.com/en/copilot/how-tos/agents/copilot-coding-agent/extending-copilot-coding-agent-with-mcp [assign-issue]: https://docs.github.com/en/copilot/using-github-copilot/coding-agent/using-copilot-to-work-on-an-issue [setup-workflow]: https://docs.github.com/en/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#pre-installing-dependencies-in-github-copilots-environment [copilot-agents]: https://docs.github.com/en/copilot/using-github-copilot/coding-agent/about-assigning-tasks-to-copilot diff --git a/docs/2-mcp.md b/docs/2-mcp.md index 210ec43e..804a8605 100644 --- a/docs/2-mcp.md +++ b/docs/2-mcp.md @@ -83,7 +83,7 @@ Once you have the extension installed, you may need to authenticate with your Gi ![Example of selecting the Claude 3.5 Sonnet model](images/copilot-agent-mode-model.png) > [!IMPORTANT] -> The authors of this lab are not indicating a preference towards one model or another. When building this lab, we used Claude 3.5, and as such are including that in the instructions. The hope is the code suggestions you receive will be relatively consistent to ensure a good experience. However, because LLMs are probabilistic, you may notice the suggestions received differ from what is indicated in the lab. This is perfectly normal and expected. +> The authors of this lab are not indicating a preference towards one model or another. When building this lab, we used Claude 3.5 Sonnet, and as such are including that in the instructions. The hope is the code suggestions you receive will be relatively consistent to ensure a good experience. However, because LLMs are probabilistic, you may notice the suggestions received differ from what is indicated in the lab. This is perfectly normal and expected. 8. The chat pane should update to indicate that you are now in agent mode. You should see a tools icon, showing that we can configure tools for GitHub Copilot to use. @@ -100,74 +100,50 @@ The **.vscode/mcp.json** file is used to configure the MCP servers that are avai ```json { - "inputs": [ - { - "type": "promptString", - "id": "github_token", - "description": "GitHub Personal Access Token", - "password": true - } - ], "servers": { "github": { - "command": "docker", - "args": [ - "run", - "-i", - "--rm", - "-e", - "GITHUB_PERSONAL_ACCESS_TOKEN", - "ghcr.io/github/github-mcp-server" - ], - "env": { - "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}" - } + "type": "http", + "url": "https://api.githubcopilot.com/mcp/" } } } ``` -The `inputs` section defines the inputs that the MCP server will require. In this case, we are asking for a GitHub Personal Access Token, which is required to authenticate with the GitHub API. The `password` field is set to `true`, which means that the input will be masked when you enter it. - -> [!IMPORTANT] -> Make sure that you do not share your GitHub Personal Access Token with anyone, as it provides access to your GitHub account and repositories. Treat it like a password and keep it secure. That means you should not check it into source control or share it with anyone else. -> -> Because it is a sensitive password, **DO NOT** paste it into the **mcp.json** file, is an artifact of the source code. Published tokens is the leading cause of security breaches. Instead, you'll securely add it to your codespace in a later step. +This configuration provides GitHub Copilot access to several additional tools so that it can interact with GitHub repositories, issues, pull requests, and more. This particular configuration uses the [remote GitHub MCP server][remote-github-mcp-server]. By using this approach, we don't need to worry about running the MCP server locally (and the associated management, like keeping it up to date), and we can authenticate to the remote server using OAuth 2.0 instead of a personal access token (PAT). -The `servers` section defines the MCP server that you want to use. In this case, we are using the GitHub MCP server, which is run in a Docker container. The `command` field specifies the command to run the MCP server, and the `args` field specifies the arguments to pass to the command. The `env` field specifies the environment variables to set when running the MCP server. The `GITHUB_PERSONAL_ACCESS_TOKEN` environment variable is set to the value of the `github_token` input, which is provided by the user when prompted. +The MCP server configuration is defined in the **servers** section of the **mcp.json** file. Each MCP server is defined by a unique name (in this case, github) and its type (in this case, **http**). When using local MCP servers, the type may be **stdio** and have a **command** and **args** field to specify how to start the MCP server. You can find out more about the configuration format in the [VS Code documentation][vscode-mcp-config]. In some configurations (not for the remote GitHub MCP server with OAuth), you may also see an **inputs** section. This defines any inputs (like sensitive tokens) that the MCP server may require. You can read more about the configuration properties in the [VS Code documentation][vscode-mcp-config] -## Obtain the token +To utilize an MCP server it needs to be "started". This will allow GitHub Copilot to communicate with the server and perform the tasks you request. -In order to interact with GitHub via the MCP server you'll need to have a token. This can either be done by [creating a personal access token (PAT)][github-pat-docs], or (as in our case) using the GitHub token from the codespace. Let's obtain the GitHub token. +1. Inside VS Code, open **.vscode/mcp.json**. +2. To start the GitHub MCP server, select **Start** above the GitHub server. -1. Open the terminal in your Codespace by selecting Ctl+\`. -2. Run the following command to print the value of the GITHUB_TOKEN environment variable: + ![The start button above the GitHub MCP server entry](images/ex2-start-mcp.png) - ```bash - echo $GITHUB_TOKEN - ``` +3. You should see a popup asking you to authenticate to GitHub. -3. Highlight the token and copy it to the clipboard. + ![A popup showing that the GitHub MCP server wants to authenticate to GitHub](images/ex2-mcp-auth-popup.png) -## Start the MCP server +4. Select **Continue** on the user account that you're using for this lab. -To utilize an MCP server it needs to be "started". This will allow GitHub Copilot to communicate with the server and perform the tasks you request. + ![A popup showing the user account selection for GitHub authentication](images/ex2-mcp-select-account.png) -1. Inside VS Code, open **.vscode/mcp.json**. -2. To start the GitHub MCP server, select **Start** above the GitHub server. -3. You should see a prompt asking for the GitHub personal access token. -4. Paste the token you copied previously. +5. If the page appears, select **Authorize visual-studio-code** to allow the GitHub MCP server to login as your selected user account. Once complete, the page should say "You can now close the window.". - ![Example of the start button and the prompt asking for the GitHub personal access token](images/copilot-github-mcp-token-prompt.png) + ![A popup showing the authorization for visual-studio-code app](images/ex2-mcp-auth-vscode.png) -> [!IMPORTANT] -> Do not share your PAT with anyone, as it provides access to your GitHub account and repositories. Treat it like a password and keep it secure. That includes not checking it into source control. **Do not paste it directly into the .vscode/mcp.json file.** +6. After navigating back to the GitHub Codespace, you should see that the GitHub MCP server has started. You can check this in two places: + - The line in **.vscode/mcp.json** which previously said start. It should now present several options, and show a number of tools available. + - Select the tools icon in the Copilot Chat pane to see the tools available. Scroll down the list that appears at the top of the screen, and you should see a list of tools from the GitHub MCP server. -5. The GitHub MCP server should start up, and you should now see the number of tools available in the Copilot Chat window increase from 0. This indicates that the AI agent is now able to access the GitHub MCP server and perform actions on your behalf. + ![Example of the MCP server started with tools available](images/ex2-mcp-server-started.png) - ![Example of the Copilot Chat Pane showing tools available](images/copilot-agent-mode-mcp-tools.png) +That's it! You can now use Copilot Chat in agent mode to create issues, manage pull requests, and more. -6. You can select the tools icon to see the list of available tools that the GitHub MCP server provides. This includes tools for creating and managing repositories, issues, pull requests, and more. +> [!IMPORTANT] +> If you have any issues with this MCP server configuration, there are alternate configuration options in the [GitHub MCP server][github-mcp-server] repository using local or remote MCP. If you opt for a configuration that requires authentication via a GitHub Personal Access Token (PAT), make sure that you do not share it with anyone. Treat it like a password and keep it secure. That means you should not check it into source control or share it with anyone else. +> +> Because it is a sensitive password, **DO NOT** paste it into the **mcp.json** file. Instead use the **inputs** property to pass the token as an input variable. Published tokens is one of the leading causes of security breaches. ## Creating a backlog of tasks @@ -267,3 +243,5 @@ Notice that the setup process is similar to the GitHub MCP server, but you do no [vscode-extensions]: https://code.visualstudio.com/docs/configure/extensions/extension-marketplace [copilot-chat-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot [github-pat-docs]: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token +[remote-github-mcp-server]: https://github.blog/changelog/2025-06-12-remote-github-mcp-server-is-now-available-in-public-preview/ +[vscode-mcp-config]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_configuration-format \ No newline at end of file diff --git a/docs/3-custom-instructions.md b/docs/3-custom-instructions.md index 52b7406f..0d53fe6f 100644 --- a/docs/3-custom-instructions.md +++ b/docs/3-custom-instructions.md @@ -7,7 +7,7 @@ Context is key across many aspects of life, and when working with generative AI. In this exercise, you will learn how to: -- provide Copilot with project-specific context, coding guidelines and documentation standards using custom instructions `.github/copilot-instructions.md`. +- provide Copilot with project-specific context, coding guidelines and documentation standards using custom instructions **.github/copilot-instructions.md**. - use instruction files to guide Copilot for repetitive or templated tasks. - implement both repository-wide instructions and task-specific instructions. @@ -39,8 +39,8 @@ Custom instructions allow you to provide context and preferences to Copilot chat There are two types of instructions files: -- `.github/copilot-instructions.md`, a single instruction file sent to Copilot for **every** chat prompt. This file should contain project-level information, context which is relevant for every message. This could include the tech stack being used, an overview of what's being built, or global guidance for Copilot. -- `.instructions.md` can be created for specific tasks or file types. You can use `.instructions.md` files to provide guidelines for particular languages (like Python or TypeScript), or for tasks like creating a React component or a new instance of a repository pattern. +- **.github/copilot-instructions.md**, a single instruction file sent to Copilot for **every** chat prompt. This file should contain project-level information, context which is relevant for every message. This could include the tech stack being used, an overview of what's being built, or global guidance for Copilot. +- **\*.instructions.md** files can be created for specific tasks or file types. You can use **.instructions.md** files to provide guidelines for particular languages (like Python or TypeScript), or for tasks like creating a React component or a new instance of a repository pattern. > [!NOTE] > When working in your IDE, instructions files are only used for code generation in Copilot Chat, and not used for code completions. @@ -75,17 +75,17 @@ To see the impact of custom instructions, we will start by sending a prompt with ## Add global standards to copilot-instructions.md -As highlighted previously, `copilot-instructions.md` is designed to provide project-level information to Copilot. Let's ensure global coding standards are documented to improve code suggestions from Copilot chat. +As highlighted previously, **copilot-instructions.md** is designed to provide project-level information to Copilot. Let's ensure global coding standards are documented to improve code suggestions from Copilot chat. 1. Return to your codespace. 2. Open **.github/copilot-instructions.md**. -3. Explore the file, noting the brief description of the project and sections for `Code standards`, `Scripts` and `GitHub Actions Workflows`. These are applicable to any interactions we'd have with Copilot, are robust, and provide clear guidance on what we're doing and how we want to accomplish it. -4. Locate the `### Global language guidance` section, which should be around like 16. Note how it contains a note to use type hints. That's why we saw those in the code generated previously. +3. Explore the file, noting the brief description of the project and sections for **Code standards**, **Scripts** and **GitHub Actions Workflows**. These are applicable to any interactions we'd have with Copilot, are robust, and provide clear guidance on what we're doing and how we want to accomplish it. +4. Locate the **Code formatting requirements** section, which should be around line 16. Note how it contains a note to use type hints. That's why we saw those in the code generated previously. 5. Add the following lines of markdown right below the note about type hints to instruct Copilot to add comment headers to files and docstrings: ```markdown - - Include a comment block at the top of each new file to describe what it does - Every function should have docstrings or the language equivalent + - Before imports or any code, add a comment block that explains the purpose of the file. ``` 6. Close **copilot-instructions.md**. @@ -121,18 +121,19 @@ As highlighted previously, `copilot-instructions.md` is designed to provide proj ``` 10. Also note how the existing code isn't updated, but of course we could ask Copilot to perform that operation if we so desired! + 11. **Don't implement the suggested changes**, as we will be doing that in the next section. From this section, you explored how the custom instructions file has provided Copilot with the context it needs to generate code that follows the established guidelines. ## Instruction files for tasks -Coding is often repetitive, with developers performing similar tasks on a regular basis. Copilot is wonderful for allowing you to offload these types of tasks. But these types of tasks, like adding an endpoint, creating a component, or adding a new service pattern implementation often require a particular template or structure to be followed. Instruction files allow you to provide specific requirements for these types of tasks. They can be added manually when using Copilot Chat, or can have an `applyTo:` tag added to the top of the file to have Copilot automatically use them for specific files. +Coding is often repetitive, with developers performing similar tasks on a regular basis. Copilot is wonderful for allowing you to offload these types of tasks. But these types of tasks, like adding an endpoint, creating a component, or adding a new service pattern implementation often require a particular template or structure to be followed. Instruction files allow you to provide specific requirements for these types of tasks. They can be added manually when using Copilot Chat, or can have an **applyTo:** tag added to the top of the file to have Copilot automatically use them for specific files. We want to create a new endpoint to list all publishers, and to follow the same pattern we used for the existing [games endpoints][games-endpoints], and to create tests which follow the same pattern as the existing [games endpoints tests][games-tests]. An instruction file has already been created; let's explore it and see the difference in code it generates. 1. Open **.github/instructions/python-tests.instructions.md**. -2. Note the `applyTo:` section at the top, which contains a filter for all files in the **server/tests** directory which start with **test_** and have a **.py** extension. Whenever Copilot Chat interacts with a file which matches this pattern it will automatically use the guidance provided in this file. +2. Note the **applyTo:** section at the top, which contains a filter for all files in the **server/tests** directory which start with **test_** and have a **.py** extension. Whenever Copilot Chat interacts with a file which matches this pattern it will automatically use the guidance provided in this file. 3. Note the file contains guidance about how tests should be created, and how to utilize SQLite when testing database functionality. 4. Open **.github/instructions/flask-endpoint.instructions.md**. 5. Review the following entries inside the instruction file, which includes: @@ -143,10 +144,13 @@ We want to create a new endpoint to list all publishers, and to follow the same 6. Return to **server/routes/publishers.py** to ensure focus is set correctly. 7. Return to Copilot Chat and select **New Chat** to start a new session. -8. Select **Edit** from the mode dropdown, which will allow Copilot to update multiple files. +8. Select **Edit** from the mode dropdown, which will allow Copilot to update multiple files. ![Screenshot of the Edit mode being highlighted in the Copilot Chat panel](images/copilot-edits.png) +> [!NOTE] +> If you have any issues running the tests in this part of the exercise, please undo your changes and retry from the above step using **Agent** mode instead. + 9. Select the **Add Context** button to open the context dialog 10. If prompted to allow the codespace to see text and images copied to the clipboard, select **Allow**. 11. Select **Instructions** from the dropdown at the top of your codespace. @@ -164,12 +168,16 @@ We want to create a new endpoint to list all publishers, and to follow the same Create a new endpoint to return a list of all publishers. It should return the name and id for all publishers. ``` -14. Note the **References** section, and how **games.py**, **test_games.py**, and **python-tests.instructions.md** were all included in call to Copilot. +14. Note the **References** section and how it uses the **flask-endpoint.instructions.md** file to provide context. If you use instructions files with Copilot agent mode, you will notice that Copilot explores and reads the files referenced in the instructions file. - ![Screenshot of the references section, showing the included files of games.py, test_games.py, and python-tests.instructions.md](./images/copilot-instructions-references.png) + ![Screenshot of the references section, showing the included instructions file](./images/copilot-instructions-references.png) -15. Copilot generates the files. Notice how it generates updates across multiple files, like **games.py** and **test_games.py** -16. After reviewing the code, select **Keep** and **Done** in Copilot Chat to accept the changes. +15. Copilot generates the files. Notice how it generates updates across multiple files, like **publishers.py** and **test_publishers.py** + +> [!NOTE] +> Note that the code generated may diverge from some of the standards we set. AI tools like Copilot are non-deterministic, and may not always provide the same result. The other files in our codebase do not contain docstrings or comment headers, which could lead Copilot in another direction. Consistency is key, so making sure that your code follows the established patterns is important. You can always follow-up in chat and ask Copilot to follow your coding standards, which will help guide it in the right direction. + +16. After reviewing the code, select **Keep** in Copilot Chat to accept the changes. 17. Open a terminal window by selecting Ctl+\`. 18. Run the tests by running the script with the following command: @@ -177,22 +185,17 @@ We want to create a new endpoint to list all publishers, and to follow the same ./scripts/run-server-tests.sh ``` -19. Ensure all tests pass. If any tests fail, feel free to prompt Copilot Chat as needed, asking it to update the code based on the error messages you see. - -> [!TIP] -> Copy and paste the error message from the console window into the chat window to provide context! You can also use the `@terminal /explain` directive in Copilot Chat to ask Copilot to explain the last messages received in your terminal window. - -20. Once the code is correct, and all tests pass, open the **Source Control** panel on the left of the Codespace and review the changes made by Copilot. -21. Stage the changes by selecting the **+** icon in the **Source Control** panel. -22. Generate a commit message using the **Sparkle** button. +19. Once the code is correct, and all tests pass, open the **Source Control** panel on the left of the Codespace and review the changes made by Copilot. +20. Stage the changes by selecting the **+** icon in the **Source Control** panel. +21. Generate a commit message using the **Sparkle** button. ![Screenshot of the Source Control panel showing the changes made](images/source-control-changes.png) -23. Commit the changes to your repository by selecting **Commit**. +22. Commit the changes to your repository by selecting **Commit**. ## Summary and next steps -Congratulations! You explored how to ensure Copilot has the right context to generate code following the practices your organization has set forth. This can be done at a repository level with the `.github/copilot-instructions.md` file, or on a task basis with instruction files. You explored how to: +Congratulations! You explored how to ensure Copilot has the right context to generate code following the practices your organization has set forth. This can be done at a repository level with the **.github/copilot-instructions.md** file, or on a task basis with instruction files. You explored how to: - provide Copilot with project-specific context, coding guidelines and documentation standards using custom instructions (.github/copilot-instructions.md). - use instruction files to guide Copilot for repetitive or templated tasks. diff --git a/docs/4-copilot-agent-mode-vscode.md b/docs/4-copilot-agent-mode-vscode.md index 84dde4de..b3f5c2f5 100644 --- a/docs/4-copilot-agent-mode-vscode.md +++ b/docs/4-copilot-agent-mode-vscode.md @@ -59,7 +59,7 @@ Once the website is running, you can explore its functionality. The main feature - **Home Page**: Displays a list of board games with their titles, images, and descriptions. - **Game Details Page**: When you select a game, you'll be brought to a details page with more information about the game, including its title, description, publisher and category. -## Explore the backlog from Copilot +## Explore the backlog with Copilot The initial implementation of the website is functional, but we want to enhance it by adding new capabilities. Let's start off by reviewing the backlog. Ask GitHub Copilot to show you the backlog of items that we created in the previous exercise. @@ -81,7 +81,7 @@ The initial implementation of the website is functional, but we want to enhance Please show me the backlog of items from my repository at . Help me prioritize them based on those which will be most useful to the user. ``` -6. Notice GitHub Copilot (likely) identifies `list_issues` as the MCP command to run to access the right information. +6. Notice GitHub Copilot (likely) identifies **list_issues** as the MCP command to run to access the right information. > [!NOTE] > Because of the probabilistic nature of LLMs, Copilot may utilize a different MCP command, but should still be able to complete the task. @@ -101,13 +101,13 @@ To implement filtering, no less than three separate updates will need to be made In addition, the tests need to run (and pass) before we merge everything into our Codebase. Copilot Agent Mode can perform these tasks for us! Let's add the functionality. -1. Return to your codespace. +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 **flask-endpoint .github/instructions** as the instructions file. ![Screenshot showing an example of selecting the instructions file](images/copilot-add-instructions-file.png) > [!NOTE] -> Even though Copilot agent mode may have discovered this file on its own, if you're aware of an important piece of information, like a `.instructions.md` file, then absolutely add it to Copilot's context. This helps set Copilot (and you) up for success. +> Even though Copilot agent mode may have discovered this file on its own, if you're aware of an important piece of information, like a **.instructions.md** file, then absolutely add it to Copilot's context. This helps set Copilot (and you) up for success. 3. Ensure **Agent** mode is still selected. @@ -141,7 +141,7 @@ In addition, the tests need to run (and pass) before we merge everything into ou > Remember, it's always important to review the code that Copilot or any AI tools generate. 9. Return to the browser with the website running. Explore the new functionality! -10. Once you've confirmed everything works and reviewed the code, select **Keep** and **Done** in the Copilot Chat window. +10. Once you've confirmed everything works and reviewed the code, select **Keep** in the Copilot Chat window. ## Publish the branch @@ -168,7 +168,7 @@ There are several ways to create a pull request, including through github.com an 3. As needed, select **Continue** to allow Copilot to perform the tasks necessary to gather information and perform operations. 4. Notice how Copilot searches through the issues, finds the right one, and creates the PR. -5. Select the link generated by Copilot to review your pull request! +5. Select the link generated by Copilot to review your pull request, but please **don't merge it yet**. ## Summary and next steps diff --git a/docs/5-reviewing-coding-agent.md b/docs/5-reviewing-coding-agent.md index eae1adf4..bcb743ac 100644 --- a/docs/5-reviewing-coding-agent.md +++ b/docs/5-reviewing-coding-agent.md @@ -16,14 +16,14 @@ Because Copilot coding agent performs its tasks asynchronously and without super - Copilot only has read access to your repository and write access **only** to the branch it will use for its code. - Coding agent runs inside of GitHub Actions, where it will create a separate, ephemeral environment in which to work. - Any GitHub Actions workflows require approval from a human before they can be run. -- [All access to external resources is blocked by default][agent-firewall], including MCP servers. +- [Access to external resources is limited by default][agent-firewall], including MCP servers. ## Reviewing the generated documentation Let's start by exploring the first pull request (PR) generated by GitHub Copilot coding agent - adding documentation to our code. We'll perform this task by utilizing the standard PR interface in GitHub.com. > [!NOTE] -> When you explore the PR you may notice a warning about GitHub Copilot being blocked by a firewall. This **is expected**, as by default Copilot is unable to access any external resources, including calls to external MCP servers. +> When you explore the PR you may notice a warning about GitHub Copilot being blocked by a firewall. This **is expected**, as Copilot has limited access to external resources by default, including calls to external MCP servers. If you wish, you can [customize or disable the firewall for Copilot coding agent][agent-firewall]. 1. Return to your repository on github.com. 2. Select **Pull Requests** to open the list of pull requests. @@ -82,7 +82,13 @@ Let's return to the PR Copilot generated for resolving our issue about adding en ![Approve and run workflows](images/ex4-approve-and-run.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 workflows pass for both the backend and frontend. This may take a few minutes to complete. +9. **Optional:** You could even switch to this branch in your Codespace to perform a manual test of the new endpoints. Navigate to your Codespace, open the terminal, and run the following commands (replace **** with the name of the branch Copilot created, e.g. **copilot/fix-8**.): + ```bash + git fetch origin + git checkout + ``` + Copilot has created the new endpoints! Just as before, you can work iteratively with Copilot coding agent to request updates. For example, you might want to request Copilot centralizes the error handling to reduce duplication, or ensuring comments and docstrings are added (remember - this was assigned **before** we made the updates to our custom instructions!) Just like before, you can make these requests by adding a new comment on the **Conversation** tab, which Copilot will see and kickoff a new session. ## Optional Exercise - Explore the agent's capabilities with more issues diff --git a/docs/images/copilot-agent-mode-dropdown.png b/docs/images/copilot-agent-mode-dropdown.png index 512471d0..62bbeb61 100644 Binary files a/docs/images/copilot-agent-mode-dropdown.png and b/docs/images/copilot-agent-mode-dropdown.png differ diff --git a/docs/images/copilot-agent-mode-model.png b/docs/images/copilot-agent-mode-model.png index 3da48209..fe99d031 100644 Binary files a/docs/images/copilot-agent-mode-model.png and b/docs/images/copilot-agent-mode-model.png differ diff --git a/docs/images/copilot-agent-mode.png b/docs/images/copilot-agent-mode.png index 2404cb2d..4055a481 100644 Binary files a/docs/images/copilot-agent-mode.png and b/docs/images/copilot-agent-mode.png differ diff --git a/docs/images/copilot-authentication.png b/docs/images/copilot-authentication.png index 74ef5db7..02ee9498 100644 Binary files a/docs/images/copilot-authentication.png and b/docs/images/copilot-authentication.png differ diff --git a/docs/images/copilot-chat-activation.png b/docs/images/copilot-chat-activation.png index a21757dd..a737e6e5 100644 Binary files a/docs/images/copilot-chat-activation.png and b/docs/images/copilot-chat-activation.png differ diff --git a/docs/images/copilot-chat-window.png b/docs/images/copilot-chat-window.png index 69524b80..0f58e7dc 100644 Binary files a/docs/images/copilot-chat-window.png and b/docs/images/copilot-chat-window.png differ diff --git a/docs/images/copilot-github-mcp-token-prompt.png b/docs/images/copilot-github-mcp-token-prompt.png deleted file mode 100644 index 2ac3c07b..00000000 Binary files a/docs/images/copilot-github-mcp-token-prompt.png and /dev/null differ diff --git a/docs/images/copilot-instructions-references.png b/docs/images/copilot-instructions-references.png index 63830409..3e178cfc 100644 Binary files a/docs/images/copilot-instructions-references.png and b/docs/images/copilot-instructions-references.png differ diff --git a/docs/images/ex2-mcp-auth-popup.png b/docs/images/ex2-mcp-auth-popup.png new file mode 100644 index 00000000..4f4a6811 Binary files /dev/null and b/docs/images/ex2-mcp-auth-popup.png differ diff --git a/docs/images/ex2-mcp-auth-vscode.png b/docs/images/ex2-mcp-auth-vscode.png new file mode 100644 index 00000000..3afc46ab Binary files /dev/null and b/docs/images/ex2-mcp-auth-vscode.png differ diff --git a/docs/images/ex2-mcp-select-account.png b/docs/images/ex2-mcp-select-account.png new file mode 100644 index 00000000..016a6d37 Binary files /dev/null and b/docs/images/ex2-mcp-select-account.png differ diff --git a/docs/images/ex2-mcp-server-started.png b/docs/images/ex2-mcp-server-started.png new file mode 100644 index 00000000..bdf31491 Binary files /dev/null and b/docs/images/ex2-mcp-server-started.png differ diff --git a/docs/images/ex2-start-mcp.png b/docs/images/ex2-start-mcp.png new file mode 100644 index 00000000..b95c926c Binary files /dev/null and b/docs/images/ex2-start-mcp.png differ diff --git a/docs/images/github-issues-created.png b/docs/images/github-issues-created.png index be8058ab..3f5d6be1 100644 Binary files a/docs/images/github-issues-created.png and b/docs/images/github-issues-created.png differ