diff --git a/docs/copilot/chat/images/copilot-chat/chat-approval-options.png b/docs/copilot/chat/images/copilot-chat/chat-approval-options.png new file mode 100644 index 00000000000..b5df226797c --- /dev/null +++ b/docs/copilot/chat/images/copilot-chat/chat-approval-options.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:58f8c55f6b1abcdeee9137ce63ade2f86d534dc7578077787318099749d4364e +size 33502 diff --git a/docs/copilot/images/customization/chat-customizations-editor-plugins.png b/docs/copilot/images/customization/chat-customizations-editor-plugins.png new file mode 100644 index 00000000000..fb5805cb95b --- /dev/null +++ b/docs/copilot/images/customization/chat-customizations-editor-plugins.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8eaa18eecfbf5faeb079ebbd822fe9d20575d40088e9d7f48f511c222e48b4e6 +size 86550 diff --git a/docs/copilot/images/third-party-agents/claude-agent-new-chat-1.121.png b/docs/copilot/images/third-party-agents/claude-agent-new-chat-1.121.png new file mode 100644 index 00000000000..3a8932a9f55 --- /dev/null +++ b/docs/copilot/images/third-party-agents/claude-agent-new-chat-1.121.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b2d49fca4a39434b9b92daa201cbd9e587f913b36102a728df5b7e36193367eb +size 36585 diff --git a/learn/agents/1-using-tools-with-agents.md b/learn/agents/1-using-tools-with-agents.md new file mode 100644 index 00000000000..3438bd212d4 --- /dev/null +++ b/learn/agents/1-using-tools-with-agents.md @@ -0,0 +1,112 @@ +--- +ContentId: 5d7a2a1e-9f1c-4d2a-8c6a-1c2a8f7d4a01 +DateApproved: 05/21/2026 +MetaDescription: Learn how to use built-in tools, MCP tools, extension tools, approvals, and sandboxing with agents in VS Code. +MetaSocialImage: ../images/shared/agent-first-development-social.png +Keywords: + - copilot + - agents + - tools + - tool sets + - approvals + - sandboxing +--- + +# Using tools with agents + +Tools give agents in VS Code access to the workspace, the web, APIs, and other capabilities they need to finish real tasks. This course shows how to choose tools, group them into tool sets, and keep agent work safe with approvals and sandboxing. + +## Prerequisites + +Before you start: you'll need VS Code Insiders installed and the GitHub Copilot and GitHub Copilot Chat extensions set up and signed in. You also need access to the tools you want to use, such as MCP servers or extensions that contribute tools. + +* [Download VS Code](https://code.visualstudio.com/) +* [Set up GitHub Copilot in VS Code](https://code.visualstudio.com/docs/copilot/overview#_step-1-set-up-copilot) + +## What tools do + +Agents use tools to search code, read files, run commands, fetch content, and call services. VS Code supports three kinds of tools: + +* Built-in tools, such as read, edit, search, execute, and web. +* MCP tools from installed Model Context Protocol servers. +* Extension tools contributed by VS Code extensions. + +The agent selects tools from the enabled set based on your prompt and context. If you want to force a specific tool, type `#` and the tool name in chat. + +For example, use `#codebase` in a prompt when you want the agent to focus on your repository context. + +To install more tools, open the Extensions view and search with the `@mcp` filter for MCP servers, or search normally for extensions that contribute tools. + +## Choose the right tools + +Open the Chat view, switch to **Agent**, and use the **Configure Tools** button in the chat input to choose the tools for the current session. + +![Screenshot showing the Chat view with the Configure Tools button in the chat input.](../../docs/copilot/images/chat-tools/agent-mode-select-tools.png) + +Select only the tools you need. A smaller tool set gives the model less to sort through and usually leads to better results. Every enabled tool also consumes part of the model's context window. + +A chat request can have a maximum of 128 tools enabled at a time, so keeping the active set focused also helps avoid tool count issues. + +![Screenshot showing the tool picker drop-down with built-in tools, MCP servers, and user-defined tool sets.](../../docs/copilot/images/chat-tools/chat-tools-picker.png) + +> [!TIP] +> Start with the fewest tools that can complete the task, then add more only when the agent needs them. + +## Group related tools with tool sets + +Tool sets let you save related tools as a single reusable group. You can use them in chat prompts, prompt files, and custom agents. + +Create a tool set from the Command Palette with **Chat: Configure Tool Sets**, or from the cog in the tool picker with **Create a new tool set file**. Then add the tools you want in the generated `.jsonc` file. + +Use tool sets when you want a repeatable setup for a task such as Python work, web research, or repository changes. Tool sets you create show up under **User defined tool sets** in the tool picker. + +## Limit tools for a custom agent + +When you build a [custom agent](https://code.visualstudio.com/docs/copilot/customization/custom-agents), you can list the tools and tool sets it has access to in the `tools` field of the agent's markdown frontmatter: + +```yaml +--- +description: Python testing helper +tools: ['search', 'edit', 'pylance', 'runTests'] +--- +``` + +You can also select **Configure Tools** in the agent file to pick tools from a quick pick and have VS Code update the list for you. + +## Manage approvals + +The permissions picker controls how much autonomy the agent has during a session. + +* **Default Approvals** asks before sensitive actions. +* **Bypass Approvals** auto-approves tool calls. +* **Autopilot** (Preview) auto-approves tool calls and continues working until the task is done. + +You can keep your preferred mode across sessions with `setting(chat.permissions.default)`. Autopilot is available when `setting(chat.autopilot.enabled)` is on. + +> [!CAUTION] +> Higher autonomy levels reduce the amount of review you do before tools run. Use them with care, especially when the agent can edit files or run terminal commands. + +![Screenshot of approval options.](../../docs/copilot/chat/images/copilot-chat/chat-approval-options.png) + +## Use sandboxing for risky commands + +Agent sandboxing adds OS-level isolation for terminal commands run by the agent. It limits file system and network access, and sandboxed commands are auto-approved because they already run in a controlled environment. + +Enable it with `setting(chat.agent.sandbox.enabled)`. On macOS and Linux, you can choose full isolation or file system isolation with network access. + +Sandboxing is a good fit for tasks that need terminal access but should not reach beyond the workspace or approved domains. + +## Why this matters + +The right tool mix keeps agents focused. A smaller set reduces noise, while approvals and sandboxing help you keep control when the agent can make changes or reach outside the workspace. + +## What's next + +Now that you know how to use tools, the next course shows how MCP servers add external data and actions to an agent session. + +## Learn more + +* [Use tools with agents](https://code.visualstudio.com/docs/copilot/agents/agent-tools) +* [Tools concepts](https://code.visualstudio.com/docs/copilot/concepts/tools) +* [Agent sandboxing](https://code.visualstudio.com/docs/copilot/concepts/trust-and-safety#agent-sandboxing) +* [Agent approvals and permissions](https://code.visualstudio.com/docs/copilot/agents/agent-tools#permission-levels) diff --git a/learn/agents/2-extending-agents-with-mcp-servers.md b/learn/agents/2-extending-agents-with-mcp-servers.md new file mode 100644 index 00000000000..55b9f1449e1 --- /dev/null +++ b/learn/agents/2-extending-agents-with-mcp-servers.md @@ -0,0 +1,114 @@ +--- +ContentId: 7a2e1d9c-4b8f-4a3d-8e0c-2f5d6b7c8a02 +DateApproved: 05/21/2026 +MetaDescription: Learn how MCP servers extend agents in VS Code with tools, resources, prompts, and apps. +MetaSocialImage: ../images/shared/agent-first-development-social.png +Keywords: + - mcp + - model context protocol + - agents + - tools + - api + - customization +--- + +# Extending agents with MCP servers + +MCP servers connect agents to external tools and data sources. In VS Code, they extend an agent with capabilities such as file operations, database access, API calls, resources, and prompts. + +This course shows how to install an MCP server, configure it in your workspace or user profile, secure it with sandboxing, and manage it from VS Code. + +## Prerequisites + +Before you start: you'll need VS Code Insiders installed and the GitHub Copilot and GitHub Copilot Chat extensions set up and signed in. You also need access to an MCP server or the ability to add one from the marketplace. + +* [Download VS Code](https://code.visualstudio.com/) +* [Set up GitHub Copilot in VS Code](https://code.visualstudio.com/docs/copilot/overview#_step-1-set-up-copilot) + +## What MCP adds + +[Model Context Protocol](https://modelcontextprotocol.io/) is an open standard maintained by the Linux Foundation, and VS Code has full spec support. Think of MCP as the connector between agents and the external tools, data, and prompts they need. + +MCP is built around three primitives: + +* **Tools**: actions the agent can invoke. +* **Resources**: context the agent can read. +* **Prompts**: reusable prompt templates that standardize interactions. + +Servers can also expose interactive UI through MCP Apps, which render forms or visualizations inline in chat. + +## Install an MCP server + +Use the Extensions view and search for `@mcp` to browse the MCP server gallery. From there, you can install a server in your user profile or in your workspace. + +When you install a server, VS Code writes the configuration into `mcp.json` and discovers the server's tools for use in chat. + +![Screenshot showing the MCP servers in the Extensions view.](../../docs/copilot/images/mcp-servers/extensions-view-mcp-servers.png) + +## Configure MCP servers + +There are two common configuration scopes: + +* **Workspace**: `.vscode/mcp.json` +* **User profile**: the user-level `mcp.json` file + +Use workspace configuration when you want a server tied to a project. Use user profile configuration when you want the server available across workspaces. + +You can also add a server through **MCP: Add Server** or open the user configuration with **MCP: Open User Configuration**. For servers that need credentials, store them in inputs in the user `mcp.json` so secrets are not committed to the workspace. + +> [!TIP] +> VS Code provides IntelliSense and inline actions for `mcp.json`, which makes it easier to start, stop, and inspect servers. + +![MCP server configuration with lenses to manage server.](../../docs/copilot/images/mcp-servers/mcp-server-config-lenses.png) + +## Use an MCP server in chat + +Once a server is installed and enabled, open Chat, switch to **Agent**, and select the server's tools in the tools picker. + +The agent can then call the server's tools when your prompt needs external context or actions. For example, with the Microsoft Learn MCP server enabled, a prompt like "What are the Microsoft Python best practices?" grounds the answer in official documentation by calling the server's tools. + +![Screenshot showing an MCP tool invocation in chat with the input and output shown.](../../docs/copilot/images/mcp-servers/chat-agent-mode-tool-invocation.png) + +## Secure MCP servers + +Treat local MCP servers as code that can run on your machine. Review the publisher and configuration before you install one. + +By default, MCP tool calls prompt for approval before running, which keeps a human in the loop. For local stdio servers on macOS and Linux, you can enable sandboxing to restrict file system and network access. Sandboxed servers are auto-approved because they already run in a controlled environment. + +For example, with the Playwright MCP server, enabling sandboxing lets the agent navigate pages and run browser tasks without prompting on every step, because the work is isolated from your host. + +If a server needs more access, update the sandbox rules instead of widening access for the whole machine. + +![Screenshot showing the MCP server trust prompt.](../../docs/copilot/images/mcp-servers/mcp-server-trust-dialog.png) + +## Manage MCP servers + +You can manage servers from several places in VS Code: + +* The Extensions view. +* The `mcp.json` editor. +* The Command Palette, including **MCP: List Servers**. +* The Agent Customizations view from the cog in the Chat view. + +Use these surfaces to start or stop a server, browse the marketplace, and install additional servers. + +![Screenshot showing the actions for an MCP server in the Command Palette.](../../docs/copilot/images/mcp-servers/mcp-list-servers-actions.png) + +To debug a server, select **Show Output** from the server's actions to see logs from every request the server handles. + +![Screenshot showing the MCP server output panel with logs.](../../docs/copilot/images/mcp-servers/mcp-server-error-output.png) + +## Why this matters + +MCP gives agents a standard way to reach outside the model and work with the systems you already use. That means less ad hoc prompting and more repeatable workflows. + +## What's next + +Next, you will see how agent plugins package skills, agents, hooks, and MCP servers into a single installable bundle. + +## Learn more + +* [Add and manage MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) +* [MCP configuration reference](https://code.visualstudio.com/docs/copilot/reference/mcp-configuration) +* [MCP sandbox configuration](https://code.visualstudio.com/docs/copilot/reference/mcp-configuration#sandbox-configuration) +* [Use tools with agents](https://code.visualstudio.com/docs/copilot/agents/agent-tools) diff --git a/learn/agents/3-agent-plugins.md b/learn/agents/3-agent-plugins.md new file mode 100644 index 00000000000..ea124260dca --- /dev/null +++ b/learn/agents/3-agent-plugins.md @@ -0,0 +1,115 @@ +--- +ContentId: 9c8b7a6d-5e4f-4c3b-9a2d-1f0e2d3c4b05 +DateApproved: 05/21/2026 +MetaDescription: Learn how agent plugins bundle commands, skills, agents, hooks, and MCP servers in VS Code. +MetaSocialImage: ../images/shared/agent-first-development-social.png +Keywords: + - plugins + - agents + - skills + - hooks + - mcp + - customization +--- + +# Agent plugins + +Agent plugins bundle multiple customizations into one installable package. Instead of setting up each capability separately, you can install a plugin that brings commands, skills, custom agents, hooks, and MCP servers into VS Code together. + +This course shows how to install plugins, browse available collections, use plugin-provided tools, and share recommended plugins with your team. + +## Prerequisites + +Before you start: you'll need VS Code Insiders installed and the GitHub Copilot and GitHub Copilot Chat extensions set up and signed in. Then enable support for agent plugins in your settings. + +* [Download VS Code](https://code.visualstudio.com/) +* [Set up GitHub Copilot in VS Code](https://code.visualstudio.com/docs/copilot/overview#_step-1-set-up-copilot) + +## What plugins provide + +A plugin can include any combination of: + +* Slash commands +* Agent skills +* Custom agents +* Hooks +* MCP servers + +That makes plugins useful for sharing a team workflow or adopting a prebuilt package of agent behavior. + +## Install and manage plugins + +Agent plugins are currently in preview. Enable them with `setting(chat.plugins.enabled)` in your user settings before you can install or browse plugins. + +By default, VS Code discovers plugins from the [copilot-plugins](https://github.com/github/copilot-plugins) and [awesome-copilot](https://github.com/github/awesome-copilot/) marketplaces. You can add more with `setting(chat.plugins.marketplaces)`. + +Open the **Agent Customizations** view from the cog in the Chat view, then select **Plugins** in the left menu to browse available plugins. + +From there, you can: + +* Browse the marketplace. +* Install a plugin from source. +* Create your own plugin. +* Review which customizations are already installed. + +After installation, the plugin's customizations appear alongside your local ones in the **Agent Plugins - Installed** section of the Extensions view. + +![Screenshot of browsing agent plugins in the Extensions sidebar.](../../docs/copilot/images/agent-plugins/extensions-view.png) + +![Screenshot of the Agent Plugins - Installed view in the Extensions view.](../../docs/copilot/images/agent-plugins/installed-plugins.png) + +## Use plugin-provided customizations + +Plugins can expose custom agents, skills, and MCP servers all in one place. In chat, you can invoke plugin content with slash commands or by selecting the relevant customization from the picker. + +For example, after installing the awesome-copilot plugin, you can run `/awesome-copilot:suggest` to have the plugin look across your project and recommend related collections you can install next. + +That makes plugins useful when you want a single install to add a complete workflow, such as a testing package that includes a testing skill, a review agent, and an MCP server for reporting. + +![Screenshot of the Agent Customizations editor showing installed plugin content.](../../docs/copilot/images/customization/chat-customizations-editor-plugins.png) + +> [!CAUTION] +> Plugins can run hooks and MCP servers on your machine. Review the contents and publisher before you install one. + +## Plugin structure + +Plugins are defined by a `plugin.json` manifest and can point to folders for skills, agents, hooks, and MCP server definitions. The plugin format is shared between VS Code, GitHub Copilot CLI, and Claude Code, so a single plugin repository can work across all three tools. + +## Share recommended plugins + +To share a curated set of plugins with your team, add an `extraKnownMarketplaces` and `enabledPlugins` block to your project's `.github/copilot/settings.json` (or `.claude/settings.json`) file and commit it. + +```json +{ + "extraKnownMarketplaces": { + "company-tools": { + "source": { + "source": "github", + "repo": "your-org/plugin-marketplace" + } + } + }, + "enabledPlugins": { + "code-formatter@company-tools": true + } +} +``` + +Use this approach when you want consistent tooling across a team without forcing a plugin into every workspace. VS Code shows a notification the first time a chat message is sent, and team members can also view the recommended plugins from the Extensions view with the `@agentPlugins @recommended` filter. + +## Why this matters + +Plugins turn a set of related customizations into one package. That makes it easier to share a workflow, install a collection once, and keep teammates aligned on the same agent behavior. + +## What's next + +The last course in this series shows how to use third-party agents like Claude and Codex without leaving VS Code. + +## Learn more + +* [Agent plugins in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-plugins) +* [Customize AI in Visual Studio Code](https://code.visualstudio.com/docs/copilot/concepts/customization) +* [Use agent skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +* [Use custom agents in VS Code](https://code.visualstudio.com/docs/copilot/customization/custom-agents) +* [Use hooks in VS Code](https://code.visualstudio.com/docs/copilot/customization/hooks) +* [Add and manage MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) diff --git a/learn/agents/4-using-third-party-agents-in-vs-code.md b/learn/agents/4-using-third-party-agents-in-vs-code.md new file mode 100644 index 00000000000..d04829c0f72 --- /dev/null +++ b/learn/agents/4-using-third-party-agents-in-vs-code.md @@ -0,0 +1,102 @@ +--- +ContentId: 1e2d3c4b-5a6f-4d7e-8c9b-0a1b2c3d4e06 +DateApproved: 05/21/2026 +MetaDescription: Learn how to use third-party agents like Claude and Codex in VS Code with your GitHub Copilot subscription. +MetaSocialImage: ../images/shared/agent-first-development-social.png +Keywords: + - third-party agents + - claude + - codex + - agents + - copilot + - preview +--- + +# Using third-party agents in VS Code + +Third-party agents let you use provider-specific agent experiences inside VS Code while keeping your work in the same editor and session flow. This course introduces the available agent types, how to start a session, and what to watch for when you use them. + +## Prerequisites + +Before you start: you'll need VS Code Insiders installed and the GitHub Copilot and GitHub Copilot Chat extensions set up and signed in. For cloud partner agents, make sure they are enabled in your GitHub Copilot settings. For Codex, install the OpenAI Codex extension. + +* [Download VS Code](https://code.visualstudio.com/) +* [Set up GitHub Copilot in VS Code](https://code.visualstudio.com/docs/copilot/overview#_step-1-set-up-copilot) + +## What third-party agents are + +Third-party agents come from providers such as Anthropic and OpenAI. They use the provider's SDK and agent harness, and they can work locally or in the cloud depending on the provider and your Copilot setup. + +Cloud-based third-party agents are currently in preview. + +## Why use them + +Third-party agents let you keep your workflow in VS Code while using provider-specific capabilities. That gives you: + +* The provider's agent behavior and SDK. +* A single chat experience inside the editor. +* The ability to debug, test, and code without switching tools. + +## Start a session + +Open the Chat view, select **New Chat**, and choose the agent type from the **Session Type** dropdown. + +For cloud sessions, first select **Cloud**, then choose the partner agent from the **Partner Agent** dropdown. + +![Screenshot showing session type dropdown with Claude agent option selected.](../../docs/copilot/images/third-party-agents/claude-agent-new-chat-1.121.png) + +For Codex, install the [OpenAI Codex](https://marketplace.visualstudio.com/items?itemName=openai.chatgpt) extension first. You can then open the Codex view from its activity bar icon or switch to the **Codex** tab in the Chat view. + +## Claude agent slash commands + +Inside a Claude session, type `/` in the chat input to see the available commands. + +| Slash command | Description | +|---------------|-------------| +| `/agents` | Wizard for creating and managing Claude sub-agents. | +| `/hooks` | Configure lifecycle hooks that run at key points during a session. | +| `/memory` | Open and edit the `CLAUDE.md` memory file used across sessions. | +| `/init` | Initialize a new `CLAUDE.md` memory file for the project. | +| `/review` | Review code changes in a pull request. | +| `/security-review` | Run a security review on pending changes. | + +## Enable cloud partner agents + +Before you can use cloud partner agents, enable third-party coding agents for your GitHub Copilot account by following the GitHub documentation. + +After third-party coding agents are enabled for your account, return to VS Code and start a session with Claude or Codex from the chat agent picker. + +## Choose the right permission mode + +Claude agent runs with one of three permission modes that you can pick from the chat input: + +* **Edit automatically**: Claude makes workspace changes autonomously as it works. +* **Request approval**: Claude asks for your review before making changes. +* **Plan**: Claude outlines its intended approach before starting work. + +Pick the mode that matches the task and your risk tolerance. For sensitive work, keep approval in the loop and combine the agent with sandboxing when possible. + +![Screenshot showing Claude agent permission mode options.](../../docs/copilot/images/third-party-agents/claude-agent-permission-modes.png) + +> [!CAUTION] +> The `setting(github.copilot.chat.claudeAgent.allowDangerouslySkipPermissions)` setting bypasses all permission checks. Only enable it in isolated sandbox environments with no internet access. + +## Learn more about Claude and Codex + +Claude sessions use Anthropic's Claude Agent SDK and are available through your Copilot subscription. Codex sessions use the OpenAI Codex extension and authenticate with a Copilot Pro+ subscription, with no extra setup required. + +Use either provider when you want to stay in VS Code and still take advantage of a third-party agent's own model and harness. + +## Why this matters + +Third-party agents let you keep your coding workflow in one place while still using provider-specific capabilities. That reduces context switching and keeps debugging, testing, and editing inside VS Code. + +## What's next + +You now have the four course topics covered. The next step is to fill in each page with the final transcript details, screenshots, and video embeds. + +## Learn more + +* [Third-party agents in Visual Studio Code](https://code.visualstudio.com/docs/copilot/agents/third-party-agents) +* [Agents overview](https://code.visualstudio.com/docs/copilot/agents/overview) +* [Security considerations](https://code.visualstudio.com/docs/copilot/security) diff --git a/learn/toc.json b/learn/toc.json index 302d3f8778b..38995ea2433 100644 --- a/learn/toc.json +++ b/learn/toc.json @@ -26,5 +26,16 @@ ["Customization Features Explained", "/learn/customizations/7-customization-features-explained"], ["Customization Features In Practice", "/learn/customizations/8-demo"] ] + }, + { + "name": "Agents", + "area": "agents", + "description": "Learn how to use tools, MCP servers, plugins, and third-party agents to extend agent workflows in VS Code.", + "topics": [ + ["Using tools with agents", "/learn/agents/1-using-tools-with-agents"], + ["Extending agents with MCP servers", "/learn/agents/2-extending-agents-with-mcp-servers"], + ["Agent plugins", "/learn/agents/3-agent-plugins"], + ["Using third-party agents in VS Code", "/learn/agents/4-using-third-party-agents-in-vs-code"] + ] } ]