Sidra Baig: Well, that was a fun activity. I feel energized. I hope you do as well, because we’ve got a few more sessions coming up. Now, if you don’t already have a notetaker ready, I would suggest you do now, because we’re going to learn how to deploy smarter workflows utilizing AI agents, MCPs, and skills with Debbie O’Brien. So let’s give it up for her. Woohoo.

Debbie O’Brien: Hi, Debbie. Love the energy. Hi everyone.

Sidra Baig: All right, I think we can get started. Your presentation’s right up. And obviously everyone, please feel free to use the chat for your questions. Put it on the Q&A tab, wherever makes you feel comfortable. Okay, let’s go.

Debbie O’Brien: So, the agentic developer. Hello everyone, and thank you for all being here to watch this session. I hope it lives up to expectations, because I keep changing the talks because everything changes so fast in tech. It’s just so hard to keep up these days. So I want to actually tell you a story that happened literally just last week, which was what I was doing at a conference. It’s really cool. Let me just talk you through this. But I also want to tell you a story about how I do some bug report pull requests, how the workflow I have finds bugs while I’m sleeping, fixes them, sends a pull request, and I wake up in the morning and my website is beautiful again. So let’s go into it.

So my name is Debbie O’Brien. For those of you that don’t know me, it’s really weird because I’m not working right now. So it’s really weird to say I don’t work anywhere. I’m just at the moment between jobs. But most of you will know me from my work on Playwright. I worked there for four years at Microsoft, and then I was working at Block, and then at Zephyr Cloud doing some really cool AI agents, building some Playwright specialists there for them and fixing their tests and some cool stuff as well. So basically at the moment I’m just sharing the knowledge, and I’ve been working a lot with Grockbot lately, which is super fun. I’m going to show you a little bit of that as well, and another tool I’ve been using as well, which is PromptQL. I’m going to throw everything at you. So yes, take notes.

So the first thing I want to talk about is the bug report in and the pull request out. And the very important thing is that you still merge, but you could totally get your bot, your agent, to merge for you. But at the moment, I like to press that button myself. And then I’m going to talk about that same pattern I do, but outside it, to book some swimming lessons, to shape a bio on a website, and what I say yes to and what I kind of do. So the interesting thing is, a year ago I was at the same conference that I was at last week, and a year ago I was talking about the Playwright MCP, and just how an LLM can open a browser, write tests, and heal them. That was last year. Now look how far we have come, that in just a year I’m now basically sitting back and I’ve got AI bots that hunt bugs, that book swimming lessons, that write drafts, that merge, that do so much for me. And in just a year, where we have come is insane.

And a few of you might remember, in the Playwright MCP days, I tried out the Playwright MCP to go shopping and buy tables, and everyone said that’s crazy, and it is crazy, but now we have a flow that I’m actually doing my shopping using AI bots. Like it is insane. And this is all done through AI workflows, through skills, through MCPs, and that’s the kind of underground part of it. So we’ll talk a little bit about that as well. So yeah, I’m living the dream, everybody. I’m telling you, and I really want you all to live the dream too, because this is not the future, this is the present, everyone. This is so cool.

So very important, when I’m creating my bots or my agents, I’m calling them bots, so you can name them what you like, but I don’t like the word agent. It makes it feel like a police agent, and my husband’s a policeman, and they’re all scary people, so I like to say the bot. So give each bot one clear job. And you’re the eyes. You’re the one that says yes, that says no, etc. But never have one big mega agent that does everything, because that would just be crazy. So for example, one job, either to hunt bugs or to fix them. I have them as separate bots, separate skills if you like. A travel one, a stage one for writing my talks. And each one gets a clear job, a description, and they’re defined as in what they are meant to do. And don’t ask one prompt to go and find the bug and invent a PR. It’s got to be very clear of, this is your job, this is what you have to do, and don’t invent it. This is really important, is putting the guardrails up to ensure that the bot doesn’t just go off and try and please you by fixing something that maybe doesn’t need to be fixed or isn’t fixable. And this is where you always decide, do you merge, do you decide that that’s the right design for the website that you’re changing, do you log in yourself or let the agent log in with passwords. You have to do the human gate. You have to decide what is that human gate that you want to do.

So why the agentic developer and why not the agentic tester? And I think it’s because we’ve just come so far from, we’re not just testing anymore. Everyone is developing. Whether you’re an actual developer, a QA, or whether you’re just a person running their own business, you’re a builder. So everyone is just becoming an agentic developer these days. I think it’s pretty cool.

So when it comes to work, I have the bug hunt skill that goes and finds candidates, finds things that are wrong with a specific website, and then the fix is another skill or another bot that goes and drafts a PR, and then you go ahead and merge. And then in life, like I said, I’m booking swimming lessons, and I booked them and I took my boy swimming and it works. It’s like, wow. Which means it fills out the forms for you, does all that kind of work that you don’t want to do. And then you can set up a watch. So when I was on the holiday, before I went on holiday, I could not book the swimming lessons for the following days while I was there because they weren’t open. Those slots weren’t available. So I put a watch on, a little routine that went and looked on the next available day, and the next available day, until the slots became available and went and booked them for me. And I was like, wow, this is so cool, because I don’t have time. I was at a conference giving a talk, super busy. I don’t have the time to think about these little things, and it just went and it was done for me. And those kinds of workflows and setting those up is amazing. And then the little things like shaping the card or how I want it to look, that’s the taste. Taste is very important, and you should think about taste, because AI doesn’t really have great taste right now. It’s getting better, but the taste is you, and you’re the one that puts that into whatever it is that you’re building, designing, shaping, etc.

So I want to talk about the loop I created on just my website, which is debbie.codes. You can go to my website right now and you can see everything that I’m talking about there. My website is open source. It’s just my playground. And in there you’re going to find the skills folder. You can find those skills, and you can also see the pull requests and the issues that are open that I’m going to show you right now. But if you don’t want to watch my slides, or you don’t believe me, you can just go and check it out yourself. So for debbie.codes, I use two skills, a hunt and a fix. The bug hunt skill basically goes to my website and looks for something that is broken or something that needs fixing. And unless it’s worth fixing, it doesn’t do anything. If it is, then it creates an issue. So one of the issues it created recently was, there were two close menus on my mobile version of my site, which is something that you don’t really see. So you would never find it. My site’s been up for years, so this bug has been there for a long time. So it found a duplicate close in the mobile menu.

And then, this is very important, that you have proof. And this is where Playwright comes in, because you’re using the Playwright CLI to take screenshots so that it can reproduce it and prove to you that it actually did the work. It didn’t invent it, didn’t just make something up. It actually did find this bug. There’s the screenshot, there’s the proof. Sometimes you need a video in there as well, and it’s really important. So there’s two jobs. The hunt does all that. Like I said, it finds all those things, and there’s a couple of things I added into it as well. I added that I want the candidates, or the things that need to be fixed, into a QA folder. And then it gives me a list of all the things that should be fixed or that need to be worked on. So I can then decide, is this really a bug, is this something we want to work on, or yes, go ahead, create the issue, and that needs to be dealt with.

And then I’ve got the site bug fix that goes through these issues, reproduces them first. Now this is where I have the double thing going on, because you could say I just have one skill and it does it all, and that’s fine, you totally could. This is a little bit more expensive because I’m proving it by using tokens to prove that the bug is there, and then spending more tokens to actually reproduce it. But that’s my choice, because I really want to make sure that this is correct. But again, you can choose and merge the two skills into one if you feel that that’s a more token-saving way. So yes, it reproduces it, it fixes it, it verifies, it gives me before and after screenshots. It shows me before, this is what it looked like, and after. And then it drafts the PR. I have it in draft mode at the moment, which I’m not too keen about, but it just means then I have the power, and I’m the only one that can merge. But eventually I might say, don’t do a draft PR, just make the PR, and I might have another agent go and QA it and review it. But I’m not there yet.

So now, this is just my website that I’m doing this on, but I did do this in my previous job on an actual production base. The skills are a little bit different. And if you go to my website now and take those skills on GitHub, you should shape it to your own website or your own company, enterprise, whatever. Just don’t take it word for word. Shape it to how you need it. So remember, everything should be a little bit different depending on the kind of site you’re doing, the kind of job you’re doing, etc. So yeah, very simple. The site bug hunt goes and does its priority journeys using the Playwright CLI. So obviously make sure you have the Playwright CLI installed. And if you don’t know what the Playwright CLI is, I’m talking about the Playwright CLI skill, and that’s the skill that it’s kind of like an MCP kind of thing, but a skill. And that’s what the agent will use instead of using the Playwright MCP. It uses the Playwright CLI skill to take those screenshots, navigate your website, do everything that it needs to do, and then take the snapshots, the accessibility snapshots, the aria snapshots of your site.

And then I particularly want everything written in a QA folder with the bug candidates. You might not, so you could totally delete that from the skill if you wanted to, and only create issues when the gates pass, or when you say go ahead and do it, and then reproduce and fix. The bug hunt has to reproduce before it fixes, very very important. And then verify before and after. And I always get it to write a regression Playwright test as well, which I found really useful. But again, you might find that extra noise, because it’s got to run those tests, but it just means that that bug is now covered, so that’s kind of cool as well. And then the draft PR when you ask for it. So you can run this locally, or you can run it on GitHub Actions as well. So I’m running both of them. Sometimes I do it locally just so I can have some bugs found while I’m preparing talks, just to prove some things, and then normally I just have it on CI running every week, just because my site doesn’t have that many changes to it. But we used to run it every hour in my last job. The problem with running it every hour is you also have to have someone to recheck and make sure that those are good to merge. So just be careful, you don’t want too much noise and to be stressful. So just decide what is the best cadence for you.

And this is what the skill looks like. It’s just a skill.md file, and it’s in the agents folder under skills, and the site bug hunt is the name of the skill. And then just a very short description there, and then basically what it does. So again this is on my debbie.codes GitHub so you can go and check that out. But that’s basically all it is. It’s very simply just one file, one skill.md, and another skill.md for the site bug fix, and that basically is just reproduce, fix, verify, regress, etc. And I totally encourage you to go and take it, if you’re not doing something like this, take it and play with it, or play with it on something that you own or something that you don’t own, and you could run this on whatever you want to. And then you can do some funky things, like you can have a classification, some tags put up there, if it’s a high confidence, if the severity is minor, etc. So you can put some gates in there, especially when you’re working with other people.

And this is what it would look like when I run it. I said go and find all the bugs, and you can see this, I haven’t merged this so you can go and find this on the site, and it will show you all the different kinds. And I was like, I’m going to give a talk very soon, can you go and find all the bugs so I can show people some of the things that are wrong with my site. So it’s actually kind of like, oh my god, there’s a dead YouTube ID in there on the videos page number six. I didn’t even know that. So that’s really cool that it finds those things, as maybe someone deleted that from YouTube, and I should address that because otherwise it looks terrible on my site. So then what it does is it creates the issue, as I mentioned. Now, I don’t really like this template very much, I should make it a bit nicer, but this is the first template it gives, with the fingerprint, the URL, the target, the severity, the confidence, the things I mentioned in the slides, it’s just there. And then this is the mobile menu I told you about with the two close buttons. It gives you the repro, it shows you how to go there. You can actually go ahead, because I haven’t merged this on purpose in case you wanted to go and check for yourself and reproduce it, and see that if you query a button with aria label close menu, you will see that there are two of those on my site.

So this is the kind of screenshot it showed, and it’s showing the two of them. Now, visibly to the eye, I only see one X. So I can only see one close menu, but if you were using a keyboard, for example, or some sort of accessible device, you might find two buttons, and then it’d be a bit crazy. So this is really cool because it’s finding something that I never even knew was there. So this is very important, when you reproduce the bug before you change any code. AI is very good at just getting something done, over-enthusiastically, but it’s really important that you say, no no no, reproduce it, prove to me, I want to see that you can actually do that. And it did. It was able to reproduce it. So the close count was two, and then it didn’t, it only touched the top bar view file. It gave me the screenshots, and then made the code change. So this is the actual pull request. Again, this is open on my repo, you can go ahead and look at that. It’s pull request number 623. And in there is the pull request showing everything that has changed. There were just two files that were changed, the top bar view file and the regression test that it added. And then it gave me the screenshot of after, showing that there’s now only one close menu button. So that’s really cool.

Now, I went ahead and checked it myself and looked at it. And this is really important, that you go ahead and you check the code and check everything. So the top bar view file is there, and then the mobile navigation spec added in that test for the regression. So again, I’m not saying that this is the best test in there, because you’re all looking at that and going, there’s a timeout in there. And I’m like, yeah, I don’t think there should be a timeout in there. So I could totally then turn around and say, do we really need a timeout in there, can we not just get this test running without the timeouts. And again, you can filter that through, and then you can add to your skill, like, make sure there’s never any timeouts on my Playwright tests unless very much needed, which shouldn’t be needed. So again, always review everything and always check over.

Now, agents prepare the PR, but you still merge. This is really important. Who is responsible for the code that goes to production? If the AI agent wrote the code, the person responsible is the one that pressed the button to merge. Now, if you told the agent to merge, then the person responsible is the person that told the agent to merge. So be very very careful. You have a role, and make sure that you understand what’s going on, that you can understand the difference and the tests, and you really have to trust the loop. But you also have to gain that trust by getting your agent to do things a certain amount of time and putting those guardrails in, checking things, saying to the agent, no, don’t do that, do this. It’s like raising children. Seriously, it’s like raising toddlers. Like, don’t do this, do it this way, do it this way, do it this way. Eventually, you kind of go, oh my god, you’re a big boy now, you know what to do. So yes, do that.

This is the thing, right? Because I ran this PR through a different agent. I ran up Goose, and I said, hey Goose, I like Goose actually, it’s really cool. I said, Goose, I’ve got this PR, can you go ahead and tell me, is this really a good fix? Amazing. The fix is correct for the reported bug. Brilliant. Go ahead and merge. No, hang on. But it introduces a keyboard regression. So I’ve now got one thing fixed, and now I’ve got a regression somewhere else. And it’s basically giving me a nice suggested fix, which is a wait and next tick if it’s open, etc. Now this is really cool because now I’m learning. This is really important. I’m actually learning something that maybe I didn’t know. I’m learning how Vue applies a display none, how the header has a z-50. So I’m learning everything about it. If I don’t know this about this site, if I don’t know the code, I’m now learning it, because this other agent is actually telling me what I can do. Now again, as I don’t trust AI, I’m like, is this really true? Let’s throw it into Claude and let’s see what Claude says. And bang, the core idea is right. Hiding the header hamburger while the drawer is open is a reasonable way to leave a single close menu control, but the implementation introduces two real regressions and one piece of dead code.

Isn’t this really interesting how three agents have given me three different things? And this is very much like real life, as in, if I had a couple of real people working for me, in the past I’ve led a team of engineers, people have different ways of writing code, different ideas, and different ways of doing things, and that’s perfectly normal. What you have to do is decide which one is the right path to choose. And sometimes that might be taking those suggestions from different agents, putting them all together and going, right, this is now all the resources I have, all the research, what is the best solution now? You will learn a ton if you do it this way. This is the best way to work with your agents. So yes, this is all still open up there, so do check it out on my website.

So yeah, the same pattern outside the repo. This is the cool part. So I have one clear job per bot, and I just choose what matters. So my goal was to book the baby goldfish classes in a hotel in Zadar, and I wanted the morning slot. I knew what I wanted, and I was like, right, just go ahead and book it for me. I know that I want the 9:30 slot, and the parents have to be in the pool. I get that, and I have twins, so I need two. Just go and do it. This normally takes so long. This is Grockbot, and you can see here how Grockbot is now opening the hotel website, giving me a screenshot of what it’s done, and it’s looking for the toddler activities. So it’s got to find the website, it’s got to find everything. And I didn’t even tell it what hotel I was in, because my travel bot knows what hotel I’m staying in. So this is really cool.

So this is the actual bot’s computer. You can actually visit, there’s a button there at the right-hand corner. And when you click on that, you open the computer that the bot runs on. So each Grockbot has its own computer. Each bot has access to one computer where they all share the computer. It’s not one computer per bot, so just keep that in mind. So it was able to go in here and use the computer. So just like how Playwright CLI would open a browser and start clicking and doing everything for you, this is the same kind of way of doing things. It’s very slow. I’m not going to tell you, like when I did that Playwright video about Playwright MCP buying tables, it’s quicker to do it yourself. This is quicker to do it yourself, but because it has its own computer, I can close mine. I can go off and go to the beach for example, and then I can just come back later on and it’s just done. The swimming lesson is booked for me. So that’s the cool thing, that you just hand it off and things get done, and they’re the workflows that you need to start building, which is really cool.

So there’s the computer in the small screen that you can see there on the right-hand side, and this is it. It’s locked in the 9:30 mornings, and you book without a room number. I didn’t even have a room number. I booked this before I even checked in. It’s so cool. So yeah, so that’s basically what you can do. And it comes back like, these are the days that are available, which ones would you like me to book? And I’m like, yeah, let’s do Sunday. Bang. Sunday booked. And then I get an email through going, it’s all booked. I’m like, happy days. This is amazing. So this is Grockbot. Check that out. I think it’s very cool.

And how I’m using Grockbot, I have a chief of staff. My chief of staff is the person I talk to a lot, especially about what’s on my calendar today, gives me a brief in the morning. I’m really bad at emails. Even this conference, I’ll tell you, I’m so bad at emails, I never read them. And my chief of staff deals with them all. There’s a hell of a lot of stuff to go through, but I do say, oh, what’s important, what’s not. Then I have a shopping one that goes shopping for me. I have a video on that, check my video, it’s on my website, debbie.codes. You can see the video page where I actually go shopping using PayPal. I’m on the PayPal channel video as well, so check that one out too. But it’s really cool to just be able to send the bot shopping for you, get all that food shopping done. Got a coach checking my protein levels, telling me which videos I should use to build up my strength and lose weight at my age. And that’s really cool, because this coach is checking on me every morning, every afternoon, like, did you get that run in, did you do the T-Rex class, what’s your protein level today. And it’s like someone bugging me all the time, which is really cool, because otherwise I might slip and stay on the computer too long and not get the stuff I need to do done.

Job hunt. I have a job hunt bot which is helping me, not just look for roles, but with my applications, and also with researching the company and preparing for the job, like, what are the interview questions that I should be preparing for, what’s this company like, and do all that research on it. And that’s really cool, and that one bot has that job. And then I’ve got my work team, which, I showed you earlier the skills that I have that I run on CI, but I also have a team in Grockbot, an engineer, a QA, a designer, and then I have a scout that goes to my site and basically looks for issues, looks for things. And it’s really cool because what it did was, it noticed that I’d finished a talk and I was, what’s next, and it had my conference talk and I’d already done it, and it was like, I’m taking that conference off and putting it onto the past conferences, and leaving the next one on as the next one I was speaking at. That’s really cool, because that’s the kind of thing that I never ever had time to do in the past, and now this bot is just doing it for me under the hood, and I’m like, wow, this is cool.

Then I’ve got my content one. So when I do create a video, I like to get the YouTube stuff done. It’s really boring to add all those titles and descriptions and all the chapters, and then create a blog post based on what I said. So it’s not like getting AI to write for you, but getting AI to transcribe the YouTube video and make sure it sounds a bit better. So that I do, and then you can send it to LinkedIn and things like that. It’s really cool. Although I do manage most of my socials myself, because I still think the human needs to be there. Then I have travel. It books my flights for me. It checked in for my flight. I was sitting there with friends and I was like, oh my god, I’m checked in. Like, oh my god, this is amazing. Really cool. And then I’ve got my home, where my school calendar, all the things that I need for the school, for the bags, the medical, all that kind of stuff, and it’s in charge of that too. And then the stage for when I’m giving talks, it helps me with my slides and all the things. That’s what I have set up. You could totally have all of this same setup. It’s really cool.

So again, I’m using Grockbot for this. Do check that out. This is something that I have, the work bot there with the engineer, and then all the work I do is using Claude agents. So it’s kind of like sending everything over to Cursor and the Claude agent, and then I just view the PR. And it’s like, yeah, this is the one I was talking about. Zurich chaos is upcoming, this is upcoming, Spotify podcast is extra. So it found things that it needed to just fix, and it just fixed it, and I’m like, this is amazing, go ahead, yes. So again, this is what I have. You could totally build something like this too. And this is the chief of staff that I have. So I have it pinned at the top so I can just talk to it, and I say, what can I do, right, I can probably do it at 2 p.m. And sometimes I say, oh, what’s the meeting URL, when you have a meeting and you don’t know, is it a Google Meet, is it a Zoom meet, is it what meet, and I just put in, what’s the meeting right now, what’s the link, click it, bang, done. I know that costs money and tokens, but it saves me time.

So yeah, small problem just built in the chat. So this is PromptQL, a different thing to Grockbot. Check PromptQL out as well. It was released literally last week, and I found it really cool. So I was testing it out just before it got released, and I was chatting with somebody. So the someone is in here plus a bot. So there’s two people. It’s multiplayer. Two people and a bot. And we were having this conversation, and they built me this bio of my profile and stuff. And she said, can you check it out and see if there’s anything wrong? And I’m like, oh my god, you forgot about Playwright, add about Playwright in there, and I’m also an Nx ambassador, add that in too. So it went ahead and refreshed this mini app in here so I could see it visually in real time. I thought that was really cool. And then they said, you should, and you can see the Playwright powerhouse, they call me a Playwright powerhouse, I thought that was pretty cool, good job AI. And then I said, they’re going to give me a t-shirt and stuff, right, and I was like, okay, can you make the t-shirt message a little bit bigger, so I made the message and put in there, I was like, I love that you want to send me a t-shirt but I almost missed the message, can you create that a bit better. And that was cool. So it did that.

And it’s really cool because then I was like, can you just send me a form? Like I don’t want to put in the chat my name and address and stuff like that. And then it just created this form that I could fill in. And obviously autofill works really well because it’s like a little mini app. So it just filled it all in for me, so easily. And I was like, wow, this is really cool. In a matter of seconds I just built in a little thing right there. That was really cool. So again, that’s something you totally should check out as well. It’s PromptQL. So you can basically do everything. Ask a form, get a form, build in a thread, ask for a t-shirt form to be filled in that you can just send to that person. Like, it is so cool what AI can do for you. It’s just a matter of totally playing around with it.

So, any takeaways? Basically, when you’re building these skills and workflows, make sure there’s one clear job. So it’s a skill or a bot. You can call it the same thing, it’s pretty much the same thing. Bots are just basically skills. Skills are just basically bots, kind of. And then just make sure that they’re not doing too much. You’re the one that merges, the one that books, you’re the one that’s in charge. So make sure it doesn’t invent, and make sure everything is proved. Especially if you’re working with QA things, make sure it’s, is this true, is this real. So, next week or whatever, just spin up one bot, just go ahead and give it a go, whether it be in your personal life or in your work life. I totally encourage you to take one of these platforms, and just check it out. So yeah, that’s it. There are the links to all my sites, and anything you have questions on, please do reach out and let me know. And thank you everyone for listening for so long.

Sidra Baig: Well, thank you so much Debbie for joining us and for that great presentation. We had quite a few fans there in the chat. I don’t know if you noticed, but yeah. And if you want to stick around, answer any questions, please feel free to do so. Perfect. Thank you very much. Thank you. Bye. Bye.