feat: initial draft of the exercise

Author: FidelusAleksander

.devcontainer/devcontainer.json

@@ -0,0 +1,21 @@
+{
+  "name": "Python 3",
+  "image": "mcr.microsoft.com/vscode/devcontainers/python:3.13",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "latest"
+    }
+  },
+  "forwardPorts": [8000],
+  "postCreateCommand": "pip install -r requirements.txt",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "GitHub.copilot",
+        "ms-python.python",
+        "ms-python.debugpy",
+        "dbaeumer.vscode-eslint"
+      ]
+    }
+  }
+}

.github/steps/1-step.md

@@ -0,0 +1,72 @@
+## Step 1: Introduction to MCP and environment setup
+
+Welcome to the **"Integrate Model Context Protocol with GitHub Copilot"** exercise! :robot:
+
+In this exercise, you'll learn how Model Context Protocol (MCP) enhances the way you use GitHub Copilot.
+
+> [!IMPORTANT]
+>  This exercise may not explain the basics that were taught in the [Getting Started with Copilot](https://github.com/skills/getting-started-with-github-copilot) exercise. If you are new to Copilot we recommend starting with that one.
+
+
+### What is Model Context Protocol (MCP)?
+
+[Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) is an open standard that bridges AI models with external data sources and tools. It provides a universal interface for connecting AI assistants like GitHub Copilot to various system allowing them to access real-time data, perform actions in external systems, and leverage specialized tools beyond their built-in capabilities.
+### :keyboard: Activity: Get to know your environment
+
+Let's start up our development environment and familiarize with the environment.
+
+We are using the same web application as in the [Getting Started with Copilot](https://github.com/skills/getting-started-with-github-copilot) exercise - the Mergington High School's extracurricular activities website.
+
+1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
+
+   [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
+
+1. Validate the Copilot Chat extension is installed
+1. In the left sidebar, select the `Run and Debug` tab and then press the **Start Debugging** icon.
+
+   <img width="300" alt="image" src="https://github.com/user-attachments/assets/50b27f2a-5eab-4827-9343-ab5bce62357e" />
+
+1. Throughout the exercise, you can access the website link from the `ports` tab on port `8000`.
+
+### :keyboard: Activity: Set up a MCP server for your project
+
+1. Inside your codespace, create a new file named `mcp.json` in the `.vscode` directory and paste the following contents:
+
+```json
+// .vscode/mcp.json
+{
+  "servers": {
+    "github": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-github"],
+      "envFile": "${workspaceFolder}/.env"
+    }
+  }
+}
+```
+
+1. Save the file and you should see `Start` button show up like so:
+
+    <!-- TODO: Add screenshot with start button -->
+
+1. Validate the MCP Server is running.
+   1. The `.vscode/mcp.json` file should show if the server you started is running
+   <!-- TODO: Add screenshot -->
+   1. You should see additional tools available in Copilot Agent Mode
+   <!-- TODO: Add screenshot -->
+   1. You can use the VSCode command palette `Ctrl+Shift+P` or `Command+Shift+P` on Mac.
+   Start typing `> MCP` to see different MCP commands, such as listing active servers.
+   <!-- TODO: Add screenshot -->
+
+1. Commit and push the `.vscode/mcp.json` file to the `main` branch
+
+
+<details>
+<summary>Having trouble?</summary><br/>
+
+Make sure you:
+
+- Properly uncommented the contents of `.vscode/mcp.json` file
+- Pushed your changes to the `main` branch
+
+</details>

.github/steps/2-step.md

@@ -0,0 +1,60 @@
+## Step 2: Using Copilot Agent Mode with GitHub MCP Server
+
+You have just connected a first external MCP server to Copilot Chat!
+
+GitHub MCP Server exposes multiple tools for Copilot to use. Examples include searching GitHub, managing repositories, issues, pull requests and much more.
+
+You interact with Copilot in natural language, and Copilot determines if what you are asking for is something that can be done through any MCP Servers you have currently running in your environment. Isn't that cool?
+
+> [!NOTE]
+> The GitHub MCP Server is limited to operations permitted by the `GITHUB_TOKEN` scope in your `.vscode/mcp.json` configuration.
+
+### :keyboard: Activity: Use Copilot for issue resolution
+
+In the background your repository just received a [bug report]({{{bug_report_url}}}) issue from one of the Mergington High School students trying to access the website.
+
+Let's use GitHub Copilot Agent Mode together with GitHub MCP server to work on that issue.
+
+1. Open the **Copilot Chat Agent Mode** panel in VS Code and ensure that GitHub MCP Server is active, and the tools are enabled
+
+   <!-- TODO: Add screenshot -->
+
+1. Ask Copilot if there are any open bug reports on your repository:
+
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > Are there any open bug report issues on my repository ({{{full_repo_name}}}) ?
+   > ```
+
+   > 🪧 **Note:** We explicitly include the repository name to add it to Copilot's session context. For subsequent prompts, this context will be preserved in the conversation.
+
+   > ✨ **Bonus:** You are welcome to try the prompt without it and if Copilot chooses to list issues in a different repository, guide it your way.
+
+1. Once Copilot identifies a bug report, ask it to implement a fix:
+
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > Okay, let's start working on the bug report.
+   > Comment on the issue that I will take a look at the issue and try to fix it.
+   > Create a new branch, introduce the changes and raise a pull request to the `main` branch
+   > ```
+
+   > ⚠️ **Warning:** Always verify the information that Copilot passes to the MCP server before accepting.
+
+1. Follow Copilot's guidance to create a pull request with the fix.
+
+   > 🪧 **Note:** Remember that Copilot is conversational, and you are power of guiding the AI assistant to implement what's on your mind.
+
+1. Once the pull request is created, Mona will start checking your work. Give her a moment and keep watch of the comments. You will see her respond with progress info and the next step!
+
+<details>
+<summary>Having trouble?</summary><br/>
+
+If you encounter issues:
+
+- Make sure your MCP configuration is properly set up from Step 1
+- Verify that the tools are executed on your repository ({{{full_repo_name}}}). Whenever a MCP tool is invoked you can inspect what Copilot passes to the MCP Server.
+
+</details>

.github/steps/3-step.md

@@ -0,0 +1,29 @@
+## Step 3: Validating AI-generated code
+
+Great work on implementing the fix with Copilot!
+
+While AI assistants like GitHub Copilot can dramatically improve productivity, it's essential to remember that you are responsible for reviewing and validating all generated code.
+
+> [!tip]
+> Whenever working on real projects, use [GitHub Actions](https://github.com/features/actions) to setup automated testing for your projects.
+
+### :keyboard: Activity: Review and merge the AI solution
+
+1. Examine the [pull request]({{{pull_request_url}}}) Copilot helped you create.
+
+> ✨ **Bonus:** If your access is sufficient, you can ask Copilot to review your code.
+
+1. Once you're satisfied with the changes, merge the pull request
+
+  >  🪧 **Note:** If you are not satisfied, go back to the codespace and work with Copilot to introduce the changes. Remember, coding is an iterative process.
+
+<details>
+<summary>Having trouble?</summary><br/>
+
+If you encounter issues:
+
+- Make sure the PR was created correctly in the previous step
+- If needed, you can navigate directly to your repository on GitHub.com to find the PR
+- Remember that while MCP helps Copilot understand your repo better, human review is still essential
+
+</details>

.github/steps/4-step.md

@@ -0,0 +1,24 @@
+## Step 4: Wrap up on the bug report
+
+
+### :keyboard: Activity: Wrap up the bug report
+
+1. Open the **Copilot Chat Agent Mode** session in VS Code.
+1. Ask Copilot to comment on the bug report issue we just worked on. And include a little bonus for the proactive student!
+
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > Add a closing comment on the bug report issue that the issue has been resolved.
+   > Include a sneak peek of what to expect in the extracurricular GitHub Skills activity (top 5 most starred repositories in GitHub `skills` organization)
+   > ```
+
+   <details>
+   <summary>Having trouble? 🤷</summary><br/>
+
+   Some things to check
+   - Is your MCP Server still running?
+   - Check what information is passed to the MCP server calls - is Copilot using the correct repository?
+   - Did Copilot comment on the bug report?
+   </details>
+

.github/steps/x-review.md

@@ -0,0 +1,18 @@
+## Review
+
+_Congratulations, you've completed this Exercise and joined the world of developers!_
+
+<img src=https://octodex.github.com/images/collabocats.jpg alt=celebrate width=300 align=right>
+
+Here's a recap of your accomplishments:
+
+
+### What's next?
+
+
+Check out these resources to learn more or get involved:
+
+- [Take another GitHub Skills exercise](https://skills.github.com).
+_
+
+__

.github/workflows/0-start-exercise.yml

@@ -0,0 +1,74 @@
+name: Step 0 # Start Exercise
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write # Update Readme
+  actions: write # Disable/enable workflows
+  issues: write # Create issue and comment on issues
+
+
+env:
+  STEP_1_FILE: ".github/steps/1-step.md"
+
+jobs:
+  start_exercise:
+    if: |
+      !github.event.repository.is_template
+    name: Start Exercise
+    uses: skills/exercise-toolkit/.github/workflows/[email protected]
+    with:
+      exercise-title: "Integrate MCP with Copilot"
+      intro-message: "Welcome to the exercise! This exercise will help you learn how to integrate the Model Context Protocol (MCP) with GitHub Copilot."
+
+
+  post_next_step_content:
+    name: Post next step content
+    runs-on: ubuntu-latest
+    needs: [start_exercise]
+    env:
+      ISSUE_URL: ${{ needs.start_exercise.outputs.issue-url }}
+
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Get response templates
+        uses: actions/checkout@v4
+        with:
+          repository: skills/exercise-toolkit
+          path: exercise-toolkit
+          ref: v0.1.0
+
+      - name: Build comment - add step content
+        id: build-comment
+        uses: skills/action-text-variables@v1
+        with:
+          template-file: ${{ env.STEP_1_FILE }}
+          template-vars: |
+            full_repo_name=${{ github.repository }}
+
+      - name: Create comment - add step content
+        run: |
+          gh issue comment "$ISSUE_URL" \
+            --body "$ISSUE_BODY"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_BODY: ${{ steps.build-comment.outputs.updated-text }}
+
+      - name: Create comment - watching for progress
+        run: |
+          gh issue comment "$ISSUE_URL" \
+            --body-file exercise-toolkit/markdown-templates/step-feedback/watching-for-progress.md
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Disable current workflow and enable next one
+        run: |
+          gh workflow enable "Step 1"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}