Agentic Workflows Q&A

[00:00:00]
>> Steve Kinney: A lot of the various different services these days, almost all of them have the ability to have agents that do code reviews. And I will say that like, you know, if you're somebody like, I'm using AI agents all the time to write code, or you're somebody like, I hate them and I think they're bad, I would still say like, it is worth looking at like the code review agents because like, asking you to review something is definitely different than asking to write the code, and there have been many a time where even like my own handwritten code is like, you know, you forgot to clean up that event listener.

[00:00:47]
I was like, you're absolutely right, I did forget to clean up that event listener, right? And so a workflow, and like right now, at the startup I'm working at, it's just me. Right, so like getting a code review is kind of hard when it's just you, right? And there is the ability to get, like having a, like, I have a system at this point where like on the, even on the code review level, like you can see, Copilot, you know, Codex and Cursor cause I'm insane, right?

[00:01:20]
And you're, the other buddy is around too, I have another repo I'll show you. But you can have it go through and like check your code and like, find edge cases that you might have missed, it has been an incredibly powerful tool. If you are like using, let's say you use Claude Code, it's just effectively a GitHub action that you can customize to your heart's content. To set it up in the first place, it's like you can start a Claude section and just do.

[00:01:53]
Sure, yeah, I trust this folder. Like install GitHub app, and what it'll do is it'll set up the GitHub action to like perform a code review every time like you open up a new pull request, right? Just do a check and be like, hey, you might have missed this, right? And, you know, obviously GitHub has Copilot, which is also available as well. It's usually there where you just say like, hey, go do this for me.

[00:02:21]
And so part of the flow for me is I will go and I will like open up a PR and then you can see that like, in a lot of cases they are like resolved. And so for me is I will let it run and like generate a bunch of feedback, and some of it's like, oh yeah, some of it's like, I know what I'm doing, thank you for that, but like, it's fine. And it like, for me becomes like the to-do list of all of the things and like, again, we've all worked on teams with humans.

[00:02:52]
I like humans a lot. I think humans are a lot of times better than a lot of these things, but you know how many good code reviews I've gotten, especially like, I was joking with the people in the room yesterday, but for the people in the chat, like, when I, like the last team I worked on, we had these two junior engineers, lovely humans, right? And out of the kindness of the hearts of all the senior engineers, every time a junior engineer opened up a pull request, like five senior engineers like pounce on it and like leave them like walls of feedback, usually contradictory feedback, right, I think you should write the function like this, and somebody else says the exact, or then they fix that, and then another senior engineer drops in and says something completely the opposite, which is like good, annoying for them, but like, yeah, you're good.

[00:03:41]
And then I was the boss, and I'd go open up a pull request. I know where the bodies are buried, and I know that I did it during a meeting or whatever, and I know it had some edge cases, and she's like, looks good to me. And I'm like, I don't trust any of you, right, because no one's going to do that to their boss, right? Like, so I think that there's like a lot of value into like, we're going to open up some of these and see like, it's like, and you can give it instructions.

[00:04:14]
So like in that GitHub folder where you do the GitHub Actions, for instance, right, you can put like a Copilot instructions, right, which is like what do you want it to look for when you do that slash install GitHub app, it will give you like a Claude GitHub action that is like kind of good, but then what you're able to do is, I think this is the one I want, I just want to view the workflow file, it really is.

[00:04:52]
You can go in there and you can like give it your own prompt, based on the GitHub action stuff as well, right? So like, you know, you can invite, follow us exactly, pull down the comments, so on and so forth. Like for me, you know, if you've used a lot of these tools, you know they have a bad habit of duplicating code all over the place, right? And so do people on your team, right? How many times is there like a format date function in your codebase or like the same like checks of is object that people wrote 52 times throughout the codebase.

[00:05:34]
And so you can kind of give it the things you wanted to look for. Have you used any of the MCPs for Playwright? Are they worth it? Yes. Alright, so the question was, have I used the MCPs for Playwright? Let's talk about like three kind of related ones. There is the Playwright MCP which will spin up Playwright. Things that, you know, it, and that is a browser that can spin up and use. And what's cool about that is you get a lot of the Playwright stuff, right?

[00:06:12]
Including the ability to like, take screenshots. Right, and kind of get like a lot of those kind of like flows in place, and yeah, they will spin up a browser, it will drive the browser, a lot of times in front of the window you were looking at. You know, sometimes they'll do in headless mode. You don't fully get to control it, right? And that's always the way, these are kind of like a slot machine of you actually getting what you want.

[00:06:38]
But the ability of like, as a front-end engineer to like, pull up Storybook. Like if I think about like before a lot of these tools existed and like particularly the MCP part, not just like the agentic coding part, like a lot of times these things were terrible at front-end, right? Because like, they would write valid HTML. We all know that CSS and like the way it interacts with other stuff is really interesting, but the idea that you can like set up Storybook and like point it at Storybook, and like, let it validate because like most of these are multimodal now, they can see the images and like.

[00:07:20]
Where agentic tools fall apart the most is when there is no system to validate their work. And this is why before I was talking about like ESLint rules, right? If there's a, if you say, yeah, whether it's a pre-commit hook, whether it's like in the Claude MD agents or the skill, where you're like, and you have to run ESLint and like some of those custom rules or some of the rules that you set out, that might even seem draconian like if you're working with other people, like where it goes, hey, you use, like we have a button component in our design system, please don't style a regular HTML button to look mostly like the one in the design system, right?

[00:08:02]
Any way that you can kind of use the architecture that we talked about that we have, you know, like the first version of this course we did well before, I think we did in like what, 2022, 2023. You know, eons ago, right, like applies and works here too, because now it is like you have an automated system nudging it in the right direction. And I think being able to see this stuff in Storybook has been super powerful.

[00:08:22]
Then having the ESLint rules that will kind of like guide it in the right direction, I think is also incredibly powerful. How do you like set up these systems, you know, like we're all basically playing architect and we're all playing manager now, even if we thought we were ICs last week, and a lot of those like policies like work super well. So there is the Playwright one, there is also like a Chrome Dev Tools one.

[00:08:57]
On the surface, like indistinguishable. The Chrome Dev Tools one does have a little bit deeper insight into like, spoiler alert, the Chrome Dev Tools. Right, and so like, it's kind of driving, it's still driving a like, you know, not your main Chrome session. So, where they become difficult and where something like Mock Service Worker or something else can solve for it, which is obviously like, for my app, you auth.

[00:09:27]
Right, that's tricky, right? So you could Mock Service Worker that. The other one that exists is, it's called Claude in Chrome, and what you would think is it does this thing of like, oh, I have a little Claude in the sidebar. I also have like an Ask Gemini out there. Let me tell you how many times I've ever clicked on either one of those. Never, right, like, and I used to, I was building one of these before these all came out and I realized that I was not going to compete against Google and Anthropic and OpenAI and Perplexity all at the same time, and I like, that was one of the prototypes that got canned.

[00:10:12]
So I was building one and I still don't think they're very useful. Where Claude in Chrome is super useful though, is that, it's connected to Claude Code. Right, and Claude Code is like a built-in like MCP effectively in there, and it's not spinning up like a Playwright browser that is like, you know, when that other Chrome opens and jumps up and down, it's like you're totally logged out. It will like, you can give it the permission to like drive your browser, right?

[00:10:47]
Which is really great because like, it's like with the Playwright one and the Chrome Dev Tools one, it'll spin up a browser, it will go to navigate the page, right? But like you could be staring at something that you are debugging, right, in your current browser, and you're like, yo, like I'm in the Storybook story, I'm logged into the app in this situation trying to debug something, right? Take over the current tab that I am looking at, right, and you have to like hit allow 1,000 times and, God bless, I don't need it like accidentally wandering over into like my bank account, you know, but like, the idea that you can then use it to like see the actual like thing that you're currently staring at and like work through it, I think is incredibly powerful.

[00:11:32]
Right? Beyond that, they kind of mostly, they drive the browser, and yeah, that's good. But I think it is part of a, part of a collection of tools where it's like just letting it drive the browser does not mean that it's not going to write, you know, its own button that looks like the button that I had in Figma. Right, that's where then you also have the ESLint kind of like reinforcement, you know, or like, you know, the other MCP servers I think are super useful are obviously like, if you use Vercel, Vercel has one, which is great.

[00:12:07]
The other thing to keep in mind is like all those MCP tools take up a certain amount of your context window, right? So like also if you have the CLI installed for Vercel or the GitHub CLI or whatever, but the idea that like, it can just pull in logs, right, is like incredibly useful as well, right? Like, cool, pull in my Neon database logs and my Railway logs and my GitHub, like, you know, why is CI failing, kind of like pull all that in, let's, things that I like, I would have like, you know, I joke that like, now that I'm like running the entire stack, the number of dashboards I need to log into on a given day to see anything, right, is insane and like, but yeah, like pull in, like, pull in my Vercel logs and my Railway logs and my GitHub CI/CD and then also like the browser console is a wild set of power of just like things that I could have done personally, but would have taken me like 10 minutes to like log into seven things and get the two-factor auth codes, and all of those things and like go in there as well.