🇬🇧 Drupal AI Production Workflows with Skills
Summary:
I reviewed 47 plus PRs and kept seeing the same Drupal mistakes, services called directly in classes, missing proper try catches, and hook implementations ignoring Drupal 11 hook attributes. To fix that, I introduced Drupal AI, production ready AI workflows built as skills, agents, rules, and hooks. I demoed three skills, Drupal services for dependency injection, DrupalHooks for Drupal 11 attribute based hooks, and Drupal htmx to refactor an Ajax color picker to htmx with the same experience. I also mentioned a review PR command for automated PR review and mapping updates. I asked you to fork the GitHub repo and start using it.
Transcript:
00:00: I reviewed more than 47 PRs lately, and they were the same mistakes in 38. Drupal service call inside classes, not cache tags, hook implementation ignoring Drupal 11s hook attributes entirely.
00:20: No way. The AI wasn’t broken. It just didn’t know Drupal well enough. So basically I spent quite a while every night building the system that fixes that.
00:35: So here I am introducing Drupal AI. Production really AI workflows for enterprise Drupal things. So, for examples you know this already that Drupal service here no way it should be with a dependency injection, right?
00:55: It should be this way. So, before when asking to load a folder in front, create a custom service with an empty step type manager and logger injected for a quick example hello world in the model, my model example, it was creating this bad example.
01:10: No way, it has to be with a dependency injection, right? So that’s why I build Drupal AI, which is basically a set of skills agents rules and hooks and today I’m going to be talking about skills okay so for that you can see here in the GitHub repository they have contributed all the skills all the skills
01:36: okay I have here a Drupal project okay which is a Drupal 11.3.8 and then you can see here all the skills.
01:47: So I did a git clone and then I am having here all the skills. And now I’m going to claude.
01:54: Okay, basically quickly, this is appropriate. I type claude, then boom, there you go. And then what I’m going to be doing is copying and pasting the front.
02:06: Okay, this front. Let me do it. Let me do it here, in this demo, over here, and then boom. So, before, remember, remember always a problem.
02:26: It was in here in this code, which is calling that direct service called inside a class. And we don’t want this to pass every single one.
02:35: It depends in the direction way. Okay, so you can see right here, it has loaded the skill Drupal services. Why?
02:43: Because it has the service work here services and it trains to infer, you know, a guess and next talking. Let’s take a look at here, because whenever you prompt, you basically reach that claude md file, which is heavy right here.
03:01: Clubs.md file and also have instructions in the GitHub repository. Okay. And now here is also calling is trying to find any skill, if there are any, if there is any.
03:16: In this case, it says that it has loaded the skill Drupal services. So let’s take a little here Drupal does services.
03:34: Let’s add here in the name. Perfect. It has found this, it has found this Drupal Services and Dependent Selection for Control Use for and Plugging.
03:42: It’s inject services into Plug plugins, custom plugins, and services using Container Factory Plugging Interface and Services yaml. So it says here, okay, this sort of matches and then I’m going to load the skill Drupal Services.
03:57: Perfect. So it has loaded this skill and this skill is basically instructions. instructions, instructions in Markdown that it says and the core principle one is never, but never used, ever used that drupal service, which is in classes instead of that in inject via constructor, which is basically our
04:18: thesis, right? Don’t do this way instead to this way, perfect. And this code snippet is here. So claude knows instead of using the Drupal service, use a dependency injection.
04:33: I mean, injecting via constructor. And then more code snippets also that make sure, you know, how this is defined a service in the yaml.
04:41: So let’s take a look. Okay, it says here to create a service. Yes, do it. It’s creating that service for there.
04:51: Yes, I don’t have a model. Yes, as you know, I don’t have the model. So it should be creating the model.
04:59: Okay, my model example. Yes, here’s the service. Yes, an info to yaml that is going to be creating. Yes, that service, that service, that yaml.
05:10: For sure. Okay, let’s take a look at here. Okay, we have the info to yaml here. And now we have my model example services right here.
05:18: Perfect. And now it’s trying to create the service file hello war service. Yeah, perfect. I need to inject it by a constructor and it’s not using anymore that Drupal service.
05:31: Yes, generate this for me. Okay, it says here a summary of the file that has been created. Let’s take a look at here.
05:39: Perfect. I have the hello war service. Yay, this is amazing. Nice. And now it says that I can use it.
05:47: Yeah, I can use it right away. How can I use it copy and paste this one? Oh, of course, make sure, make sure you have a model enabled.
05:58: It says my model example. Perfect. And then going to execute PHP CLI. or something I can call the drupal service, right, let me copy and paste and then what’s the method that this has created, it says greet, right, so let me use the greet method and then like Eduardo enter boom there you go, this is
06:32: here hello it would all perfect amazing oh now it looks beautiful and now let’s create a controller right so amazing and now and now a and now create a class controller with a path greet so I can use it Please do it because I’m not going to be doing this right in just the terminal.
07:05: I want this to be visually to see behind the scenes. Not behind the scenes, but visually. Okay, it’s created the controller.
07:14: Yes, created the controller for me. The controller is called greet controller. And they’re here on the controller. Perfect. Okay, I have the greet.
07:23: greet and I have that my routing okay greet and then I can copy and paste this path right here and it says page not found oh what happened it should render I have the model enabled yeah I did enable the model but what happened let’s see let’s say bye bye let’s just in case.
07:53: Hey, here is. Hello, world, hello, world. published nodes three. Perfect. Classic issue of a clear caches. Greet controller. It says here, greet, right?
08:09: greet, hello, world. I can change World. Yay. And then enter. Then there you go. Perfect is working. Nice. Amazing. published notes here.
08:22: Yep, so it is working fine. Amazing. Let’s keep going. Let’s take another example. Let’s take another example.
08:43: Here, add a distance at me hundred to the the article node for the show some message, message, congress for creating this node title, keep creating another one using this link node at article using drupal link API.
08:57: So let’s copy and paste one. Let’s copy and paste this one. Perfect. It says successfully, really great, I mean, it’s calling the drupal hooks.
09:20: Yeah, so what’s the issue here? The issue is that normally, when I never, I prompt this before Drupal AI, it works, I mean, but it’s creating a file, dots (.
09:34: module) a module with the hook for alter and submit for handler in this form alter. I mean this is working fine works, but this is the Drupal a lot of way to do this It should be using that Drupal 11 say hook annotation way right So before this was happening and now with Drupal AI with a set of a skills
10:00: more than 35 a skills Then what should happen? It should create this beautiful Class with a hook way to do it here okay so let’s and now it’s using the skill Drupal hooks yes it’s using the skill Drupal hooks so let’s take a look at here Drupal hooks Drupal here and then we can see the Drupal hooks Drupal
10:34: 11 either into programming, procedural hooks, hook for other hook, no pre-safe hook thing, use the hook attribute, and when to use hook versus event subscribers.
10:49: So nice. And then I have some code snippets right here. How this should be, right? And then Perfect. Okay, so it has lot of this, this is a Drupal hooks skill, which is great, something that I want.
11:10: It’s creating the folder. It’s once created a folder hook. So it means it’s not going to create any more. It does model with a hook form alter, which is the old way.
11:21: Nice. So now it’s creating that my model example hooks dot PHP under hook folder. And then I can see here the hook for node article for alter with a form submit handler here.
11:36: Yes, great is for me. And now let’s take a look, right? Here have the hook and then I have the the class here with the hook annotation way.
11:51: Perfect. Amazing. Just now let’s go. Let’s go to let’s take a look, right? nodes add article test article demo then click on safe boom it says here congrats for creating this article demo keep creating another one I’m gonna hover it says here note at article yes we hear then it invites you to create
12:23: not really go yay because that’s what I’m telling this to have in here perfect and using the best support calling a sender nice this is working fine and now let’s go to another demo the last one okay now let’s go to Ajax demo here.
12:55: I have an Ajax demo, a custom model which basically, you want to see this in a moment. This is Ajax demo color picker which if I change this red to green, green to blue and so on.
13:14: This is an Ajax way you can see the processing, right? It changes and basically displays what is your current option.
13:25: Nothing more than that. Then they have here a forum. This is how it’s built in the forum, right? With the forum, with the options, and then I have a classic Ajax way here a callback that is calling this update preview whenever it changes then basically it’s gonna return this response you’re gonna update
13:55: this from preview this container which is basically a changing and displaying the current color you pick which color this one blue, green, red, purple, and so on.
14:11: So this is very easy to refer where I just wait to do it. But now we are using htmx. Yes, Drupal 11.2 is using the htmx.
14:29: And in 11.3 is using a dhtmx.min.js file, it’s improving even more on how we should be, this is HTML seems like an ix but with esteroids.
14:46: It’s a new level, you know, to use a correctly, not correctly, but to use much better way, how to trigger based on any elements, how you get the response back.
15:06: And this is really, but really fast. This is the awesome way to do it. I invite you to take a look at HTMLX, how you can use it, and then how you can use it in the Drupal site.
15:19: okay so we have another way and I just all the way how to do it and now we are going to refactor all of these to use now Drupal htmex and for that and this is new by the way I have a Drupal skill that is called Drupal htmex yes this one, the rootpal, htmex, and with that, I have again, the name, the
15:56: whole description, call this snippets, and when you find something like an Ajax response, then try to use the htmex way by having a library, and so on, and use all the beautiful methods that we have for this htmex.
16:13: So let’s take a look at here. Let’s put it into action, right? Okay. And for that, I have a front.
16:24: We’re right here. And this front, what it says, basically, re-write the color picker for because we know that the color picker for is an Ajax one.
16:35: Okay. And instead, use the htmx, which is the new way to do it, okay? And I have some other instructions like the core and behave, well, I’m trying to explain the core and behave as a led that triggers an eject score but that swaps the color’s preview wrapper with the color box preview, what’s the goal
16:53: , seeing user experience, nothing else, but driven with the HTMX and other requirements right here. Okay, so it says that it has loaded that Drupal skill, Drupal dash, HTMX, yes.
17:06: Yes, it has loaded away skill, yay! And now we know it’s instructions and it has to use a library, it has to use these methods and has also other code snippets that, hey, when you see a build form, then make sure you use here, HTMX mix, and you use the methods, and here is an example code.
17:29: Okay. So, it’s doing all of this for us. So that we can focus on the business. Keep doing the changes, yes, create a controller, we need a controller for that, we need a controller for the preview.
17:56: Okay, it’s basically doing the refactoring for the color preview controller, yes, do you want to update the demo, adjust the demo right into the yaml, yes.
18:08: What else? The library’s, yes, because I need a card Drupal dependency, and I have a new library is called color picker, but it basically is going to be calling that card Drupal.
18:23: Perfect. It just did. So let’s take a look at here. Color picker for has this being updated. Yeah. Yeah, now it’s using the library, as I mentioned, Ajax demo color picker, which is here in the libraries.
18:38: Yes. And now it’s also using the htmx right here with a method to remember the skill with all the methods right here.
18:48: Yep. And it’s using all of this. It says, hey, by the way, use the routes, the new routes color preview, what is that one?
18:57: is right here. What is this one is in the controller and then it’s using the preview and then it’s basically displaying your current to selection.
19:10: Nice. So that’s awesome. And then boom, there we go, we have to have an identifier and then we have everything right here, the rest.
19:21: So let’s take a look. Let’s copy and paste and bring another tab. Let’s change this red BOOOOM. It works blue, green, and purple.
19:39: Let me also show you quickly here. Let me refresh the page, let me choose, for instance, red, take a look at here, a new HTTP request here, okay, take a look at here, new HTTP request preview, and now we can see here in the headers, okay, I just demo preview, okay, which is basically our controller,
20:07: remember, our routing adjusts them all preview and this calls the preview one, right, calls the preview method this one, boom.
20:21: And then we have the payload the color, yes, we have the color and we are grabbing here the color. And then we have a preview, right?
20:31: We have the preview, a red and then here color, and then when I refresh, I’ll open this one, refresh again, green, blue, blue, yeah, let’s red, red, here’s red, perfect, this is all working, amazing, so I hope you love of a system.
21:06: Let me know if you have any questions or comments, it would be a completely picture. I explain the skills, just three skills, but I have more skills.
21:20: And also, I even didn’t explain the following that I have instructions for people who are using codecs because I also use codecs.
21:29: You can use that symbol and link right here. And then you can also have agents having you explain none of these agents you’re going to love it when you just like group up again depth and that it has a also skills right here prepare for these skills, but that’s going to be fun and very sure until.
21:50: And also, just to spoil a little bit is that you have commands. My favorite one is the review PR.
22:04: With the review PR it basically does and you pass a pull request number and it goes to that branch.
22:17: that’s a PHP coding standards. First it goes to the branch, that’s a git pull, configuration import, a composer install, updates database, and also it runs the PHPstan, PHPCS , also that’s a whole review based on another agent and also invites you with questions to hey do you want to commit this immediately
22:48: post as it is in the JIRA post partially approve it not approve it and then oh a different options of course you have to make sure that you update here your mappings right because a user can have a different username in JIRA then in JIRA so make sure you have done this so that this works on the fly so
23:13: you can change from Traff to InReview, in GitHub and in JIRA, from in progress to a core review, in review.
23:23: So it all works amazing. But so these are comments that we’ll have another show until, yeah. So I hope you love this demo.
23:33: I did it with a lot of love to the Drupal community. And this is production ready, I work for, workflows for enterprise Drupal teams.
23:42: I’m feel free to use a This github repository, fork it, start it, clone it, and then start using it in your projects.
23:53: That would be, if any questions or comments, please let me know. Otherwise, that would be ta-da!
