add mcp updates (#3)

Author: rakeshl4

azure.yaml

@@ -27,12 +27,12 @@ hooks:
   postprovision:
     windows:
       shell: pwsh
-      run: ./scripts/write_env.ps1; ./scripts/setup_credential.ps1
+      run: ./scripts/write_env.ps1;
       continueOnError: true
       interactive: true
     posix:
       shell: sh
-      run: chmod u+r+x ./scripts/write_env.sh; chmod u+r+x ./scripts/setup_credential.sh; ./scripts/write_env.sh; ./scripts/setup_credential.sh
+      run: chmod u+r+x ./scripts/write_env.sh; chmod u+r+x ./scripts/write_env.sh;
       continueOnError: true
       interactive: true
 
@@ -44,7 +44,11 @@ services:
     language: csharp
     host: appservice
   contoso-store-api:
-    project: ./src/backend/contoso-store-api
+    project: ./src/backend/contoso-store/contoso-store-api
+    language: csharp
+    host: appservice
+  contoso-store-mcp:
+    project: ./src/backend/contoso-store/contoso-store-mcp
     language: csharp
     host: appservice
   web:

docs/docs/02-lab-2-using_azure_foundry.md

@@ -66,7 +66,7 @@ In this lab, you’ll learn how to build and extend the capabilities of your AI
     
     For your agent to interact with this API, you need to update the API specification (Swagger file) with the correct endpoint URL: 
 
-      - Got to `swagger.json` file in the `resources` directory of your project.
+      - Got to `contoso-store-api-swagger.json` file in the `resources` directory of your project.
       - Replace `<APP-SERVICE-URL>` with the actual URL of the Contoso Store API. 
         
         You can find this URL in your `.env` file under the variable name `CONTOSO_STORE_API_URL`.

docs/docs/03-lab-3.1-ai_application_architecture.md

@@ -2,22 +2,24 @@
 
 In this lab, you will learn how to integrate an AI Agent into your own application.
 
-The example app is built using a .NET backend API and a React-based chat UI. It walks through a basic scenario of a **Technical Support Agent** that can answer user questions to demonstrate the core concepts.
+The example app is built using a .NET backend API and a React-based chat UI.
+
+It walks through a building an AI assistant solution for **Contoso Bike Store** that demonstrates the use of MCP (Model Context Protocol) tools with Azure AI Foundry Agents. 
 
 The goal is to provide a view of the end-to-end data flow between the frontend, backend, and Azure AI services.  
 
 ---
 
 ## How It Works
 
-![architecture](../media/architecture-2.png)
+![architecture](../media/mcp/architecture.png)
 
-- The AI agent is set up in Azure AI Foundry. It can answer IT questions, help with support tickets, and more.
+- The AI agent is set up in Azure AI Foundry.
 - The .NET backend API connects the chat website to the agent and handles the following requests:
   - Calls the AI agent to answer user prompts
   - Create Agent and chat threads
   - Get chat history for the thread
-- The agent has tools (stubs) to do things like set up Office 365 accounts or fix network issues.
+- The agent has access to MCP tools to help it answer questions.
 - The React frontend is a simple chat page. It sends your messages to the backend and shows the full chat history of the thread.
 
 ---
@@ -39,9 +41,9 @@ The goal is to provide a view of the end-to-end data flow between the frontend,
     - `GET /api/chat/history?agentId={agentId}&threadId={threadId}`  
        Retrieves the chat message history for a given thread.
 
-2. Update the `TechSupportAgentConfig` class.
+2. Update the `ContosoBikeStoreAgentConfig` class.
 
-    The file `src/backend/ai-agent-api/Agents/TechSupportAgentConfig.cs` already exists.
+    The file `src/backend/ai-agent-api/Agents/ContosoBikeStoreAgentConfig.cs` already exists.
 
     Add or update the following method overrides to define the agent's display name, description, and system message:
 
@@ -51,21 +53,21 @@ The goal is to provide a view of the end-to-end data flow between the frontend,
     ```csharp
     public override string GetAgentDisplayName()
     {
-        return "Technical Support Agent";
+        return "Contoso Bike Store Agent";
     }
 
     public override string GetDescription()
     {
-        return "This agent provides IT and technical support for the company. " +
-                "It assists users with troubleshooting, technical queries, and problem resolution. " +
-                "The agent utilizes the `TechSupportTools` to effectively address and resolve technical issues.";
+        return "This agent provides customer support for Contoso Bike Store. " +
+                "It assists users with product inquiries, order status, and store information. " +
+                "The agent utilizes the `MCP` tools to effectively address and resolve customer questions.";
     }
 
     public override string GetSystemMessage()
     {
-        return "You are a technical support agent. " +
-                "Your role is to assist users with IT and technical issues, providing solutions and troubleshooting steps. " +
-                "Use the tools available to you to resolve problems efficiently.";
+        return "You are a customer support agent for Contoso Bike Store. " +
+                "Your role is to assist users with product information, order status, and store details. " +
+                "Use the tools available to you to provide accurate and helpful responses.";
     }
     ```
 
@@ -105,19 +107,17 @@ The goal is to provide a view of the end-to-end data flow between the frontend,
 
     Copy the URL and open it in your browser to access the chat UI.
 
-    ![chat-bot-ui.png](../media/chat-bot-ui_01.png)
-
-    The Agent has access to the tools defined in the `src/backend/ai-agent-api/KernelTools/TechSupportTools.cs` file. These methods are stubs and simulate the actions that the agent can perform for an IT support scenario.
+    ![chat-bot-ui.png](../media/mcp/chat-1.png)
 
 9. Now start chatting with the agent!
 
     You can ask the agent questions like:
 
-    - Reset the password for John Doe
-    - Create a new Office 365 account for John Doe
-    - Send a Welcome email to John Doe
+    - What are the available bike models?
+    - Can you help me track my order #12345?
+    - I want to place a new order for a mountain bike. Could you assist me with that?
 
-    ![chat-bot-ui.png](../media/chat-bot-ui_03.png)
+    ![chat-bot-ui.png](../media/mcp/chat-2.png)
 
 ---
 
@@ -134,4 +134,4 @@ Test your understanding and extend the solution with these challenges:
 3. **Create a New Agent Scenario**  
     Design and implement a new agent for a different use case.
 
-    For example,  integrate the `ContosoInventoryAgent` we built in a previous lab.
+    For example, create a **Policy Agent** that can answer questions about company policies and procedures.

docs/docs/03-lab-3.1-ai_application_architecture_archive.md

@@ -0,0 +1,137 @@
+# Build a Simple Chat UI for Your AI Agent
+
+In this lab, you will learn how to integrate an AI Agent into your own application.
+
+The example app is built using a .NET backend API and a React-based chat UI. It walks through a basic scenario of a **Technical Support Agent** that can answer user questions to demonstrate the core concepts.
+
+The goal is to provide a view of the end-to-end data flow between the frontend, backend, and Azure AI services.  
+
+---
+
+## How It Works
+
+![architecture](../media/architecture-2.png)
+
+- The AI agent is set up in Azure AI Foundry. It can answer IT questions, help with support tickets, and more.
+- The .NET backend API connects the chat website to the agent and handles the following requests:
+  - Calls the AI agent to answer user prompts
+  - Create Agent and chat threads
+  - Get chat history for the thread
+- The agent has tools (stubs) to do things like set up Office 365 accounts or fix network issues.
+- The React frontend is a simple chat page. It sends your messages to the backend and shows the full chat history of the thread.
+
+---
+
+## Build the Application
+
+1. The code for the backend and frontend is in the `src/` folder of the repository.
+
+    Refer to the file `/src/backend/ai-agent-api/Controllers/ChatController.cs` for the details of the API endpoints that the frontend uses.
+
+    It has the following endpoints:
+
+    - `GET /api/agent`  
+       Gets information about the chat agent (name, display name, description).
+
+    - `POST /api/chat/send`  
+       Sends a chat message to the agent and returns the agent thread id.
+
+    - `GET /api/chat/history?agentId={agentId}&threadId={threadId}`  
+       Retrieves the chat message history for a given thread.
+
+2. Update the `TechSupportAgentConfig` class.
+
+    The file `src/backend/ai-agent-api/Agents/TechSupportAgentConfig.cs` already exists.
+
+    Add or update the following method overrides to define the agent's display name, description, and system message:
+
+    !!! info
+        The setup uses a simple Factory pattern to create the agent configuration. In real applicaitons you would store the agent configuration in a database or a configuration file and load it dynamically.
+
+    ```csharp
+    public override string GetAgentDisplayName()
+    {
+        return "Technical Support Agent";
+    }
+
+    public override string GetDescription()
+    {
+        return "This agent provides IT and technical support for the company. " +
+                "It assists users with troubleshooting, technical queries, and problem resolution. " +
+                "The agent utilizes the `TechSupportTools` to effectively address and resolve technical issues.";
+    }
+
+    public override string GetSystemMessage()
+    {
+        return "You are a technical support agent. " +
+                "Your role is to assist users with IT and technical issues, providing solutions and troubleshooting steps. " +
+                "Use the tools available to you to resolve problems efficiently.";
+    }
+    ```
+
+3. Review the source code in the file `src/backend/ai-agent-api/Services/AzureAIAgentService.cs` to understand how the backend API interacts with the Azure AI Agent.
+
+    !!! warning
+        Some API methods from the Semantic Kernel SDK are in preview and may change in future releases.
+
+        Check the official docs for updates.
+
+4. Build the backend API to ensure it compiles correctly.
+   If the build completes without errors, you are ready to proceed to deployment.
+
+    ```bash
+    dotnet build src/backend/ai-agent-api/AIAgent.API.sln
+    ```
+
+## Deploy the Application
+
+5. The Azure resources were already created in a previous lab (with `azd up`).
+6. Run the following command. This will build the backend and frontend applications and deploy them to Azure.
+
+    ```bash
+    azd deploy
+    ```
+
+    !!! note
+        If you want to run the app locally, you can use `dotnet run` for the backend and `npm start` for the frontend. Make sure you have the required environment variables set up.
+
+7. The backend and the frontend applications are hosted in Azure App Service.
+
+    You can find the URLs in the Azure portal or in the `azd` output.
+
+    ![web-app-url.png](../media/web-app-url.png)
+
+8. You can find the url of the chat UI in the `.env` file with the variable `FRONTEND_APP_URL`.
+
+    Copy the URL and open it in your browser to access the chat UI.
+
+    ![chat-bot-ui.png](../media/chat-bot-ui_01.png)
+
+    The Agent has access to the tools defined in the `src/backend/ai-agent-api/KernelTools/TechSupportTools.cs` file. These methods are stubs and simulate the actions that the agent can perform for an IT support scenario.
+
+9. Now start chatting with the agent!
+
+    You can ask the agent questions like:
+
+    - Reset the password for John Doe
+    - Create a new Office 365 account for John Doe
+    - Send a Welcome email to John Doe
+
+    ![chat-bot-ui.png](../media/chat-bot-ui_03.png)
+
+---
+
+## Code Challenges
+
+Test your understanding and extend the solution with these challenges:
+
+1. **Add a Knowledge Tool**  
+    Enhance the agent by integrating a file search tool. This tool should allow the agent to read a file and answer user questions based on its content.
+
+2. **Execute Tasks via OpenAI Spec**  
+    Use the OpenAI Spec tool to execute tasks by calling external APIs. For example, expose an API that allows the agent to create a new support ticket in an external system.
+
+3. **Create a New Agent Scenario**  
+    Design and implement a new agent for a different use case.
+
+    For example,  integrate the `ContosoInventoryAgent` we built in a previous lab.

docs/docs/media/mcp/architecture.png

@@ -136,6 +136,7 @@ module app 'modules/app.bicep' = {
     foundryProjectEndpoint: aiProject.outputs.endpoint
     foundryProjectName: aiProject.outputs.name
     openAIDeploymentName: chatCompletionModel
+    appInsightsConnectionString: shared.outputs.appInsightsConnectionString
   }
 }
 
@@ -151,6 +152,7 @@ output AZURE_AI_PROJECT_ENDPOINT string = aiProject.outputs.endpoint
 output BACKEND_APP_URL string = app.outputs.BACKEND_APP_URL
 output FRONTEND_APP_URL string = app.outputs.FRONTEND_APP_URL
 output CONTOSO_STORE_APP_URL string = app.outputs.CONTOSO_STORE_APP_URL
+output CONTOSO_STORE_MCP_URL string = app.outputs.CONTOSO_STORE_MCP_URL
 
 output AZURE_OPENAI_DEPLOYMENT_NAME string = chatCompletionModel
 output TEXT_MODEL_NAME string = chatCompletionModel //TODO: to be removed when the notebook is updated

docs/docs/media/mcp/chat-1.png

@@ -6,10 +6,12 @@ param tags object
 param foundryProjectEndpoint string
 param foundryProjectName string
 param openAIDeploymentName string
+param appInsightsConnectionString string = ''
 
 var frontendAppName = '${resourcePrefix}-web-${uniqueSuffixValue}'
 var backendAppName = '${resourcePrefix}-api-${uniqueSuffixValue}'
 var contosoStoreAppName = '${resourcePrefix}-contoso-store-${uniqueSuffixValue}'
+var mcpServerAppName = '${resourcePrefix}-mcp-${uniqueSuffixValue}'
 
 resource appServicePlan 'Microsoft.Web/serverfarms@2022-03-01' = {
   name: '${resourcePrefix}-plan-${uniqueSuffixValue}'
@@ -60,6 +62,14 @@ resource backendApp 'Microsoft.Web/sites@2022-03-01' = {
           name: 'Azure__SubscriptionId'
           value: subscription().subscriptionId
         }
+        {
+          name: 'CONTOSO_STORE_MCP_URL'
+          value: 'https://${mcpServerApp.name}.azurewebsites.net/sse'
+        }
+        {
+          name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
+          value: appInsightsConnectionString
+        }
       ]
     }
   }
@@ -84,6 +94,10 @@ resource frontendApp 'Microsoft.Web/sites@2022-03-01' = {
           name: 'VITE_API_BASE_URL'
           value: 'https://${backendAppName}.azurewebsites.net'
         }
+        {
+          name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
+          value: appInsightsConnectionString
+        }
       ]
     }
   }
@@ -101,6 +115,41 @@ resource contosoStoreApp 'Microsoft.Web/sites@2022-03-01' = {
   properties: {
     serverFarmId: appServicePlan.id
     httpsOnly: true
+    siteConfig: {
+      appSettings: [
+        {
+          name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
+          value: appInsightsConnectionString
+        }
+      ]
+    }
+  }
+}
+
+resource mcpServerApp 'Microsoft.Web/sites@2022-03-01' = {
+  name: mcpServerAppName
+  location: location
+  tags: union(tags, {
+    'azd-service-name': 'contoso-store-mcp'
+  })
+  identity: {
+    type: 'SystemAssigned'
+  }
+  properties: {
+    serverFarmId: appServicePlan.id
+    httpsOnly: true
+    siteConfig: {
+      appSettings: [
+        {
+          name: 'CONTOSO_STORE_URL'
+          value: 'https://${contosoStoreAppName}.azurewebsites.net'
+        }
+        {
+          name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
+          value: appInsightsConnectionString
+        }
+      ]
+    }
   }
 }
 
@@ -128,3 +177,4 @@ resource backendAppRoleAssignment2 'Microsoft.Authorization/roleAssignments@2022
 output BACKEND_APP_URL string = 'https://${backendApp.name}.azurewebsites.net'
 output FRONTEND_APP_URL string = 'https://${frontendApp.name}.azurewebsites.net'
 output CONTOSO_STORE_APP_URL string = 'https://${contosoStoreApp.name}.azurewebsites.net'
+output CONTOSO_STORE_MCP_URL string = 'https://${mcpServerApp.name}.azurewebsites.net/sse'

docs/docs/media/mcp/chat-2.png

@@ -6,7 +6,7 @@
   },
   "servers": [
     {
-      "url": "https://aiagentwks-contoso-store-mbo43n.azurewebsites.net"
+      "url": "<APP-SERVICE-URL>"
     }
   ],
   "paths": {