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
With chat agent mode in Visual Studio Code, you can use natural language to define a high-level task and to start an agentic code editing session to accomplish that task. In agent mode, Copilot **autonomously** plans the work needed and determines the relevant files and context. It then makes edits to your codebase and invokes tools to accomplish the request you made. Agent mode monitors the outcome of edits and tools and iterates to resolve any issues that arise.
9
+
10
+
> [!IMPORTANT]
11
+
> While Copilot autonomously determines the operations necessary to complete the requested task, as the developer you are always in charge. You will work with Copilot to ensure everything is completely correctly, reading and reviewing the code. You will also want to continue to follow proper DevOps practices, including code reviews, testing, security scans, etc.
12
+
13
+
Why would you use agent mode instead of edit mode?
14
+
15
+
-**Edit scope**: agent mode autonomously determines the relevant context and files to edit. In edit mode, you need to specify the context yourself.
16
+
-**Task complexity**: agent mode is better suited for complex tasks that require not only code edits but also the invocation of tools and terminal commands.
17
+
-**Duration**: agent mode involves multiple steps to process a request, so it might take longer to get a response. For example, to determine the relevant context and files to edit, determine the plan of action, and more.
18
+
-**Self-healing**: agent mode evaluates the outcome of the generated edits and might iterate multiple times to resolve intermediate issues.
19
+
-**Request quota**: in agent mode, depending on the complexity of the task, one prompt might result in many requests to the backend.
In this section, you will use Copilot's agent mode to add themes to the Tailspin Shelter website. You will be able to select a theme and apply it to the website.
28
+
29
+
1. Return to your IDE with the project open.
30
+
2. Close any tabs you may have open in your IDE to ensure the context for Copilot chat is empty.
31
+
3. Select the `+` icon towards the top of Copilot chat to begin a new chat.
32
+
4. Select agent mode, by selecting `Agent` (just like you did `Edit` before) in the model selector dropdown at the bottom of the chat window.
33
+
5. Select one of models (some may not be available) `Claude 3.7 Sonnet`, `Claude 3.5 Sonnet` or `GPT-4.1 (Preview)`
34
+
6. Navigate to [](../prompts/fun-add-themes.md)
35
+
7. Copy the content of the prompt
36
+
8. Paste the content in the copilot prompt input
37
+
9. The agent mode will take its time, since it searches by itself the relevant files to modify, and then do multiple passes including talking with itself to refine the task at hand
38
+
10. While Agent is doing it's thing, take the opportunity to examine the content of prompt that was used.
39
+
11. When the agent is done (you no longer see any spinners and the thumb up/down icons will be visible), open a browser to see the results
40
+
- Open the page at [http://localhost:4321][tailspin-shelter-website] to see the updates!
41
+
- Examine the changes made to the files if you like
42
+
- Was it good? If you are not happy with the results, you can refine the prompt by crafting extra prompts in the chat to improve the end results. Don't start a new session, it's an interactive process.
43
+
12. Press `Done` when you are happy with the results
44
+
45
+
You _may_ have gotten something like this for the Terminal Theme (generated with claude 3.7)
> Because LLMs are probabilistic, not deterministic, the exact code generated can vary. The above is a representative example. If your code is different, that's just fine as long as it works!
51
+
52
+
## Play a bit with Copilot
53
+
6
54
You've made it to the end of the one hour workshop. Congratulations! You've explored the core skills to help you get the most out of GitHub Copilot. From here you can explore various challenges on your own, and see how GitHub Copilot can support you as you continue developing.
7
55
8
56
The suggestions listed here are exactly that - suggestions. You're free to come up with your own scenarios or features you think the application should have.
9
57
10
58
You'll also notice there aren't step-by-step instructions here. You've already seen how you can use Copilot to aid you in development. Part of the challenge put forth with these extra suggestions is to apply what you've learned to create code!
11
59
12
-
## Potential next steps
60
+
### Some prompts to play with
61
+
62
+
We have provided you some prompts in [prompts][github-prompts-path] folder, which you can use directly as inspiration for your explorations.
63
+
64
+
> [!TIP]
65
+
> These prompts are meant to be used as one shot, but if have prompts that can be are generic, reusable prompt are a great way to share prompts with the team members. They can be placed in a well know folder and be invoked directly in the Copilot Chat by referencing them.
66
+
> Learn more about [reusable prompts in Visual Studio Code][vscode-prompts]
67
+
68
+
### Potential next steps
13
69
14
70
Here's some ideas of how you could continue to grow and build upon what you've done:
15
71
@@ -23,3 +79,6 @@ Here's some ideas of how you could continue to grow and build upon what you've d
This directory contains various prompts designed for different aspects of development and enhancement of the Pets Workshop project. These prompts are meant for illustration purposes only.
4
+
5
+
## Prompt Overview
6
+
7
+
### Interface and User Experience
8
+
9
+
-**[fun-add-themes](./fun-add-themes.md)**: Adds a theme selector dropdown that allows users to switch between multiple visual themes including 80s Retro, Terminal Classic, Hand-Sketched, Steampunk, and Fantasy Realm. Enhances user customization and visual appeal.
10
+
11
+
-**[fun-add-dog-animation](./fun-add-dog-animation.md)**: Implements an interactive cartoon dog animation in the bottom-right corner of the website that follows the user's cursor with its eyes. The dog remains visible while scrolling and has extra animations on mouse clicks, adding a playful element to the user experience.
12
+
13
+
### Backend Development
14
+
15
+
-**[conversion-convert-flask-to-golang](./conversion-convert-flask-to-golang.md)**: Provides instructions for migrating the existing Python Flask server to a Go-based implementation while maintaining identical functionality, API endpoints, and response formats. The goal is to create a functionally equivalent server using Go's standard library.
16
+
17
+
-**[monitoring-add-logging](./monitoring-add-logging.md)**: Details requirements for implementing a comprehensive logging system in the Python Flask server with multiple logging levels, consistent formatting, configuration options, and performance considerations. This improves monitoring, debugging, and operational visibility.
Convert the existing Python Flask server implementation to a Go-based server with identical functionality and API endpoints. The Go implementation should maintain the same request handling, routes, data processing, and response formats as the original Flask server.
6
+
7
+
The Python Flask is stored in #folder:server
8
+
9
+
## Requirements
10
+
1. Create a functionally equivalent Go server implementation
11
+
2. Match all existing API endpoints, query parameters, and HTTP methods
12
+
3. Preserve all current data processing logic and response formats
13
+
4. Implement the same error handling and status codes
14
+
5. Maintain any authentication mechanisms present in the Flask implementation
15
+
6. Use only the Go standard library where possible, with minimal external dependencies
16
+
7. Include appropriate comments explaining the code and any implementation decisions
17
+
18
+
## Deliverables
19
+
1. Complete Go source code organized in a folder named `go_server`
20
+
2. A main.go file with server initialization and configuration
21
+
3. Separate handler files for different API endpoint groups
Add an adorable cartoon dog to the bottom-right corner of the website that follows the user's cursor with its eyes, similar to the classic XEyes program from X11.
4
+
5
+
## Requirements:
6
+
- The dog should be cute and cartoony with expressive eyes
7
+
- Eyes should smoothly track the cursor position across the entire screen
8
+
- Position the dog in the bottom-right corner as a fixed element (sticky positioning)
9
+
- Dog should remain visible even when the page is scrolled
10
+
- Add a slight head tilt or ear wiggle on mouse clicks for extra charm
11
+
- Optional: Make the dog occasionally blink or perform a random animation
12
+
13
+
Let's make browsing fun again with this interactive canine companion! 🐶
0 commit comments