Skip to content

Commit 7bdefe0

Browse files
beccobecco
authored
Initial commit
0 parents  commit 7bdefe0

27 files changed

+1821
-0
lines changed

‎.devcontainer/devcontainer.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "Python 3",
3+
"image": "mcr.microsoft.com/vscode/devcontainers/python:3.13",
4+
"features": {
5+
"ghcr.io/devcontainers/features/node:1": {
6+
"version": "latest"
7+
},
8+
"ghcr.io/devcontainers/features/docker-in-docker:2": {}
9+
10+
},
11+
"forwardPorts": [8000],
12+
"postCreateCommand": "pip install -r requirements.txt",
13+
"customizations": {
14+
"vscode": {
15+
"extensions": [
16+
"GitHub.copilot",
17+
"ms-python.python",
18+
"ms-python.debugpy",
19+
"dbaeumer.vscode-eslint"
20+
],
21+
"settings": {
22+
"chat.agent.enabled": true,
23+
"chat.mcp.enabled": true
24+
}
25+
}
26+
}
27+
}

‎.github/steps/1-step-issues/bug/school-pride.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Missing School Pride
2+
3+
The website is blue, but our school colors are white and lime green. Please fix this.
4+
5+
Also, why are none of our mascots on the page?
6+
Please use the various options from https://octodex.github.com/
7+
8+
Oh one more idea, I think it would look cool if the background had various Git-style branch lines slowly animating! That's easy, right?

‎.github/steps/1-step-issues/enhancement/activities-file.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Hard to change activities
2+
3+
Teachers are afraid to modify the program since they think they might break it. Move the list of activities out of the python file into a dedicated `activities.json` file.

‎.github/steps/1-step-issues/enhancement/add-filters.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Add filters
2+
3+
There seems to be no order to the activities. Please fix this.
4+
5+
Here are my ideas, maybe in a toolbar above the activity cards.
6+
7+
- Add some filters, for example by category. If needed, add a field to the JSON.
8+
- Add options to sort, for example by name or time. If needed, add a date field but leave the textual description version of the time.
9+
- Add a free text search.
10+
11+
Obviously, make sure it still looks good on desktop and phone.
12+
13+
----- COMMENTS -----
14+
This will be so useful. We should be proactive and do this before the list gets even longer.
15+
Let's do it! I would love to help out. I just took a coding class. 🤓

‎.github/steps/1-step-issues/enhancement/admin-mode.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Admin Mode
2+
3+
## Problem
4+
5+
Students are removing each other to free up space for themselves in the activities.
6+
7+
## Recommended Solution
8+
9+
Add a user icon in the top right. When clicked it shows a login button. When the login button is clicked, it presents a window to enter a username and password.
10+
11+
- Only the teachers (logged in) have the ability to register and unregister students to activities.
12+
13+
- The students (not logged in) can still view who is registered.
14+
15+
- There is no need for an account maintenance page. Teachers will be assigned passwords.
16+
17+
## Context
18+
19+
Since there is no database yet, please store the teacher usernames and passwords in a `json` file that is checked by the backend.

‎.github/steps/1-step-issues/enhancement/missing-activity.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# 🚨 Missing Activity: GitHub Skills
2+
3+
The GitHub Skills activity announced by our principal is missing from the school activities signup page.
4+
5+
Yesterday in the school assembly, the principal announced a new partnership with GitHub to teach students practical coding and collaboration skills. However, when I try to sign up for this activity, I can't find it on the website.
6+
7+
I can see several other activities, like these, so I think I have access.
8+
9+
- ✅ Chess Club
10+
- ✅ Programming Class
11+
- ✅ Gym Class
12+
13+
## ⏱️ Timeline
14+
15+
This is time-sensitive as the announcement mentioned registrations would close by the end of this week. Many students are eager to join. It's the first part of our [GitHub Certifications program](https://resources.github.com/learn/certifications/), which will help with college applications.
16+
17+
## 💡 Expected Outcome
18+
19+
The GitHub Skills activity should be added to the system and available for registration like other activities
20+
21+
Hewbie C.
22+
11th Grade Student

‎.github/steps/1-step-issues/enhancement/prettier-interface.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Prettier Interface
2+
3+
Now that we have many activities, the list on the left is too long so it is hard to navigate. And the add dialog is far away from the activity.
4+
5+
- Move the cards to the bottom
6+
7+
- Remove the registration form and replace it with a "register student" button on each activity card.
8+
9+
- Make sure it looks good on desktop and phone.
10+
11+
----- COMMENTS -----
12+
I second this idea. I'm having trouble finding my activity.
13+
100% support this. Nice idea! Looking forward to the update.
14+
Don't forget about tablet's too.

‎.github/steps/1-step.md‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
## Step 1: Introduction to MCP and environment setup
2+
3+
<img width="150" align="right" alt="copilot logo" src="https://github.com/user-attachments/assets/4d22496d-850b-4785-aafe-11cba03cd5f2" />
4+
5+
In the [Getting Started with GitHub Copilot](https://github.com/skills/getting-started-with-github-copilot) exercise, we were introduced to the Mergington High School's extracurricular activities website, which allowed students to sign up for events.
6+
7+
And now we have a problem... but.. it's a good one! More teachers are asking to use it! 🎉
8+
9+
Our fellow teachers have lots of ideas but we can't seem to keep up with all the requests! 😮 To fix this issue, lets give GitHub Copilot an upgrade by enabling Model Context Protocol (MCP). To be more specific, we will add the GitHub MCP server, which will enable a combined workflow of issue management and website upgrades. 🧑‍🚀
10+
11+
Let's get started!
12+
13+
### What is Model Context Protocol (MCP)?
14+
15+
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) is often referred to as "USB-C for AI" - a universal connector that allows GitHub Copilot (and other AI tools) to seamlessly interact with other services.
16+
17+
Essentially, it is a way to describe the capabilities and requirements of a service, so AI tools can easily determine what methods to use and to accurately provide the parameters. An MCP server is providing that interface.
18+
19+
```mermaid
20+
graph LR
21+
A[Developer] -->|Uses| B[GitHub Copilot]
22+
B -->|Unified API| MCP[Model Context Protocol]
23+
24+
MCP <-->|Unique API| C[(GitHub)]
25+
MCP <-->|Unique API| D[(Slack)]
26+
MCP <-->|Unique API| E[(Figma)]
27+
28+
style B fill:#4CAF50,stroke:#333,stroke-width:2px
29+
30+
subgraph "Less Context Switching, More Coding"
31+
B
32+
MCP
33+
C
34+
D
35+
E
36+
37+
end
38+
```
39+
40+
### :keyboard: Activity: Get to know your environment
41+
42+
Before we dive into MCP, let's start up our development environment and refamiliarize ourself with the extracurricular activity application.
43+
44+
1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
45+
46+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
47+
48+
1. Validate the **Copilot Chat** and **Python** extensions are installed and enabled.
49+
50+
<img width="300" alt="copilot extension for VS Code" src="https://github.com/user-attachments/assets/ef1ef984-17fc-4b20-a9a6-65a866def468" /><br/>
51+
<img width="300" alt="python extension for VS Code" src="https://github.com/user-attachments/assets/3040c0f5-1658-47e2-a439-20504a384f77" />
52+
53+
1. Verify our application runs before modification. In the left sidebar, select the **Run and Debug** tab and then press the **Start Debugging** icon.
54+
55+
<details>
56+
<summary>📸 Show screenshot</summary><br/>
57+
58+
<img width="300" alt="run and debug" src="https://github.com/user-attachments/assets/50b27f2a-5eab-4827-9343-ab5bce62357e" />
59+
60+
</details>
61+
62+
<details>
63+
<summary>🤷 Having trouble?</summary><br/>
64+
65+
If the **Run and Debug** area is empty, try reloading VS Code: Open the command palette (`Ctrl`+`Shift`+`P`) and search for `Developer: Reload Window`.
66+
67+
<img width="300" alt="empty run and debug panel" src="https://github.com/user-attachments/assets/0dbf1407-3a97-401a-a630-f462697082d6" />
68+
69+
</details>
70+
71+
1. Use the **Ports** tab to find the webpage address, open it, and verify it is running.
72+
73+
<details>
74+
<summary>📸 Show screenshot</summary><br/>
75+
76+
<img width="350" alt="ports tab" src="https://github.com/user-attachments/assets/8d24d6b5-202d-4109-8174-2f0d1e4d8d44" />
77+
78+
![Screenshot of Mergington High School WebApp](https://github.com/user-attachments/assets/5cb88d53-d948-457e-9f4b-403d697fa93a)
79+
80+
</details>
81+
82+
### :keyboard: Activity: Add the GitHub MCP server
83+
84+
1. Inside your codespace, open the **Copilot Chat** panel and verify **Agent** mode is selected.
85+
86+
<img width="200" alt="image" src="https://github.com/user-attachments/assets/201e08ab-14a0-48bf-824e-ba4f8f43f8ab" />
87+
88+
<details>
89+
<summary>Agent mode missing?</summary><br/>
90+
91+
- Verify VS Code is at least `v1.99.0`.
92+
- Verify the Copilot extension is at least `v1.296.0`.
93+
- Check if Agent mode is enabled in your [user or workspace settings](https://code.visualstudio.com/docs/configure/settings#_workspace-settings).
94+
95+
<img width="300" alt="image" src="https://github.com/user-attachments/assets/407a79dd-707e-471b-b56b-1938aece4ad8" />
96+
97+
</details>
98+
99+
1. Inside your codespace, create a new file named `mcp.json` in the `.vscode` directory and paste the following contents:
100+
101+
📄 **.vscode/mcp.json**
102+
103+
```json
104+
{
105+
"servers": {
106+
"github": {
107+
"command": "docker",
108+
"args": [
109+
"run",
110+
"-i",
111+
"--rm",
112+
"-e",
113+
"GITHUB_PERSONAL_ACCESS_TOKEN",
114+
"ghcr.io/github/github-mcp-server:v0.1.1"
115+
],
116+
"env": {
117+
"GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
118+
}
119+
}
120+
},
121+
"inputs": [
122+
{
123+
"type": "promptString",
124+
"id": "github_token",
125+
"description": "GitHub Personal Access Token",
126+
"password": true
127+
}
128+
]
129+
}
130+
```
131+
132+
> :placard: **Note:** Entering a hard-coded token is never recommended, you should use input variables or envFiles when an MCP server requires credentials.
133+
134+
1. Expand the VS Code terminal panel. Run the following command to view and **make a copy** of your codespace's GitHub Token.
135+
136+
```bash
137+
echo $GITHUB_TOKEN
138+
```
139+
140+
<details>
141+
<summary>Why do I need this?</summary><br/>
142+
143+
The MCP server is a separate background process and needs credentials to perform operations. In this case, we use the temporary [codespace authorization](https://docs.github.com/en/enterprise-cloud@latest/codespaces/reference/security-in-github-codespaces#authentication) credential which becomes invalid when the codespace stops.
144+
145+
</details>
146+
147+
1. In the `.vscode/mcp.json` file, click the **Start** button and provide the token. This has just informed GitHub Copilot of the MCP server's capabilities.
148+
149+
![image](https://github.com/user-attachments/assets/62ee9c06-e9d4-44e4-b6df-f93417474af2)
150+
151+
![image](https://github.com/user-attachments/assets/33195908-affe-488f-afef-e759498d1fe8)
152+
153+
1. In the Copilot side panel, click the **🛠️ Select Tools...** icon to show the additional capabilities.
154+
155+
<img width="250" alt="image" src="https://github.com/user-attachments/assets/95af044c-3f26-4f5c-b933-7630db72eb67" />
156+
157+
<img width="250" alt="image" src="https://github.com/user-attachments/assets/99178d1b-adbe-4cf4-ab9c-3a4d29918a13" />
158+
159+
1. **Commit** and **push** the `.vscode/mcp.json` file to the `main` branch.
160+
161+
> 🪧 **Note:** Pushing directly to `main` is not a recommended practice. It is only to simplify this exercise.
162+
163+
1. Now that your MCP server configuration is pushed to GitHub, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.
164+
165+
> [!NOTE]
166+
> The next steps will involve creating GitHub issues. If you would like to avoid notification emails, you can unwatch the repository.
167+
168+
<details>
169+
<summary>Having trouble?</summary><br/>
170+
171+
Make sure:
172+
173+
- Your `.vscode/mcp.json` file is similar to the example provided.
174+
- You pushed the changes to the `main` branch.
175+
176+
</details>

‎.github/steps/2-step.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
## Step 2: Agent Mode and an MCP Server for GitHub
2+
3+
Great work! You just connected your first MCP server to GitHub Copilot! 🎉
4+
5+
🚨 It seems the teachers keep submitting bugs and requests! So many good ideas! We should probably look into them and start researching for other upgrades.
6+
7+
Fortunately, with an MCP server for GitHub, triaging these and even doing some research to get ahead should be pretty quick! 🕵️
8+
9+
### How do we use an MCP server's tools?
10+
11+
Good news! The same way you would normally interact with Copilot, natural language. Just keep in mind the available capabilities and any permission restrictions from your token.
12+
13+
So, with the MCP Server available, we can now ask Copilot things beyond just our code. Here are some ideas to imagine the possibilities:
14+
15+
For example:
16+
17+
- Searching issues considering description, comments, and likes.
18+
- To open, update, or close issues on another repository.
19+
- Comparing repositories.
20+
- Learning about other authors you are working with.
21+
- Retrieve an issue, make changes on a branch, and start a pull request.
22+
23+
Isn't that cool?! Now let's do it! 👩‍🚀
24+
25+
### :keyboard: Activity: Quickly find and save ideas
26+
27+
1. Close any open files inside your codespace. This will help reduce unnecessary context.
28+
29+
1. Ensure the **Copilot Chat** panel is open and **Agent** mode is selected. Verify the MCP server tools are also still available.
30+
31+
1. Ask Copilot to search GitHub for projects similar to this one.
32+
33+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
34+
>
35+
> ```prompt
36+
> Are there any other repositories for organizing extra curricular activities?
37+
> ```
38+
39+
1. When an MCP tool is required, Copilot will ask for permission. **Verify the request** and modify if necessary, then click **Continue**.
40+
41+
<img width="250" alt="request permission dialog" src="https://github.com/user-attachments/assets/229473af-c206-47a4-b356-943b9c9bd946" />
42+
43+
1. Ask Copilot to describe one of the projects. Explore until you find something you like.
44+
45+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
46+
>
47+
> ```prompt
48+
> Please look at the code for the 3rd option and give me a detailed description of the features.
49+
> ```
50+
51+
1. Use Copilot to compare and generate ideas for enhancements.
52+
53+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
54+
>
55+
> ```prompt
56+
> Please compare these features to our project. Which would be new?
57+
> ```
58+
59+
1. Nice! Let's have Copilot create issues to save these ideas.
60+
61+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
62+
>
63+
> ```prompt
64+
> I like it. Let's create issues for these.
65+
> ```
66+
67+
1. Copilot will ask for permission to create issues on your repository. Click **Continue** for each new issue. Reminder: **verify the request** before running.
68+
69+
<img width="250" alt="request permission dialog" src="https://github.com/user-attachments/assets/52635294-950a-4168-b71e-498eb769f3af" />
70+
71+
1. Since we are done researching, let's finish this chat session to clear the context. At the top of the **Copilot Chat** panel, click the **New Chat** icon (plus sign).
72+
73+
1. With the new issues created, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.
74+
75+
76+
> [!NOTE]
77+
> The Model Context Protocol (MCP) landscape is quickly evolving. Many servers, including the [Official GitHub MCP server](https://github.com/github/github-mcp-server) are in active development and do not have full parity with their stable APIs.

0 commit comments

Comments
 (0)