Merge pull request #5953 from ms-johnalex/aif-vsc-upd-070925

AI Foundry VS Code extension July 3 update

Author: JamesJBarnett

articles/ai-foundry/how-to/develop/get-started-projects-vs-code.md

@@ -8,7 +8,7 @@ content_well_notification:
   - AI-contribution
 ai-usage: ai-assisted
 ms.topic: how-to
-ms.date: 05/20/2025
+ms.date: 07/10/2025
 ms.reviewer: erichen
 ms.author: johalexander
 author: ms-johnalex

articles/ai-foundry/how-to/develop/vs-code-agents.md

@@ -8,7 +8,7 @@ content_well_notification:
   - AI-contribution
 ai-usage: ai-assisted
 ms.topic: how-to
-ms.date: 05/07/2025
+ms.date: 07/10/2025
 ms.reviewer: erichen
 ms.author: johalexander
 author: ms-johnalex
@@ -42,12 +42,6 @@ Follow these steps to create an Azure AI Agent:
 
      :::image type="content" source="../../media/how-to/get-started-projects-vs-code/select-agent-plus.png" alt-text="Screenshot of the plus sign next to the Agents subsection.":::
 
-1. In the **Save As** dialog box, select a directory and enter a name for your new AI Agent .yaml file. 
-
-1. Select the **Save Agent File** button to save your AI Agent file.
-
-     :::image type="content" source="../../media/how-to/get-started-projects-vs-code/enter-agent-name.png" alt-text="Screenshot of the VS Code Save As dialog to save the agent yaml file." lightbox="../../media/how-to/get-started-projects-vs-code/enter-agent-name.png":::
-
 ### Interact with your agent in the designer
 
 After you choose your save location, both the agent .yaml file and the Designer view will open to edit your AI Agent.
@@ -56,11 +50,7 @@ After you choose your save location, both the agent .yaml file and the Designer
 
     1. Enter a name for your agent in the prompt.
 
-    1. Enter your model deployment name. The deployment name you chose when you deployed an existing model.
-
-        > [!TIP]
-        > The model deployment name must be the exact name you chose for the model you deployed in your Azure AI Foundry project. In the following image, `gpt-4o-1` is the model deployment name you chose at deployment. `gpt-4o` is the model name. 
-        >  :::image type="content" source="../../media/how-to/get-started-projects-vs-code/deployment-model-name.png" alt-text="Screenshot of the highlighted deployment model names, an arrow between them, and the model name highlighted in a different color." lightbox="../../media/how-to/get-started-projects-vs-code/deployment-model-name.png":::
+    1. Select your model deployment name from the dropdown. The deployment name is what you chose when you deployed an existing model.
 
     1. Configure the following fields. The **ID** is generated by the extension:
 
@@ -115,7 +105,7 @@ The following tools are available:
   - [Microsoft Fabric](/azure/ai-services/agents/how-to/tools/fabric?pivots=portal)
 
 - Action tools:
- - [Azure AI Agents function calling](/azure/ai-services/agents/how-to/tools/function-calling?pivots=python)
+  - [Azure AI Agents function calling](/azure/ai-services/agents/how-to/tools/function-calling?pivots=python)
 
 Azure AI Foundry Agent Service has a set of knowledge and action tools that you can use to interact with your data sources, such as:
  - [Grounding with Bing search](/azure/ai-services/agents/how-to/tools/bing-grounding?tabs=python&pivots=overview)
@@ -156,7 +146,7 @@ Create a tool configuration .yaml file using the following steps:
 
 Add a tool to the AI Agent with the following steps:
 
-1. Select the **+** (plus) icon next to the **TOOL** section in the designer.
+1. Select the **Add tool** button in the top-right corner of the **TOOL** section in the designer to show the dropdown. Choose the tool you want to add.
 
     :::image type="content" source="../../media/how-to/get-started-projects-vs-code/agent-tool-plus.png" alt-text="Screenshot of the Agent designer TOOL section with the plus icon highlighted." lightbox="../../media/how-to/get-started-projects-vs-code/agent-tool-plus.png":::
 
@@ -168,14 +158,14 @@ Add a tool to the AI Agent with the following steps:
 
     :::image type="content" source="../../media/how-to/get-started-projects-vs-code/agent-added-tool.png" alt-text="Screenshot of the Agent designer TOOL section with the new tool highlighted." lightbox="../../media/how-to/get-started-projects-vs-code/agent-added-tool.png":::
 
-1. To save the .yaml file, select **File** > **Save** in the VS Code menu bar.
+1. To save the tool .yaml file, select **File** > **Save** in the VS Code menu bar.
 
 
-###    Deploy Azure AI Agents to the Azure AI Foundry Studio
+###    Create Azure AI Agents on the Azure AI Foundry Studio
 
-Deploy your agent directly to Azure AI Foundry with the following steps:
+Create your agent directly on Azure AI Foundry with the following steps:
 
-1.  Select the **Deploy to Azure AI Foundry** button in the bottom-left of the designer.
+1.  Select the **Create on Azure AI Foundry** button in the bottom-left of the designer.
 
     :::image type="content" source="../../media/how-to/get-started-projects-vs-code/agent-deploy.png" alt-text="Screenshot of the Agent designer with the 'Deploy to Azure AI Foundry' button highlighted." lightbox="../../media/how-to/get-started-projects-vs-code/agent-deploy.png":::
 
@@ -187,11 +177,44 @@ Deploy your agent directly to Azure AI Foundry with the following steps:
 
 Selecting the deployed agent opens the **Agent Preferences** page in a view only mode.  
 
-- Select the **Open Yaml File** to view the yaml definition of the agent. 
-
+- Select the **Edit Agent** button to view the Agent designer and yaml definition of the agent for editing. 
+- Select the **Open Code File** button to create a sample code file that uses the agent. 
 - Select the **Open Playground** button to open the **Agent Playground**.
 
-    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/deployed-agent-view.png" alt-text="Screenshot of the Agent Preferences page with the 'Open Yaml File' and 'Open Playground' buttons highlighted." lightbox="../../media/how-to/get-started-projects-vs-code/deployed-agent-view.png":::
+    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/deployed-agent-view.png" alt-text="Screenshot of the Agent Preferences page with the 'Edit Agent', 'Open Code File', and 'Open Playground' buttons highlighted." lightbox="../../media/how-to/get-started-projects-vs-code/deployed-agent-view.png":::
+
+### Edit and update the deployed AI Agent
+
+To edit the deployed agent, select the **Edit Agent** button in the **Agent Preferences** page. The agent designer opens with the agent .yaml file.
+Edit the agent's configuration, such as the model, tools, and instructions. After you finish editing, select the **Update on Azure AI Foundry** button in the lower left corner to save your changes.
+
+:::image type="content" source="../../media/how-to/get-started-projects-vs-code/update-agent.png" alt-text="Screenshot of the Agent Preferences page with the 'Update on Azure AI Foundry' button highlighted." lightbox="../../media/how-to/get-started-projects-vs-code/update-agent.png":::
+
+### Explore the agent sample code
+
+Create a sample code file using the following steps.
+
+1. Right-click on your deployed agent and select the **Open Code File** option or select the **Open Code File** button in the **Agent Preferences** page.
+
+    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/open-agent-code-file.png" alt-text="Screenshot of the agent context menu with the Open Code file option highlighted." lightbox="../../media/how-to/get-started-projects-vs-code/open-agent-code-file.png":::
+
+1. In the top center, select your preferred SDK to use in the **Choose preferred SDK** dropdown and press Enter.
+
+    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/choose-agent-preferred-sdk.png" alt-text="Screenshot of the Choose preferred SDK dropdown for agent code file selection." lightbox="../../media/how-to/get-started-projects-vs-code/choose-agent-preferred-sdk.png":::
+
+1. In the top center, select your preferred language to use in the **Choose language** dropdown and press Enter.
+
+    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/choose-agent-language.png" alt-text="Screenshot of the Choose language dropdown for agent code file selection." lightbox="../../media/how-to/get-started-projects-vs-code/choose-agent-language.png":::
+
+1. In the top center, select your preferred authentication method to use in the **Choose auth method** dropdown and press Enter.
+
+    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/choose-agent-authn-method.png" alt-text="Screenshot of the Choose authentication method dropdown for agent code file selection." lightbox="../../media/how-to/get-started-projects-vs-code/choose-agent-authn-method.png":::
+
+#### Explore the sample code file
+
+This Python sample code file that demonstrates a basic call to interact with the agent through the AI Foundry projects API: 
+
+:::image type="content" source="../../media/how-to/get-started-projects-vs-code/sample-agent-code-file.png" alt-text="Screenshot of generated agent sample code file." lightbox="../../media/how-to/get-started-projects-vs-code/sample-agent-code-file.png":::
 
 
 ### Interact with Agents using agents playground
@@ -204,7 +227,7 @@ Open the **Agents Playground** using the following steps:
 
 1. The **Playground** page is displayed.
 
-    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/agent-display-playground.png" alt-text="Screenshot of the **Agents Playground** page in VS Code." lightbox="../../media/how-to/get-started-projects-vs-code/agent-display-playground.png":::
+    :::image type="content" source="../../media/how-to/get-started-projects-vs-code/agent-display-playground.png" alt-text="Screenshot of the **Agents Playground** VS Code page." lightbox="../../media/how-to/get-started-projects-vs-code/agent-display-playground.png":::
 
 1. Type your prompt and see the outputs. The **Grounding with Bing search** tool is used to search the web for information. The agent uses the model and tools you configured in the agent designer. The source of the information is displayed in the **Agent Annotations** section, highlighted in the following image.