Microsoft 365 Community Viva Connections, 1 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections ACE to display Daily Insights based on ChatGPT OpenAI API

Description

In this 12-minute developer-focused demo, Siddharth Vaghasia shares the output of an explorational Dev experience using OpenAI, Prompt Engineering, ChatGPT, and calling external APIs. ACE with a PrimaryText card view and a quick view using ChatGPT OpenAI API. Card provides user with informational/motivational quotes, tips etc. Configurable options include API key, select prompt/category, max token, card title and description. Uses session storage to limit the number of requests per user. Deliberate UI and Code walk through (Code Tour).

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 1, 2023.

Demo Presenter
• Siddharth Vaghasia | @siddh_me

Supporting materials
• Documentation – OpenAI Rate limits overview | https://platform.openai.com/docs/guides/rate-limits/overview
• Sample - Daily Insights with ChatGPT | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-ChatGPTDailyInsights
• Documentation - CodeTour | https://code.visualstudio.com/learn/educators/codetour

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

Extension where we can display a daily Insight with open, AI API. This was one of the sample which I had collaborated and developed with kunch. Also so before. I start the demo little bit about myself, I'm siddharthasia I am Microsoft MVP and I love working on SharePoint teams of development, Power Platform, Etc I am an active contributor in PNP, wherein I have contributed various SPF examples, teams, app samples and Sample script. Etc uh I would also like to introduce kunj who has collaborated with me.

A

uh He is also a technical consultant and an expert in SharePoint Office 365. He is also an active PNP contributor and these are the some of the social interests which you would be able to connect with him.

A

So, as I said, I am going to talk about adaptive card extension to display daily insights based on charity of an AI API. This is the URL to the repo where this sample has been contributed, uh so the it started with some kind of an idea on where invents the open, API um jtpd, open, API started appearing. You know uh people were finding different different use cases different different ways to explore the open API. So this was one of my driving Factor wherein I thought you know.

A

Let me just see what we can do with the open API. uh So, uh ideally, we thought of having something wherein we can kind of create an Adaptive card extension, uh which would be which would use, chat, GPT or open API, open, AI API to get the response and display them in the format right. So the another driving factor is, you know like if we can make some use case out of it. It would be great.

A

So what we did was we started with some prompt engineering to use the GPT to see what kind of response it is giving. So we started with some of the prompts, like you know, if they can give us fact of the day if they can give us quote of the day and programming the programmer tip, which we will see, and so we thought we can use this prompt engineering to make something usable wherein, rather than asking the user to send something to the open API.

A

uh If we can basically go and pre-configure that prompt in our code and then send the uh make the request and then get the response back so in terms of summary, uh this adaptive card extension solution uh can be configured to show different kinds of things like you can get quote of the day. You can get fact of the day tip of the day. What has happened in today in the history grammar tip motivational words see. These are some of the problems which are done uh in terms of configurable options.

A

You we have an option to configure the API key, which is basically the open, open, AI API key. Then you will be able to select different forms and categories based on which the Adaptive card extension would make. The API call get the response and put it in the quick view format. uh You can also specify maximum token. This is very important because of the open, AI rate limit. You know how much tokens you wanted to use for a particular request uh for that you would be able to configure it.

A

If you want, you know 250 tokens or 500 tokens to be used, while it is returning. The response you can also configure the card title in description. This is basically in the card view now to kind of say, save some some API request or some right limit.

A

What we have tried to implement is we have tried to implement this session storage so that, once the API request has been made, we are storing that particular response in the local storage so that we are not making that API call again and again for that particular user, uh and then we also have a way for us to navigate to a next uh response.

A

So if we are, if you want to get a next quote of the day or next fact of the day, then we gives an ability for user to basically navigate using next button from where they would be able to get the next response, and we have limited it to 5 to make to save. Basically the request now Associated warning kind of, uh though this is a sample and we are using and calling the open API from the client side as in Sample.

A

But it is not advisable to do it because your API key would be exposed to anybody who can use the network tab. So don't don't use this sample, as in production, try to create a middleware using Azure function or some server side apis through which you would be able to do similar kind of usages.

A

Okay with that, let us go to the demo.

A

So I had added this adaptive card extension here, so this is the one which we are talking about today and if you see it says you know, card title and card description and once you click on explore, it will just basically give you the quote of the day. What you can do is you can click on next and you can get the next quote of the day.

A

uh Also, this is what I was talking about for you to easily navigate and get next part of the day for the user right uh in terms of configurable options. So if we go here and if we edit it uh so this is the maximum token. This is the API key, uh then, which kind of model we are using uh to get the charge GPD. So it is also configurable and then these are the different forms.

A

So right now what we have seen was quote of the day, but if you need something like programming tape, meditation tip healthy life, hack uh that can also be done and then what we want to display in the card primary text and card uh description, which is here, if you don't put anything by default, it will show you your daily insights and also, it will say you to click, to explore. See quote of the day where this quote of the day is dynamic based on the prompt being selected.

A

So let's try to see probably programming tip I'll, just select it I'll republish. It Let me refresh it once.

A

So yeah so it says a coding tip when writing a code use meaningful variable names. This will help you to make code easier to read and understand right and then again you can click on next So. Based on this, you would be able to use this adaptive card extension uh to give some customized daily insights to the user in your Viva connection, dashboard using chatgpt, open, API, okay. So now let me go to the code to do chord walkthrough.

A

So it is the typical adaptive card extension. We have one car view and one quick view and other than that, whatever we are doing, we are just using and dynamically replacing the content within the card View. uh First, let's start with the property pin configuration. So if you see here, these are the configurable properties which are available uh including model maximum token API key Etc. uh One thing which we have to understand is the prompts okay.

A

So basically, uh this is kind of an key value pair of the prompts and the actual text which we are sending to open AI uh this this for some of them it might be very uh similar, but just to make it in human, readable format. Some of them are changed like, for example, grammar tip. uh The text to be displayed is glamor tip of the day.

A

Motivational wisdom is motivational quote, so this is how kind of a simple prompt engineering we have used using chat GPT to see what kind of responses it is getting based on what prompts we are sending to the open AI. So this is the uh kind of the response. uh This is the kind of the prompts which we are sending.

A

Then let's come to the Adobe card extension, so this is where you have all the properties which have been set.

A

Then in the extension we have a state object wherein we are setting the inside, which is basically a string which is written from the response. Then we have an error if there is any error to handle the error, and then there is the next counter, which is the number on init method. It is a very similar, init method where we are registering the card View and the quick view. This is the setup code which comes when you are creating an Adaptive card extension and then in init method. We are loading.

A

The data right, so load data is the method which is basically uh doing all the magic of calling the open AI. uh If your API keys and everything is not configured, what it will do is it will just give you kind of an error saying, there's a missing configuration. So please check with the admin uh in terms of storage. We are getting the data from the storage key.

A

If we find something we are using that as an Insight, so that if the user is clicking again or if user is refreshing, it gives you the same Insight which has loaded to save the request. If not, we are making an API. So basically, we are using completion API, where we are passing the API key as in Bearer token, and once we have that we are passing model, we are passing the prompt.

A

uh We are passing the temperature also based on how much uh how much accurate we need the response to be, and then the maximum token. Once we have the data, we are just setting the state uh to set it up in the inside and then putting it in the session storage.

A

Now next. Next, we are in the card view, so card view is very simple: uh the primary text in the description. uh What we have is we have the primary text. If it is configurable, then it will show it from the configurable property, if not, it will just display by default. You know daily insight and click explode to view the uh category which has been selected. This is how the description is made.

A

Dynamic, then, uh what we have is we have one button which is basically which will load the uh quick view and on card selection, we are just sending user to chat GPT. This is just uh just to make sure that you know user knows that if they want, they can use chat CPT for here.

A

Next, uh if you go to quick view, so quick view in the data part, what we have is we. We have basically.

A

Sorry, so what we have is we are having inside. We have category and we have the next counter right, and this data is passed to the uh quick view, template Json, which we will see in a while, uh but basically it's just in pure text, which has been written from the response now on click of next. uh What we are doing is we are again calling it uh again as this was a sample. uh This can be added into a proxy or a service provider class and can be used from that.

A

But ideally we just put it here so for the Simplicity of this sample again we are calling the API getting the next data and setting the state object to the choices which we get from the API, and then we are setting the same Insight in the local storage key. So this is when the user clicks on the next button, then in the template method we are loading. The template, Json template Json, is very basic.

A

uh What it has is, it has Simple Text block on top where we are showing the category, then the text blocks where we are showing the insights, which is basically the response which we got from the open AI, and then we have the button which will only be displayed if the counter is less than five.

A

So after five, it won't display the counter so so yeah, uh that's it from the demo and from the code side and as as I said, this is a kind of a sample solution to explore the jet, GPT but and use case can be used for us to use this in the Viva connection, dashboard to uh create and uh adaptive card extension using open AI.

A

That's it from my side. Also. If you go.

B

Thank you and it's uh worth pointing out that this actually uh was a last minute uh replacement for our speaker. So thank you for for jumping in and doing an awesome presentation. uh The other thing to point out is uh the code sample that sudarth is showing uses a code tour, which is something that allows you to to walk through the code yourself, uh which is what uh sadakh used today. Some of our samples actually use code tour, if you, uh if you are interested, we posted the link in the chat.

A