Boost Developer Productivity with Copilot in Viva Connections
Copilot, Copilot a Copilot for everyone!
TLDR
This blog post shows how to use Copilot to create Adaptive Cards for Viva Connections. We ask Microsoft 365 Copilot for some ideas for cards of our dashboard and then take that to Github Copilot to generate the code for the Adaptive Cards. The results are discussed are the topic of the blog post. Results are really impressive but fear not, there is always room for improvement.
Introduction
Propably every developer has already seen it, that promise of the newest AI IDE that reduce your job to prompting. And if you have been around for a couple of moons, you just giggle when marketing comes up with the next silver bullet that solves all the problems out there. With this post we want to take a look at how the Micrsoft tooling at the moment holds up to their promises. Yes there are other tools out there, and I think I will write about my experiences with them in the future. But for now, let’s focus on the Microsoft 365 Copilot and Github Copilot. Hint: ChatGPT & Cursor AI, for the curious ones.
The Brainstorming
In my day to day I was part of a couple of discussions around frontline workers and how Viva Connections could be of use for those people not sitting infront of a screen 8 hours a day. My role in this process is most often a combination of consult our customers on what to use and what to expect from the tech stack. I’m not a full time developer, let me make that very clear. So, if I need to create an Adaptive Card by myself, in the past, I would have opened up the Adaptive Card Designer and started from scratch or to be honest, I would have copied an existing card and modified it to my needs. But let’s start with the brainstorming part of our scenario.
Here my prompt to Microsoft 365 Copilot:
I want to create a real world demo case for a retail customer using viva connections dashboard for their frontline workers. what would be your three top picks in terms of use cases for that scenario.
And here the results:
That already is a good start. Are there better scenarios out there, propably. But given that this result is based on a 36 word prompt, I think it is more than enough to get started. Of course we could have asked for more scenarios, or more detailed scenarios, but for the sake of our quick test, this is more than enough.
The Coding
I used Visual Studio Code for this test. I find myself more and more drawn to it, even for the C# code I write. If you open VS Code and you have the Github Copilot extension installed, you can start typing your code and Copilot will give you suggestions. In our case, we want to create an Adaptive Card for the scenarios we got from Microsoft 365 Copilot.
Before we look at the prompt and at the results, a short hint: I used Claude 3.5 Sonnet for the prompt. I could of course tried the prompt with a different model, but I also started to play around with Cursor AI. There Claude 3.5 is the default model and I want to compare apples with apples. Yes there are differences in the application layer between Gihub Copilot and Cursor AI, but I wanted to at least have the same model for my tests. If there is a significant difference in the results, at least I can say that it is not the model that is the problem. Or the solution, depending on the outcome. (think positive, right?)
Unfortunaly I’m not smart enough to find the Github Copilot chat history in VS Code. So we have to go with the screenshots I took. But I think you get the idea. And my English “is not the yellow of the egg” anyways, so no need to copy and paste my errors.
The result of this prompt was a bit more than I expected. But look for yourself:
I will add the code of one of the cards as a reference at the end of this post. But I think you get the idea. The code of course is not perfect, and it is basically only the UI. But for demo systems, or proof of concept scenarios, or early stage development, where you still struggle to be on the same page with all the parties involved, this is a great start to get the conversation going. This is not the final product, but it is a great start to get the feedback loop started. Yes, it brings it’s own challenges with managing the expectations of the stakeholders, because this is not a wireframe and you have to make it very clear, that this is just a “empty shell”, not anyway close to the final product. But given the effort we put into this, I think it is of immens value.
And here the screenshot of the other cards, that were generated by Github Copilot based on the prompt we gave it:
And the last one:
The honest feedback
To make it absolut transparent here the hickups that happend during the creation of the cards. The first card was created with a tiny issue. The url value of the used image had like 50 spaces in there. So that card needed some minimal adjustment. For cards number 2 and 3 I needed to regenerate the answer from Github Copilot. Both times the tool stopped at the first run somewhere in the middle. I just needed to hit the refresh button and it worked. My guess, this is a scaling problem of the model in the background. Felt like that endpoint got hammered the time I played around with it. And let’s not forget, the sonnet model is still in preview. So I’m not mad about that. I’m happy that I got the results I got. Other then that, no further issues. And the overall time spent on this was less then 15 minutes for all the three cards.
Would I have been able to create the same cards by myself? Of course. But never ever in that short amount of time. And I think that is the point of the whole exercise. So far my findings, and I’m looking forward to the next steps. But that is a topic for another post. Thx!
The code
{
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Store #1234 - Floor Communication",
"weight": "Bolder",
"size": "Large"
},
{
"type": "TextBlock",
"text": "Electronics Department",
"isSubtle": true,
"spacing": "None"
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Quick Connect with Supervisors",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://cdn-icons-png.flaticon.com/512/1154/1154448.png",
"size": "Small",
"style": "Person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Sarah Johnson",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Floor Manager",
"isSubtle": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Message",
"style": "positive"
}
]
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "New Message",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.Text",
"placeholder": "Type your message here...",
"isMultiline": true,
"id": "messageInput"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "🎤 Record Voice",
"style": "default"
}
]
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send Message",
"style": "positive"
}
]
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "📞 Emergency Contact",
"style": "destructive"
},
{
"type": "Action.Submit",
"title": "📢 Broadcast Message",
"style": "default"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
