How to use Wagtail AI Part Two | Adding AI to text fields

Hey, hey, hey, everybody! Welcome back to our series on uh Wagtail AI. We're going to be looking today at how we use the Wagtail AI text field. features to add a Wagtail AI fields to our text fields and our Wagtail projects. If you uh missed the first video where we covered the installation of the package and also the thinking that goes into deciding like hey I'm gonna use Wagtail AI here in my project and not here uh then definitely uh click the link down in the video description I have a link there to the first video in this series. Otherwise, let's just go ahead and dive in and have a look at uh how we use Wagtail AI for all of our text fields.

Alrighty, so in the last video I went over kind of the areas that I decided I wanted to add AI fields to. Um, but I just want to go ahead and have uh two of the pages that I'm gonna add fields here up and available just for visual reference. So I have a a blog page here and then I also have one of the content pages here as I go through things. It just helps me to visualize stuff And let's go ahead and go over to my code editor here. I already have the models. py file up for my blog app, which is where the blog page lives for Wagtail. org. And I'm going to add one line that will be very useful here to our import

statements. I am going to add from Wagtail underscore AI dot panels import AI description field panel and AI title field panel. And then I'm just gonna go down and replace any field panel that I want to use these in with these particular thing so I'm just gonna go ahead and copy this here to make it a little easier and let's go down to our blog page code here and I definitely want to add a AI option to the title, like the main title field for our blog page. So let's here is our blog page model here and let's find our field panels Down here under content panels

here. And so I'm just going to turn this field panel for title into AI title field panel. And while I have this copied over here, what are a few other spots that I want to add this? I definitely think I would like to have this added in Two. You know what? I actually don't think that there are any other spots I wanted to add the title panel to on this page. I think I want to do the AI description panel panel instead and I definitely want to add that to the introduction panel because that'll give me the option to use AI to come up with a description if I want to.

Let's uh make sure that that's not capitalized and I can spell yep there we go ai description field panel right there um I'll just go ahead and copy that there. And the one other field I definitely wanted to change was the search description field. I did experiment with adding it to our SEO title as well. It did some weird things in the UX that I don't want to explore a ton right now. I figure having it in the main title field is probably the best option now for our particular project, but you can definitely try things differently. for you. So I'm gonna go ahead and save this and go back over to our test page here and refresh.

And yep, right there you can see our little AI magic wand right here showing up and giving me options to do AI actions for the title field. And then if I look at our introduction field, I now have the little AI magic wand as well that wasn't there before. And over in the promote tab, yep, here it is. For the meta description. Great, awesome. I definitely want to save all that And the next thing I want to do is check out where to go for our content page. Um so we have the content page in a pages. py file in our core app on Wagtail.

org. And I'm just gonna go ahead and add this here. I'm not sure if I need um actually I'll just go back real quickly here and grab this and go copy and paste. It's just a little easier uh than trying to type it all out while people are watching me on YouTube. You know, uh, so I'm just gonna go ahead and save that. If I remember right, on this page I might only need the AI title. Field panel. We'll see how that goes. Uh but for right now I'll just leave that import statement up there and I'll clean it up if I need to come back to it. I'm not gonna make any changes to the home page this time around. I really just want to focus on content page. And so if I go down to find our content page model here, yep, here it is.

I want to give the option to use it for the title and so we have right here field panel title So I'm gonna go ahead and add AI title feedbill panel to that. And then also let's add AI description field panel here. To our um yes, I keep capitalizing that for some reason it is weird. Um I'll go ahead and add that to our panels right there. So uh there we go and we will save that. Do do do. I think those are the only two that I wanted to add right there. There was one other

thing I wanted to change up um on both of these pages and I think yeah let's go ahead and refresh here and double check how this looks I have it on the promote tab right now. So yep, there we are in the meta description. And then let's also uh check Here, oh no, wait, we're back on the blog page. That's not what I intended to do at all. Here's one of our content pages. So let's go ahead. Um, yay, here, there we go. We can see it already and the title here And then we should also see it in the meta description, hopefully. Um let me refresh there. Yep, there we go. Now it's appearing I think the other spot that I really wanted to add AI in is to our social media descriptions as well

But we don't have those set up as part of the pages. We actually, this whole chunk here of social media stuff is part of a mix-in in Wagtail. org. Um so I'm going to go back to the Mixon file, which we have under our utils section. And so we have a models. py models. py file for that. I can really talk today, can't I, y'all? And let's go ahead and grab that import statement again. Whoot, we'll grab it right here, copy that over wee, cool, uh, and we will add that to our UU Till. our our file here. I don't

I'm not gonna use the title piece here because I want the title to be consistent across the like once I once I have a title picked out I want it to be consistent Across all fields. At least that's how I prefer to structure things. So I'm just going to use the AI description field panel and give myself the option to use AI if I want a different description for a particular social media platform or something like that. So let's see what we got here. Where is our social media mixing? Right here. And let's see, where are our panels? Yes, here we are. Social text and social image. So if I add this

here and save when I go back to either our content or blog pages and refresh. Yep, there we are. Now we have our AI magic wand appear curing around the social media description as well. And that change uh should also apply to the blog page as well because that mixture applies to all pages on our Wagtail. org project. Cool. Awesome. This is great. So the only other thing that I want to double check. Whenever you make changes to fields, you always want to double check your migrations. You know, the most common uh command for that is Python uh manage dot

py uh you know r and then um run and then you do migrations to create migrations and I I apologize for my typing being a smidge slow. I actually learned a new keyboard layout lately and I also just spelled migrations wrong Okay, there we go. Awesome. And I also spelled manage wrong. Isn't that great, y'all? Gotta love typing in front of a live audience. Anyway, this command doesn't work for our project though. We use uh Docker and make commands. Uh so I actually have a command that just says make uh migrations to make things a little bit simpler and so when I type that in and hit enter I don't think it's gonna find anything but it's always good to check y'all when you're making changes to your fields

Okay, great. No changes have been detected. And that's how you can drop different field panels into your project and get little AI magic wands next to them. So if we go back here to my badger's blog post, now what I can do is get uh, you know, I have a very kind of generic title here, but maybe I want something a bit more SEO optimized. So I will get it to generate a title for me here. And huh, looks like I might need to save something in here because it's uh not quite uh picking up on that just yet. Let me let me refresh again.

Okay, so if I go back to my test page here, I can now use AI to generate suggestions for me. So I can click here. uh generate a title based on here and you know this might this actually makes it really long and I don't know if I'm a huge uh fan of that but let's go ahead and use that uh and then you know I can also um I have a very short description here but let's see if it might come up with something a little bit better um It's very lengthy and uh if you look at how our um you know in the preview here if you look at how our introduction is structured uh you know in different

ways it looks on the page, like having something really long there just doesn't work with how things are designed. Uh so I'm honestly not going to use that there. This might be useful in other circumstances, but I I strongly suspect I'm going to be leaning on uh handwritten versions here and keeping it shorter and pithier Uh where it might be useful to have uh something more optimized though is over here if we do the uh meta description instead. Uh there we go. So this is where like I want to have something a bit longer and feed these search engines more words. So here we go. That definitely is much more useful so let's go ahead and do that. Um and I might just go ahead and use the same thing for the social media but let's you know

let's just play with this and see what it does Um it basically uh provided about the same the exact same thing. Yeah, it just it turned out the exact same thing there. Okay. Um, which means that honestly the prompt might need some playing around with. And I hope, kinda hope in the future we might be able to set up a way to have different prompts for different description fields because we will use those differently according to these. Because like right here it would just be useful to be able to do these according to the way different social media platforms behave. Uh because you know the way you would advertise something on LinkedIn is not necessarily the way you would advertise something on Mastodon.

Uh but let's just go ahead and use that here. So All right. Those are examples of how I used the AI title field and the AI description field for our blog and our content pages. Okay, so that's how you use Wagtail AI to add AI to your text fields. It is honestly a pretty simple process. Uh you do have to think, you know, kind of hard about like um do I really want this here. Um and I thinking about how you use the prompts too is also pretty important since you can only really use uh one prompt for each of these things. That might be something that we change in the future. future or give you different options to use in the ad admin. You know, honestly, if

you have ideas, please share them down in the comments. love to hear them. But uh thank you so much for watching this video. Please stay tuned for the next video by liking and subscribing this one. In the next video we will go over how to use the image features for Bur Wack tell AI