Harnessing the Power of PromptFlow: Introducing Our Plug N’ Play Bot Service for Microsoft Teams

Revolutionizing Team Collaboration with PromptFlow

In our latest venture, we’re excited to introduce a cutting-edge bot service integrated into Microsoft Teams, marking our claim for the “Plug N’ Play” badge. This bot leverages PromptFlow technology to automate and streamline communication within Teams.

We have a dataset with 5000+ races with statistics on race performance. With the AI-chat bot, the users will save time when deciding on their strategy for upcoming races. The natural language model makes it easy for the user to ask questions such as, which players have the best lap time on certain maps, what kart usually performs better and so on.

Technical Highlights

  • Built on Microsoft Bot Framework for robust conversational AI experiences.
  • Seamlessly blends into Microsoft Teams, enhancing the platform’s collaborative efficiency.

Future Prospects

This bot is just the start of our journey in transforming business communication with cloud-based AI solutions. Stay tuned for more updates as we continue to innovate and redefine collaborative workflows.

Maritime Mischief Manager (MMM) – A description

“MMM.. is the ultimate tool for pirate captains looking to maximize their raids. With our comprehensive system, you’ll be able to plan, organize, and execute the perfect plunder. No more manual logs, no more disorganized crew. Just a streamlined, efficient process for taking what you want from the high seas. Upgrade your pirate game today with Maritime Mischief Manager.”

Pirates are met with a friendly user interface where they can manage all aspects of pillaging.

Creating a Raid

Under the “New Raid” menu, pirates with the rank of Captain can take a look at possible raid prospects and get an overview of the best possible strategy and also an estimation of the loot potential in the selected location.

The results we are seeing above comes from a query against the ChatGPT API with the use of Power Automate.

Being satisified with the current target, the Captain selects the vessel for the raid, choose to create it and the raid enters planning mode.

Raid planning

From the raid list, piratescan view raids in the planning stage. Simple pirates can choose to join a raid if they want to, but Captains can also choose to invite his best men. Pirates receiving an invitation will have to accept/reject the invitation through their Teams account.

Once the pirate has received and accepted an invitation, they have to scan their provided RFID card when they board the ship. They will then enter the status of Checked in.

Once the RFID card is scanned at the ship, a HTTP request is sent to the raid check-in flow, the flow will update the crew status.


When the Captain is happy with his band of criminals, he chooses to start the raid. The app conveniently simulates the battle as well, together with some nifty battle music. This is of course to save the hassle of actually raiding a place.

Reporting

The pirate management team of course also have access to beautiful numbers of the entire operation

A Pirate Call to Arms!

Captain John Phillips, captain of the Revenge, set a code for his men in 1724. Under this Pirate Code we find the following law:

VII. That Man shall not keep his Arms clean, fit for an Engagement, or neglect his Business, shall be cut off from his Share, and suffer such other Punishment as the Captain and the Company shall think fit.

Consequently, it is critical that each and every pirate is consistently up to date on fleet maneuvers, target acquisitions, and mission engagements in order to deliver efficient value to both themselves and their fleet.

When the Pirate Control Operations Center completes a target analysis process and designates a new valid target, every single Pirate Captain is now notified about the new raid in real-time.

To create this business value, we coded a Custom App for MS Teams, in the form of a Notification Bot. This Custom App utilizes Azure Function Apps and Adaptive Cards in order to retrieve data parameters:

The general codebase for the Custom MS Teams App Notification Bot
The setup of cloud resources in Azure for a fully functioning Function App Teams Bot

The Notification bot was then uploaded and published through Microsoft Teams Admin Center, along with related Setup Policies and Permission Policies. Every single Pirate Captain will now see this Notification bot automatically sideloaded into their Teams UI upon sign-in.

The Pirate Control Operations Center exists mainly in Power Apps. The Pirate Control Center Operators have a full overview over possible targets, and makes decisions on whether a target should be attacked or not, by clicking the cannon icon shown below:

At this point, the Azure Function responsible for providing data to the Notification Bot is triggered, and pings every Pirate Captain through their personal Teams accounts with related data, and a button which links to a location pin on Google Maps:

🚀 Automagical Fairs and Shouts to Fellow Pirats using Service Slave Workers 📣

When plundering and sailing keeping track of pesky DM’s is no job for the captain or crew. This’ why we summoned the services of Power Automate and Power Apps to do our bidding: Enabling our ship to run smoothly and commands being forwarded at the correct time to the correct people.

It all starts with the Consumer of Data “Power Automate” who collects data from all our different intelligence points. Working in the shadows, this ghost can be attached to any workflow. Currently, since it thrives on human flesh for its operations, we started by attached to our crew log. Whenever Power Automate smells the fear of a new deck hand, laddie or lassie onboard it goes to work!

On a new pirate record Power Automate does two things:

  1. Creates an Adaptive Card in teams and posted it to the ships group chat
  2. Sends a welcome e-mail to the fresh pirate, explaining how they need to obey or walk the plank (all pretty standard pirate stuff).
Current Dataverse Tables the flow can write to and read from.
Power automate flows that creates and updates records, when records for pirates are updated we trigger a Teams Integration.

Making the Captain’s work Screen Agnostic

We further improve the Captain’s life with Power Apps connected to the Power Flows. The Power App sits on the users phone, implemented via Teams or as a standalone app, and enables the Captain to administrate the crew roster, so any stowaway can be added to the crew and receive the required e-mail package with plank rules and NDA’s. This mobile approach lets the captain be in full control even when venturing away from his cabin and the desktop computer therein.

Screen snippet showing Power Automate triggering Teams Adaptive Card on new shipmate record.

The convenience of having the Power Apps in teams means the captain can manipulate his Ship, The Raids and roster from any surface, be it mobile, desktop og even tablet!

Screen snippet showing the Power App integrated into a Teams. Notice the responsive nature of teams adapting to any viewport.

Using Power Apps means we can also simulate raids adding new test data on the fly, without it needing to come from our Power Automate flow.

User generated Raids in the raid table, created directly within Power App.

In Summary, for Sleepy Pirates:

  • The Power App enables our users to directly manipulate our data storage.
  • The Power Automate allow other sources and application to remotely access our data.

It’s all about that glossy app

Our main solution is an app for the Pirates to use on their phone when they are out on their raids. So, it might not be a shock that we will claim the bagde for an App. But, of course it needs to be shiny and glossy as well. We are here to create the besgt user experience for the Pirate as we ca, and even if pirates come out as rough and hard-core, they still want their tools to be as easy and up-to-date as they can 🙂

Arrr, the scrawp (script) be mighty powerful in this one!

Pirates love talking trash, and where better to spew out all the fun than Microsoft Teams?

As a pirate you don’t have too many tools at hand at any given time. The same is true in 2023. Why learn something new when you have your trusty old swiss army knife at hand?

This time around we’re stealing from our own team mate, Mikael, taking one of the most powerful and mis-used plugins of all time, the PnP Script Editor Web Part, and we use it to easily embed our “Pirate “Capture a pirate” canvas app into Teams.

Teams App Admin

It’s as easy as rum and grog, add the Teams Tab, configure it with and <iframe> tag and you’re all set. Because everyone knows iframes as it has been a trusted valid tag for over 20 years now. Who knew you could embed and use a PowerApp within Teams????

Script editor web part – iframe

Once set up – it works beautifully!

Canvas Apps in Teams – such a novel concept

The beauty is that it even works on mobile! Pick the tab and embrace.

Capture a pirate responsibly on a device

And for some extra fun, here’s PirateGTP pirate in SVG – well hidden 😁

The input
The output

Badges and why – because why not

Client side salsa – Everyone knows teams tabs are browser tabs, and iframe’s are all about browser love. No monolithic front-end used, only simple and easy html and scripting.

Thieving bastards – We stole and borrowed the open source PnP script editor web part solution, even though inception was involved. PirateGPT is our API on crew mate generation, and Stable diffusion (via automatic1111) is our image pirateer solution. And not free I tell you as we had to purchase a used Nvidia RTX3060 gfx card to get this going.

Chameleon – What can we say, Teams, stand-alone, browser, native app, what not – you will not get away from being onboarded with out solution. It adapts portrait, landscape, even black and white. PirateGPT will get you!

Plug’nPlay – We stole it with inception, it plugs into anything SPFx plugs into. Showcased in Teams as we just love the purple.

Power User Love – All stored in Dynamic, all surfaced in Teams and SharePoint – we love ya’ll!

⚒️Dev and tooling ⚒️

Dev and tooling 

As part of our solution we are developing a Teams App for staffing raids, which uses an Azure Function App to get dataverse data. The toolchain setup for doing this consists of Visual Studio Code, Azure Devops Pipelines and Azure Services. 

To speed up our delivery we have implemented a CI/CD pipeline that deploys the infrastructure and backend code to an Azure Function App. The process works like this 

  • We develop a new feature with Visual Studio Code 
  • We push the feature to the main branch  
  • The Azure pipeline is triggered and executes two stages 
  • Build stage
  • The .NET code is built as a deployable zip 
  • Dev stage 
  • Then infrastructure is deployed with Azure Bicep 
  • The zip is deployed to the newly created Azure Function App 

We have modularized the stage jobs in templates, so we only need 9 lines of code to add another environment to our application. 

To deploy our infrastructure with Bicep we use a Devops Service Connection to authorize operations with the Azure CLI.

Take a look at line 49 – here we read the output variables from the Bicep deployment in order to retrieve the name of the function app. We later retrieve and use this Devops pipeline variable in the job that deploys the code to the Azure Function App.  

The infrastructure is defined in the .bicep file above which also utilizes other Bicep modules. In order to avoid explicitly including secrets we feed it from a Azure Key Vault. A link to the Key Vault Secret is passed to the Azure az group create command in a json file. 

We deploy a frontend-app as well. The build is made and artifacts are created for the spfx-app and for the teams-manifest. We then have a release pipelines that utilize npm and m365 cli for deploying the app to the sharepoint app catalog and to Teams. The scripts are written with powershell. 

For now it only displays basic pirate data from Dataverse 

New and existing tech 🤓

We have to think both new and traditional when we test our idea of a pirate-free world.
In order for us to be able to alert the authorities and ships about possible pirates at an early stage, we have to use tools that are already in place in addition to some new ones.

We think that Teams is a perfect channel to get notifications about newly discovered pirate ships, since it’s something we already have.
We have created a Teams app that gives us notifications in a Teams channel.
Here we have the opportunity to send detailed alerts on situations that arise and at the same time link to our PoS surface for a total overview.

The PoS surface is made in React.js, and the app is built with Vite instead of create-react-app as this is a much faster way to build. New and hip 😉

Integration with team can really be simple

So we used the tool App Studio to implement the “report incidents” React app with teams!
Now you can install the app in Teams and report incidents straight from the teams app. Now the audience can easily report incidents without having to navigate to the website (or install it as a pwa, by all means). Would be awesome to actually have the possibility to officially release it, but given that MS uses about a month to approve the app, this was the best option to move forward!