{"id":20254,"date":"2024-04-08T08:00:40","date_gmt":"2024-04-08T15:00:40","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=20254"},"modified":"2024-12-11T02:34:25","modified_gmt":"2024-12-11T10:34:25","slug":"building-custom-copilots-in-microsoft-teams-with-teams-app-test-tool-and-dev-proxy","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/building-custom-copilots-in-microsoft-teams-with-teams-app-test-tool-and-dev-proxy\/","title":{"rendered":"Building custom copilots in Microsoft Teams with Teams App Test Tool and Dev Proxy"},"content":{"rendered":"<p>Custom copilots are AI assistants that have been tailored to meet the specific needs of an organization. Microsoft Teams is where employees communicate and collaborate across the organization daily. Many organizations are interested in building bots for Microsoft Teams to integrate custom copilots they build. However, building a custom copilot is not trivial. By using Teams App Test Tool, you\u2019ll build and test your custom copilots quicker, saving time and money.<\/p>\n<h2>Custom copilots on Microsoft Cloud<\/h2>\n<p>Many organizations are building custom copilots grounded in organizational data using the Retrieval Augmented Generation (RAG) pattern. Organizations can integrate information retrieval with large language models (LLMs) making the responses more contextually relevant and useful.<\/p>\n<p>The <a href=\"https:\/\/github.com\/Azure-Samples\/azure-search-openai-demo\">ChatGPT + Enterprise data with Azure OpenAI and AI Search<\/a> sample is an example of how to implement RAG on the Microsoft Cloud.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-20255\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-1.png\" alt=\"Diagram displaying Retrieval Augmented Generation (RAG) architecture\" width=\"817\" height=\"420\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-1.png 817w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-1-300x154.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-1-768x395.png 768w\" sizes=\"(max-width: 817px) 100vw, 817px\" \/><em>Retrieval Augmented Generation (RAG) architecture<\/em><\/p>\n<p>Employees use natural language to ask questions and receive answers based on data from a fictitious company called Contoso Electronics. Allowing them to ask questions about the benefits, internal policies, as well as job descriptions and roles.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-20256\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-screen.png\" alt=\"Chat interface in the web application\" width=\"748\" height=\"798\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-screen.png 748w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-screen-281x300.png 281w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Chat interface in the web application<\/em><\/p>\n<p>Requests are sent to a back-end API when employees submit queries. Answers are returned in natural language along with document citations and follow-up questions in the response which are displayed in the user interface.<\/p>\n<h2>Custom copilots in Microsoft Teams<\/h2>\n<p>In many organizations, daily communication and collaboration takes place in Microsoft Teams. Exposing conversational AI bots in Microsoft Teams gives employees a familiar experience that can be accessed on desktop, tablet, and mobile devices through the Microsoft Teams clients, meeting employees where they are, and in the flow of work.<\/p>\n<p>In the <a href=\"https:\/\/adoption.microsoft.com\/sample-solution-gallery\/sample\/pnp-sp-dev-teams-sample-bot-azure-search-openai-ts\/\">ChatGPT + Enterprise data with Azure OpenAI and Cognitive Search in Microsoft Teams<\/a> sample, which builds on top of the previous sample, employees post questions as messages to a bot in Microsoft Teams, as an alternative to using the web-based app.<\/p>\n<p>The bot sends requests to the same back-end API to return answers from the LLM.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-20257\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-with-your-data-bot-in-microsoft-teams.png\" alt=\"Chat interface in Microsoft Teams bot\" width=\"995\" height=\"1030\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-with-your-data-bot-in-microsoft-teams.png 995w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-with-your-data-bot-in-microsoft-teams-290x300.png 290w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-with-your-data-bot-in-microsoft-teams-989x1024.png 989w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-with-your-data-bot-in-microsoft-teams-768x795.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/chat-with-your-data-bot-in-microsoft-teams-24x24.png 24w\" sizes=\"(max-width: 995px) 100vw, 995px\" \/><em>Chat interface in Microsoft Teams bot<\/em><\/p>\n<p>The answers, along with document citations and action buttons, are returned in Adaptive Cards. In addition, follow-up questions are displayed as suggested actions.<\/p>\n<h2>Removing platform dependencies<\/h2>\n<p>To run and develop the two sample projects that we\u2019ve just seen, you need to setup and configure several cloud services, as well as have access to a Microsoft 365 tenant.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-20258\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-diagram-of-a-software-company-description-autom.png\" alt=\"A diagram of Microsoft Teams bot with RAG architecture\" width=\"1183\" height=\"584\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-diagram-of-a-software-company-description-autom.png 1183w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-diagram-of-a-software-company-description-autom-300x148.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-diagram-of-a-software-company-description-autom-1024x506.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-diagram-of-a-software-company-description-autom-768x379.png 768w\" sizes=\"(max-width: 1183px) 100vw, 1183px\" \/><em>Microsoft Teams bot with RAG architecture<\/em><\/p>\n<p>During development this can be inefficient, in both time and money. It takes time to get everything in place and each request you send to the LLM incurs a cost as does keeping these services up and running.<\/p>\n<p>During development, consider the following:<\/p>\n<ul>\n<li>Do you always need a real response from the LLM for every request?<\/li>\n<li>Do you always need to run the app in Microsoft Teams ?<\/li>\n<li>Do you always need to have cloud services enabled?<\/li>\n<\/ul>\n<p>In many cases, the answer is \u201cno\u201d. Whilst you can remove cloud resources when you are not using them, provisioning resources each time you need them can also take time, which could be better spent on more high value tasks.<\/p>\n<p>With Teams App Test Tool and Dev Proxy, you simulate only the dependencies you need to run the parts of the app that you are working on.<\/p>\n<ul>\n<li><strong>Teams App Test Tool (Test Tool)<\/strong> is a Microsoft Teams app simulator that improves developer productivity by enabling you to develop and test bot code without the need for a bot service, or sideloading your app into a real Microsoft Teams environment.<\/li>\n<li><strong>Dev Proxy<\/strong> is a command line tool that simulates APIs, improving developer productivity by intercepting network requests sent from your app and responding with mocked responses or errors, and injecting real-world API behaviours like throttling or latency, plus much more.<\/li>\n<\/ul>\n<p>The following table demonstrates the resources needed to run the sample against a Microsoft 365 tenant, the Teams App Test Tool and a combination of the Test Tool and Dev Proxy:<\/p>\n<p><img decoding=\"async\" width=\"1280\" height=\"720\" class=\"wp-image-20259 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-screen-description-aut.png\" alt=\"A screenshot of a computer screen Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-screen-description-aut.png 1280w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-screen-description-aut-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-screen-description-aut-1024x576.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-screen-description-aut-768x432.png 768w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/p>\n<p>With Teams App Test Tool, you remove the dependency on a Microsoft 365 tenant, bot services, Microsoft Entra, and Dev Tunnels, whilst using real responses from the LLM.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-20260\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-6.png\" alt=\"Diagram of removing dependencies with Teams App Test Tool\" width=\"985\" height=\"382\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-6.png 985w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-6-300x116.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-6-768x298.png 768w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Removing dependencies with Teams App Test Tool<\/em><\/p>\n<p>By adding Dev Proxy, you remove the dependency on all cloud services and APIs, whilst using mocked responses to simulate the LLM response without changing any of your app code.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-20261\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-7.png\" alt=\"Diagram of removing dependencies with Dev Proxy using Teams App Test Tool and Web Service\" width=\"596\" height=\"185\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-7.png 596w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/word-image-20254-7-300x93.png 300w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Removing dependencies with Dev Proxy<\/em><\/p>\n<p>When you are ready to test against the live LLM, simply turn off Dev Proxy.<\/p>\n<h2>Try the sample project<\/h2>\n<p>To run and test the bot locally using Teams App Test Tool and Dev Proxy:<\/p>\n<ol>\n<li><a href=\"https:\/\/learn.microsoft.com\/microsoft-cloud\/dev\/dev-proxy\/get-started#install-dev-proxy\">Install and configure<\/a> Dev Proxy on your machine<\/li>\n<li><a href=\"https:\/\/adoption.microsoft.com\/sample-solution-gallery\/sample\/pnp-sp-dev-teams-sample-bot-azure-search-openai-ts\/\">Download<\/a> the sample and extract the contents to a folder on your machine<\/li>\n<li>Open the project folder in Visual Studio Code<\/li>\n<li>In Visual Studio Code, open a new terminal window<\/li>\n<li>Run <strong>devproxy &#8211;config-file devProxy\/use-mocks.json<\/strong> to start Dev Proxy<\/li>\n<li>Open the side bar in Visual Studio Code, select the <strong>Run and Debug<\/strong> panel<\/li>\n<li>In the debug profile dropdown, select <strong>Debug in Test Tool<\/strong><\/li>\n<li>Start a debug session and launch the test tool by pressing <strong>F5<\/strong><\/li>\n<\/ol>\n<p>In the Test Tool, select the <strong>\u201cWhat is included in my Northwind heal\u2026\u201d<\/strong> button to send a message in the bot chat and issue a request to the back-end API.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-20262\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica.png\" alt=\"Teams App Test Tool displaying the bot welcome message and answer to a question as Adaptive Cards\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica.png 1920w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1024x576.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-768x432.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1536x864.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><em>Teams App Test Tool displaying the bot welcome message and answer to a question as Adaptive Cards<\/em><\/p>\n<p>In the Dev Proxy process output, you can see that the request to the back-end API is intercepted, a delay is added to simulate real-world latency, and the API response is mocked.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-20263\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1.png\" alt=\"Dev Proxy running in a terminal window inside Visual Studio Code, displaying a delayed mocked request to a backend API\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1.png 1920w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1-1024x576.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1-768x432.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/04\/a-screenshot-of-a-computer-description-automatica-1-1536x864.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><em>Dev Proxy running in a terminal window inside Visual Studio Code, displaying a delayed mocked request to a backend API<\/em><\/p>\n<h2>Summary<\/h2>\n<p>Using Teams App Test Tool and Dev Proxy you can focus on developing the app logic and user interface by removing dependencies you don\u2019t need, for the task at hand.<\/p>\n<ul>\n<li>Faster F5 time<\/li>\n<li>Reduce costs during development<\/li>\n<li>Use deterministic responses to develop and test repeatable scenarios<\/li>\n<\/ul>\n<p>Try the sample for yourself and let us know what you think. We are looking forward to hearing how we could make it better.<\/p>\n<p><em>Follow us on <a href=\"http:\/\/twitter.com\/microsoft365dev\">X (Twitter) \/ @Microsoft365Dev<\/a>, <a href=\"https:\/\/www.linkedin.com\/showcase\/microsoft365dev\/\">LinkedIn<\/a>, and subscribe to our <a href=\"https:\/\/www.youtube.com\/microsoft365developer\">YouTube channel<\/a> to stay up to date on the latest developer news and announcements.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how you can quickly build and test custom copilots tailored to meet the specific needs of your organization.<\/p>\n","protected":false},"author":100385,"featured_media":20274,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[390,128],"tags":[289,285],"class_list":["post-20254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-copilot","category-microsoft-teams","tag-dev-proxy","tag-teams-app-test-tool"],"acf":[],"blog_post_summary":"<p>Learn how you can quickly build and test custom copilots tailored to meet the specific needs of your organization.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/20254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/100385"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=20254"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/20254\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/20274"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=20254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=20254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=20254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}