{"id":22396,"date":"2024-07-25T08:36:48","date_gmt":"2024-07-25T15:36:48","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=22396"},"modified":"2024-08-15T06:04:51","modified_gmt":"2024-08-15T13:04:51","slug":"bring-your-custom-engine-copilot-from-azure-openai-studio-to-microsoft-teams-now-in-public-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/bring-your-custom-engine-copilot-from-azure-openai-studio-to-microsoft-teams-now-in-public-preview\/","title":{"rendered":"Bring your custom engine copilot from Azure OpenAI Studio to Microsoft Teams: now in public preview"},"content":{"rendered":"<p>Azure OpenAI announced many new capabilities for connecting to your data with Azure OpenAI at Microsoft Build 2024. Today, we are excited to announce that Azure OpenAI now offers a <strong>Deploy to a Teams app <\/strong>option in public preview, providing a new way to help developers connect their enterprise data with their custom engine copilots on Microsoft Teams. If you&#8217;ve been crafting your chat experience using Azure OpenAI Studio, you can now seamlessly bring your chat apps to Microsoft Teams.<\/p>\n<p>If you&#8217;re eager to extend your chat experience from Azure OpenAI Studio to Teams, this option is perfect for you! This feature helps developers create a project source code with an integration of their configuration and data from Azure OpenAI Studio. You can connect your enterprise data from Azure AI Search, Azure Blob Storage, URL\/web address, Azure Cosmos DB, Elasticsearch and ground your Azure OpenAI models on your data. This source code is powered by Teams AI library, which helps developers build conversational bots designed to harness the powerful capabilities of Large Language Models (LLMs) for seamless user interaction.<\/p>\n<p>Ready to bring your chat app with your data from Azure OpenAI Studio to Teams? Let&#8217;s get started with just a few simple steps!<\/p>\n<p style=\"text-align: center;\"><iframe src=\"\/\/www.youtube.com\/embed\/Z1cdKabXRFc\" width=\"560\" height=\"314\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Start from Azure OpenAI Studio, chat on Teams<\/h2>\n<p>Here are the quick steps to craft your chat experience in Azure OpenAI Studio and seamlessly integrate it into Teams.<\/p>\n<h3>Pre-requisites<\/h3>\n<ul>\n<li><a href=\"https:\/\/code.visualstudio.com\/Download\">Visual Studio Code<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=TeamsDevApp.ms-teams-vscode-extension\">Teams Toolkit<\/a><\/li>\n<li><a href=\"https:\/\/nodejs.org\/\">Node.js<\/a> (supported versions 16, 18)<\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/concepts\/build-and-test\/prepare-your-o365-tenant\">A Microsoft 365 developer account<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/cli\/azure\/install-azure-cli\">Azure CLI<\/a><\/li>\n<li>Run <strong>az login <\/strong>in the terminal of Visual Studio Code (select the account with Azure subscription)<\/li>\n<li>An <a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/ai-services\/openai\/how-to\/create-resource?pivots=web-portal\">Azure OpenAI Service<\/a> with gpt-3.5-turbo or higher model deployed.<\/li>\n<li><strong>Cognitive Services OpenAI User <\/strong>role assigned to the Azure OpenAI resource you prefer to use.<\/li>\n<\/ul>\n<h3>Configure your data in the chat playground<\/h3>\n<p>Before proceeding with the &#8220;Deploy to a Teams app&#8221; option, ensure that you have designed your chat experience on Azure OpenAI Studio.<\/p>\n<ol>\n<li>In Azure OpenAI Studio, navigate to <strong>Chat<\/strong> and <strong>Add your data<\/strong>, then <strong>Add a data source<\/strong>.<\/li>\n<li>Select <strong>Upload files (preview)<\/strong>, and set up &#8220;Azure Blob storage&#8221; and &#8220;Azure AI Search&#8221; resources. Enter the index name of your choice, then select <strong>Next<\/strong>.<\/li>\n<\/ol>\n<p><img decoding=\"async\" width=\"1429\" height=\"860\" class=\"wp-image-22397\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica.png 1429w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-300x181.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-1024x616.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-768x462.png 768w\" sizes=\"(max-width: 1429px) 100vw, 1429px\" \/><\/p>\n<ol>\n<li>Drag and drop the files you prefer to use as your data in the chat app. Select <strong>Upload files<\/strong>, then <strong>Next<\/strong>.<\/li>\n<li>Keep the &#8220;Data management&#8221; configuration as default, select <strong>Next<\/strong>.<\/li>\n<li>Select the Azure resource authentication type of your choice in the &#8220;Data connection&#8221; step, select <strong>Next<\/strong>. Then, <strong>Save and close<\/strong>.<\/li>\n<\/ol>\n<p>Once your data ingestion process is complete, test your setup in the playground by asking questions relevant to your data.<\/p>\n<h3>Bring your chat experience to Teams<\/h3>\n<ol>\n<li>When ready, select <strong>Deploy to <\/strong>in the Chat playground and select <strong>A new Teams app (preview) <\/strong>option.<\/li>\n<\/ol>\n<p><img decoding=\"async\" width=\"1429\" height=\"809\" class=\"wp-image-22398\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-1.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-1.png 1429w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-1-300x170.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-1-1024x580.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-1-768x435.png 768w\" sizes=\"(max-width: 1429px) 100vw, 1429px\" \/><\/p>\n<p>2. Enter a name for your Teams app. Then, select <strong>Download<\/strong>.<\/p>\n<p><img decoding=\"async\" width=\"1431\" height=\"822\" class=\"wp-image-22399\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-2.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-2.png 1431w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-2-300x172.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-2-1024x588.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-2-768x441.png 768w\" sizes=\"(max-width: 1431px) 100vw, 1431px\" \/><\/p>\n<p>This will download a source code of your Teams app with integrated data.<\/p>\n<h3>Test your app on Teams<\/h3>\n<p>1. Unzip your downloaded project and open it in Visual Studio Code.<\/p>\n<p>2. Explore the project source code, then select Teams Toolkit from the left side menu.<\/p>\n<p><img decoding=\"async\" width=\"1429\" height=\"809\" class=\"wp-image-22400\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-3.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-3.png 1429w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-3-300x170.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-3-1024x580.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-3-768x435.png 768w\" sizes=\"(max-width: 1429px) 100vw, 1429px\" \/><\/p>\n<p>3. If you select <strong>API Key <\/strong>in data connection, navigate to src\\prompts\\chat\\config.json in your project folder and place the API inside the authentication.<\/p>\n<p>4. Sign in with your Microsoft 365 account in Teams Toolkit, select <strong>local<\/strong> environment, then choose Debug (Edge) or Debug (Chrome).<\/p>\n<p><img decoding=\"async\" width=\"1431\" height=\"822\" class=\"wp-image-22401\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-4.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-4.png 1431w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-4-300x172.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-4-1024x588.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-4-768x441.png 768w\" sizes=\"(max-width: 1431px) 100vw, 1431px\" \/><\/p>\n<p>5. Once your Teams app is provisioned and deployed, Microsoft Teams will open in your browser with your app. Select <strong>Add<\/strong> to add your app to a Teams personal chat.<\/p>\n<p>6. Enjoy chatting with your data on Teams by asking questions related to your data! \ud83c\udf89<\/p>\n<p><strong><img decoding=\"async\" width=\"1429\" height=\"860\" class=\"wp-image-22402\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-5.png\" alt=\"A screenshot of a computer Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-5.png 1429w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-5-300x181.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-5-1024x616.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/07\/a-screenshot-of-a-computer-description-automatica-5-768x462.png 768w\" sizes=\"(max-width: 1429px) 100vw, 1429px\" \/><\/strong><\/p>\n<h2>Next Steps<\/h2>\n<ul>\n<li><a href=\"https:\/\/techcommunity.microsoft.com\/t5\/ai-azure-ai-services-blog\/announcing-new-capabilities-for-azure-openai-on-your-data\/ba-p\/4144636\">Announcing New Capabilities for Azure OpenAI On Your Data<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/AOAITeamsBlog\">https:\/\/aka.ms\/AOAITeamsBlog<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/ai-services\/openai\/how-to\/role-based-access-control#add-role-assignment-to-an-azure-openai-resource\">Role-based access control for Azure OpenAI<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/azure\/ai-services\/openai\/concepts\/use-your-data?tabs=ai-search%2Cteams#deploy-to-a-copilot-preview-teams-app-preview-or-web-app\">Deploy to a Teams app<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/provision\">Provision your app<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/deploy\">Deploy\u00a0to Azure<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/ai-services\/openai\/concepts\/use-your-data?tabs=ai-search%2Cteams#deploy-to-a-copilot-preview-teams-app-preview-or-web-app\"><span class=\"ui-provider awm awn awo awp awq awr aws awt awu awv aww awx awy awz axa axb axc axd axe axf axg axh axi axj axk axl axm axn axo axp axq axr axs axt axu\" dir=\"ltr\">After deploying to Azure, assign the Cognitive Service OpenAI User role to the User Assigned Managed Identity resource of your custom copilot<\/span><\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/publish\">Publish\u00a0to Teams<\/a><\/li>\n<\/ul>\n<p>If you are interested in diving deeper into the source code powered by Teams AI library and Teams Toolkit, check out the tutorial on building your custom copilot for Teams with your data from scratch: <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/teams-ai-library-tutorial\">Tutorial &#8211; Build Custom Copilot &#8211; Teams | Microsoft Learn<\/a><\/p>\n<p>We value your feedback! Please reach out to us if you have any questions or suggestions, we&#8217;d love to hear about your experience.<\/p>\n<p>Happy coding! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Azure OpenAI now offers a Deploy to a Teams app option in public preview, providing a new way to connect enterprise data with custom engine copilots in Microsoft Teams.<\/p>\n","protected":false},"author":166509,"featured_media":22419,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[61,231,346,242,23,44],"class_list":["post-22396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-azure","tag-azure-openai","tag-azure-openai-studio","tag-copilot","tag-teams-toolkit","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>Azure OpenAI now offers a Deploy to a Teams app option in public preview, providing a new way to connect enterprise data with custom engine copilots in Microsoft Teams.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/22396","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\/166509"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=22396"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/22396\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/22419"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=22396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=22396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=22396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}