Overview
Team communication platforms like Microsoft (MS) Teams are a critical component of any organization's software stack, offering a widely distributed frontend for running generative artificial intelligence (genAI) applications. MS Teams can serve as a powerful and intuitive frontend for Denodo’s AI SDK, providing users with a familiar communication environment that already boasts a comprehensive feature set. Furthermore, integrating with team messaging reduces the development cycle for building custom genAI applications by eliminating the need to develop and maintain a separate frontend.
In this document we propose integrating the Denodo AI SDK into MS Teams so that users can easily perform complex searches, and retrieve relevant information directly within their existing corporate communications channels. Not only does this make the Denodo AI SDK more accessible for users but also allows further integration with MS Teams workflows. Although we will highlight access to Denodo's AI SDK on Teams, there are a number of ways you can integrate the Denodo AI SDK within the Microsoft 365 ecosystem.
Designing your MS Teams application
Before you begin
MS 365 applications are essentially listening servers, they wait for API posts from a Microsoft server and can return a response with coded logic. In our code walkthrough, we chose to run this application locally but there are also Azure hosting options available that easily integrate with the MS Bot Framework.
For handling the response from the AI SDK, we used Adaptive Cards because they offer a flexible, interactive, and visually engaging way to present data. Adaptive Cards are a cross product specification for cards in Microsoft products including bots, Cortana, Outlook, and Windows. They are the recommended card type for new Teams development. This framework is useful for the entire MS 365 ecosystem and ensures a responsive design that adjusts well to various screen sizes, enhancing user experience and making data more actionable directly within Teams and other apps in the MS 365 Ecosystem.
For building the app, Microsoft provides an application building framework within Visual Studio (VS) code called the Bot Framework SDK. This framework helps generate scaffolding to quickly get an MS application up and running. It's important to remember that a MS 365 application is essentially a server written in Javascript. In our case this will be a server that listens for messages from a MS Teams API and forwards the messages to the Denodo AI SDK. Then when a message is returned from the AI SDK, that message should be returned to the MS Teams channel in the form of a bot. For teams, each message is an Activity object of type messageType: message. When a user sends a message, Teams posts the message to your bot; specifically, it sends a JSON object to your bot's messaging endpoint. Your bot examines the message to determine its type and responds accordingly depending on the scope of your application.
We will now go over an example implementation of a bot using the Teams toolkit for VS Code.
Teams Toolkit Prerequirements
For the following code, we will be leveraging the Teams Toolkit to help generate scaffolding to get an MS application up and running. This should not be taken as a finished application but as a sample on what the process of building these apps is like. There are critical components missing from our implementation like authentication and personalization that are unique to each organization.
We will be using the Teams Toolkit Extension for VS Code for building our application. The Teams Toolkit simplifies the process of building and debugging applications within Microsoft Teams by offering an integrated set of tools directly in Visual Studio Code. You will need to install this within VS Code.
Once installed, navigate to the Teams Toolkit icon in the left-hand menu to access its drop down menu.
Select On Create a New App
Select Chat Command Bot
Select JavaScript
Choose a destination folder for where you want to build the scaffolding folder structure.
Code Walkthrough
Technical Overview
Dependencies
- Visual Studio Code
- Teams Toolkit: A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version.
- Microsoft 365 account: to share your Denodo AI SDK experience with your coworkers
- Node.js: Back-end JavaScript runtime environment. For more information, see Node.js website
After generating a new App structure, the files will be visible in the Explorer in Visual Studio Code.
The Teams Toolkit generated the basic scaffolding for an MS Teams bot that can handle slash commands. With some minor modifications to this scaffolding, it is possible to integrate a MS Teams bot with the capability to query directly against Denodo’s AI SDK when prompted with a user command. For integrating the Denodo AI SDK, you will need to create a javascript (JS) file with the logic to call the /answerquestion API endpoint of the Denodo AI SDK and modify the command handler class provided by scaffolding to recognize a custom command. One of the files handles the API query logic; the other handles recognizing the command and formatting the response to MS Teams in an Adaptive card format.
The necessary code can be found bellow:
DenodoAISDKCommandHandler.js handles calling the Denodo AI SDK APIs. This file holds the class DenodoAISDKCommandHandler which, when given the authentication logic to an AI SDK, allows a bot to call the /answerquestion Denodo AI SDK API endpoint. Included are also robust logging tools to debug each step of the connection.
// DenodoAISDKCommandHandler.js const axios = require('axios'); class DenodoAISDKCommandHandler{ async handleDenodoCommand(question, username, password) { try { const apiEndpoint = 'http://<Denodo AI SDK hotname>:8008/answerQuestion'; //MODIFY const response = await axios.get(apiEndpoint, { params: { question: question }, auth: { username: username, //MODIFY password: password //MODIFY } }); if (response.status === 200) { const { answer, sql_query, query_explanation, raw_graph } = response.data; return { answer, sql_query, query_explanation, raw_graph }; } else { throw new Error(`Unexpected response code: ${response.status}`); } } catch (error) { console.error('Error calling AI service:', error); return { answer: "Error occurred", sql_query: "N/A", query_explanation: "An error occurred while processing your request.", raw_graph: null }; } } } module.exports = new DenodoAISDKCommandHandler(); |
DenodoAISDKCommandHandler.js
This JavaScript code defines a class DenodoAISDKCommandHandler that handles messaging with the Denodo AI SDk by sending a GET request to the /answerquestion API endpoint. It uses Axios for making HTTP requests and includes error handling to manage unsuccessful responses.
Additionally, a file you will need to modify is GenericCommandHandler.js. This handles recognizing when the user inputs a slash command and also handles the adaptive card formatting logic for the response from the AI SDK. It is important to note that the Denodo AI SDK reuters graphs in SVG’s that are not supported by MS Teams; to solve this, we have included a function that converts the svg graphs generated by the AI SDK into png’s.
const DenodoAISDKCommandHandler= require('./DenodoAISDKCommandHandler'); const { createCanvas, loadImage } = require('canvas'); const sharp = require('sharp'); … class GenericCommandHandler { async handleCommandReceived(context) { const userMessage = context.activity.text.trim().toLowerCase(); switch (true) { case userMessage.startsWith('/denodo'): console.log(`\nmessage start with /denodo`) try { const question = userMessage.slice(4).trim(); if (question) { const apiResponse = await DenodoAISDKCommandHandler.handleDenodoCommand(question); const cardBody = [ { type: 'TextBlock', text: `**Answer:** ${apiResponse.answer}`, wrap: true, }, { type: 'TextBlock', text: `**SQL Query:** ${apiResponse.sql_query}`, wrap: true, }, { type: 'TextBlock', text: `**Explanation:** ${apiResponse.query_explanation}`, wrap: true, }, ]; if (apiResponse.raw_graph) { try { // Convert SVG to PNG const pngDataURL = await this.convertSvgToPngDataUri(apiResponse.raw_graph);
// Add PNG to the card body cardBody.push({ type: 'Image', url: pngDataURL, altText: 'Graph', width: '600px', height: '400px', }); } catch (err) { console.error('Error converting SVG to PNG:', err); cardBody.push({ type: 'TextBlock', text: 'Unable to render graph.', wrap: true, }); } } const card = { $schema: 'http://adaptivecards.io/schemas/adaptive-card.json', type: 'AdaptiveCard', version: '1.3', body: cardBody, }; await context.sendActivity({ attachments: [ { contentType: 'application/vnd.microsoft.card.adaptive', content: card, }, ], }); } else { await context.sendActivity('Please provide a question after /denodo.'); } } catch (error) { console.error('Error while handling /denodo command:', error); await context.sendActivity('There was an error processing your request.'); } break; } } |
GenericCommandHandler.js
To convert the generated plot from SVG to PNG we have utilized the bellow function
async convertSvgToPngDataUri(svgDataUri) { // Extract the base64 SVG content const svgBase64 = svgDataUri.replace('data:image/svg+xml;base64,', ''); const svgBuffer = Buffer.from(svgBase64, 'base64');
// Convert SVG buffer to PNG buffer const pngBuffer = await sharp(svgBuffer).png().toBuffer();
// Encode PNG buffer to base64 const pngBase64 = pngBuffer.toString('base64');
// Create PNG data URI const pngDataUri = `data:image/png;base64,${pngBase64}`;
return pngDataUri; } |
within the class GenericCommandHandler in GenericCommandHandler.js
How this works is when the server detects a user message begins with “/denodo” it will forward the content of the message to the AI SDK.
Finally we need to register our new command within the manifest.json so MS Teams knows it is available. Open the manifest.json and add the following line in the command section
"commands": [ { "title": "/denodo", "description": "query against Denodos AI SDK" } |
Manifest.json
By registering it within the manifest, the users will see “/denodo” as an available command from the menu.
Testing your App
Then select on “preview in teams app” to load your bot into the local instance.
Running the preview will launch a browser instance of MS teams and the user will be prompted to install their application as they would any other from MS Teams.
After install, the new chat command is available to be used.
For more customization options for the bot please visit Teams Toolkit Wiki
Conclusion
In summary, integrating the Denodo AI SDK with MS Teams allows business users to harness Denodo’s powerful data query capabilities within a familiar platform. This approach focuses on user engagement by streamlining workflows within a singular application and also simplifies the deployment process by removing the need for an independent frontend for Denodos AI SDK. The example code shows how to get started creating customizable interactions from MS Teams with your Denodo AI SDK, making corporate data accessible and actionable across the Microsoft 365 ecosystem
References
Bots with the Microsoft Bot Framework
Bots with webhooks and connectors
Create a command menu for your bot
The information provided in the Denodo Knowledge Base is intended to assist our users in advanced uses of Denodo. Please note that the results from the application of processes and configurations detailed in these documents may vary depending on your specific environment. Use them at your own discretion.
For an official guide of supported features, please refer to the User Manuals. For questions on critical systems or complex environments we recommend you to contact your Denodo Customer Success Manager.
Recommended resources Recommendations generated by AI
Questions
