[Doc Improvement][Custom engine agent tutorial update][4346899]

msteams-platform/Teams-AI-library-tutorial.yml

@@ -24,6 +24,10 @@ items:
     * How to interact with your LLMs and data.
     * The directory structure of your custom engine agent.
 
+    > [!NOTE]
+    >
+    > * Custom engine agent support for Microsoft 365 Copilot Chat is available only in [public developer preview](../../../resources/dev-preview/developer-preview-intro.md).
+    > * Custom engine agent isn't supported in Python.
 
 - title: Prerequisites
   durationInMinutes: 1
@@ -38,56 +42,66 @@ items:
    |   | [Visual Studio Code](https://code.visualstudio.com/download) | JavaScript, TypeScript, or SharePoint Framework (SPFx) build environments. Use the latest version. |
    |   | [Azure OpenAI](https://oai.azure.com/portal)| OpenAI's GPT. Ensure that you first create your OpenAI API key. To host your app or access resources in Azure, you must create an Azure OpenAI service. |
 
+    [!INCLUDE [Set up prerequisites](includes/custom-engine-agent.md)]
+
 - title: Set up your data on Azure OpenAI
   durationInMinutes: 1
   content: | 
-     1. Go to [**Azure portal**](https://ms.portal.azure.com/).
 
-     1. Select the Azure OpenAI service that you created.
+    After you set up your project workspace with Teams Toolkit, you need to create an Azure AI Search endpoint and OpenAI key in Azure Portal.
+    
+      > [!NOTE]
+      > To create an Azure AI Search endpoint and OpenAI key, you need to have an Azure OpenAI Service resource. If you don't have an Azure OpenAI service resource, see [create a resource](/azure/ai-services/openai/how-to/create-resource?pivots=web-portal#create-a-resource). If you already have an Azure OpenAI Service resource, follow the steps below to create an Azure AI Search endpoint and OpenAI key.
+
+    ## Create an Azure AI Search endpoint and OpenAI key
+
+    1. Go to [**Azure portal**](https://ms.portal.azure.com/).
 
-     1. Select **Go to Azure OpenAI Studio**.
+    1. Select the Azure OpenAI service that you created.
+
+    1. Select **Go to Azure AI Foundry portal**.
         
         :::image type="content" source="../msteams-platform/assets/images/bots/go-to-azure-openai-studio.png" alt-text="Screenshot shows the go to Azure OpenAI studio in Azure portal.":::
 
-     1. Select **Chat** > **Create new deployment**.
+    1. Select **Chat** > **Create new deployment**.
         
-        Update the values for the following fields:
+       Update the values for the following fields:
 
-        * **Select a model**: gpt-35-turbo
-        * **Model version**: Autoupdate to default
-        * **Deployment type**: Standard
-        * **Deployment name**: gpt-35-turbo
-        * **Content Filter**: default
+       * **Select a model**: gpt-35-turbo
+       * **Model version**: Autoupdate to default
+       * **Deployment type**: Standard
+       * **Deployment name**: gpt-35-turbo
+       * **Content Filter**: default
 
-     1. Select **Create**.
+    1. Select **Deploy**.
 
         :::image type="content" source="../msteams-platform/assets/images/bots/deploy-model.png" alt-text="Screenshot shows the new deploy model in Azure portal.":::     
 
-     1. Select **Chat** > **Add a data source**.
+    1. Select **Chat** > **Add a data source**.
      
-     1. From the dropdown, select **Upload files (preview)**.
+    1. From the dropdown, select **Upload files (preview)**.
 
-     1. Select **Create a new Azure Blob storage resource** and follow the onscreen instructions.
+    1. Select **Create a new Azure Blob storage resource** and follow the onscreen instructions.
      
-     1. Select **Create a new Azure AI Search resource** and follow the onscreen instructions.
+    1. Select **Create a new Azure AI Search resource** and follow the onscreen instructions.
      
-     1. Select the newly created Azure Blob storage and Azure AI Search from the dropdown.
+    1. Select the newly created Azure Blob storage and Azure AI Search from the dropdown.
      
         > [!NOTE]
         > Save **Azure AI Search endpoint** and **key** details as they're necessary for the subsequent steps.
 
-     1. Enter a unique **index name** and select **Next**.
+    1. Enter a unique **index name** and select **Next**.
 
         :::image type="content" source="../msteams-platform/assets/images/bots/nba.png" alt-text="Screenshot shows how to create data source in Azure portal.":::
 
-     1. Select **Browse for a file** and upload files you prefer to use as your data, then select **Upload files**.
+    1. Select **Browse for a file** and upload files you prefer to use as your data, then select **Upload files**.
 
          > [!NOTE]
          > Files must be in `.txt`, `.md`, `.html`, `.pdf`, `.docx`, or `.pptx` format with 16-MB size limit.
 
-     1. Select the **Data management** settings as default and select **Next**.
+    1. Select the **Data management** settings as default and select **Next**.
      
-     1. Select **Save and close**.
+    1. Select **Save and close**.
 
      After the data ingestion process is complete, you can start creating your custom engine agent using Teams AI library and Teams Toolkit.
  
@@ -99,43 +113,47 @@ items:
   durationInMinutes: 1
   content: |
 
-     1. Go to **Visual Studio Code**.
+   Now that you have created your Azure OpenAI key and endpoints, let's create a new custom engine agent using Teams Toolkit.
+
+    ## Create a new custom engine agent using Teams Toolkit
 
-     1. Select the Teams Toolkit :::image type="icon" source="../msteams-platform/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code Activity Bar.
+    1. Go to **Visual Studio Code**.
 
-     1. Select **Create a New App**.
+    1. Select the Teams Toolkit :::image type="icon" source="../msteams-platform/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code Activity Bar.
+
+    1. Select **Create a New App**.
 
         :::image type="content" source="../msteams-platform/assets/images/bots/create-a-new-app.png" alt-text="Screenshot shows how to create a new app in Visual Studio Code.":::     
 
-     1. Select **Custom Engine Agent**.
+    1. Select **Custom Engine Agent**.
 
         :::image type="content" source="../msteams-platform/assets/images/bots/custom-copilot.png" alt-text="Screenshot shows custom engine agent option in Visual Studio Code.":::
 
-     1. Select **Basic AI Chatbot**.
+    1. Select **Basic AI Chatbot**.
 
         :::image type="content" source="../msteams-platform/assets/images/bots/basic-ai-chatbot.png" alt-text="Screenshot shows basic ai chatbot in Visual Studio Code.":::
 
-     1. Select **JavaScript** as the programming language.
+    1. Select **JavaScript** as the programming language.
 
         :::image type="content" source="../msteams-platform/assets/images/bots/programming-language.png" alt-text="Screenshot shows programming language in Visual Studio Code.":::     
 
-     1. Select **Azure OpenAI**.
+    1. Select **Azure OpenAI**.
 
         :::image type="content" source="../msteams-platform/assets/images/bots/large-language-model.png" alt-text="Screenshot shows LLM in Visual Studio Code.":::     
 
-     1. Enter the values from the Azure portal:
+    1. Enter the values from the Azure portal:
      
          * **Azure OpenAI key**
 
          * **Azure OpenAI endpoint**
 
          * **Deployment name**
 
-     1. Alternatively, you can fill in these details later in the `env/.env.testtool.user` file once your custom engine agent is created.
+    1. Alternatively, you can fill in these details later in the `env/.env.testtool.user` file once your custom engine agent is created.
 
-     1. Select a folder that contains the root folder of your project and enter a suitable name for your custom engine agent.
+    1. Select a folder that contains the root folder of your project and enter a suitable name for your custom engine agent.
      
-     1. Select **Enter**. Custom engine agent is created in a few seconds.
+    1. Select **Enter**. Custom engine agent is created in a few seconds.
 
      > [!div class="nextstepaction"]
      > [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20Create%20your%20custom%20engine%20agent&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fteams-ai-library-tutorial%3Ftutorial-step%3D3&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2FTeams-AI-library-tutorial.yml&documentVersionIndependentId=fe0b5835-9bcb-a24b-8bad-78793026a79e&author=surbhigupta&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2Amsteams%2A%2A)
@@ -165,17 +183,21 @@ items:
   durationInMinutes: 1
   content: |
 
-     Let's customize the prompt for your custom engine agent.
+   After you create your custom engine agent, let's configure it to interact with your data on Azure OpenAI.
+
+    ## Configure and debug your custom engine agent
 
-     1. Go to `src/prompts/chat/skprompt.txt` and update the following code in `skprompt.txt` file:
+    Let's customize the prompt for your custom engine agent.
+
+    1. Go to `src/prompts/chat/skprompt.txt` and update the following code in `skprompt.txt` file:
 
         ```skprompt.txt
         The following is a conversation with an AI assistant, who is an expert on answering questions over the given context.
         Responses should be in a short journalistic style with no more than 80 words. 
         ```
         :::image type="content" source="../msteams-platform/assets/images/bots/prompts-chat.png" alt-text="Screenshot shows skprompt in explorer in Visual Studio Code.":::
 
-     1. Go to the `config.json` file under `prompts/chat`. Add the following code inside the `completion` brackets and replace the `endpoint`, `index_name`, and `key` values with your Azure AI Search resource details:
+    1. Go to the `config.json` file under `prompts/chat`. Add the following code inside the `completion` brackets and replace the `endpoint`, `index_name`, and `key` values with your Azure AI Search resource details:
 
         ```json
            "data_sources": [
@@ -193,21 +215,24 @@ items:
              ]
         ```
 
-     1. Go to `src/app/app.js` file and add the following variable inside `OpenAIModel`: 
+    1. Go to `src/app/app.js` file and add the following variable inside `OpenAIModel`: 
 
         ```javascript
         azureApiVersion: '2024-02-15-preview'
         ```
  
-     1. From the left pane, select **Run and Debug (Ctrl+Shift+D)**.
+    1. From the left pane, select **Run and Debug (Ctrl+Shift+D)**.
+
+    1. Select **Debug in Test Tool (Preview)**.
 
-     1. Select **Debug in Test Tool (Preview)**.
+       > [!NOTE]
+       > If you want to debug in either Teams or Copilot, select **"Debug in Teams** or **Debug in Copilot**.
 
-     1. Select the **F5** key.   
+    1. Select the **F5** key.   
 
         :::image type="content" source="../msteams-platform/assets/images/bots/debug-in-test-tool.png" alt-text="Screenshot shows the debug in test tool.":::
 
-     1. Custom engine agent runs within the Teams App Test Tool, which opens in your browser.
+    1. Custom engine agent runs within the Teams App Test Tool, which opens in your browser.
 
      > [!div class="nextstepaction"]
      > [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI%20ran%20into%20an%20issue%5D%20Configure%20your%20custom%20engine%20agent&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fteams-ai-library-tutorial%3Ftutorial-step%3D4&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2FTeams-AI-library-tutorial.yml&documentVersionIndependentId=fe0b5835-9bcb-a24b-8bad-78793026a79e&author=surbhigupta&metadata=%2A%2BID%253A%2Be473e1f3-69f5-bcfa-bcab-54b098b59c80%2B%250A%2A%2BService%253A%2B%2Amsteams%2A%2A)