Build a custom engine agent to chat with your data using Teams AI library and Teams Toolkit

This tutorial shows how to create a custom engine agent with Teams AI library using Teams Toolkit to chat with your data on Azure OpenAI. Teams AI library streamlines the process of building intelligent Teams apps by using the AI components and Large Language Models (LLMs) of your choice.

In this tutorial, you'll learn:

• How to set up your data on Azure OpenAI.
• How to create a new custom engine agent with Teams Toolkit.
• How to interact with your LLMs and data.
• The directory structure of your custom engine agent.

Prerequisites

• 6 minutes remaining

Ensure you install the following tools for building and deploying your apps:

Set up your data on Azure OpenAI

• 5 minutes remaining

1. Go to Azure portal.

2. Select the Azure OpenAI service that you created in the prerequisite.

3. Select Go to Azure OpenAI Studio.

   

4. Select Chat > Create new deployment.

   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

5. Select Create.

   

6. Select Chat > Add a data source.

7. From the dropdown, select Upload files (preview).

8. Select Create a new Azure Blob storage resource and follow the onscreen instructions.

9. Select Create a new Azure AI Search resource and follow the onscreen instructions.

10. 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.

11. Enter a unique index name and select Next.

    

12. 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.

13. Select the Data management settings as default and select Next.

14. Select Save and close.

After the data ingestion process is complete, you can start creating your custom engine agent using the Teams AI library and Teams Toolkit.

Create your custom engine agent

• 4 minutes remaining

1. Go to Visual Studio Code.

2. Select the Teams Toolkit icon in the Visual Studio Code Activity Bar.

3. Select Create a New App.

   

4. Select Custom Engine Agent.

   

5. Select Basic AI Chatbot.

   

6. Select JavaScript as the programming language.

   

7. Select Azure OpenAI.

   

8. Enter the values from the Azure portal:

   • Azure OpenAI key

   • Azure OpenAI endpoint

   • Deployment name

9. Alternatively, you can fill in these details later in the env/.env.testtool.user file once your custom engine agent is created.

10. Select a folder that contains the root folder of your project and enter a suitable name for your custom engine agent.

11. Select Enter. Custom engine agent is created in a few seconds.

Take a tour of the source code

Have a look at what's inside this custom engine agent > Basic AI Chatbot template.

Configure your custom engine agent

• 3 minutes remaining

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:

   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. 
   

   

2. 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:

      "data_sources": [
        {
               "type": "azure_search",
               "parameters": {
                    "endpoint": "AZURE-AI-SEARCH-ENDPOINT",
                    "index_name": "YOUR-INDEX_NAME",
                    "authentication": {
                          "type": "api_key",
                          "key": "AZURE-AI-SEARCH-KEY"
                      }
                }
          }
        ]
   

3. Go to src/app/app.js file and add the following variable inside OpenAIModel:

   azureApiVersion: '2024-02-15-preview'
   

4. From the left pane, select Run and Debug (Ctrl+Shift+D).

5. Select Debug in Test Tool (Preview).

6. Select the F5 key.

   

7. Custom engine agent runs within the Teams App Test Tool, which opens in your browser.

Complete challenge

• 2 minutes remaining

In the Teams App Test Tool, ask questions related to your document and chat with your custom engine agent to learn more about your data.

Congratulations!

• 100% complete!

Congratulations, you completed this tutorial! If you're interested in learning more about the source code, visit Azure OpenAI sample on Teams AI library GitHub repository.