Customize Generative Answers Responses with Adaptive Cards | Copilot Studio

hello and thank you for joining me Joe Unwin also known as flojo on another Microsoft Technologies video we are going to be looking at copilot studio today and adaptive cards and what you can actually do with both of them well with co-pilot studio and adaptive cards you can actually take the generative answers generative AI response and then inject it into an Adaptive card and design it and make it look like whatever you want to you could have it branded you could have information that says this this particular response was generated by AI anything that you want to do you can do with the Adaptive card and just pass the generative AI response in but how do you do this then well I'm on co-pilot studio and I've got a copilot already created it's for my website flowjo doio it's a Blog and I used it as an example in another video so if you're interested in learning how I created this co-pilot look on my YouTube channel that you're on right now um for how to build a co-pilot for your website and it will explain all of the steps that you have to take to do that but what I'm going to be focusing on this video is the Adaptive card so I'm not going to go through all of this co-pilot right now but what we're going to do then is we're going to start with where do you actually go to modify the generative AI response if you go into the topics and plugins you're going to see a load of like manual topics that you've got pre-built ones like thank you start over and all of that and you can see here I've got an error I need to fix later because I've got an example topic that I've created and I'm currently working on but if you go into the system section you're going to see conversation start and that's where it says hello I'm flojo co- pilot there you can modify that welcome message but the conversational boosting section here is where you're going to be able to edit the actual response so let's take a step back back then conversational boosting also known as generative AI um also now known on copilot Studio as generative answers is when someone puts some information into the type your message section and their intent is unknown that's what's going to trigger this particular topic so you see on unknown intent that means there is no manual topic that's covering it and let's just say I come into here and I click uh days between dates in parel to me I've got no manual topic that covers that so if a user has said that it's then going to say okay well we do not know the intent of the user trigger this particular um topic is then going to use the generative answers node now you can use this node in manual topics as well um but only for on unknown intent is it going to be triggered here this is going to take the T text that the person's put in so in this example days between dates in parel to me it's going to take that it's going to use the data source of which the data source is flowjo doio it's going to go away it's going to scroll through all the information on that site U bring all of the information together generate a response based on the request and then pass that back to co-pilot studio and it's going to store it in an answer what it's also going to do is it's going to send a message so if we open up these three dots here on uh create generative answers and open up Advance you can see it says send a message and that's the message that's being sent here now the message on the left hand side is just some text um it's obviously been generated by Ai and it has a reference link here as well as the reference displayed below but what we can actually do is we can untick that to not send a message and then we can have it just save in the answer string variable so topic do answer the topic that we're on the answer variable that is where the information is getting saved and it's actually getting saved in there although it's posting a message already we can just leave it at that and we can close and we can save now what's going to happen is if I run this same scenario through again we're going to get no response back it's going to go through it's going to get all of the response it's going to store it in the variable but we're not actually going to post the message and display it to the user now this is where we can use adaptive cards to take that answer string variable that we've got the text variable that we're storing our generative answers in and we can put it into an Adaptive card and display it to the user so let's go onto the Adaptive card site I've got two adaptive cards I've got this one here which is fairly basic it's just got some text at the top that says this response was generated with AI and it's highlighted in blue just to make it clearer to the user I've got insert variable here this is where we're going to be inserting the data from our generative answers and then I've got did you uh find this response helpful and then a thumbs up and thumbs down now if a user presses one of these what that's going to do is it's going to actually submit to an action do submit which will then push the data into the text field area of the actual um co-pilot so it would be as if someone the user has said this um generated answer was useful or on the in terms of the Thum down this generated answer was not useful and then what you can do is you can actually create a manual topic or a condition underneath that and respond to it capture cat information however you want to but this is just an example example of that and we're not going to go through that today but as you can see here we've got an Adaptive card now there is a big glaring issue right here what is it now the big glaring issue is that it's 1.6 this needs to be 1.5 if you leave it at 1.6 it will not work because co-pilot Studio only supports 1.5 and below so 1.0 will F be fine but you need to make sure 1.5 and Below you cannot go above 1.5 so make sure your target version is that if you're looking to actually learn how to create um something like this I definitely recommend the sample section here um and this is the whole designer where you can just create it so what I did was I just came into here with a blank new card and I dragged a container you can see all the structure here um if you're familiar with power apps it's kind of like layering in there so so I've got a container and then I've got a column set so I've got one column and then within that column I've got a text block and that's where I'm entering the information you can see the text here and you can actually create IDs to label them um in here I've got another text block and another container just below it and this one is just insert variable here and Below I've got two columns again um I've got a column I've actually got three columns but I've got a column set here and then I've got column one which is the textt block column two which is the thumbs up and column three which is the thumbs down and they are just images now if you want to put images into an Adaptive card you can actually use base 64 uh images or SVG images or anything like that um you can insert that but I definitely recommend using B 64 for things like thumbs up thumbs down um or something that you're not going to have on a dedicated URL if you're using a company uh logo and you're going to have that on a URL that's not granted change then you can use that in your adaptive card as well which we will look at later but essentially we've created a uh fairly tame adaptive card here but it looks a bit better than the generic one that comes with copilot Studio from the Genera answers because we've customized it we've added the response was generated by AI we're informing the users because maybe that's what your customer wanted to do or maybe that's what yourself has wanted to do now what you can do then is you can copy all of this information uh in the card payload editor and once you copy that um this is where you're going to uh take all of this information and you're going to pull it into co-pilot Studio but what we'll first do even though I've copied that is we'll just jump over to the next one and look at the more robust one so this one here has a title response generated by AI it has an informational section Please be aware that this response has been generated with AI based on information provided on our website so of course if you're doing um localized files like SharePoint or one drive or something like that you can modify the text for that um it's got a no information will be shared with third party section it's got a company logo and it's actually got a response section that takes up the full part below this um where we would again pass in that information now what this one has got is it's got IDs on everything it's been more built out but I wanted to show you a fairly basic one and I wanted to show you a more well built out one now this one doesn't actually have any responses to capture anything back so it's got no action submits it's just plain text but how you use both of them is very similar and I'll show you uh the differences momentarily Okay so we've come into here we've copied all of our car uh card payload editor we're going back to co-pilot studio and in here we have our section that we was looking at previously where we were not getting the response back because we came into here we went into Advance we unticked send a message now because we're not getting a response back it's still going through and it's checking the condition answer is not blank because we do not want to show an Adaptive card that is blank um we only want to show the Adaptive card when there is actually a generative AI response so under this condition here if you press plus and click Send a message you can do add um and then do adaptive card and then what that's going to do is it's going to open the Adaptive card properties on the right hand side you can then just paste into here again one make sure it's 1.5 or below and if you click off you can see our adaptive card is shown in here now as a message but what we can do is if we select this edit Jon some part up the top here and click formula we can actually write Power FX formula now and we can also refer to variables and this is where we're going to modify that insert variable here section so where it says insert variable here we want to make sure that we do it without quotation marks so what you're going to do is you're going to type topic dot um and then you can see if you see here it says answer so that's the variable so topic. answer is the default thing but if you put it in the quotation marks like I've done now all that's going to do is it's going to act as if that was text and then just show topic. answer if you remove the quotation marks you can see that the topic uh has been highlighted which is the topic that you're currently on and answer is the dot variable so do answer the answer is the default name for the variable from generative answers if you modify that you'll obviously have to modify it in your adaptive card and then here if we press save what we'll do then is we'll run exactly the same test as we did before we used days between dates in power automate and that's obviously going off to my site it's Gathering the information it's generating the response passing it back and now it's passing it back in an Adaptive card you can see the response was generated by AI you've got to calculate the number of days it's got all of the information basically and then do you want uh did you find this response helpful or not now if I press um thumbs up or thumbs down that's going to then pass that information that I mentioned previously if I press thumbs up this uh generated answer was useful because we haven't got a topic that handles this at the moment it's just going to say I'm sorry I'm not sure how can help you with that can you try rephrasing it if we created a um particular uh like topic that handled gener uh the generated answer was useful or we handled one the generated answer was not useful we could then pass through to cat and we can do all of that type of stuff but as you can see here you can actually pass information back from an Adaptive card straight in as if the user was responding so let's say you had three buttons on there yes no maybe you could just pass that back and then react with a condition based on of that but that is the first one this is how easy it is to basically inject generative answers information into an Adaptive card but let's take a look at doing all of this again um and doing it with the more advanced adaptive card now what we go and do firstly is we go to here we check to make sure it's 1.5 if we scroll up to the top here it says version 1.5 you copy this and then you come back into co-pilot Studio you press plus do send a message and click adaptive card now we are just sending a message if you wanted to capture some information you would do this slightly differently because you'll do um ask with an Adaptive card and then it will sit there and wait for a response rather than continuing but what we allow uh with the messaging way that we're doing this is it allows someone to press thumbs up or thumbs down if they want to but if they don't then they can just continue and um start uh type in more questions rather than sitting there um the Adaptive card is waiting for a response and it's waiting uh to get a response that is actually expecting but again I would recommend using messaging for non questions or any questions that aren't required um that's very important but again we've gone to the messaging section here um we've we're on the Adaptive card we just paste it into the Json section the first thing you're going to do is see your adaptive card appear down here open up the formula section and what you can actually do is you can click this expand so you can see a lot more of the formula and it makes it a lot easier to see um you can see I've got just like uh example logos and stuff like that here and then in the text box this is an example response you have to go topic do answer so when you actually expand it you can see what is being used and you can see that you've basically got like an intell sense like experience where you can see what um variables there are to select so topic. answer is there if I close that now and I save this and we'll do exactly the same test again we'll go into days between dates um in power automate and we'll see what we get back with our new adaptive card and as you can see here here it's um designed much differently we've got a big heading here we've got uh the section just giving some information and context around the actual response we've got information is not going to be shared with third parties that might be something that you or your client um is interested in doing got the company logo an example company obviously um we've got the actual response through and again we've got the reference link and if someone clicked on that reference link what that's going to do is is it's going to open up the website to that reference link the actual URL that it's pulled the information from as you can see here I've got a days between dates in parallel to me um it's got all of the methods it's got the video it's got all of that and it's basically compiled the generative response based on the information on this site so it's very uh important to make sure that the website you're working with has s a strong solid uh information because if it's bad information in it's going to be bad information out no matter how pretty you make it uh look with an Adaptive card so that is how easy it is to use generative answers generative Ai and all of that with adaptive cards to make it look and feel like your own company's version as well as informing your customer um however you want to let's say you wanted to tell them that it's respon uh respones generated in AI this is how easier you can do that with an Adaptive card and you can make it pretty and you can make it ugly you can do whatever you want with it um but that is how easy it is to do so if you have any questions at all leave a comment below and I will get back to you as soon as possible all of this code is going to be on a blog post on my site and I'll leave it in the description as soon as I've got it up there and hit that like And subscribe button to help the channel grow I look forward to seeing you on another video peace out

Channel: FlowJoe

Views: 2,356

Keywords: Microsoft Copilot Studio, Adaptive Cards, AI customization, user feedback, generative AI, AI technology, AI user interface, interactive AI, business AI solutions, AI for business, Copilot Studio guide, AI response enhancement, AI development, Microsoft AI tools, AI interactive design, custom AI responses, AI innovation, AI application in business, advanced AI features, AI user interaction, personalizing AI, AI customization tutorial, AI business integration, CopilotStudio

Id: hvTMllWS0os

Length: 17min 54sec (1074 seconds)

Published: Wed Jan 10 2024