Intelligent Data Chart Generator
This intelligent Microsoft Teams Tab app is powered by Azure OpenAI, which helps users generating data charts based on users' description of the data chart in human language. There is an input box where users tell the Tab app what data chart they want to generate, and the app interprets user's requirements then generate visual charts. The data is from Azure SQL. This sample demonstrates how to build a seamless and intuitive experience for accessing and interpreting data.
Note: This sample will only provision single tenant Azure Active Directory app. For multi-tenant support, please refer to this wiki.
This sample illustrates
- How to use Azure Open AI to generate data visualization based on verbal descriptions.
- How to display the generated data visualization in Teams tab.
- How to query data from Azure SQL database.
- How to use TeamsFx to build backend hosting on Azure for your tab app.
Prerequisite to use this sample
- Node.js, supported versions: 18, 20, 22
- A Microsoft 365 tenant in which you have permission to upload Teams apps. You can get a free Microsoft 365 developer tenant by joining the M365 developer program
- An Azure OpenAI resource and an Azure SQL Database resource.
- Microsoft 365 Agents Toolkit Visual Studio Code Extension version 5.0.0 and higher or Microsoft 365 Agents Toolkit CLI
Minimal path to awesome
Here are the instructions to run the sample in Visual Studio Code. You can also try to run the app using Microsoft 365 Agents Toolkit CLI tool, refer to Try the Sample with Microsoft 365 Agents Toolkit CLI
Run the app locally
Clone the repo to your local workspace or directly download the source code.
Open the project in Visual Studio Code.
Update the
.env.local.user
file to add your Azure OpenAI configuration. Your configuration should look like this:SECRET_OPENAI_ENDPOINT=https://<your-instance-name>.openai.azure.com/ SECRET_OPENAI_DEPLOYMENT_NAME=<your-deployment-name> SECRET_OPENAI_API_KEY=<your-api-key>
If you have not created an Azure OpenAI resource or deployed a model, please follow this tutorial to create one.
Update the
.env.local.user
file to add your Azure SQL Database configuration. Your configuration should look like this:SQL_USER=<your-sql-user-name> SECRET_SQL_PASSWORD=<your-sql-password> SQL_SERVER=<your-sql-server-name>.database.windows.net SQL_DATABASE=<your-sql-database-name>
If you have not created an Azure SQL Database resource, please follow this tutorial to create one. Once you've set up the Azure database, you can use
/data/script.sql
file to create the table and insert some sample data.Press
F5
to start the app locally.
Deploy the app to Azure
Deploy your project to Azure by following these steps:
- Open Microsoft 365 Agents Toolkit in Visual Studio Code, and sign in your Azure account by clicking the
Sign in to Azure
in theACCOUNTS
section from sidebar. - After you signed in, select a subscription under your account. The Microsoft 365 Agents Toolkit will use this subscription to provision Azure resources to host you app.
- Update the
.env.dev.user
file to add your Azure Open AI and Azure SQL configurations. - Open the Microsoft 365 Agents Toolkit and click
Provision
in theLIFECYCLE
section. Alternatively open the command palette(Ctrl+Shift+P) and type:Microsoft 365 Agents: Provision
command. - Open the Microsoft 365 Agents Toolkit and click
Deploy
in theLIFECYCLE
section. Alternatively open the command palette(Ctrl+Shift+P) and type:Microsoft 365 Agents: Deploy
command.
Note: Provision Azure cloud resources and deploy to Azure may cause charges to your Azure Subscription.
Preview the app in Teams
After you have completed the provision and deploy steps in Deploy the app to Azure
section, you can preview your app in Teams client by following steps below:
- Open the
Run and Debug
panel from sidebar, or use short key Ctrl+Shift+D. - Select
Launch Remote (Edge)
orLaunch Remote (Chrome)
in the launch configuration (a dropdown selection in the upper-left corner). - Press the
Start Debugging
button to launch your app, the Teams web client will be automatically opened in your browser, where you will see your app running remotely from Azure.
Version History
Date | Author | Comments |
---|---|---|
Jan 8, 2024 | Hui Miao | Onboard sample in Teams Toolkit V5.0.0 |
Feb 27, 2024 | Hui | Upgrade Azure Function V4 |
Feedback
We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!