Microsoft 365 Community SharePoint, 9 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build AI integration for Microsoft 365 using ChatGPT and SPFx solution

Description

Learn how to easily incorporate this search capability in your Microsoft 365 environment during this 16-minute developer-focused demo delivered by Nico De Cleyre. Review prerequisites - get OpenAI API key, install the web part, add web part to a site and add your API key to Properties. Code deep dive – install OpenAI package, configure chatGPT and API response parameters. Review 4 Open AI language models, options for concealing your API key and token usage optimization.

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

Demo Presenter
• Nico De Cleyre (Ordina) | @NicoDeCleyre

Supporting materials
• Key – platform.openai.com/account/api-keys
• Sample - Chat GPT inside SPFx | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chat-gpt
• Article - Integrate ChatGPT into SPFx solutions | https://nicodecleyre.com/2023/02/08/integrate-chatgpt-into-spfx-solutions/

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

Part today, first, a little introduction about myself, so I'm Nico declare father of two daughters and I started my career as a SharePoint developer way back in September 2010, so for eight years, I dove deep into the world of back-end development, but then something amazing happens: I discovered the world of client-side development by jumping into SharePoint framework. So thanks to SharePoint framework, I evolved more into an M365 developer, so now I just developed within sharepoints, not just in SharePoint, but also in Azure Power Platform and much more. There's also always something new to learn.

A

I work at ordina Belgium, it's actually a Dutch, another Netherlands virgin company, and you can always reach out to me on my website or one of my socials. So today I'm going to talk about the shotgpt web part. um It is quite popular these days and it takes searching for an answer to a certain question to a whole new level.

A

The idea was therefore to integrate chat hept in an SPF vixel part, so that people could use this as a search mechanism towards the internet within their Microsoft 365 environments with NF talk, um let's jump into a live demo before we can start using the chatibility report. There are some preview visits that we need to do. First of all, we need an open AI.

A

Key openai provides access to its AI models and tools through an API that requires an API key open, AI API key is unique to identifier that grants access to the open, AI API, allowing developers and researchers to use openai's, powerful, artificial intelligence models in their own applications and research projects to obtain an API key.

A

You typically need to sign up for an API account and provide some information about yourself, but once that you've been approved, you can generate an API key that can be used to authenticate your API requests, so you can create a retrieve a key by going to to platform.openai.com and once you're logged in, and you click on your account at the top right. You will see that the menu will appear, and here you click on a few API keys in this screen.

A

You can click on create a new secret key and it will generate a new key for you, save it somewhere, because after that it will no longer be shown for security reasons. An API key is personal, so never share it or use it publicly as it could to be intercepted. I'll show you later in this demo. Don't worry about this secret. Key I will delete it through right after this demo.

A

So next, let's jump to the actual Uber parts. Once you have installed the web part in your tenant and added it to a particular site, you will see it will ask for the API key. Like you see here, it cannot work without an API key for this solution. I opted to store the API key in the web, part properties. So if we click on edits, you know the part properties.

A

You see that will ask for an API key here, I paste, my API key, and you will see that the screen changes right after it Simply Save It, and now we can use the web Parts. You notice that I use a web the web part, but you could could also use for another method outside SharePoint framework or stuff.

A

So next I can start asking questions against uh against the chat TPT like, for instance, what is the Microsoft Community call, and why is it so I want to attend.

A

Asp.Tpd now we have to wait a little while because now it's retrieving the answer, so here it works no way, but once you ask the chat hept, what part you see it? It gives you an answer. After that you can ask a new question like, for instance, what is football? It's amazing sport, but I'm just going to ask chat kptpt about an explanation for this I will see it will. um It will add the answer just like a sort of chats um in this in this web part.

A

um It holds all the answers. If you later on, wants to start over and clear all the all the answers you can just click all the answers I will see, it will be cleared.

A

One thing I noticed is um that there's an API that we use for for this SharePoint framework part, but I noticed that the the answer differs a little bit from the the answers you get from the actual chat TPT.

A

um That's because the chat TPT uses a slightly different API. So there seems to be a little a little difference in the answer that you get, but still you get a pretty cool answers. So how does it work? Let's dive into two codes? A little bit. First of all, like I, was already set. I use the Web Bar properties to store the API key.

A

This one is sent to the to the ES file, to the components file actually and in the components file. There are two important stuff for this solution. I used the open, AI npm package. It's just a package that you you can install.

A

Which you can find in here, so you you just have to do a npm, install open Ai and it just installs the package for you and widget package. You can then use the the API in your reports. There are two important things. First of all, you have to define a configuration object, um that's just an um an object that holds your your API key. It doesn't do the the connection. It just holds the API key for you, that's the first thing, that's important.

A

The second thing: um that's important is the API itself, so you just use jet CBD dot, open Ai, and then they create completion. If we look into the possibilities, all sorts of functions you can use here at the the create an image function, you have the grid, completion, I'll, create file or stuff. That's all things you can do against the open AI.

A

Here we choose for the create completion. That's just uh when you ask a question that it gives an answer for this. It's it's. um It wants an object with with some parameters, some options, and these three are the most important. First of all, you have the model for the model. I used here the text definitely a language model, which is the third version already and after that you have to put the prompt, which is, which is the actual question that you ask.

A

Also an important thing in this object is that the max tokens um it's it's best to Define it because uh standard you get like an answer of uh 20 tokens. uh That's not pretty pretty long, so you have to give the max tokens if you want a longer answer for your questions.

A

So that's actually the the API call in here and you get it in response, and when you get the response, um you can pack your answer in the dot data that shows this choices, first element dot text and there you can find your answer to your question for this solution. I just chose to put every answer and the question that is asking to a state. So it holds all the questions and answers in the Google part.

A

So that's basically, basically all about the operation, which is actually quite simple, I guess I also wanted to show you how the API eventually executes. um That's also, maybe a nice thing to know. uh When you go to the to your network uh tablet the network, you can see actually API that's happening.

A

You see here, that's actually API, so it's api.openia.com completions and the important thing about this that I wanted to to talk about is in the headers. You have the authorized authorization header, which is just like the the oauth 2.0, where you have a bearer and your access token, but here it's a better annual API key. So that's something you have to keep in mind. If you want to use something like this publicly it it's, your API key can be, can be intercepted. So uh that's definitely something to keep in mind.

A

um As a last thing, I want to talk a little bit about uh um the models that there are. There are actually Four models that you can use the first one is The DaVinci model like the one that we use in the in the web part. So that is open, ai's, most advanced language model. It has been trained on a huge amount of Text data and is capable of generating high quality text in a bytes are very variety of styles and formats.

A

It can understand the most complex ideas and Concepts, making it well suited for tasks such as creative writing, contact generation and even coding, that's actually the most used, and next to that, the second one you have the query model.

A

It's a smaller and more efficient language model, that's than DaVinci designed for tasks that require faster text generation with fewer computational resources, which is still capable of producing high quality text, but may not be as versatile as DaVinci. Curry is particularly well suited for tasks such as summarizing large amounts of Text data and generating short form contents.

A

Third, one is I, hope, I pronounce it well, it's another language model that is designed to be more accessible to developers and researchers who may not have access to as much computational power as it's required by defense, DaVinci or Curry. It is still capable of generating high quality text, but may not be as efficient or versatile as larger models bye, guys it's well suited for tasks such as language, modeling and content creation.

A

The last one is Ada: Ada is opening a newest language model designs, a special specifically for natural language processing. Just tasks such as language, translations, sentiment, analysts, analysis and question answering. It is particularly good at understanding the nuances of human language and can help improve the accuracy, accuracy and efficiency of NLP application next to every um language model. You can also find the the latest model that you can use in your web art. Like you, see, text Dash, query: Dash, zero, zero, one So based on your needs.

A

You can opt to use one of these four language models. So that's all. Thank you all for attending.

B

That's a great demo and it's very inspiring what the cool things that AI can do for us. uh One of the things that we should talk about, though in this demo is Nico, has made it really easy for you to embed the API in the property pane. uh However, right in a in a production environment, you would normally avoid to to expose the API to the individual users, and that's actually part of the the chat GPT API requirements is that you should not be sharing your API key one of the options that are available.

B

If you were to to adopt this code for more production ready thing, you could probably use something like Azure key Vault or one of my. My favorite options is to use uh the uh the storage entity which is available in SharePoint, so you have the SharePoint Management Shell or the PNP Powershell.

B

That allows you to set storage entity into your tenant and then your web part can actually use a just a regular, get HTTP request or use pmpgs to go retrieve the storage entity API key, and that way you don't need to expose the API key to to anybody and the webpart can still access it. No, let's just uh to be clear when this the key is stored in the storage entity. It is available in clear text for people who are retrieving it, but again, there's there's a few options that are available here.

C

Don't stop sharing yet I want to go back on a few things, because we do have a few minutes. So, let's, let's there's actually a really good point, uh which is, if you want to hide to token, you could actually hit an Azure function which is secured within your company and then in the Azure function. You will actually call the open AI API, so you wouldn't actually do this in a secured way and then, as the Azure function, we're calling that API is happening in the server side of azure.

C

So to say, what's on the server side, there's no servers, yes, their service, if somebody's computer anyway, but nobody would actually have access on the token you'll just hit the Azure function and Azure function does the the bypassing of the calling to the open API. So that is a really good point on the chats just to call that one out any chance, you could go back on the on the calling of the API one thing: what I wanted to actually call out, uh just just for those who are not necessarily super familiar with this.

C

We talked about the token, and we mentioned the token and, and the token is basically uh something which- which you have a certain set of. You might consider this I'm using metaphor here, but you you have a certain set of coins which you buy for having when, when you subscribe to the apis and tokens are basically the complexity of the answer.

C

What you're expecting to come back so you're using more and more of those coins which you have in your back end, and so it's it's basically an AI could give you a what is it it will give you a novel or if you could give you a short answer and depending on what are you expecting to come back, you don't want to over use your allocation, so to say so. That's actually a good thing to call out about the token there was the token configuration in the code as well.