Skip to content

Commit 05ef79d

Browse files
authored
feat: Apply story (#9)
1 parent a383fc7 commit 05ef79d

File tree

14 files changed

+408
-200
lines changed

14 files changed

+408
-200
lines changed
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?
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.
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 get's even longer.
15+
Let's do it! I would love to help out. I just took a coding class. 🤓
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 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.
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 the 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
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 forgot about tablet's too.

.github/steps/1-step.md

Lines changed: 86 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
## Step 1: Introduction to MCP and environment setup
22

3-
In this exercise, you'll learn how to use Model Context Protocol (MCP) to connect GitHub Copilot to your entire toolchain.
4-
This integration allows you to solve problems across platforms without leaving your code editor. **Less context switching, more coding**.
3+
<img width="150" align="right" alt="copilot logo" src="https://github.com/user-attachments/assets/4d22496d-850b-4785-aafe-11cba03cd5f2" />
4+
5+
Welcome to another Skills exercise!
6+
7+
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.
8+
9+
And now we have a problem... but.. it's a good one! More teachers are asking to to use it! 🎉
10+
11+
Our fellow teachers have lots of ideas but we can't seem to keep up with all the requests! 😮 To with 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. 🧑‍🚀
12+
13+
Lets get started!
514

615
### What is Model Context Protocol (MCP)?
716

8-
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) is often referred to as "USB-C for AI" - a universal connector that allows GitHub Copilot to seamlessly interact with external tooling.
17+
[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.
18+
19+
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 the host for that providing that interface.
920

1021
```mermaid
1122
graph LR
@@ -30,119 +41,144 @@ graph LR
3041

3142
### :keyboard: Activity: Get to know your environment
3243

33-
Let's start up our development environment and familiarize with the environment.
34-
35-
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.
44+
Let's start up our development environment and refamiliarize ourself with the extracurricular activity application.
3645

3746
1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
3847

3948
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
4049

41-
1. Validate the Copilot Chat and Python extensions are installed and enabled
50+
1. Validate the **Copilot Chat** and **Python** extensions are installed and enabled.
51+
52+
<img width="300" alt="copilot extension for VS Code" src="https://github.com/user-attachments/assets/ef1ef984-17fc-4b20-a9a6-65a866def468" /><br/>
53+
<img width="300" alt="python extension for VS Code" src="https://github.com/user-attachments/assets/3040c0f5-1658-47e2-a439-20504a384f77" />
54+
55+
1. Verify our application runs before modification. In the left sidebar, select the **Run and Debug** tab and then press the **Start Debugging** icon.
56+
4257
<details>
43-
<summary>:camera_flash: See screenshot</summary><br/>
58+
<summary>📸 Show screenshot</summary><br/>
4459

45-
<img width="350" alt="copilot extension for VS Code" src="https://github.com/user-attachments/assets/ef1ef984-17fc-4b20-a9a6-65a866def468" />
60+
<img width="300" alt="run and debug" src="https://github.com/user-attachments/assets/50b27f2a-5eab-4827-9343-ab5bce62357e" />
4661

47-
<img width="350" alt="python extension for VS Code" src="https://github.com/user-attachments/assets/3040c0f5-1658-47e2-a439-20504a384f77" />
4862
</details>
4963

50-
1. In the left sidebar, select the `Run and Debug` tab and then press the **Start Debugging** icon.
64+
1. Use the **Ports** tab to find the webpage address, open it, and verify it is running.
5165

5266
<details>
53-
<summary>:camera_flash: See screenshot</summary><br/>
67+
<summary>📸 Show screenshot</summary><br/>
5468

55-
<img width="300" alt="run and debug" src="https://github.com/user-attachments/assets/50b27f2a-5eab-4827-9343-ab5bce62357e" />
69+
<img width="350" alt="ports tab" src="https://github.com/user-attachments/assets/8d24d6b5-202d-4109-8174-2f0d1e4d8d44" />
70+
71+
![Screenshot of Mergington High School WebApp](https://github.com/user-attachments/assets/472398fd-1aa1-4084-b443-4e242deb30d9)
5672

5773
</details>
5874

59-
1. Throughout the exercise, you can access the website link from the `ports` tab on port `8000`.
75+
### :keyboard: Activity: Add the GitHub MCP server
76+
77+
Since we are using GitHub, we have asked our fellow teachers to submit their ideas and bugs as issues (instead of email).
78+
79+
1. Ensure you are in your codespace.
80+
1. Open the **Copilot Chat** panel and verify **Agent** mode is selected.
81+
82+
<img width="200" alt="image" src="https://github.com/user-attachments/assets/201e08ab-14a0-48bf-824e-ba4f8f43f8ab" />
6083

6184
<details>
62-
<summary>:camera_flash: See screenshot</summary><br/>
63-
64-
<img width="200" alt="ports tab" src="https://github.com/user-attachments/assets/bd25ed3c-0656-448c-b809-edc10c0ab6cf" />
85+
<summary>Agent mode missing?</summary><br/>
86+
87+
- Verify VS Code is at least `v1.99.0`.
88+
- Verify the Copilot extension is at least `v1.296.0`.
89+
- Check if Agent mode is enabled in your user or workspace settings.
6590

91+
<img width="300" alt="image" src="https://github.com/user-attachments/assets/407a79dd-707e-471b-b56b-1938aece4ad8" />
6692

6793
</details>
6894

69-
### :keyboard: Activity: Set up a MCP server for your project
95+
1. Open the Command Palette (`Ctrl` + `Shift` + `P`) and search for `MCP: Add server..`.
96+
1. Follow the prompts using these settings and a `.vscode/mcp.json` file will be created.
97+
98+
- **Type:** `NPM Package`
99+
- **Name:** `@modelcontextprotocol/server-github`
100+
- **Personal Access Token:** (skip)
101+
- **Location:** `Workspace Settings`
102+
103+
1. Entering a hard-coded token is not safe, so let's switch to using an input. Replace the token placeholder with an input variable.
70104

71-
1. Inside your codespace, create a new file named `mcp.json` in the `.vscode` directory and paste the following contents:
105+
📄 **.vscode/mcp.json**
72106

73107
```json
74-
// .vscode/mcp.json
75108
{
76109
"servers": {
77110
"github": {
78111
"command": "npx",
79112
"args": ["-y", "@modelcontextprotocol/server-github"],
80113
"env": {
81-
"GITHUB_PERSONAL_ACCESS_TOKEN": "${input:githubToken}"
114+
"GITHUB_PERSONAL_ACCESS_TOKEN": "${input:GITHUB_TOKEN}"
82115
}
83116
}
84117
},
85118
"inputs": [
86119
{
87120
"type": "promptString",
88-
"id": "githubToken",
121+
"id": "GITHUB_TOKEN",
89122
"description": "Enter your GitHub personal access token",
90123
"password": true
91124
}
92125
]
93126
}
94127
```
95128

96-
1. In a moment, when you start the server - you will be prompted to provide a GitHub Token. Print it out in the terminal and copy it to your clipboard (`CTRL+C`).
97-
98-
```bash
99-
echo $GITHUB_TOKEN
100-
```
129+
<!-- > [!TIP]
130+
> You might also try passing environment variables directly. -->
101131

102-
1. Back in the `.vscode/mcp.json` file you should see `Start` button show up like so:
132+
<!--
133+
<details>
134+
<summary>Why not ask Copilot to do this?</summary><br/>
103135
104-
![image](https://github.com/user-attachments/assets/c82a4202-1f4a-4123-ad14-5e33ecd6316c)
136+
Great idea! Here is a prompt you can try next time:
105137
106-
1. Click the `Start` button to launch the GitHub MCP server locally. When prompted, paste the GitHub token you copied earlier.
138+
> ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
139+
>
140+
> ```prompt
141+
> Add the `@modelcontextprotocol/server-github` MCP server to this project.
142+
> Use an input for the PAT instead of hard coding it.
143+
> ```
107144
108-
1. Validate the server is running.
145+
</details>
146+
-->
109147

110-
1. The `.vscode/mcp.json` file should show if the server you started is running
148+
1. Expand the VS Code terminal panel. Run the following command to view and **make a copy** of your codespace's GitHub Token.
111149

112-
<details>
113-
<summary>:camera_flash: See screenshot</summary><br/>
150+
```bash
151+
echo $GITHUB_TOKEN
152+
```
114153

115-
![image](https://github.com/user-attachments/assets/80f3fcda-34a8-486e-95a3-c166e9152b9a)
154+
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.
116155

117-
</details>
156+
![image](https://github.com/user-attachments/assets/c82a4202-1f4a-4123-ad14-5e33ecd6316c)
118157

119-
1. You should see additional tools available in Copilot Agent Mode
158+
![image](https://github.com/user-attachments/assets/80f3fcda-34a8-486e-95a3-c166e9152b9a)
120159

121-
<details>
122-
<summary>:camera_flash: See screenshot</summary><br/>
160+
1. In the Copilot side panel, click the **🛠️ Select Tools...** icon to show the additional capabilities.
123161

124-
![image](https://github.com/user-attachments/assets/95af044c-3f26-4f5c-b933-7630db72eb67)
162+
<img width="250" alt="image" src="https://github.com/user-attachments/assets/95af044c-3f26-4f5c-b933-7630db72eb67" />
125163

126-
</details>
164+
<img width="250" alt="image" src="https://github.com/user-attachments/assets/99178d1b-adbe-4cf4-ab9c-3a4d29918a13" />
127165

128-
1. You can use the VSCode command palette `Ctrl+Shift+P` or `Command+Shift+P` on Mac.
129-
Start typing `> MCP` to see different MCP commands, such as listing active servers.
166+
1. Commit and push the `.vscode/mcp.json` file to the `main` branch.
130167

131-
<details>
132-
<summary>:camera_flash: See screenshot</summary><br/>
168+
> 🪧 **Note:** Pushing directly to `main` is not a recommended practice. It is only to simplify this exercise.
133169
134-
![image](https://github.com/user-attachments/assets/6a127ac2-a6dc-495b-bc5f-d52425f709f8)
170+
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.
135171

136-
</details>
172+
1. (optional) The next steps will interact with issues. If you would like to avoid notification emails, you can unwatch the repository by click this button.
137173

138-
1. Commit and push the `.vscode/mcp.json` file to the `main` branch
174+
<img width="300" alt="image" src="https://github.com/user-attachments/assets/c320d112-7291-41f8-8fe1-4b1f2a949871" />
139175

140176
<details>
141177
<summary>Having trouble?</summary><br/>
142178

143179
Make sure you:
144180

145-
- Properly copied the `json` contents above to `.vscode/mcp.json` file
146-
- Pushed your changes to the `main` branch
181+
- Your `.vscode/mcp.json` file is similar to the example provided.
182+
- You pushed the changes to the `main` branch.
147183

148184
</details>

0 commit comments

Comments
 (0)