Microsoft 365 Community SharePoint, 19 Sep 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building SPFx solution to manage your Azure DevOps projects with OpenAI integration

Description

📺 In this 13 minute developer focused demo, Ejaz shows how to use OpenAI in an SPFx Web Part. Using the OpenAI function calling feature to determine user's request and intention and then process relevant function using Azure DevOps API to allow users to view recent tasks, bugs, and commits assigned to them from a project in Azure DevOps.

This demo is taken from the Viva Connections and SharePoint Framework community call 10th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Ejaz Hussain (Content+Cloud) | @EjazHussain_

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

Sharing is caring! You are awesome! 🧡

A

A

I'm, a developer architect and company called content and Cloud we're based in UK here's my contact details in LinkedIn or Twitter. Please get in touch if you have any questions so today we're talking about a SPF expert part and what I build is I.E, so I wanted to basically see how can we use open AI into our spfx web part, so one of the one of the case or or the idea was to basically we can.

A

We can ask the question in our natural language and see if we use the help of open AI, we get the response we wanted from our it could be any AI it could could go from our apis could be IU, devops API. It could be graph API. So the idea is to basically you ask your question in natural language. You don't have to basically click on the button or specific, sending command to your API. Let's use the API to basically give you the parameters to call your function. That's what we're talking about today.

A

So now, if you go next so uh so I used in this sample, I used the open, AI function, calling feature to determine the user in request and intention, and then once we we know what's user wanted uh and that's we we're gonna using this uh open air function, calling feature to determine that. Then we can use those uh response from the open, Ai and then gonna call our own uh API. It could be in this sample I'm pulling Au devops API.

A

So another thing we're doing is in terms of some tasks I'm doing in this sample I'm asking for some recent tasks, I'm asking for bugs I'm asking for some give me some commits recent commits into a specific project and uh and we doing some natural language processing of the user query.

A

So what is uh before we get into the chamber? So we look into what is function, calling feature so function. Calling feature is, basically is the ability for these models to understand and generate Json object for a specific function called based on the user. Security says same so you basically like, for example, you imagine you want to call say, hey who are my? um Who are my top customers kind of thing so once you pass this request to open AI, open AI, send you the uh look into this request? Send you a some parameters?

A

If you're able to generate some parameters and say, and if based on the you know uh the functions you have defined as a part part of your prompts and then from there open, I will understand which function in your API. You wanted to call, and what are the parameters are so and then, once you understand, okay, once your system understands that this is your function is required function, then you can make a normal API request to get your data, so we can do more detail in a minute.

A

So at the end, what it does is basically, um once you make your APA request, uh then you can again call the open AI again. If you have a. If you have a, for example, a a con do API send back a large amount of data or a huge tax. Then you can still use API, API, open, API part of that flow to further summarize that the data before you go back to the user. So if you look at this, how to use this function, a function calling feature so there are five steps.

A

One whole open, AI with user query, so we call the motor we pass the query, and this uh and and we also pass the function parameters which we're going to Define beforehand and then and if the and then model will generate a Json kind of object, because we are passing our functions. Api functions parameters as well all the definitions, then the open air will basically based on your uh uh the the definitions. You are passing. It will send you a Json object, saying: hey I, I know this is the function in your API.

A

You wanted to call, and here is the parameter which I extracted from the user request now and then, once you got that you just basically use that position, function and college function. So once you got that Json object, you simple basically extract those um parameters from the response and call your API could, in this case I'm calling a devops API and then, if needed, that's optional.

A

uh You have a two option: either, if you think, if you still feel the response from my API is still quite large, and you still want to summarize by the open AI still going to go ahead and make a another request with the response and then the open AI will also summarize again, and then you go back to the user. So that's basically, five step function when we're using the function calling feature in open AI. So let's look into the demo.

A

uh So right so I have this devops project, which is a one organization which is each other, send and then I have a project called o3c and then within node 3C I've got a couple of wrappers, so all three C SPF web ports uh and some other repos as well. So if I go and refresh this, let me just refresh this just quickly and uh if you see, if you noticed uh I, would because I already configured this uh my devop organizations Auto selected each other send.

A

But if you added this, then you will see this drop down. You might have like a multiple organizations, uh configuring devops, so you will see in drop down here and then you can sleep select which one you wanted to uh basically use in in that sample and I. Think the the sample which I've uh using the pull request you'll also see another field here for the open, I key uh as well. So you can configure here in the property pane.

A

So let's do a um ask some question to the devops and see if we can get some answers. So, first of all, I'm going to ask this question say: uh show me all tasks assigned to me in o3c project, because this is where the key is. If you is going to translate this into a a some, it's going to generate some Json object to open Ai and then it's gonna give me hey, I, think you're.

A

Looking for your sign task- and this is the project in your in your organization- so it's going to basically extract those parameters and give me this is the function. You want to call with these parameters and then I'm going to go ahead and call the parameters and then I'll return back to the user, and this is where, basically, you know the interface. Could you could you could build with any any who you like?

A

So if you click on it, it takes you to the task in the devops and then there's less some some other uh task in there. So you say show me uh bugs assigned to me. You know some say if you're looking for a bug, it's gonna give you different parameters, so I'm going to call a different, API, endpoint and pull back some bugs assigned to me and then, if you're.

A

Looking for some recent comments, let's first know give me some recent comments and in the in this case, if you look at the question I'm asking you give me the commits but give me because you have to specify which level you want to commit from right. So this is the repo I won't commit from, and this is the ultra. So you have. Your question has to be specific, because this is you, based on your question and based on the parameters you passed is going to make judgment which function you want.

A

Api function you should coordinate is the parameter so as soon as it passes, it's going to basically bring me in this wrapper all these uh the recent commit. Basically, you can see I've added a 42 minutes ago, I've added this commit Etc. So if I click on probably here so you take me to that particular commit, and you can see the changes and Etc right so I think there's another one. I've added is, let's see I, don't know. What's the response going to, but let's add some random question. What's the weather like in London today.

A

That is thinking right, so, okay, so I cannot I can only help you with the task about running the project. I don't have anything with the weather in London, so this is like I already have something like if you don't get any if you get random questions, so please give this give this sort of answer like because you're only trained to uh respond with the bugs task and the commit. So your knife and information this one.

A

So let me go back to the quickly code, um so in here we first of all go to uh so you see here. I have another field which I was talking about, so you will have a open AI key, so you can Define in there in your property Pane- and this is the um probably async drop down for the organization. So this will be up. uh If you go here is uh it will be Auto populated based on your permissions, so that you can choose which organization you wanted to use?

A

And if you go to the domain here, so let me go back to so. We have a a react use hook, which is basically called open AI. So when, if someone sent me a message, uh if I have a so then what's going to happen, is I'm going to call this guy and this call calling the two things one the message I received and then the function. So let me take you. The function before I go to the message, so this is the constant we're defining.

A

So this is the key thing here, basically I'm defining my parameters um uh so I'm. Basically, this is the get assigned. Task is a function I wanted and the parameters are what it does create. All the active tasks signed to me and then object with I'm passing this is the project name I need the project. Name is a pyramid, so you can Define any parameters you like and then and description of each parameters. Basically and then another function, I've got get assigned bugs and description and the parameters we needed. You need to Define.

A

What do you need to call the API? So you need to define those parameters here and then what open API will do is is try to extract that information from the message which user has entered and then based on uh the selection is going to make a you might have like a huge list of functions and then he's going to say, use this function and here are the parameters.

A

So that's what I'm doing I'm passing this to cold open AI hook and my the message user has enter and once I get the response I'm going to go and process the response, so in response I'm checking. uh So the stop is the one which is the last one. So if the the case is stopped, that means it doesn't have anything else.

A

So you at this point you can go back to user and show to the message or which is I was uh when I was saying, is bit optional because you don't have to summarize the result all the time you can basically go back to user. At any point you like so, for example, if user.

A

If- uh and this is a function, call uh is I'm gonna I'm extracting the name of the function, I wanted what open, AI spitting out all the argument of the function based off the user request of the query and then once I know what function name is given me based on the uh the the constant I've provided so in here, let's suppose get assigned task if I go inside uh I'm calling this function call function, passing the name arguments and then, if you what's inside going here so here I'm doing get assign task I'm taking the function function argument you could see um because uh I'm expecting the project name here in this, that's what I Define as the parameter.

A

So if I go the project name from the uh from the open, AI I'm calling my API get assigned task and all you're doing basically passing my organization name and the project, and you know giving getting my tasks from the devops. uh The same goes with the other one. So if I've called this function bugs or commits based on that is going to go and uh grab the result from the devops API. So if I go back to here so once it's I've got the results and then I can simply show function.

A

Result I can simply show devops task as well. So I can break at this point. I don't have to kind of go into the loop again, so I can go, show Dev of task and then set the messages uh which is the like the type of array I'm using or the chat messages, and once all the charge messages are there updated chart just I'm using a.

A

There is a com: uh this is a AP, uh the direct check element so for all the chart component, which the list chat list and Etc all build by Red check elements. So I'm passing this all the messages to that component and then it's basically rendering that, for me, uh that's all from my site. So if you have any questions, please let me know foreign.