Skip to content

Commit 44adc10

Browse files
Copilotjamesmontemagno
Copilot
and
jamesmontemagno
committed
Add new lab parts: MCP, Planning Mode, Reusable Prompts, and Delegate to Cloud
Co-authored-by: jamesmontemagno <1676321+jamesmontemagno@users.noreply.github.com>
1 parent 28809ec commit 44adc10

7 files changed

Lines changed: 398 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ You'll use GitHub Copilot's various features to enhance and complete this applic
3232
7. [Using Copilot Vision](lab/part6-copilot-vision.md)
3333
8. [Debugging with Copilot](lab/part7-debugging-with-copilot.md)
3434
9. [Commit Summary Descriptions](lab/part8-commit-summary-descriptions.md)
35+
10. [MCP Servers](lab/part9-mcp.md)
36+
11. [Planning Mode in Agent](lab/part10-planning-mode.md)
37+
12. [Reusable Prompt Files](lab/part11-reusable-prompts.md)
38+
13. [Delegate to the Cloud](lab/part12-delegate-to-cloud.md)
3539

3640
**Key Takeaway**: These tools can significantly boost your productivity as a developer by automating repetitive tasks, generating boilerplate code, and helping you implement complex features more quickly.
3741

‎lab/part10-planning-mode.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Part 10: Planning Mode in Agent
2+
3+
When working on complex features, it's helpful to plan before diving into implementation. GitHub Copilot's Planning Mode in Agent allows you to create a structured plan for implementing new features. This helps ensure you understand the full scope of changes needed before any code is generated.
4+
5+
In this part, you'll use Planning Mode to plan and implement a feature that allows users to navigate directly to a specific product's detail page.
6+
7+
## Understanding Planning Mode
8+
9+
Planning Mode is a preview feature in Agent that helps you:
10+
- Break down complex features into manageable steps
11+
- Understand all the files and changes required before implementation
12+
- Review and refine the plan before Copilot starts generating code
13+
14+
## Creating a Plan for Product Navigation
15+
16+
Let's use Planning Mode to implement a feature that allows users to click on a product in the listing page and navigate to a dedicated product detail page.
17+
18+
1. [] Open the Copilot Chat window if it's not already open.
19+
1. [] Switch to **Agent** mode.
20+
1. [] Click on the **Plan** button at the bottom of the chat input to enable Planning Mode.
21+
22+
![Enable Planning Mode](./images/10-planning-mode.png)
23+
24+
1. [] Enter the following prompt:
25+
26+
```
27+
I want to add product navigation to the TinyShop application. When a user clicks on a product in the product listing page, they should be taken to a new product detail page that shows:
28+
- The product image (larger size)
29+
- Product name as the page title
30+
- Full description
31+
- Price
32+
- A "Back to Products" button
33+
34+
The URL should be /product/{id} where id is the product ID.
35+
```
36+
37+
1. [] Review the plan that Copilot generates. It should include:
38+
- Creating a new `ProductDetail.razor` component
39+
- Updating routing configuration
40+
- Modifying the product listing to include navigation links
41+
- Adding any necessary CSS styling
42+
43+
1. [] If the plan looks good, click **Execute Plan** to begin implementation.
44+
1. [] If you want to modify the plan, you can add additional instructions or ask Copilot to revise specific steps.
45+
46+
## Reviewing and Refining the Plan
47+
48+
Before executing, it's a good practice to review the plan carefully:
49+
50+
1. [] Check that all necessary files are included in the plan.
51+
1. [] Verify the approach aligns with your project structure and coding standards.
52+
1. [] Add any missing requirements by typing additional instructions.
53+
54+
For example, you might add:
55+
56+
```
57+
Also ensure the product detail page handles cases where the product ID doesn't exist by showing a "Product not found" message.
58+
```
59+
60+
## Executing the Plan
61+
62+
1. [] Once you're satisfied with the plan, click **Execute Plan**.
63+
1. [] Copilot will implement each step of the plan, creating and modifying files as needed.
64+
1. [] Review the changes in the editor as they're made.
65+
1. [] Run the application to test the new product navigation feature.
66+
67+
## Testing the Feature
68+
69+
1. [] Start the application with F5 or Debug -> Start Debugging.
70+
1. [] Navigate to the Products page.
71+
1. [] Click on a product in the listing.
72+
1. [] Verify that you're taken to the product detail page with the correct information.
73+
1. [] Click the "Back to Products" button to return to the listing.
74+
75+
**Key Takeaway**: Planning Mode helps you think through complex features before implementation. By creating a structured plan, you can ensure all necessary changes are considered and review the approach before any code is generated. This leads to better-organized code and fewer iterations.

‎lab/part11-reusable-prompts.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
# Part 11: Reusable Prompt Files
2+
3+
Prompt files are a powerful way to create standardized, reusable prompts that can be shared across your team. They help ensure consistency in how you interact with GitHub Copilot and can encode best practices for common tasks like code generation, testing, and documentation.
4+
5+
In this part, you'll create a reusable prompt file for generating unit tests and use it to test the Product class in the TinyShop application.
6+
7+
## Understanding Prompt Files
8+
9+
Prompt files are markdown files stored in the `.github/prompts` folder of your repository. They:
10+
- Can be invoked by name in Copilot Chat
11+
- Are shared with your entire team through source control
12+
- Can include placeholders for dynamic content
13+
- Help standardize common development tasks
14+
15+
## Creating a Unit Test Prompt File
16+
17+
Let's create a prompt file that helps generate unit tests using MSTest.
18+
19+
1. [] In **Solution Explorer**, right-click on the solution and select **Add -> New Folder** and name it `.github` if it doesn't already exist.
20+
1. [] Right-click on the `.github` folder and select **Add -> New Folder** and name it `prompts`.
21+
1. [] Right-click on the `prompts` folder and select **Add -> New Item**.
22+
1. [] Create a new file named `unit-test.prompt.md` with the following content:
23+
24+
```markdown
25+
---
26+
mode: agent
27+
description: Generate comprehensive unit tests using MSTest
28+
---
29+
30+
# Unit Test Generator
31+
32+
Generate unit tests for the selected code using the MSTest framework.
33+
34+
## Requirements
35+
36+
- Use MSTest attributes ([TestClass], [TestMethod], [DataRow])
37+
- Follow the Arrange-Act-Assert pattern
38+
- Include both positive and negative test cases
39+
- Test edge cases and boundary conditions
40+
- Use descriptive test method names that explain what is being tested
41+
- Mock dependencies where appropriate
42+
43+
## Test Structure
44+
45+
Each test should:
46+
1. Have a clear name following the pattern: `MethodName_Scenario_ExpectedBehavior`
47+
2. Include a brief comment explaining the test purpose
48+
3. Use proper assertions with meaningful failure messages
49+
50+
## Context
51+
52+
Generate tests for: ${input:Describe what you want to test}
53+
```
54+
55+
1. [] Save the file.
56+
57+
## Setting Up a Test Project
58+
59+
Before we can use our prompt, we need a test project. Let's create one using Copilot Agent.
60+
61+
1. [] Open Copilot Chat and switch to **Agent** mode.
62+
1. [] Type: `Create a new MSTest project called TinyShop.Tests in the src folder and add it to the solution. Add a reference to the DataEntities project.`
63+
1. [] Accept the changes proposed by Copilot.
64+
65+
## Using the Reusable Prompt
66+
67+
Now let's use our new prompt file to generate unit tests for the Product class.
68+
69+
1. [] In Copilot Chat, type `/` to see available prompt files.
70+
1. [] Select `unit-test` from the list of available prompts.
71+
1. [] When prompted for input, type: `the Product class in DataEntities, including tests for property getters/setters and validation of the Price property (should be non-negative)`
72+
73+
![Using a prompt file](./images/11-prompt-file.png)
74+
75+
1. [] Review the generated tests. They should include:
76+
- Tests for each property
77+
- Tests for edge cases (empty strings, null values)
78+
- Tests for price validation
79+
- Proper test method naming
80+
81+
## Example Generated Tests
82+
83+
The generated tests should look similar to:
84+
85+
```csharp
86+
using DataEntities;
87+
using Microsoft.VisualStudio.TestTools.UnitTesting;
88+
89+
namespace TinyShop.Tests;
90+
91+
[TestClass]
92+
public class ProductTests
93+
{
94+
[TestMethod]
95+
public void Name_SetValue_ReturnsExpectedValue()
96+
{
97+
// Arrange
98+
var product = new Product();
99+
var expectedName = "Test Product";
100+
101+
// Act
102+
product.Name = expectedName;
103+
104+
// Assert
105+
Assert.AreEqual(expectedName, product.Name);
106+
}
107+
108+
[TestMethod]
109+
public void Price_SetPositiveValue_ReturnsExpectedValue()
110+
{
111+
// Arrange
112+
var product = new Product();
113+
var expectedPrice = 29.99m;
114+
115+
// Act
116+
product.Price = expectedPrice;
117+
118+
// Assert
119+
Assert.AreEqual(expectedPrice, product.Price);
120+
}
121+
122+
[TestMethod]
123+
[DataRow("product1.png")]
124+
[DataRow("product2.png")]
125+
[DataRow("")]
126+
public void ImageUrl_SetValue_ReturnsExpectedValue(string imageUrl)
127+
{
128+
// Arrange
129+
var product = new Product();
130+
131+
// Act
132+
product.ImageUrl = imageUrl;
133+
134+
// Assert
135+
Assert.AreEqual(imageUrl, product.ImageUrl);
136+
}
137+
}
138+
```
139+
140+
## Running the Tests
141+
142+
1. [] Open **Test Explorer** from **Test -> Test Explorer**.
143+
1. [] Build the solution to discover the tests.
144+
1. [] Click **Run All** to run the generated tests.
145+
1. [] Verify that all tests pass.
146+
147+
**Key Takeaway**: Reusable prompt files help standardize how your team uses GitHub Copilot. By creating prompts for common tasks like unit testing, you ensure consistency and encode best practices that everyone on the team can benefit from.

‎lab/part12-delegate-to-cloud.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# Part 12: Delegate to the Cloud
2+
3+
Sometimes you have an idea for a feature or improvement that you want to implement, but you don't have the time to work on it right now. GitHub Copilot's Cloud Agent allows you to delegate tasks to run in the cloud, freeing you to focus on other work while Copilot implements the changes.
4+
5+
In this part, you'll learn how to delegate a task to the cloud to add a dark theme to the TinyShop application.
6+
7+
## Understanding Cloud Delegation
8+
9+
Cloud Agent allows you to:
10+
- Submit complex tasks to run in the cloud
11+
- Continue working on other tasks while the cloud agent implements your request
12+
- Review and apply the changes when the task is complete
13+
- Get notified when the work is done
14+
15+
This is particularly useful for:
16+
- Large refactoring tasks
17+
- Adding new features that require changes across multiple files
18+
- Time-consuming implementations that don't need your immediate attention
19+
20+
## Preparing Your Request
21+
22+
Before delegating to the cloud, it's important to write a clear, detailed prompt. The cloud agent doesn't have access to your immediate context, so your prompt should include all necessary information.
23+
24+
1. [] Think about the feature you want to implement. For this lab, we'll add a dark theme to the TinyShop application.
25+
26+
1. [] Consider what details the cloud agent will need:
27+
- What colors should the dark theme use?
28+
- Should it include a toggle for users to switch themes?
29+
- Where should theme styles be placed?
30+
- Should the theme preference be persisted?
31+
32+
## Delegating to the Cloud
33+
34+
1. [] Open Copilot Chat and switch to **Agent** mode.
35+
1. [] Click on the **Delegate to Cloud** button (cloud icon) at the bottom of the chat window.
36+
37+
![Delegate to Cloud button](./images/12-delegate-cloud.png)
38+
39+
1. [] Enter a detailed prompt for the dark theme feature:
40+
41+
```
42+
Add a dark theme to the TinyShop Blazor application with the following requirements:
43+
44+
1. Create a dark color scheme:
45+
- Background: #1a1a2e
46+
- Secondary background: #16213e
47+
- Text: #eaeaea
48+
- Accent: #0f3460
49+
- Highlight: #e94560
50+
51+
2. Add a theme toggle:
52+
- Place a sun/moon icon button in the navigation bar
53+
- Clicking it should switch between light and dark themes
54+
- Use smooth CSS transitions for the theme switch
55+
56+
3. Implementation details:
57+
- Use CSS custom properties (variables) for colors
58+
- Add theme styles in a new site-theme.css file
59+
- The toggle should persist the user's preference using localStorage
60+
61+
4. Apply the theme to:
62+
- Page background
63+
- Navigation bar
64+
- Product cards
65+
- Text and links
66+
- Buttons and form elements
67+
```
68+
69+
1. [] Review the prompt to ensure it includes all necessary details.
70+
1. [] Click **Submit** to delegate the task to the cloud.
71+
72+
## While the Task Runs
73+
74+
After submitting, you'll see a confirmation that your task has been delegated. You can:
75+
76+
1. [] Continue working on other tasks in Visual Studio.
77+
1. [] Check the status of your cloud task in the Copilot Chat window.
78+
1. [] Receive a notification when the task is complete.
79+
80+
> [!TIP]
81+
> Cloud Agent tasks typically take a few minutes to complete, depending on the complexity of the request. You'll receive a notification in Visual Studio when the work is ready for review.
82+
83+
## Reviewing Cloud Agent Results
84+
85+
Once the cloud agent completes the task:
86+
87+
1. [] Click on the notification to open the results.
88+
1. [] Review the proposed changes in the diff viewer.
89+
1. [] Check that the implementation matches your requirements:
90+
- CSS custom properties are defined
91+
- Theme toggle is in the navigation bar
92+
- LocalStorage is used for persistence
93+
- Theme transitions are smooth
94+
95+
1. [] If the changes look good, click **Apply Changes** to merge them into your codebase.
96+
1. [] If you need modifications, you can:
97+
- Request refinements in a follow-up prompt
98+
- Make manual adjustments to the applied code
99+
- Delegate again with updated requirements
100+
101+
## Testing the Dark Theme
102+
103+
1. [] Run the application with F5 or Debug -> Start Debugging.
104+
1. [] Click the theme toggle button in the navigation bar.
105+
1. [] Verify that the dark theme is applied correctly.
106+
1. [] Refresh the page and verify the theme preference is persisted.
107+
1. [] Switch back to light theme and verify it works both ways.
108+
109+
**Key Takeaway**: Delegating to the Cloud lets you offload complex tasks to GitHub Copilot while you focus on other work. This is especially valuable for time-consuming implementations or when you want to explore ideas without blocking your immediate workflow.

‎lab/part9-mcp.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Part 9: MCP Servers
2+
3+
Model Context Protocol (MCP) is an open protocol that standardizes how applications provide context to large language models (LLMs). MCP servers extend GitHub Copilot's capabilities by connecting to external tools and services, giving it access to real-time data and the ability to perform actions.
4+
5+
In this part, you'll learn how to add MCP servers to Visual Studio and use them to get information about optimizing your application.
6+
7+
## Adding MCP Servers from the Gallery
8+
9+
Visual Studio provides a gallery of pre-configured MCP servers that you can easily add to your project.
10+
11+
1. [] Open Visual Studio 2026 with the TinyShop solution.
12+
1. [] Open the Copilot Chat window by clicking on the GitHub Copilot icon and selecting **Open Chat Window** or press `Ctrl+\+C`.
13+
1. [] Click on the **Tools** icon at the bottom of the chat window to open the MCP server configuration.
14+
15+
![MCP Tools icon](./images/9-mcp-tools.png)
16+
17+
1. [] Click on **Add MCP Server from Gallery**.
18+
1. [] Search for **Microsoft Learn** and click **Add** to add it to your project.
19+
1. [] Search for **GitHub** and click **Add** to add it to your project as well.
20+
1. [] Both MCP servers should now appear in your tools list.
21+
22+
> [!TIP]
23+
> MCP servers can provide access to documentation, APIs, and other services that can help Copilot give you more accurate and contextual responses.
24+
25+
## Using MCP Servers to Get Information
26+
27+
Now that you have the Microsoft Learn and GitHub MCP servers installed, let's use them to get information about optimizing asset loading in the application.
28+
29+
1. [] In Copilot Chat, switch to **Agent** mode.
30+
1. [] Type the following prompt: `Using the Microsoft Learn documentation, what are the best practices for optimizing image loading and asset delivery in a Blazor Server application?`
31+
1. [] Review the response from Copilot, which now has access to the latest Microsoft documentation through the MCP server.
32+
33+
## Creating GitHub Issues with MCP
34+
35+
The GitHub MCP server allows Copilot to interact with your GitHub repository. Let's use it to create issues for improvements we want to make to the application.
36+
37+
1. [] In the same chat session, type: `Based on the asset optimization recommendations, create 3 GitHub issues for improving the TinyShop application's performance. Include issues for image lazy loading, implementing a CDN strategy, and adding caching headers for static assets.`
38+
39+
> [!NOTE]
40+
> Copilot will use the GitHub MCP server to create the issues directly in your repository. You may be prompted to authorize the action.
41+
42+
1. [] Review the issues that Copilot proposes to create.
43+
1. [] Approve the creation of the issues when prompted.
44+
1. [] Navigate to your GitHub repository to verify that the issues have been created.
45+
46+
**Key Takeaway**: MCP servers extend GitHub Copilot's capabilities by connecting it to external services and documentation. This allows Copilot to provide more accurate, up-to-date information and perform actions like creating GitHub issues directly from the chat interface.

0 commit comments

Comments
 (0)