Microsoft 365 Community Viva Connections & SharePoint Framework, 9 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 9th of March, 2023

Description

Viva Connections & SharePoint community call on March 9th.

Two demos: Build a SPFx solution to create AI generated images with DALL-E API and Build AI integration for Microsoft 365 using ChatGPT and SPFx solution.

Releases: SharePoint Framework – v1.17, CLI for Microsoft 365 – v6.3, Microsoft Graph Developer Proxy – v0.5, SPFx React Controls – v3.13, SPFx React Property Controls – v3.12, Viva Connections Toolkit for VS Code – v0.4.1, plus 8 SPFx & 2 ACE samples, 2 conversations.

Please see the blog post for this call for project updates, news and events details. The host of this call is Hugo Bernier (Microsoft) @bernierh. Q&A takes place as always in chat throughout the call.

Agenda
00:00 – Intro – Hugo Bernier (Microsoft) @bernierh
04:48 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
06:19 – PnPjs Client-Side Libraries – Patrick Rodgers (Microsoft) | @mediocrebowler
07:11 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
08:47 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
10:24 – PnP SPFx Controls – Alex Terentiev (Microsoft) | @alexaterentiev
11:14 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
12:09 – PnP Modern Search – Hugo Bernier (Microsoft) @bernierh
12:55 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
14:53 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
15:46 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
17:08 – Demo – Build a SPFx solution to create AI generated images with DALL-E API – Luis Mañez (ClearPeople) | @luismanez
28:47 – Demo – Build AI integration for Microsoft 365 using Chat GPT and SPFx solution – Nico De Cleyre (Ordina) | @NicoDeCleyre
49:00 – Closing

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• 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

B

To the Viva connections and SharePoint framework by weekly sync, my name is Hugo Bernier and I will be the host for this call. Today, our agenda today is an action-packed agenda. We have the latest updates on the SharePoint framework. We have patterns and practices updates on the various initiatives that we have. We have uh picture time with our together mode, so everybody get ready for that and then we'll have the true stars of the day. We'll have demos with Luis, manes and Nico. Declare who will do some awesome?

B

Demos and I can't wait to get to that. But before we do, let's talk about some of our initiatives.

B

We have a lot of initiatives here and, and you know we can see the Microsoft 365 Empire platform, Community videos. We have LinkedIn group for discussions, we have tons of Open Source initiatives, tons of sample Galleries and more, and you can get to all of those you can actually, of course, you can copy and paste all the URLs that are here, but you only need to remember one URL, which is aka.ms, slash, Community, slash home.

B

We also have many Community calls to keep you up to date on everything that's going on. We have a weekly call with Microsoft speakers, which is the Microsoft 365 Empire platform. Call we have the Power Platform monthly call. We have the Microsoft identity platform, which is also a monthly call. We have the office to add in monthly call, and then we have the bi-weekly call the Microsoft 365 and pirate platform community and the vivac connections and SharePoint framework bi-weekly.

B

You are here and if you want to get all the recurrent invites, you can go to aka.mms, slash, Community, slash calls and the agendas for all the calls are published on social media so make sure to follow us to stay up to date.

B

Now, if you want to present on these calls, everyone is welcome to present you can do some demos on some of the cool stuff you've been working on and all you have to do is to go to ak.ms community, slash, request, slash gimmo and we get paid that the slashes buy the slashes. That's why we have so many slashes in our akas.

B

You can also go to the Microsoft 365 Empire platform, Community call and that's by Microsoft speakers, and so this is where, if you really want to hear directly from the people who are working on the products what's going on with the products that you know and love you can you can join us on March 14th at 8, A.M Pacific time we'll have waldeck Gary, prady and Dan Wallin? Who will talk about very cool stuff?

B

Can't wait to see that now we have the sharing and scaring initiative who I mean where, where you learn to get started with the open source and the PNP communities, you talk about that. Our friend David.

A

Who are you who who? Yes, you are the community, and we want to support you, so uh you may be wondering what is this program sharing is caring is a program that provides you Hands-On guidance. That means that we are all going to join, calls Together, live and in person.

A

Well, maybe in person in front of our own computers, but on teams- and it's going to be not recorded So, it's safe space, you're able to ask any and all questions that you'd like and we'll actually walk you through how to do a variety of these things. So, for example, next Wednesday after the Power Platform Community call, we've got a Power Platform samples contributor session and we're going to show you how to use GitHub show you some really cool features: how to submit those samples and understand that Labyrinth and that landscape.

A

That can be somewhat confusing and frustrating. We've got PNP spfx samples, workstation setup, some amazing stuff with vs code. All these are getting scheduled for March and April. So definitely keep an eye out there. Now, once you do contribute, we want to recognize all the amazing work that you are doing, and that is with our community recognition program.

A

This is powered by credly, yes, that same credly that uh provides those badges when you get certified, so you will have all of your community badges right next to those that you can share on LinkedIn share on Twitter associate to your LinkedIn profile. Put on the fridge. Mom will be proud and they will absolutely I guess I'm done, they will absolutely love it uh and we want you to be recognized for the amazing work that you're doing so definitely opt in. We've also got a hack together badge.

A

So if you haven't seen that, then please check it out. uh Definitely get opted in. We've got badges going out all the time, so take advantage of all the different areas upon which we are recognizing the work that you're doing and if you've got an idea for a badge reach out and let us know you go back to you.

B

And presenting the SharePoint framework award, we have uh vesa.

C

Visa I clearly I clearly need to be really fast before you move forward.

C

So, of course, the usage is growing all apps across SharePoint themes, uh Viva, which are the main areas, and- and we know that during the Spring uh also, the extending teams extensibility to Outlook on office uh is gonna, go ga and that's gonna. That's gonna then mean that you're able to build SharePoint framework solutions for teams which are then extended for Outlook and office as well. So really really cool uh things are growing nicely. Let's go to the following slide: quick update on the latest on the roadmap.

C

1.17 was released two weeks ago on the day we had the last Community call, and that was the kind of an initial release 1.17 not that much details yet on it, but we're looking into having an ETA of 1.17 in early April. So it has bit postpone and the focus areas will be on the team's version update. So we're making sure that you have the right versions of teams that JS SDK.

C

You will have the right version when you synced to teams and there's going to be updated versions on that and, of course, a lot of Investments on the Viva connection and Microsoft Viva areas as well, not forgetting about overall issue tracking and fixing, and all of that across all of the stack where SharePoint framework is being used. That's a quick recap on where we are: let's go forward on the projects.

B

Awesome, thank you Visa. Now we have many open source projects and we want to bring you up to date on the latest open source projects. So let's first get started with the PNP JS client-side Library. So that's the collection of fluent libraries that allows you to consume things like SharePoint graph and Office 365 rest API, calls and a typesafe way and to talk about it. We have our friend Patrick.

D

Hello, so not a lot has happened very recently, I've been super busy and our other co-maintainer is on some kind of a vacation which is a thing I'm unfamiliar with, but we are going to get version. 313 planned for March 17th, uh so we'll see how that version comes out on St, Patrick's Day, but we're going to work on issues and enhancements.

D

uh We've been super busy with other works, so do apologize for a little bit of the lack of responsiveness on the issues list, but uh we will get to those issues uh enhancements for the next release. Thank you all. So much don't forget about our nightly builds talk to you soon. Bye-Bye.

B

Thank you Patrick bye-bye.

B

Now we have the CLI for Microsoft 365, and this is something that helps you manage your your Microsoft 365, tenant and SharePoint framework projects on any platform, no matter whether you're on Windows, micros, Linux, bash or pretty much anything you can come up with and to talk about it. We have Gary Gary, so.

E

Basically, yeah the latest release is version. 6.3 we've got commands across Azure ad planner purview, SharePoint SharePoint framework as well there's over 30 commands in this release, so there's absolutely tons. So uh if you want to get the latest version, uh you want to get that from npm uh use the at latest tag and if you were using our Docker container, uh use the app latest tag on there as well to get the uh the version 6.3 and check out the full release, notes at AKA, dot, Ms clim365, slash notes.

E

um We've also got a really growing uh community on Discord, if you're, not a member of the Discord and but you're using CLI for Microsoft 365., please uh yeah get involved join the the community. We've just made some updates there today and we're wanting to expand the content that we're actually putting on there. So if you're doing anything with CLI, that is the the place to be.

E

Please check out the docs, um follow us on Twitter and if you are using CLI as well and you've not been to the GitHub repository and hit that star button, then definitely please do that now, uh so that we know that you know who's using it that be really really fantastic, so updates on the Microsoft graph developer proxy.

E

If you're not aware of the proxy, this is a command line tool that enables you to test uh your your applications um when they're calling uh several apis like Microsoft graph SharePoint online, but any API that your application might be using. You can use it to simulate behaviors like throttling simulate errors and also mock responses. So you don't actually need to to make a call to let's say the graph or to your your back end custom backend, that you've created the proxy can sit in between and and provide those responses. And so 0.5 is out.

E

You can get the latest version uh there, AKA dot, Ms, slash graph proxy download for the the latest release and what is in the new release. We have a recording mode, so you can record all the activity that runs through the proxy and provide an execution summary uh on that as well. So you can see which requests were failed, which was successful. We've made a slight adjustment to the name of the executable. So now you don't have to put the full name in.

E

You can just put four characters: mgdp in there and launch the the proxy, as well as various other books fixes and internal improvements. um We've got the next version coming at the end of uh March and we're planning to upgrade to.net seven uh we're looking for CI, CD and playwright support as well. So you can buy proxy with UI testing and also guidance for rate limiting and paging as well, and that's it back to you here.

B

E

B

You we have a collection of reusable SP effects, controls that you can actually use in your spfx Solutions and to talk about it is the Amazing Alex.

F

Thank you Hugo, so we finally made a release, so we are on 315 for react, controls and for property controls, 3 12. for react controls. We have new upload files, control that you can see on this slide. We also have tons of enhancement for uh both libraries actually and thanks to all the contributors who made these releases um so great, more information, as always in the uh these URLs, for the Reapers and in the Twitter, which is not so popular, but still uh that's all I have back to you. Hugo.

B

Thank you Alex, and to talk about Viva connections toolkit for visual studio code. We have dear vesa.

C

Excellent I'm back uh so we have the latest version released today and that's 4.0 0.4.1, and this is the extension which is encapsulating or abstracting uh SharePoint framework 1.16, one and CLI for Microsoft 365, so, basically making it easier for you to create, uh leave a connection tooling, with additional guidance, references and documentation and all of that stuff, and it actually works in any shape on framework solution. So you don't necessarily need to remember what are the commands?

C

You can just click from the tasks to make things happen, and we are just about to release a series of eight videos in the YouTube channel, uh which is really focusing on getting started with Vivo connection toolkit vs code extension. uh Thank you, Hugo and David on helping those videos with me so check that out, I will promote those in social media within upcoming days.

C

B

You Visa, we have a PMP modern search Library, which is something that allows you to um it's a series of web Arts. If I could speak what would I say? It's a series of web parts that allows you know your your SharePoint super users, your your administrators and developers, to create highly flexible and personalized search based experiences. In minutes we have tons of questions on GitHub. The usage is growing. We are now at version 4.8 and we'd like to thank all those who contributed.

B

We have an update to spfx 1152 and we are now supporting actionable adaptive cards like Viva, which is amazing, and we encourage you to go. Look at the release, notes for all the fixes and features on the spfx sample size. We have two repositories in GitHub that allows you to share extension, samples and webpart samples, and we have tons of new updates. We have the latest all Microsoft 365 groups and teams, with spfx by Allison. Collins she's updated it uh recently to fix some bugs and added a new card style, which is great.

B

We've added the search conversations tab, teamstab web part by Siddhartha Geisha, who has made it possible for you to find actual conversations in teams in a really easy way. We have an update to the chat, GPT app, which has been updated to the latest model. The chat, GPT 3.5, turbo API, but by joao Mendes Dan Taft, has created a new web part called quick links, which is a really cool example of creating uh well, first of all, a kind of a drag and drop interface with tiles.

B

But another really cool feature is the Dynamic Property panes that update based on what you select? We have an update to the advanced uh sorry. The application oops teams is really giving me troubles today.

B

C

B

That's right, I might have to resort to interpretive dancing. uh So we have the application Secrets exploration by Amy Thomas, which has been updated, Advanced page Properties by valeras narboutas and Twitter uh webpart by Rashmi aklu. uh They have all been updated to spfx 116.

B

and we have a new multilingual, SharePoint page summarization, with open AI, API and Microsoft graph Pages API, which again AI, is a big topic these days and it's a fantastic sample by Anup tati and on the spfx cases. We have David to talk about the latest samples.

A

Yes, thank you Hugo. So we've got a couple of Aces to discuss today adaptive card extensions as we lovingly Know It. uh The first is daily insights, with chat GPT by Siddharth. So this is a really really cool, of course, topical Ace that we can take advantage of. You can see you can do things like quote of the day today in history, grammar tip of the day which I need every day, motivational quote life hack, health tips, some very cool things uh to be able to learn some more information by the hands of chatgpt.

A

We've got an upgrade to the join new teams. uh That's an upgrade to spfx 1.16.1 by Amerie. So thank you for that love, new samples, uh we're trying to get them processed as fast as possible. Don't hesitate to reach out. If you got any questions, you can see more at AK dot, Ms, spfx, Dash Aces and you get a badge so definitely take advantage. You go back to you in the booth.

B

Fantastic and now it's time for the optional picture, time and I believe vesa will be taking over the screen. Yes or that.

C

Is correct that is correct. I'll just need to again find the right screen. Hopefully it's that's one. It seems to be that one and then I will move you all in here and we're gonna do a bit different scene. I. Think we like this one better or at least I like that one better and hopefully we'll get a bit more non-pixelated that stuff. Here, let's wait for a while. Oh it's getting better! It's getting better! Let me wait not yet not yet wait. Wait. We still have 56 56 few seats to fill in.

C

Not yet not yet sugar don't move on the back. Don't move come on, come on not yet not yet not yet a few more okay I will put the recording on uh and we can see where we actually move forward. Excellent, and here we go, let's do some hand faving everybody. Thank you once again and joining on the call good to see you back awesome stuff, good to see a lot of familiar faces. I'm coming in here, excellent thanks, everybody for crafting AK, find information out of that. So thank you. Thank you. Thank you.

C

Let's get to the actual stars of today.

B

Fantastic, let me share again, so we can have the slide there. You go all right so now on to the demos, and our first demo is by Luis benez building and spfx solution to create an AI generated images with Dal e API. Super excited can't wait to see that uh Lewis. Are you ready thank.

G

You Hugo okay in this sample, I'm gonna show you how we can use the valley image generator API from from spfx from a SharePoint web part. First of all, a very quick about me. My name is Luis Mania I work as a chef architect at Clear people UK based company, although I'm working from Spain, I'm, Microsoft MVP in M365 development and also a usual contributor in this amazing Community, uh you can find me in Social Network as Luis Manus, so feel free to be me, I'm always happy to the chat.

G

Okay, I'm sure we all know, but just in case um value. 2 is an AI system that can create images and from a description in in natural language, and actually it has four main features, and the most well known for sure is the image generation. So you can enter a text description and it generates an image. So you say something like an astronaut riding a horse in a photorealistic style and you get an image of an astronaut and kind of a horse and also the second main feature is that you can expand on existing image.

G

So you can post any image and say what you want and, and the service is going to give you an expanded image.

G

Also, you can create an edit of an existing image, so you can say something like in this area: I want to fill the image with this object or whatever, and you get the very much edited.

G

And finally, it allows you to create a variation of any specific image and there's currently a service in Azure, the Azure, open, Ai and but I'm not using it in in this sample, because even if it's already in NGA and you need to register in Microsoft and Microsoft needs to approve in order to to use the service- and that's not my case yet so I'm using the open, AI service directly- and this is the building model for the open AI.

G

This is not for free I mean when you create your account likely you're gonna get some free credits and I think this is still working that way. But after that, you obviously need to pay and and you're gonna pay per image generated in in this case, and also um per the resolution of that of that image. There's currently three support resolutions.

G

So, regarding the resolution and and the image you're you're gonna pay and, as I said, you need to create an account in the openai portal and configure um a billion method as well and after that you need to generate an API key and once you have the key you're you're good to go, and you can you can call the API if you want to generate an image using the value. Api you're gonna need to do a pause request to API openai.com, B1 images, Generations and in the body.

G

You need to include the test description of the image and the maximum length is 1000 characters. The number of images you want to generate the maximum is 10 images in, in one request, also the size of the images, and you have three options like small, medium or large. Let's say, and also the response format.

G

It can be a URL or a basis for a stream, so you can get a a public URL with the generated image or a basicity for a string and also you can send a user which is any stream that identifies your domain User. It's used internally by the by the service to Monitor and undetect abuse.

G

So, let's see it in action. I want to show you first using just Postman and so in here in Postman you can see I'm doing a post request to the image generation URL. So in the body you pass the test, so prompt and I want to generate a couple of images: the small size, the response, format, URL and any string as a user. So um I'm passing the header in the header, the the API key.

G

If everything goes fine yeah here we have the the two different images that, by the way, if you take a look to the URL, it looks like an Azure storage URL right. So well, if you click in the in the image and yeah. Also there's another there's another request here, so you just can see the the result. In the case that you are asking for a base64 data in the response, so this is the image in base64 format.

G

Okay, let's see I'm painting to the web part, so um web part is running in the in the local government. Currently, so, let's Center an image description, so I have here some prompts: let's save some money, so let's generate a couple of images and in the small size, so we click on generate images, and hopefully we should get a couple of images. Yeah I know painting by Matisse of a human and robot playing chess, very nice, and also- and you can click on the image and the image is saved to the documents Library.

G

So we can open the image and if we go to the document Library, it should be there yeah. It is so well you can imagine marketing marketing person with this webpage, generating multiple images, a story in Serpent and then creating content and Pages. Using this, these images I think it's it's something that actually at some point it would be integrated in in SharePoint out of the box.

G

um So this is how the web part the web part goes. So let me jump back into the slides.

G

um Let's take a look to the source code: these are the the couple of calls that and I have in Postman. So hopefully you can see it a bit better here, but anyways. It's just a call, a boss with a different with a different daytime in the body and what you get in in result with the URL images or base64..

G

So, uh first of all, I've just created a couple of classes for modeling, then image request and response. So in the request you can see, I have the prop the number of images size and and response format, and also the same for the for the response, with the different images in in an array and in my case I'm using the base64, because actually, when using the the URL format, I wasn't able to change the image source attribute when getting the response from the API I.

G

Don't remember exactly, but it was something blocking it from the from the browser. So the solution was to use the 360 for stream, and- and this is what I'm doing and now there's a service class.

G

This is the class that is actually dealing with the daily API and also being a SharePoint, so I'm using Independence injection, so I'm, using the service scope and also I'm using the HTTP client from spfx to call the the API- and you can see here- are the different imports from the of some pmp.js library to deal with SharePoint in order to save the images.

G

So just a couple of methods generate images and say very much to to the document Library in the case of the service in the Constructor again I'm, just resolving the different services from the DI container, and also configuring the the PMP yes and, as you can see, they say pretty much to the site: assets Library, it's just using PNP, so I'm, getting the documents, library and adding the the file and after that, I'm just getting the the full URL of the Image store in in SharePoint I'm.

G

The main method for generating the images when calling Valley is this one? So I'm configuring, the the headers with the API key as as the authorization is, is using the the authorization, header and I'm doing the post request to the URL and sending them they match the data that I want to to get and then I'm just returning the VR ride of the different images.

G

Now we are already in the in the spfs web part. So if you only need a method, I'm configuring, all the the is stuff with the services scope and also the PMP and and my service, which is passed to a real component in the react component. We have a bunch of fluent UI controls from the UI, the text area and slider and so on, and then we have here the the method that is getting the request using the the service and nothing to to fancy here.

G

And finally, this is the code that is getting the the URL of sorry, the base64 image and I'm rendering in the in the screen. The interesting part here is that I'm converting the basis DeForest stream to uh to a blob in the in the browser and getting the the URL. These are these three lines on here and to convert the basicity for a string to block I'm just using a third-party package installed using npm, which is called block Duty, which actually has quite a few utilities around around gloves.

G

So a really good one and that's actually everything regarding the code and the sample is already available in the spfx GitHub repository, so you can download and use it and give it a try and let me know any any issue and that's all. Thank you. Thank you very much for having me today back to you.

B

That's a fantastic sample. Thank you, Luis um I I, you know just remember. Everyone uh with great power comes great responsibility, make sure to use your uh dally AI API uh responsibly. Now, let's move on to our next presenter, Nico Nico is going to talk about building AI integration for Microsoft 365, using chat, GPT and nspfx solutions. Nico. Are you ready.

H

Yes, I am ready so um I'm going to talk about the chats hept aspirics web 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 developments, but then something amazing happens: I discovered the world of client-side development by jumping into SharePoint framework.

H

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. I work at ordina Belgium, it's actually a Dutch, another Netherlands Belgian company, and you can always reach out to me on my website or one of my socials.

H

So today, I'm going to talk about the shot hept, who are Parts umt is quite popular these days and it takes searching for an answer to a certain question to a whole new level. The idea was therefore to integrate chat TPT in an SPF vixel part, so that people could use this as a search mechanism towards the internet within their Microsoft 365 environments.

H

But enough talk, let's jump into a live demo before we can start using the chatibility report. There are some prerequisites that we need to do. First of all, we need an open, AI. Key open AI provides access to its AI models and tools through an API that requires an API key. The open, AI API key is unique 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.

H

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 view, API keys in this screen.

H

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 be intercepted I'll show you later in this demo. Don't worry about this secret. Key I will delete it right after this demo.

H

So next, let's jump to the actual Uber parts. Once you have installed the web ports 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. 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.

H

We save it and now we can use the web Parts. You notice that I use a web developers, but you could could also use phone other method outside some SharePoint framework or stuff.

H

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

H

Ask.Vd 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 kpt, where 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 kpt about an explanation for this. You will see it will. um It will add the answer just like a sort of chat um in this in this web part.

H

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

H

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 hept.

H

um That's because the chatibility uses a slightly different API, so there there seems to be a little 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 part properties to store the API key.

H

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.

H

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 with that package um you can then use uh the the API in your reports. There are two important things. First of all, you have to define a configuration object that just an object that holds your your API key. It doesn't do the the connection. It just holds the API key for you, um that's the first thing, that's important.

H

The second thing: um that's important is the API itself, so you just use jet CPT dot, open Ai, and then they create completion.

H

If we look into the possibilities, all sorts of functions you can use here at the the create an image function, you have the the grid, completion, I'll, create file or stuff. That's all uh things you can do against the open AI. 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.

H

um It wants an object. So it's it's uh 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 DaVinci uh language model, which is the third version already um and after that you have to put the prompt, which is, which is the actual question that you ask. 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.

H

uh That's not so pretty pretty long, so um you have to give the max tokens if you want a longer answer for your questions.

H

So that's actually the the API call in here and you get it in your in response and when you get the response, um you can find your answer in the 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 Uber part.

H

So that's basically, basically all about the information 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 tablet Network, you can see actually API that's happening so.

H

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.

H

We 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 in mind.

H

um As a last thing, I want to talk a little bit about uh um the models that the order actually Four models that you can use. The first one is The DaVinci model like the one that to 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 white, very variety of styles and formats.

H

It can understand the most complex ideas and Concepts, making it well suited for tasks such as creative writing, content generation and even coding. That's actually the most used. Next to that, the second one you have the curry model. 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. It is still capable of producing high quality text that 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 content.

H

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.

H

The last one is Ada: Ada is opening a newest language model designs, a special specifically for natural language processing. Such tasks such as language, translations, sentiment, analyst 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 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.

H

You can opt to use one of these for um 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. 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. 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 PMP 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. Now, 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, 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, recalling 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 make or any chance.

C

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. 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 could 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.

C

The other thing with Veronica had a really good point uh in general, related on open AI, which was hey so um is it actually reliable, so is AI. Is that way? Is there a way to assess the quality of the answers and that's a really interesting question, and this gets already to the I think Hugo loves this philosophical AI idea questions, but it goes to the what is true and what is false. One of the challenges here is that, of course, open Ai and AIS in general are being fought by the information in Internet.

C

So is the internet true, and is it correct? Well, no, it isn't so there's a certain level of you know um at least well, there's a classic storyline, at least in Finland, there's a explicitly teached in the school for kids to be courses about the internet information what you're reading. So you need to understand where the information is coming from and and we're just watching on the open, AI responding back.

C

You don't actually know where what is the reference of the information and where did it come from and that's something what Bing is doing based on? If you, if anybody has access on the Bing, they will actually reference back. This is my answer because of these reasons now my take on this I'm going to take 20 seconds on the style and then let anybody else to elaborate my take on this is that we're just seeing the first steps of the AI and the first step was actually people innovating and starting using things.

C

um This thing goes forward so fast. That depends six months within 12 months. I would not be surprised that, as part of this open, AI, API call or Azure open, AI API call, which will be evolving as well. You would actually get the references back, so the answer will be based on the information which we gathered from this these sources and then, of course, it's still up to the reader who's. Getting the information to invalidate are those reliable sources or are those not reliable sources, and that really hard thing nowadays in the internet for sure.

A

Yeah I'll even add on to that. That's a that um Hugo and I were doing some testing with it and you really need to validate the accuracy overall, because even with things that seem simple like math and dates, uh we were asking it to provide a schedule for something and it uh for April and it did for 2022.. So it gave us exact dates and schedules for 2022., so uh even things that may seem obvious to us as humans. It's not necessarily obvious to uh to the machines, but don't tell them. I said that.

C

Yeah, yes, let's not tell the machine, but but again we are only seeing the early steps which, where we are heading with all of this, so most likely all of these things and concerns will be for sure at rest, uh it's it's almost the same I think I had we had a discussion with one of the partners earlier today in the partner interviews or, let's say we're current interviews, we're.

I

C

That he was saying that he he Compares this the same as the 2010 or 2012. When Microsoft introduced the cloud and Microsoft 365., it wasn't widely used, yet it wasn't as powerful as on-premises, but everybody knew that within five to ten years it's gonna be delocation and because more and more Innovation happens in Cloud, so we're kind of in the similar situation with open AI, which is not open, AI with AI in general, which is we are in early stages and we'll see where we will be within five to ten uh years. By the way.

C

That's a good good cartoon I'll put it on the chat for related on that one, but again different references. It's it's an interesting discussion, point for sure um and where we are and how things are evolving in incredibly fast.

B

Yeah I actually uh search Chat GPT for uh the show that David and I are doing Power, Platform connections and it said that the the hosts are both entertaining and charming, and so it's obviously wrong, but uh all right. So with that, let's wrap up the call again. Thank you for our both presenters, Luis man, yes and Nico. Declare to talk to us about both topics happen to be about AI today and I think it was very enlightening. I'd like to thank everyone for attending this call.

B

The recording will be available in 24 hours on the Microsoft 365 and Power Platform Community YouTube channel, and so if you are, if you see that the recording is ready in the chat and don't click on it because every time you do it sends a shock to vesus chair, you can follow us on Twitter. At myself.

B

There you go somewhere and at Microsoft 365 PNP, our next Viva connections and spfx call is going to be on March 23rd at 7 A.M Pacific time and our next Microsoft 365 and Power Platform call is going to be on March 16th at 7 A.M Pacific time you can get all these calls at aka.ms Community, slash calls, and with that. Thank you. Everyone thanks.

C

Everybody cheers.

B

Thanks hi, everyone.