You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Remove Skillable lab references, update for personal GitHub accounts
- Rewrite setup.md with clear prerequisites section
- Add info about Copilot Free and Copilot Pro trial options
- Update repo URLs to visual-studio-github-copilot-lab
- Remove hardcoded LabUser paths from part06
- Fix navigation link in setup.md (was pointing backwards)
- General cleanup and formatting improvements
Copy file name to clipboardExpand all lines: lab/part06-copilot-vision.md
+4-3Lines changed: 4 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,18 @@
1
1
# Part 06: Using Copilot Vision
2
2
3
-
In this section, you'll use Copilot Vision. You can share screenshots of errors and Copilot will interpret the image and resolve the issue. Or share mockups of new designs, and Vision will help you bring them to life. Let's update our design based on a photo our design gave us.
3
+
In this section, you'll use Copilot Vision. You can share screenshots of errors and Copilot will interpret the image and resolve the issue. Or share mockups of new designs, and Vision will help you bring them to life. Let's update our design based on a photo our designer gave us.
4
4
5
5
1.[] Open a new Copilot Chat thread in Agent mode.
6
-
1.[] Click the **+** button in the chat, select **upload image**, and select the store application image that is found in the GitHub repo that is cloned called **eshop.png** inside of the `C:\Users\LabUser\Source\Repos\build-2025-lab300` directory.
6
+
1.[] Click the **+** button in the chat, select **upload image**, and select the **eshop.png**image found in the root of the cloned repository.
7
7
8
8

9
9
10
10
1.[] Ask: `Update the Products.razor to display products in a grid layout similar to this image. Add nice hover effects and make it responsive.`
11
11
1.[] Review the suggested code changes and implement them. It should recommend changes to both the **Products.razor** and a new **Products.razor.css**
12
12
1.[] Run the application to see the updated product grid layout. You may have to clear the browser cache with CTRL+SHIFT+R if you don't see the CSS update.
13
13
14
-
> Note: continue to iterate with Copilot Agent if it isn't to your liking.
14
+
> [!NOTE]
15
+
> Continue to iterate with Copilot Agent if the result isn't to your liking.
15
16
16
17
**Key Takeaway**: Copilot Vision can understand UI designs from images and help you implement them in your application.
To complete this workshop you will need to clone a repository with a copy of the contents of this repository
3
+
To complete this workshop you will need Visual Studio 2026, the .NET 10 SDK, and a GitHub account with access to GitHub Copilot.
4
4
5
-
> [!NOTE]
6
-
> Under regular conditions you would need to ensure all prequirements, but don't worry. We have ensured this environment as all you need.
5
+
## Prerequisites
6
+
7
+
Before starting, ensure you have:
8
+
9
+
-**Visual Studio 2026** with the GitHub Copilot extension installed
10
+
-**.NET 10 SDK** installed
11
+
-**GitHub account** with one of the following:
12
+
-[GitHub Copilot Free](https://github.com/features/copilot) - Free tier with limited usage
13
+
-[GitHub Copilot Pro](https://github.com/features/copilot) - Full access (30-day free trial available)
14
+
- GitHub Copilot through your organization
15
+
16
+
> [!TIP]
17
+
> If you don't have GitHub Copilot yet, you can [sign up for Copilot Free](https://github.com/features/copilot) or start a [free trial of Copilot Pro](https://github.com/github-copilot/signup).
7
18
8
19
## Install .github + MCP Extension
9
20
@@ -12,75 +23,73 @@ Before we begin, let's install the .github + MCP extension for Visual Studio. Th
12
23
1.[] Open Visual Studio 2026
13
24
1.[] Go to **Extensions -> Manage Extensions**
14
25
1.[] Search for **.github + MCP** in the search box
15
-
1.[] Click **Install** on the **G.github + MCP** extension by Mads Kristensen
26
+
1.[] Click **Install** on the **.github + MCP** extension by Mads Kristensen
16
27
1.[] Restart Visual Studio if prompted
17
28
18
29
> [!TIP]
19
30
> You can also install this extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.GitHubNode). The .github + MCP extension is important because it provides the Node.js runtime required by some MCP servers, which you'll use in Part 9 of this lab.
20
31
21
-
## Configure GitHub Copilot - Personal Account
22
-
23
-
If you prefer to use your personal GitHub account instead of the Skillable lab account, follow these steps.
32
+
## Sign in to GitHub Copilot
24
33
25
34
1.[] Open your browser and go to `https://github.com`.
26
-
1.[] Sign in with your personal GitHub account or create a new account if you don't have one.
35
+
1.[] Sign in with your GitHub account or create a new account if you don't have one.
27
36
1.[] Open Visual Studio 2026.
28
-
1.[] Select **Continue without code**, if prompted to sign-in, you can click Close.
37
+
1.[] Select **Continue without code**. If prompted to sign-in, you can click Close.
29
38
1.[] Click the Copilot icon on the top bar (left side next to the search input box).
30
39
1.[] Click **Sign in to use Copilot**.
31
40
1.[] A browser window will open prompting you to sign in to GitHub and authorize Visual Studio and Copilot. Complete the sign-in and click **Authorize** when prompted.
32
-
1.[] When the browser shows the confirmation, click **open** to return to Visual Studio.
41
+
1.[] When the browser shows the confirmation, click **Open** to return to Visual Studio.
33
42
1.[] After setup you should see the **GitHub Copilot Walkthrough** tab and the Copilot button should be green.
34
43
35
-
Note: Using your personal account is recommended if you want Copilot to access your own repositories, settings, and MCP authorizations. For the hands-on lab exercises that create or modify repository data via cloud agents, forking the lab repo into your own account gives the agents permission to operate on your fork.
36
-
44
+
> [!NOTE]
45
+
> For the hands-on lab exercises that create or modify repository data via cloud agents (Part 12), you'll need to fork the lab repo into your own account. This gives the cloud agent permissions to operate on your fork.
37
46
38
47
## Turn on Copilot Settings
39
48
40
-
1.[] Ensure Code Completions and Next Edit Suggestions are enabled:
49
+
1.[] Ensure Code Completions and Next Edit Suggestions are enabled:
41
50
- Go to the Code Completions settings in Visual Studio by heading to **Tools -> Options -> Text Editor -> Code Completions**
42
51
- Ensure **Copilot Completions** is checked.
43
52
- Ensure **Copilot Next Edit Suggestions** is checked.
44
53
45
54

46
55
47
-
1. Head to **Tools -> Options -> GitHub -> Copilot -> Copilot Chat** and ensure the following settings are enabled:
56
+
1.[]Head to **Tools -> Options -> GitHub -> Copilot -> Copilot Chat** and ensure the following settings are enabled:
48
57
-**Enable Planning**
49
58
-**Enable View Plan Execution**
50
59
-**Enable Copilot Coding agent (Preview)**
51
60
52
61
53
-
## Clone lab repository
62
+
## Clone Lab Repository
54
63
55
-
For the full experience � especially if you plan to delegate tasks to cloud agents or allow Copilot to create issues and push changes � fork the repository to your own GitHub account and clone your fork. This gives the cloud agent permissions to operate on your copy of the repo.
64
+
For the full experience—especially if you plan to delegate tasks to cloud agents or allow Copilot to create issues and push changes—fork the repository to your own GitHub account and clone your fork.
56
65
57
-
1.[] In your browser, go to `https://github.com/dotnet-presentations/build-2025-lab300` and click **Fork** to create a fork under your GitHub account.
66
+
1.[] In your browser, go to `https://github.com/dotnet-presentations/visual-studio-github-copilot-lab` and click **Fork** to create a fork under your GitHub account.
58
67
1.[] In Visual Studio, click **File -> Clone Repository**.
59
-
1.[] Enter the URL of your fork (for example `https://github.com/<your-username>/build-2025-lab300`) and press **Clone**.
68
+
1.[] Enter the URL of your fork (for example `https://github.com/<your-username>/visual-studio-github-copilot-lab`) and press **Clone**.
60
69
61
-
If you prefer not to fork you can still clone the upstream repository directly:
70
+
If you prefer not to fork, you can still clone the upstream repository directly:
62
71
63
72
1.[] In Visual Studio, click **File -> Clone Repository**.
64
-
2.[] Enter `https://github.com/dotnet-presentations/build-2025-lab300` and press **Clone**.
73
+
1.[] Enter `https://github.com/dotnet-presentations/visual-studio-github-copilot-lab` and press **Clone**.
65
74
66
-
The code is now opened in Visual Studio, feel free to take a look at it or skip to the next section to start the app.
75
+
The code is now opened in Visual Studio. Feel free to take a look at it or skip to the next section to start the app.
67
76
68
-
## Start the app
77
+
## Start the App
69
78
70
79
1.[] Open the **Solution Explorer** from the **View -> Solution Explorer** menu.
71
-
1.[] Set the **TinyShop.AppHost** as the startup project if it isn't by rightclicking on the **TinyShop.AppHost** and selecting **Set as startup project** and start the project with F5 or Debug -> Start Debugging from the menu.
80
+
1.[] Set the **TinyShop.AppHost** as the startup project if it isn't already by right-clicking on **TinyShop.AppHost** and selecting **Set as Startup Project**. Start the project with F5 or **Debug -> Start Debugging** from the menu.
72
81
73
82
The .NET Aspire AppHost will start two applications and the .NET Aspire Dashboard:
74
83
75
-
- The backend .NET app on **https://localhost:7130/api/Product**.
76
-
- The frontend Blazor app on **https://localhost:7085**. You can see the app by opening that URL from the dashboard
84
+
- The backend .NET app on **https://localhost:7130/api/Product**
85
+
- The frontend Blazor app on **https://localhost:7085** - You can see the app by opening that URL from the dashboard
77
86
78
87
1.[] Stop debugging and close the application.
79
88
80
-
## Summary and next steps
89
+
## Summary and Next Steps
81
90
82
-
You've now cloned the repository you'll use for this for the rest of the workshop.
91
+
You've now set up your environment and cloned the repository you'll use for the rest of the workshop. Let's start exploring GitHub Copilot!
83
92
84
93
---
85
94
86
-
[Back: Part 12 - Delegate to the Cloud](./part12-delegate-to-cloud.md)
95
+
[Next: Part 00 - Exploring the Codebase](./part00-exploring-codebase.md)
0 commit comments