diff --git a/blogs/2025/05/27/add-dev-container-config-command.png b/blogs/2025/05/27/add-dev-container-config-command.png new file mode 100644 index 0000000000..ac8edf8ec9 --- /dev/null +++ b/blogs/2025/05/27/add-dev-container-config-command.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:299ea1df0c5adc9c6b6ed5c6ab48d2f11c22fb0eea025e06e8782d540ca396e9 +size 11699 diff --git a/blogs/2025/05/27/ai-and-remote.md b/blogs/2025/05/27/ai-and-remote.md new file mode 100644 index 0000000000..a2b1373242 --- /dev/null +++ b/blogs/2025/05/27/ai-and-remote.md @@ -0,0 +1,130 @@ +--- +Order: 99 +TOCTitle: Enhance productivity with AI + Remote Dev +PageTitle: "Enhance productivity with AI + Remote Dev" +MetaDescription: Enhance your developer productivity with AI and Remote Development. +MetaSocialImage: TBD.png +Date: 2025-05-27 +Author: Brigit Murtaugh, Christof Marti, Josh Spicer, Olivia Guzzardo McVicker +--- + +# Enhance productivity with AI + Remote Dev + +May 27th, 2025 by [Brigit Murtaugh](https://github.com/bamurtaugh), [Christof Marti](https://github.com/chrmarti), [Josh Spicer](https://github.com/joshspicer), [Olivia Guzzardo McVicker](https://github.com/olguzzar) + +One of the features that makes VS Code so flexible and powerful is [Remote Development](/docs/remote/remote-overview.md). Whether you're connecting to a secure VM from your local desktop, a hugely powerful computer from your tablet, or a containerized environment with all the dependencies your project needs – VS Code's ability to develop _anything from anywhere_ can help in just about any setup. + +Now combine those capabilities with the flexibility and power of AI in VS Code, and you have an incredibly versatile dev environment. You can ensure chat conversations have context about your remote workspace, get AI help in setting up and debugging remote connections, and provide a more isolated space for agent mode to work autonomously. + +In this blog, we'll explore how your existing remote setups can be enhanced to "just work" with AI, along with some more customized AI + remote workflows that include custom instructions, chat participants, and agent auto-approvals. + +TODO: Add video + +## AI + Remote: It just works + +### What is Remote Development? + +When we describe VS Code Remote Development, we refer to 5 main experiences: +* [Remote - SSH](/docs/remote/ssh.md) - Connect to any location by opening folders on a remote machine/VM using SSH. +* [Dev Containers](/docs/devcontainers/containers.md) - Work with a separate toolchain or container-based application inside (or mounted into) a container. +* [WSL](/docs/remote/wsl.md) - Get a Linux-powered development experience in the Windows Subsystem for Linux. +* [Remote - Tunnels](/docs/remote/tunnels.md) - Connect to a remote machine via a secure tunnel, without configuring SSH. +* [GitHub Codespaces](/docs/remote/codespaces.md) - Remote environments that are managed for you. + +![Remote architecture](/docs/remote/images/remote-overview/architecture.png) + +### How can I use AI in a remote environment? + +We aim to make AI-enhanced coding as seamless as possible. AI in VS Code is powered by GitHub Copilot and will just work when you use it in a VS Code remote environment. We've aimed to remove additional install steps: Copilot will be installed automatically remotely, if you already have it installed locally. It’s also built into GitHub Codespaces, no extra install required. + +## Customized AI + Remote Workflows + +While using AI in a remote environment will just work, there are additional AI features that can make your remote workflow even more powerful: +* Custom instructions - Tell the AI about your remote environment +* Chat participants - Set up and troubleshoot your remote environment +* Manage tool approvals - Auto-approve agent mode tools in remote environments + +### Custom instructions + +One of the top requests we hear from users when working with an LLM is: How can I help the LLM better understand my code and coding practices? You can achieve this via **custom instructions**, which describe common guidelines or rules to get responses that match your specific coding practices and tech stack. Instead of manually including this context in every AI chat query, custom instructions automatically incorporate this information with every chat request (learn more in our [recent blog post](/blogs/2025/03/26/custom-instructions.md)). + +In our team's recent self-hosting, we found it helpful to use custom instructions to not only tell Copilot about our code and coding practices, but to also provide more information about the type of remote environment we're connected to, such as: +* What kind of remote environment is this (i.e. a dev container vs a VM)? +* What languages or toolchains are installed? What's their purpose? +* Where are toolchains installed (i.e. are they available on the `PATH`)? + +To get started with custom instructions in a remote environment, you can use the same `copilot-instructions.md` file remotely that you were already using locally. + +### Dev containers + custom instructions + +Our team has taken steps to preconfigure custom instructions to make your life even easier when using dev containers. We publish dev container resources (like images and Features) to ease the process of creating and connecting to dev containers, and we now include custom instructions in these files. Here’s an example of how you can use the custom dev container instructions our team added: + +* Create a new dev container configuration using one of our images or Features. You could do this by hand, or via the **Dev Containers: Add Dev Container Configuration Files...** command supplied by the [Dev Containers extension](https://marketplace.visualstudio.com/search?term=dev%20containers&target=VSCode&category=All%20categories&sortBy=Relevance): + +![Dev Containers: Add Dev Container Configuration Files command in VS Code Command Palette](add-dev-container-config-command.png) + +* Follow the steps in the quick pick. For this example, we'll select the Python Template: + +![Select Python 3 dev container config in VS Code Command Palette](python-container.png) + +* Build and connect to your dev container in VS Code: + +![VS Code notification to reopen project in dev container](reopen-container-notif.png) + +* The environment you've selected and are now connected to is based on [this Python Template](https://github.com/devcontainers/templates/tree/main/src/python). The Template uses [this Python image](https://github.com/devcontainers/features/tree/main/src/python), which [includes custom instructions](https://github.com/devcontainers/features/blob/main/src/python/devcontainer-feature.json#L80) +* Try chatting with Copilot within your dev container. Copilot automatically pulls the custom instructions from the Python image! + +![AI chat using custom instructions](chat-using-instructions.png) + +In addition to using the custom instructions we've added to images and Features, you can add additional custom instructions to the `devcontainer.json` in your projects - we've made it so that custom instructions can merge successfully across images and Templates. You can use the `"github.copilot.chat.codeGeneration.instructions"` setting, just like what we did in the Python dev container config described above. + +If you [publish](https://containers.dev/collections) any dev container configurations for others to use, we recommend exploring how you might add custom instructions to them! [Here](https://github.com/devcontainers/features/blob/main/src/python/devcontainer-feature.json#L80) is an example of using custom instructions in a Python dev container Feature: + +```json +"github.copilot.chat.codeGeneration.instructions": [ + { + "text": "This dev container includes `python3` and `pip3` pre-installed and available on the `PATH`, along with the Python language extensions for Python development." + } +], +``` + +### Remote - SSH participant + +_Chat participants_ enhance your chat experience by providing domain-specific knowledge, such as how to interact with a database or a specific API. Type `@` in the chat input field to view and select from the list of available participants - they'll be available in Ask and Edit modes. There are several built-in chat participants like `@workspace`, `@vscode`, `@terminal`, and `@github`. Extensions can also contribute chat participants. + +The Remote - SSH extension includes a Copilot chat participant. Ask `@remote-ssh` for help configuring or troubleshooting elements of your remote environment: + +![Using Remote - SSH participant in VS Code chat panel](remote-ssh-intro.png) + +The participant is also knowledgeable about general SSH and remote development topics: + +![Asking Remote - SSH participant about remote auth](remote-ssh-auth.png) + +If a connection failure occurs, the **Diagnose with Copilot** feature provides a quick way to understand the problem: + +![Diagnose with Copilot option in notification](ssh-diagnose.png) + +Copilot will investigate the issue and provide actionable insights: + + + +### Manage tool approvals: Auto-approve agent mode tools + +As part of completing the tasks for a user prompt, [agent mode](/docs/copilot/chat/chat-agent-mode.md) can run tools and terminal commands. This is powerful but potentially comes with risks. Therefore, you need to approve the use of tools and terminal commands in agent mode. + +![Agent mode tool approval options dropdown](/release-notes/images/1_99/chat-tool-approval.png) + +In case you want to auto-approve _all_ tools, you can now use the experimental `chat.tools.autoApprove` setting. This will auto-approve all tools, and VS Code will not ask for confirmation when a language model wishes to run tools. This can help save time by giving more autonomy to agent mode, but bear in mind that with this setting enabled, you will not have the opportunity to cancel potentially destructive actions a model wants to take. + +You may want to take advantage of the benefits of more autonomous agent mode only in certain more isolated environments. To achieve this, you can choose to set `chat.tools.autoApprove` only when connected to a remote environment in VS Code: + +![Auto Approve tool setting in VS Code remote settings](auto-approval.png) + +Please note that remote environments that are part of your local machine (like dev containers) or that have access to your credentials will pose different levels of risk. + +## What's Next + +We're excited about the future of Remote Development and AI in VS Code. Our monthly releases are packed with exciting new features, and we're constantly looking ahead to what's next, like supporting Copilot Chat [in the web](/docs/setup/vscode-web.md) ([vscode.dev](http://vscode.dev/microsoft/vscode), [github.dev](http://github.dev/microsoft/vscode)). + +Happy (smart and remote) coding! +Brigit, Christof, Josh, and Olivia diff --git a/blogs/2025/05/27/analyzing.mp4 b/blogs/2025/05/27/analyzing.mp4 new file mode 100644 index 0000000000..18980a15e8 --- /dev/null +++ b/blogs/2025/05/27/analyzing.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:04864557f44997d3df3d5b1222b78c9e35ff469adaf340f2991eee0f1dc8ecd5 +size 616403 diff --git a/blogs/2025/05/27/auto-approval.png b/blogs/2025/05/27/auto-approval.png new file mode 100644 index 0000000000..17e174fb3b --- /dev/null +++ b/blogs/2025/05/27/auto-approval.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:51a3d22927b20e462ca8c93a509296ec3c58acc48ce9888a10d543dab77c200f +size 74984 diff --git a/blogs/2025/05/27/chat-using-instructions.png b/blogs/2025/05/27/chat-using-instructions.png new file mode 100644 index 0000000000..c970c31a7c --- /dev/null +++ b/blogs/2025/05/27/chat-using-instructions.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:49183925efb135a4c1fe527a37b888c76d3956b50870b42fc6908220c4279d03 +size 46857 diff --git a/blogs/2025/05/27/python-container.png b/blogs/2025/05/27/python-container.png new file mode 100644 index 0000000000..45dcb87a60 --- /dev/null +++ b/blogs/2025/05/27/python-container.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3a8e393566fa2138b2fdf341527f286fd0b2b77f0343b6001128fc0cae1ad98a +size 176286 diff --git a/blogs/2025/05/27/remote-ssh-auth.png b/blogs/2025/05/27/remote-ssh-auth.png new file mode 100644 index 0000000000..b55f068401 --- /dev/null +++ b/blogs/2025/05/27/remote-ssh-auth.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b047d630599fe758c5537091129982ea307dd3a71881d8c383c6bdb621975103 +size 202935 diff --git a/blogs/2025/05/27/remote-ssh-intro.png b/blogs/2025/05/27/remote-ssh-intro.png new file mode 100644 index 0000000000..d596b43d0d --- /dev/null +++ b/blogs/2025/05/27/remote-ssh-intro.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e17e796a92e91952a155e1652da5e23d8da6b912cb7cb3382537fa170501eb46 +size 241417 diff --git a/blogs/2025/05/27/reopen-container-notif.png b/blogs/2025/05/27/reopen-container-notif.png new file mode 100644 index 0000000000..1372e4adfa --- /dev/null +++ b/blogs/2025/05/27/reopen-container-notif.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:259dece93465ede5ecf82f1c87975ed36c1f9dcf97ad92386d18959e3dc05600 +size 43141 diff --git a/blogs/2025/05/27/ssh-diagnose.png b/blogs/2025/05/27/ssh-diagnose.png new file mode 100644 index 0000000000..57c38cdc77 --- /dev/null +++ b/blogs/2025/05/27/ssh-diagnose.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9d1feb642210aa503abbc07b03da34bc20ad08685abad6d76fab29ceaac552d7 +size 89566