Transcription
In this first look video from Influence WP, we are going to be checking out Ali AI. This is going to be the latest, we'll call it extension for the Ali WP ecosystem, which is already already was amazing. Uh it just keeps getting more and more amazing. Uh it's definitely my theme of choice today for building WordPress websites.
Uh before we get into this, just a quick bit of housekeeping. First look videos cover products that we have no prior experience with. I do have experience with Ali, uh but this is a brand new extension as I said. So no experience with this particular extension. Um these videos contain no affiliate links. They're not sponsored. They're not paid for. Uh just helping spread the word in this case.
And also it kind of serves double duty because I just so happened right before the announcement was made today just so happened I just fired up a brand new Ali website and um it is for a new um it's the it's an add-on for a project I've had going for uh a long time, many years. I'm going to be adding a subdomain to one of my agencies that's going to be for the community, uh, a new community and for a new product that I'm releasing for that community. So, I thought I I wanted to spin up a subdomain, uh, because the main domain is not using Ali. I want to use Ali for this. So, I'm going to fire up that subdomain, which I've already done. I got Olly installed, which I've already done. Uh, then I'm going to get the community set up. But we need to first get get Olly rocking at um at a base level, which you'll see what I mean by base level here in a minute. Um but I thought, you know, double duty here. We would see what this AI is all about because I want to just create try to create a page. It's so um again, double duty. So just bear with me. You'll understand what I'm what I mean by that. This is going to be a real world test. First time seeing this. Uh we'll just see what happens. Okay.
So, I checked out Mike's uh video all the onWP YouTube channel, which I highly recommend you check it out. I got up to the point, I think it is the 2 minute and 25 second mark where he shows that there's an Ali AI extension that we we turn on. Okay. All right. So, let's go ahead and get started. This is the Aliwp website. So, oywp.com if you want to check out this theme and check out Ali Pro, which is I what we I believe it's what we need to get access to ali. So, we will do that. But, um definitely go check it out. Aliwp.com. Okay.
So, I have a a brand new WordPress install with nothing but Ali running. And for plugins, you know, just the it's everything that comes with Ali. Um, the performance lab is just an extra plugin from Ali that you can turn on or turn off and then configure. I just I have it currently off at the moment, but um yeah, so in short, it's just all Ollie stuff at this point. All right, so I've got my sub this is on a subdomain. I like I said, I need to set this up. I'm going to build a community on it, but I first need to set up just a very basic welcome page to get people uh to introduce people to what's coming and then get them to sign up uh you know, get into the newsletter so they know when this thing launches. So, I'm going to see if all the AI can do this for me. Okay? And even if it can't, uh not a big deal. We'll just we'll just learn together um how this might work. All right?
Okay. So, uh, going to the front end of the site, you'll I just have this is just a bl completely blank page, and I've got the a default footer that Ali threw in there for me as part of the the site setup. So, I'm going to come over here. I'm going to go under Ali Pro, which is a plugin. So, you've got the Aliwp theme and which is free from the WordPress repo, and then you've got the Ali Pro, which is a plugin that unlocks the pro features. So, I'm going to go into settings here for Ali Pro and I need to get signed in here. So, I'm going to go ahead and do that and I'll be right back.
Okay, I am signed into my Ali account. And like I said on the video that I saw, I just got up to the point where I wanted to see where the Ali AI was enabled. That was the 225 mark in his latest video from the Alwp YouTube channel. So, I know that we need to go under extensions here. And here we go. Ali AI. Connect your site to your favorite AI tool to design, build, and manage your site. All right, let's go ahead and toggle this on. And I do see an arrow right here. So, I'm going to I'm assuming we can click on that and it does something. There we go. Okay. And I'm running I use cursor for my AI when I'm doing development. So, that's what we're going to try to connect here. And watching his video, he specifically mentions cursor. So, we should be able to get this going hopefully. Let's go ahead and do a bit of reading here. Again, first time for me seeing any of this stuff. Ali AI lets your favorite AI tools build entire pages from patterns, update design elements like colors, typography, and spacing, manage pages, templates, and easily replace content and established designs. This works through various technology or this works through MCP which gives you your AI tools like cloud. Yeah, here we go. cursor and VS Code a direct connection to your WordPress site so they can take actions on your behalf. Awesome. So that's what we need to do is configure our MCP server. MCP stands for model context protocol. Just think of it as something that sits between your WordPress website and the AI. Okay. All right. So configure your MCP. Install the MCP adapter plugin and generate an application password to connect your site to your AI tool. All right. Right.
So, I'm going to go ahead and click install for the MCP adapter plugin. Okay, that is that we need to go set our application password. So, I'm just going to click this create button. Done. That is really awesome. Like I would I fully expected it to redirect me to my user account and ask me to do something else. But that's really cool. Uh the config config snippets have been updated with your credentials. Connect your AI tool as part of step two. Let's go ahead and click connect. It says it can connect like again with Claude cursor VS code or wind surf. Connect. All right. I am using cursor like I've been saying. So I'm going to switch over to the cursor tab. Now that your site is ready, we need to configure some settings in your AI tools so that it can connect to your site. Follow the instructions below to get started. Alrighty.
So, I've got cursor pulled up here. Let's see here. Open cursor settings. And let's do tools and MCPS. You see that right here. So, tools and MCPS. And then it says add the snippet below inside the MCP servers object. Save and restart cursor. All right. So I'm going to copy this. And it says add the snippet below inside the MCP servers object. Okay. MCP servers object. I guess it's this one. Open cursor settings, tools, and MCPS. Oh, new MCP server. That's my fault. There we go. Add custom MCP. Add the snippet below inside MCP servers object. Okay. Like I'm not a developer. like I'm learning how to be a developer with you know a lot of people say you know code with AI you vibe code whatever you're not a developer and I 1,000% agree with that but I am learning to be thanks to AI I'm not just creating random code and putting it out to the world I'm having people look at it I'm running it through checks like PCP for WordPress um which is the plug-in check plugin I'm running it through WordPress rules through cursor. I'm actually looking at the code. So, I'm teaching myself and I say all that to say um here's a little bit of feedback. It says add the snippet below inside the MCP servers object. I'm not really sure what that means. I think it means placing it inside these brackets. So, a little bit of feedback here would be maybe a little bit more guidance. Maybe they do down here. Do they? No, I'm not really sure. That's how much of non-developer I am. Again, I'm learning. It's like I I want to understand all of this stuff. I think that's what that means. Maybe hopefully there's a way to validate it. Okay. What's it say here? Save and restart cursor. Okay. So, that is saved. Let's go ahead and uh restart. I think you can reload. Yeah, we'll just we'll go ahead and close this down and just open it back up. Okay. So, that is there. We've done that. And I'm actually going to pause for a second because we've have um this is just a Murphy's law. As soon as I do a video, some noise happens and we've got the lawn people with their leaf blowers out. So I'll be right back.
All right, so the leaf blowers have mostly moved on. So we'll go ahead and continue. So So again, I'm not sure if I've done that right. Oh, you know what? It does show right here. Uh, let's see. Let me go back to cursor here. I'm assuming that's right. So, if I do Okay, I'm assuming that's right. Let's just go ahead and move on. Hopefully, it'll tell us if it's not. So, let's go ahead and move on. Um, so step three, install the I wish there was a way going back to this. I wish there was a way here to validate. Click a button and say, "Yeah, it's successfully configured." All right, let's go to step three. Install the Ali skill. The Ali skill teaches your AI agent how to work with Ali to build your site. Install it as a project skill in Claude or attach it as context in some and other AI agents. Okay. So, that is downloaded there. Um, let's see here. So, I've got Let me copy this file name here. So, this is what I would do. Let's Let's see. Let's go back over to our chat window in cursor. Let's get out of all Let's get out of this screen. Let's do a new chat. So, I'm going to go into do I want to go in agent mode or plan mode? Let's go. Let's let's talk to the talk to the AI for a second. I have a file in my downloads folder. Let me switch back here to my site. I'm just going to copy this text right here. Okay, I'm going to go back to Ali or back to curs. I have an Ali design system file on my down in my downloads folder. Paste in what I copied from Ali. This file is an Ali skill that teaches cursor. How to work with Ali to build our site. I'm just I'm just putting in words like having a conversation. Can you help me install it as a project? I'm just going to say as a skill or attach it as context for cursor. Okay. So, I just adopted what I copied in there for what I would say to cursor normally. And let's just see what it does. I'm going to give it actually the path to uh see here. You know what? Let's see if it asks for my the path to my downloads folder. See if it knows. I could actually I could have just attached it. I believe. Okay. I can help with both. And the next step depends on whether you want this to be a persistent available in all chats or one-time context just for a specific chat. I'll quickly confirm your preference and then Okay. How do you want to use this install as a reusable skill? Yes, that's what I want to do. Uh do both. Why would you do both? Attach as context for one. I'm just going to go reusable. Yeah, here we go. Where is the down? Where's the file located right now? Yeah, perfect. So, it saw my down it sees my downloads folder. Yeah, perfect. Continue. All right. Um, let's see here. What? Perfect. Installing it is a skill install. Okay. So, it's giving me the instructions. It's not that it can actually do it. I'm so used to cursor just doing stuff. Oh, cool. So, it actually gives you the path. Okay. I can't do that. Um, in file explorer, go to So, I'm just doing this on my other in my other browser. So, just bear with me here. should say browser my other screen. Uh, where is the cursor folder? There we go. And then cursor and then skills. I don't have a skills folder. I have a skills dash cursor. That's interesting. Is skills dashcursor the same as the skills folder? I haven't done this this before either, so learning as we go. A little bonus material. Okay, the skills folder doesn't exist. I'm I'm just I I'm assuming it's going to say you need to create it, but I I feel like it should have said either create it or add to. You know what I mean with the instructions? Let's just see what it says. There we go. That's normal. you can create it yourself. Okay, all good. So, I am in the cursor folder and I'm going to create a new folder called skills. I'm going to create a subfolder in that directory called Ali Design System. Okay, that's done. And then copy your file from downloads into that folder. Okay, so I've done that. Rename it to skill.md. Okay. So, I'm renaming oi-design-system MD to skill.md. So, it's because it's already because it's in that Ali design system folder, we can rename that file to skill.md. Final path. Can I click on that? Okay. Skills. Yep. Yep. Yep. All right. So, I have that in place. We are good to go there. Restart cursor. Okay. I'm going to go and start a chat again. I'm going to say go back to plan mode. Do you have what you need to work with the Ali skill MD? Yes, I can access and use the Ali skill MD and I've confirmed it's available on your system. I'm ready to use it for olly theme design system work patterns global styles and so on and so forth. Awesome. So I think we're ready to go. So I'm going to switch from plan mode and cursor. Switch over to agent and let's go ahead and minimize this. So we've gone through all the steps. We've just as a recap, we've installed the MCP adapter plugin and that would be in Let's go back to our WordPress admin. Here is that MCP adapter plugin. We've set our application password for our user account. We've connected our AI tool. This is the only one I'm not 100% sure that I've done it right. I guess we're going to find out. But again, some feedback there. I don't even know if this is possible. Uh, if there was some sort of a a verification that it's set up properly at at a minimum, you know, you know, when you say when someone says add the snippets below inside the MCP servers object, like what does what exactly does that mean? I feel like an idiot just having to say that, but it has to be said. Step three, install the skill, which we've done. Okay. So, I think we're good. I think we're good. Um, all right. Let's go over to our content, our page. Okay. Now, what do we do? I'm going to pause the video real quick. Normally, I just kind of wing it. I'm gonna I'm gonna pause for a second and look at some documentation. Be right back.
Okay, I'm just going to keep showing you what I figure out as we go along. So, I I went back to Mike's video on the YouTube channel for Olly. And it looks like he's actually using cursor as well. So, he's got the browser open in cursor. So, you can go right here if these three dots and open browser. and then we can actually u log into the site. So, let me go ahead and do that and I'll be right back.
Okay, I'm logged into the site here. So, over on the left is the site. Over here on the right is our cursor chat window. I'm going to go to this page, our launch page here. And when I watched Mike's video, he he says, "Let's connect to the Ali MCP server to the Ali MCP and create something." Um, can you confirm? I guess it'll, you know what? It'll tell me. So, at the start of the video, I think I mentioned hopefully I mentioned what I'm looking to do is just to create a simple like a pre-launch page that says, you know, something new is coming soon and to sign up for a like a newsletter list. Okay, so that's what we're going to go for. So, I'm not going to say let's connect to the Ali MCP. I just want to see what it does or says. I'm just going to say um create a pre-launch landing page with a newsletter sign up form. Okay, let's see what happens. I'll set this up by checking available all the MCP tools first, then create a draft pre-launch page from a full page pattern and tailor it with newsletter signup copy and a CTA. Okay, I'm going to go ahead and just run. I'm just I'm reading the prompts. Typically, it's okay just to run, but I like to read them just to see what they're saying. Uh, as a non-developer, a lot of times it's over my head, and you just kind of have to trust it. Um, always have backups and things like that, you know, or if you're building a plugin, for example, then, you know, make sure you've got proper commits and all that stuff so you can back out all that good stuff. I talk like I know what the hell I'm talking about as a developer. I'm just um like I said, I'm just learning myself and I'm actually pretty new to like cursor is I'm new to all of this stuff too. So, I'm sure there's probably faster ways to do this some of this stuff. Like I haven't even looked at what allow list does. Um I haven't ran I haven't figured any of that stuff. Maybe there's like a way to speed through this a little bit. Like say, "Okay, let's like the next any commands that relate to what we're doing here, just run them." I'm assuming that's a possibility. Okay. created a pre created a draft pre-launch landing page with a newsletter signup section page statuses and draft source pattern. Okay, so it so shows there that it went out and it grabbed the Ali newsletter page number 04 WordPress edit link open. So I I'm assuming if I click this link it'll bring us right back to the page we're already on. This pattern includes a newsletter signup UI section, email field, and join button, and supporting sections like social proof, testimonials. If you want, I can do the next step and wire the sign up to a real email provider form plug-in. That is super cool. Or a short codebased form. So submissions are functional. Um, so I showed you at the beginning of this video, I just I just I don't I just have all these stuff installed. I don't have anything else that So if I would have had something like Fluent Forms or Mail, you know, any of those things, Gravity Forms, Fluent CRM, whatever, that is really, really cool. Um, I'm just going to refresh this page and see what we get. Um, where is Oh, so so does it not actually add it to this page? Okay, so it creates a whole new page. Okay, so I didn't actually have to actually go into that page. Okay, that is absolutely wild. Okay, now it's wild, but it's not super wild because it went out and it grabbed a pre like a a pre-built. It saves a lot of time. Lots of time because it went out and it it grabbed one. It dropped it on the page. That's a m That's huge. I'm not downplaying that at all. Um, that is super cool. So, the real thing is for me is this last piece. If you want, I can do the next step and wire the sign up to a real email provider form plugin. Um, just for fun, let's just see what happens. Can you wire this or I'm just gonna I know it can. Please based on what this is saying. Please wire this for Fluent CRM. I'll wire the existing signup area to Fluent CRM by replacing the current placeholder form. Okay. Now, with cursor, I've built a form that connects to Fluent CRM, which I was going to release in the in the repo at some point. It's just a it's more on that later. I don't want to get into the weeds on that, but uh I fully expect this to be a slam dunk for what we're doing here. And I'm not even sure. I'm I'm like I'm torn here. You see that how it flipped right here? It's now looking for a fluent form. Um I'm not even sure with this particular with what I'm really going to do on this landing page. I may just do a button that redirects back to my main website where you know Fluent CRM is already sign, you know, like just redirect them to my newsletter page and not spend, you know, not go through the process of installing another plugin on here and configuring it. I think that's probably what I'm going to do, but it's fun just to see how this works here in Ali. Okay, so wired the landing page signup area to a real short code block so it can feed feed fluent CRM via Fluent Forms. Replace the placehold or sample form UI with the Fluent form ID. Okay, editor link. If your actual form ID is different, share it. Oh, that is so cool. I'll swap it immediately. or or I can wire whatever exact Fluent CRM short code you use instead. So, back here in plugins, obviously, we don't have Fluent Forms. We don't have Fluent CRM going, but it wired, as I said, it wired it up for us. You can see that right here. Here's the Fluent CRM short code. So when you build that form or whatever you use for the forms um and fluent forms in this case once you have that short code you just drop it in there and it's going to it's going to have the design of the form the functionality of the form. So that is really super cool. Um I assume here I can just do an undo if I want to get back. Yeah, it's got that block recovery thing there. That's why backups are important. You can also do a little bit of bon more bonus material here. Uh, if you happen to want to get interested in cursor using cursor, you can just do like an undo if you don't have a backup. So we'll let that run just to show some more bonus material. And then what I want to look at doing before I get you guys out of here, I want to look at um actually what we just did there is most complex thing I want to do, but I want to just change the color of something for fun. I need to figure out where the refresh button is in this because I'm using cursor as the browser. I'm not even sure where the refresh button is for. Oh, here it is. That's my fault. Okay. Undone. The page is back to the original placeholder signup block email. Yeah, it's is it though? Yeah, it looks like it didn't actually undo that. Anyway, that's not an ollie thing. That's just a AI thing. So, not a big deal. But let's just see if we Let's just do change the color of something here. Um, let's change the background color of the entire page to very light blue. I'll make this page page wide, not sitewide. Updating the landing pages top level section backgrounds to the closest very light blue token in your active pallet. That is cool. So when I set up Ali for this site, I put in my we'll call it brand color and it, you know, Ali automatically can generate your palette based on that color. And it it happened to have a very light blue color in there. So it says it acts like it's going to pull from that. Done. I changed the landing page. So all top level sections are now using your pallets very light blue token primary accent yada yada. This gives the page a consistent very light background feel while staying with all these design tokens. No hard-coded colors. So that's very important. If you want it even lighter or bluer, I can switch to a different token to fine-tune the pallet globally. All right, let's go ahead and refresh. I'm just going to publish this page. Let's look at this on the front end. Yeah, that didn't actually work seemingly. Uh, could be caching, I guess. Let me make let me just clear all the caches in here. I should disable the caching. while I'm developing this which I'm going to do actually right now before I forget. All right, so all the classes class can't talk caches are cleared to refresh again. All right, so that didn't do the trick. Let me let's go ahead keep trying here. I'm trying some other things on my other screen to clear the cache. So, I feel like we should see the blue like right here. All right. So, I'm going to go back to cursor and say I'm not seeing the light blue background. All right, it thinks it figured out why that might be. So, let's just run through this again. All right, just still here just running through the prompts. I'll go ahead and pause just to just to make it easier on you guys. Be back in a second. All right, so it came back and it says I found the issue legacy background classes yada yada yada. You are right. There was a conflict from old pattern classes. So the light blue didn't reliably show. Please hard refresh the page editor view to check again. All right, here we go. Still not seeing it. If it still looks off, I'll do a stricter cleanup pass to remove the legacy background classes entirely. Still not seeing it. So, I'll pause the video and we'll be back.
Okay. So, that's not working for some reason. It It's probably something I'm doing. I'm not really sure. It's It's talking about like the color is too close to something, so it couldn't set it. I don't know. Let's try something else. I want to end on a high note. Change the color of the footer background to red. This is how we will know it's working. Okay, it came back and it says your active Ali pallet currently has no red tok red color token. So there are two safe ways to get a red footer. Use a tokenbased reddish gradient heat on the footer. It keeps strict design token rules or set a custom solid red on your footer exact red look but not token based. So I want token base. So I'm going to go use heat. All right. Coming back. It says it applied it and it should have a heat gradient token color. All right. Let's just go ahead to the footer and refresh. There we go. So that worked. So it's that background issue. I don't I don't know. That's probably just something wonky. But you know, clearly this is working great. Um, let's just try one more thing. Uh, again, ending on a high note and I'll get you guys out of here. This is I am just super super excited about this. Let's try this. I don't know how this is going to go. You see where it says join the creator crowd? Let's just say uh rem rename all instances of creator crowd to influence WP Okay. Okay, coming back. It says it did it. So, let's find out. So this creator code creator crowd can't speak should be replaced with influence wp. There we go. And do I do a search for create? Let's see. I'm just I'm not This is the first time I've used the browser actually within cursor. So it's doesn't work exactly how I would expect. But there we go. We see that it's working. I think there was another mention down here. Here we go. That is super wild. Okay. While we were waiting for that, there's another thing I want to do. Uh, this I'm glad I found this before we got out of here. Um, there's a link here. WordPress edit link. I'm going to click that. Do you want cursor to open the external website? Yes. Okay. Okay. That takes you out of your Okay. Uh, I was watching Mike's video while I was waiting for this to complete. Oh, here we go. This is what I was seeing here. So you can when you're actually working within the block editor um do things and with that text selected figure see if I can figure out where he was doing um so he has a like a shows like an AI maybe it's somewhere in the let's close this out here. Let's go to our preferences in WordPress. Maybe it's in there. I'm looking for like an AI. I don't know where it would be. I'm looking for the like an AI for for the toolbar here. Um Oh, he says that's upcoming. That's my bad. My fault. So that is coming. There will be something in the toolbar here like an AI option where you can just click on a block and do things. Okay. Okay.
I think we're good here. We left on a high note. We got the color of that footer done easily. We changed some text throughout the entire page globally. This is super super cool. I'm really excited. Um, what I'm going to do, um, after I get out off this video recording, I'm going to clear this page and I'm going to do this for real and prompt it like with exactly what I'm looking for. I just wanted to do uh, something quick and dirty, but this is super super exciting. Again, thanks OWWP team for continuing building this awesome product and ecosystem. Um, I'm excited to build with WordPress again and it's been been a long time since I I've said that. So, uh, thanks again and I will see you all in the next video.