Introducing Adobe Experience Manager Agents

Transcript

Thanks a lot Lars. I mean following Lars in a talk, of course, it’s a it’s a tough act to do So I’m gonna try my best But it’s really interesting because as he showed so nicely The whole coding agent and their capabilities Especially if you give them the right tools and environment and all the skills and knowledge that they need I mean they can do pretty amazing amazing things, right? But also as we did see it’s not as easy as Yeah having no configuration or something like that right so you have to know the tools you have to have the right Set up for them. So it’s still work to get them to work correctly so what I’m going to talk about today is Our attempt to say well if we put that all together, you know What what could we do to basically migrate a website to edge delivery services? How long should they take nowadays? Well, it should still take weeks. I’m hopefully not right. So in the next 15 minutes, I’m going to show How we can import a page from a website to edge delivery services Also take over the design of the website and then extend the experience with a new page And at a block from that is designed in Figma to that page And then deploy all of that just using a conversational interface in the talks to an AI inside a em So hopefully it’s gonna work so if we can switch to the My desktop here Oh There we go, I should have not jinxed it should I’ve not said that that it potentially could not work So, let’s see if we can can get that fixed Okay, what is that? Okay, so basically still works, okay, so we’ve seen it in the keynote already this is part of the upcoming experience production agent Some capability of it at least and we can tell that system that we want to please migrate The weekend threat set aside to edge delivery services. I’m going to start that off here And while it’s going along I’m gonna quickly go and show that that site first But you get an idea what we’re targeting and then we come back to the actual agent and what it’s doing in just a moment So the trend that aside here is a pretty simple Demo site a couple of pages has some blocks some default pages and the landing page itself is Pretty straightforward at least has some you know hero with the CTA Some nice section colors in between big pictures here has some some cards block Or whatever and other CTA here some more fancy cards have some tags on them Things like that then we have a dark section with the tap component here some kind of Accordion FAQ accordion maybe here in the that one and it ends with a with another CTA section At the bottom so no complications. No, you know Crazy integrations to be done pretty pretty straightforward So hopefully should be easy to do right and now if you come back to our agent who already started like Lars already Introduced it has access to special skills well Some of them even are actually the the skills that he said he mentioned from from the EDS repository Directly to understand the yes on top of that. There’s there’s lots of other skills that we do and We basically Also have workflows and extra tools set up to help it go go along in the migration here and so it’s now right now trying to analyze the page and Identify the visual sections first. So it does some kind of page decomposition Into the whole thing then it tries to identify the actual blocks that it should use matches it against the boilerplate say that or Actually really the block library that’s configured for the system, right? So it’s going to try to map it to blocks and then Come up with a plan to actually import that as an edge delivery services Content I’m gonna cut that here short a little bit because otherwise we’re gonna run out of time It’s gonna go on for another couple of minutes, but we can see here. It manages to take over the content of the page It comes up with sections some section styles here light. It has the cards block another one for gray Here’s some more fancy cards all in the semantic content format of edge delivery services. We have the dark style Taps here and Yeah, the accordion block down here and the CTA section so that is getting us the content Now the next thing we can do is we can basically instruct it to take over the design as well So if I go and tell it to import the design It’s gonna start with that task now That’s again a Workflow where it first starts out taking over the the actual outer design system so looks at the at the button colors and The color palettes and the fonts and the second backgrounds and when it’s done with that In other words the style CSS right of videos It’s gonna try to drill down into the actual blocks and create us customized variants for for each one that need need to be adopted It Does tell you here the estimate so it’s about five to ten minutes Until it really is done. So we can unfortunately not 100% wait for that But we can see what the end result looks like here. I guess I have to Set just a sec. I have to zoom out just a little bit I guess because the Yeah, because it has step so there you go and the system display that changed the resolution so We can see it did a reasonable good job in taking over the the button designs and the and the whole style of the sections and In the end it also manages for the most part to style the blocks correctly I’m gonna stop it here again. It’s gonna run for for a little while, but The full disclosure here so for the design it typically doesn’t get it a hundred percent At least not from the get-go Even this what we have here The content is coming out like this pretty repeatable one to one every time the design here needed a couple of extra follow-up prompts but luckily you can easily do that in the system because you can just continue to prompt it to To point out things that still need to be done and I’m going to give an example of that now So let me see here So if you wanted for example, we can now go and say well first of all Should it have made the quantum mistake? Obviously we can tell it something to change the content Let’s say I want to change the title to be more sporty And so it’s not a fix and as such this would be more an actual improvement of the content so hopefully it’s Within a couple of seconds. It should be here. There you go It goes and updates the title for us and similarly we can go and Directly go and ask it to do a design change so for example if I’m not happy with the With the buttons it created again in this case that actually did a good job in the buttons in the end, but I Can now easily go and say well, okay I I rather want them to be you know black with the white text on top and Of course it knows about each delivery and how to do it. It tells us I’m gonna change the style CSS file And in a couple of seconds, it hopefully has that fixed There’s always of course the live coding effect, let me see up there you go It is happening and it’s updating it right and as you can see the whole package includes this Agent has access to the tools the working preview in the background is everything is set up and has and it can just do Its work and I can now, you know use it to iterate on the system as much as I want to and So overall again, I have to unfortunately fast forward here because we don’t have enough time to wait it out But this is the result of a couple of extra problems Probably in total 15 15 minutes 15 to 20 minutes to get to get to this point with the system Still a hundred percent perfect. You can see we’re still missing the little you know tag text around this one For example, so we could ask it to to continue here But I think that’s yeah it’s really impressive how quickly you can can do something like this and in the system now and then Let’s go to the next step here basically We want to show that that’s not all we can do since we have a real coding agent in the background we can Continue and do something more ambitious, right? So let’s say we want to use it to create a new landing page to promote a new opening in San Francisco and I’m gonna give it the prompt for that and basically tell it Well, we have some extra text for you here in the weekend content repository file and the weekend image catalog And we have a briefing in the Francisco San Francisco opening briefings here, which are effectively giving it some guidelines and guardrails for the landing page that it should create so the content repository You know at some branding voice guidelines some content categories. It also has some Testimonials down here that can use If it if it if it thinks it’s helpful we have one six testimonials in here that can choose choose from the weekend image catalog is a Effectively freeform list of assets that can use so it’s a pointer to different images description of the style of the image and the Use when to use it the purpose, right? So that it has something to to work with as well and also not use assets that it shouldn’t use in this case Finally we can just give it this opening briefing We called it again some free text form to describe the objective of the landing page We want the target audience and these kind of things, right? so and But it takes all of that and basically creates us a new Landing page out of it using the existing blocks that we have now in this in this project Partially the variance of it that it created to to be able to do this and we can see Down here. For example, that’s a good example. It takes and let’s say something like those four Testimonials that were given in the in the thing to to Create that page, right? And then if we preview that We see here, yeah, so this is not only the content it’s of course now using the new lifted and shifted design of the page throughout and the Restyled blocks so it looks somewhat closer to the original page that we that we had here, right? So that’s great so we That’s done even you know in a couple of minutes we can go And extend our our experience with a new landing page here That is you know working with the design. We just took over and then So that’s cool and finally coming to the to the third step then but what happens if you want to actually Include some kind of redesign or we have in this case Let’s say for the landing page the requirement for marketing to get a new block in there. They can just give us Was hinted at at the keynote as well they can just give us a figma design and We can also work with that. So and that’s really working pretty well We can basically tell the system that we have a figma frame selected in the Figma desktop in this case, right and then it should go and create us a new Block based on that design. So here in the background if I go I have figma open and The frame selected the MCP server here is on it’s unfortunately in German I’m sorry, but you can see it says here just send it some information via the MCP. So it was our system to take the information over and Yep, it says here too. It is actually busy creating this new block based on the context from figma and So That’s gonna continue here for more for a moment if you look at what the Previous example here did for that. It’s basically created this here subscribe block Which took over the content from figma? This is a byline that was in there the title. We have the content here the stay ahead of that. I have this little sub Here the CTA and then we also have the the image from the original and It then takes over the design from figma and creates us a block which looks reasonable close to the original again It’s not a hundred percent perfect here. If you look back at the original design Maybe it does it could also be because it’s shrunken a little bit But basically it is able to take over the design pretty well in a lot of cases and for the figma and Obviously we now could continue to to prompt it to to make changes or to improve it we saw in the keynote, too It’s pretty easy to say well swap the image for example to the other side. It will also do All of these things for us if you want to And finally of course, that’s that’s a great thing now we could go and create a new landing page using that block As part of the generation just like we did the previous one, right? Because that was only using the box that were available so we could just ask it to do that again Or we could ask it to go back and put that block into different places where it thinks it makes sense So this is really really powerful and works really nice And we were very excited this is working And then what’s left is we basically need to get this out because all of this is running in the sandbox environment So none of the code nor the content is gets somewhere available outside of the system So if I don’t like the results, I can scrap the whole session and that was it, right? But otherwise, I have to push it out. I can first look at the coach code changes that were done So in the first place we see here our style CSS Which has a style change for the button color obviously and I think down here probably is the border changes Yeah, so, oh no, it’s also the text color of the of the button so this is a change that the system did to make the buttons black and white and then we have the hero trends that it generated it’s still busy in the background, but it already has the But at this the JavaScript for the for the block here It’s also documented it has the byline the image the heading the CTA text the button text and the CSS the generates for it So that’s all here. And all that’s left is that I have to basically push it out to create a new PR It’s going to do that hopefully here and then I can go View that PR and that’s obviously helpful Because now you want a developer to check if that’s okay But also as you can see here the great thing is it’s an EDS website, right? So that branch is directly deployed so we can now directly go and preview the whole result in the real environment And that for that all I need to do is to also upload the content Again here, this would be all the content files that we have right now in this in this workspace We don’t need all of them. Let’s just take the Example page the land and the new landing page that we created upload that one to a That is so if you go now here You can find it in our repository go to draft. It was the San Francisco sport line demo That we had. Yep. There we go. That’s the content that we generated It’s all here. So what’s left is I basically can have to go and say, okay Let’s preview that and then hopefully we end up with our new Landing page that we created based on our guidelines in the new Design system that we took over from the weekend transit us on this page It doesn’t yet use a figma block again, we could easily follow up Asking it to to incorporate that now into this result But this is roughly what we can do almost in real time here, right again Some of the stuff would take five to ten minutes longer. So I would think yeah, probably Within half an hour you could get to this result So we’re running it a little bit short with skipping ahead, but that’s the result of it I think with that I’m pretty much out of time Thanks a lot I Hope you liked it