{"id":817,"date":"2025-05-28T12:01:04","date_gmt":"2025-05-28T19:01:04","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/foundry\/?p=817"},"modified":"2025-05-29T14:01:21","modified_gmt":"2025-05-29T21:01:21","slug":"open-in-vscode","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/foundry\/open-in-vscode\/","title":{"rendered":"Code quicker with Azure AI Foundry playgrounds and Visual Studio Code"},"content":{"rendered":"

In today’s development cycle, speed and clarity are everything<\/strong>. As you create with the latest state-of-the-art agents and models, Azure AI Foundry playgrounds are your on-demand, low-friction environment. Designed for rapid prototyping, API exploration, and technical validation, <\/strong>think of the Foundry playground as your technical sketchpad.<\/strong><\/p>\n

Modern development involves working across multiple systems\u2014APIs, services, SDKs, and data models\u2014often before you\u2019re ready to fully commit to a framework, write tests, or spin up infrastructure. As the complexity of software ecosystems increases, the need for safe<\/strong>, lightweight<\/strong> environments to validate<\/strong> ideas becomes critical. Azure AI Foundry playgrounds were built to meet this experimentation<\/strong> need. Instead of having to configure a project, import dependencies, or worry about compatibility, the playgrounds is a live environment with preloaded tooling, native API support, and powerful features like code generation, chain of thought summary, and parameter tuning.<\/p>\n

Port from playground to VS Code quicker<\/h3>\n

At Microsoft Build 2025<\/a>, as part of the Azure AI Foundry extension for Visual Studio Code,<\/a> we announced the \u201cOpen in VS Code\u201d<\/strong> workflow. Available in chat<\/strong> and agents<\/strong> playground<\/strong> code samples<\/strong> in Azure AI Foundry, Open in VS Code is here to remove friction as you get to code quicker.<\/p>\n

\n
\"image<\/a><\/div>\n

In one click<\/strong>, your agent or model API endpoint, key and code sample from Azure AI Foundry will be automatically imported<\/strong> into a new workspace in VS Code for Web through the Azure AI Foundry VS Code extension.<\/p>\n

Once in VS Code, the agent or model can be run locally<\/strong> \u2013 and using `azd` commands<\/strong>, you\u2019re able to add<\/strong>, provision,<\/strong> and deploy<\/strong> a web app<\/strong> that uses the agent or model. Finally, you can continue to on Desktop in 1 click that clones the workspace structure to GitHub for VS Code or GitHub Desktop experiences. Open in VS Code is here to accelerate developer velocity across your generative AI workflow across Azure AI Foundry, VS Code, and GitHub. No more multiple back and forth flows, one click to get started building quicker.<\/p>\n

Let\u2019s see how this works with a step-by-step guide.<\/p>\n

Open in VS Code walkthrough<\/h3>\n
    \n
  1. From the Azure AI Foundry portal<\/a><\/strong>, select the best model for your use case, including o3, o4-mini, or MAI-DS-R1 from Foundry Models<\/strong>. In this case, we\u2019ll use gpt-4o-mini as an example model for an agent workflow.\n
    \"Azure<\/a><\/div>\n<\/li>\n
  2. Provision the model endpoint from the gpt-4o-mini model card<\/strong>.\n\"image<\/a><\/li>\n
  3. Arrive in the agents playground<\/strong>, alter generation controls like max responses and past messages. Add knowledge, tools, and actions.\n<\/strong><\/strong>\"image<\/a><\/li>\n
  4. Iterate<\/strong> on your sample prompt and continue experimentation<\/strong> in the agents playground.<\/li>\n
  5. Once happy, click the View Code button<\/strong> to see the contextual code sample for your interaction with the agent in the agents playground.\n\"image<\/a>\nThere, you can see multi-lingual code samples<\/strong> in Python, C#, and JavaScript for agents and with the inclusion of JSON, cURL, JavaScript, C#, and Go for models Entra ID can be used to authenticate agents with “Key Authorization” now available for models.\"image<\/a><\/li>\n
  6. When ready, click Open in VS Code<\/strong> and be redirected to the \/azure environment of VS Code for Web<\/strong>.\n\"image<\/a><\/p>\n
      \n
    1. You\u2019ll notice that as the environment is set-up, the code sample, API endpoint, and key are automatically imported into a new VS Code for Web workspace<\/strong>.\n\"image<\/a><\/li>\n
    2. In the bottom right corner, you\u2019ll see that the API key<\/strong> is set<\/strong> in the t<\/strong><\/span>erminal\u2019s environment variables<\/strong> and that the sample code has been downloaded successfully.\n\"Screenshot<\/a><\/li>\n<\/ol>\n<\/li>\n
    3. In the Instructions README<\/strong>, you can browse the files automatically created with the one click of Open in VS Code.\n
      \"Azure<\/a><\/div>\n

      These files include:<\/p>\n

        \n
      1. Environment variables such as subscription ID, connection string, and endpoint. Bash script to install dependencies.\n
        \"Environment<\/a><\/div>\n<\/li>\n
      2. Requirements txt file.\n
        \"Requirements<\/a><\/div>\n<\/li>\n
      3. `agent_run.py` file which contains the code sample for your agent.\n
        \"agent_run.py<\/a><\/div>\n<\/li>\n<\/ol>\n<\/li>\n
      4. Run the model locally<\/strong> via the terminal through `python agent_run.py`. Within seconds, you\u2019ll see a successful model response.<\/li>\n
      5. Use `azd` commands<\/strong> to provision<\/strong> and deploy<\/strong> a web app that uses the agent<\/strong>.\n
          \n
        1. The `azd init` command<\/strong> initializes the git repo which creates a default Azure workspace where the agent can be used in an application.\n\"Screenshot<\/a><\/li>\n
        2. The `azd up`<\/strong> command provisions the relevant Azure resources for the web app and deploys the app code.\n\"Screenshot<\/a><\/li>\n
        3. Once deployed to Azure, `azd show`<\/strong> will enable you to see your Azure services and the web application running on due to this Azure samples repo.<\/li>\n<\/ol>\n<\/li>\n
        4. Continue in VS Code Desktop or GitHub Desktop<\/strong> by clicking on \u201cContinue on Desktop\u201d<\/strong> in the bottom left corner. This will publish the workspace structure to a GitHub repository so that you can continue in VS Code Desktop or in a fully setup dev container.\n
          \"VS<\/div>\n<\/li>\n<\/ol>\n

          How to get started with Open in VS Code<\/h3>\n
            \n
          1. Sign-in or sign-up to\u00a0Azure AI Foundry<\/a>.<\/li>\n
          2. Create a Foundry Hub and\/or Project.<\/li>\n
          3. Create a model deployment for\u00a0o4-mini, o3, gpt-4.1 from Foundry Models, or directly from the chat and agents playgrounds.<\/li>\n
          4. Click \u201cOpen in VS Code\u201d in the code samples and follow the walkthrough above.<\/li>\n<\/ol>\n

            Create with Azure AI Foundry<\/h3>\n