🤖 Quest: I want to build an AI Agent

To reset your progress and select a different quest, click this button:

📋 Pre-requisites

1. A GitHub account
2. Visual Studio Code installed
3. Node.js installed
4. An Azure subscription. Use the free trial if you don't have one, or Azure for Students if you are a student.
5. Azure Developer CLI installed

📝 Overview

In this step, you will learn how to build a basic AI agent using the AI Foundry VS Code extension. An AI agent is a program powered by AI models that can understand instructions, make decisions, and perform tasks autonomously.

Assumption ⚠️

This step assumes you have already completed previous steps and that you have the Azure AI Foundry VS Code extension installed with a default project set up. If you haven't done so, please click the Reset Progress button above and start from the Move AI prototype to Azure quest.

Important

If you have done the previous quest, ensure you pull your changes from GitHub using git pull before continuing with this project to update the project README.

Step 1️⃣: Create an Agent

‼️IMPORTANT NOTE

Currently, agents are only supported in the following regions: australiaeast, centraluseuap, eastus, eastus2, francecentral, japaneast, norwayeast, southindia, swedencentral, uksouth, westus, westus3

At a later stage, you will add bing grounding to your agent, a service that works with all Azure OpenAI models except gpt-4o-mini, 2024-07-18. We therefore recommend using the gpt-4o model for this quest.

If you used a different region, please create a new Azure AI Foundry project, (On the AI Foundry portal), in one of the supported regions and deploy a model, (gpt-4o), there.

‼️END OF NOTE

1. Update your working directory

   Create a new folder called agent in the packages directory of your project. This folder will contain the configuration files for your agent.

2. Create & configure an Agent

   Click on the AI Foundry icon in the Activity Bar. Under resources, ensure your default AI Foundry project is selected. Hover over the "Agents" section title and click the "+" (Create Agent) icon that appears.

   

   You'll be prompted to save the agent's configuration file. Assign the name my-agent.agent.yaml and save the file in the agents folder you created earlier. Once saved, the yaml file and the Agent Designer will open for you to configure your agent.

   On the Agent Designer,

   • Give your agent a name. i.e my-agent

   • Enter a foundation model for your agent from your model list. This model will power the agent's core reasoning and language capabilities. Example. gpt-4o

   • System instructions for your agent. This tells the agent how it should behave. Enter the following:

     You are a helpful agent who loves emojis 😊. Be friendly and concise in your responses.
     

   • Parameters, i.e temparature: 0.7

   The yaml configuration file should look like this:

   version: 1.0.0
   name: my-agent
   description: Description of the agent
   id: ''
   model:
     id: gpt-4o
     options:
       temperature: 0.7
       top_p: 1
   instructions: >-
     You are a helpful agent who loves emojis 😊. Be friendly and concise in your
     responses.
   tools: [] # We'll add tools later

3. Deploy Agent

   Click on the Deploy to Azure AI Foundry button in the Agent Designer to deploy your agent to Azure AI Foundry Once created, the agent will pop up in the AI Foundry extension under the "Agents" section.

   

Step 2️⃣: Test the Agent in the Playground

Now that you've created and deployed your agent, you can test it in the Playground - an interface that allows you to interact with your agent and see how it responds to different inputs.

1. Open the Playground

   Right-click on the agent you just created in the "Agents" section and select Open Playground. Alternatively, you can expand the "Tools" section and click on "Agent Playground", then select your agent from the list.

   

2. Test the Agent

   In the Playground, you can start chatting with your agent. Try sending it a few messages to see how it responds. For example:

   • "Hi there!"

   • Expect a friendly response with emojis 😎.

     

   • Then, try a prompt like "What's the weather in Nairobi right now?"

   • Expect a response like "I can't check live weather, but you can check a weather website for the latest updates! 🌤️"

     

The agent currently has limitations including not being able to access real-time information or perform specific tasks. It can only respond based on the instructions and the model's knowledge.

So in the next step, we will add a tool to the agent to make it more useful.

Step 3️⃣: Add a Tool to the Agent

Tools calling is a powerful feature that allows your agent to perform specific tasks or access external data. In this step, we will add a tool to our agent that can use Bing Search to fetch real-time information. This will enable the agent to provide more accurate and up-to-date responses.

Create a Bing Search resource

1. On the Azure portal, create a bing resource (Grounding with Bing Search). Follow the prompts to create the resource.

2. Open the AI Foundry portal, navigate to the left navigation menu towards the bottom, select Management center.

   

3. In the Connected resources section, select + New connection.

4. In the Add a connection to external assets window, scroll to the Knowledge section and select Grounding with Bing Search.

5. In the Connect a Grounding with Bing Search Account window, select Add connection next to your Grounding with Bing resource.

   

6. Once connected, click close

Prepare the Bing Grounding tool YAML

Back on Visual Studio Code, create a tool configuration .yaml file called bing.yaml in the same directory as your agent configuration file (the agent folder). Paste in the following into the bing.yaml file:

type: bing_grounding
id: bing_search
options:
  tool_connections:
    - /subscriptions/<subscription_ID>/resourceGroups/<resource_group_name>/providers/Microsoft.MachineLearningServices/workspaces/<project_name>/connections/<bing_grounding_connection_name>

Replace the placeholders in the connection string under the tool_connections section with your information:

• subscription_ID = Your Azure Subscription ID
• resource_group_name = Your Resource Group name
• project_name = Your Project name on AI Foundry
• bing_grounding_connection_name = The connection name NOT the bing resource name

Save the bing.yaml file.

On the Agent Designer, click on the + icon next to the "Tools" section. This will prompt you to select a yaml file for the tool. Select the bing.yaml file you created earlier. Click on Update Agent on Azure AI Foundry to update your agent with the new tool to Azure AI Foundry.

Now that we have added the Bing Search API tool to our agent, we can test it in the Playground. Open the "Agent Playground" and send the agent a message like "What's the weather in Nairobi right now?" The agent should use the Bing Search API tool to fetch the current weather information and respond with a friendly message.

✅ Activity: Push your updated code to the repository - TBD

Quest Checklist

To complete this quest and AUTOMATICALLY UPDATE your progress, you MUST push your code to the repository as described below.

Checklist

• Have a agent folder in the packages directory

1. In the terminal, run the following commands to add, commit, and push your changes to the repository:

   git add .
   git commit -m "Added agent"
   git push

2. After pushing your changes, WAIT ABOUT 15 SECONDS FOR GITHUB ACTIONS TO UPDATE YOUR README.

To skip this quest and select a different one, click this button:

📚 Further Reading

Here are some additional resources to help you learn more about building AI agents and extending their capabilities with tools:

• Azure AI Agents JavaScript examples
• Your First AI Agent in JS with Azure AI Agent Service
• Build Apps and Agents with Visual Studio Code and Azure blog
• 📹 DEMFP781: From Prompt to Product: Build an AI Agent That Generates UI
• Build with the AI Foundry JavaScript SDK