00:00If you're using agentic coding to build your applications, you might run into UI issues from time to time
00:04So, in this video, I'll show you one of the best ways to get your agent to fix your UI issues and a lot more
00:10So, I wanted to create a series of videos that go over all the typical pitfalls that people fall into when using agents to build real applications
00:18This is very different to the long- form tutorial type of content on my channel, and these are going to be shorter videos that address very specific issues
00:26So, please let me know in the comments if you would like to see more of these types of videos and if there's anything specific you would like me to cover
00:34So, here I have an application that I built using my Aenti coding starter kit
00:38I created a dedicated video on how to use the starter kit and it is completely free
00:45All I did was set up these dependencies
00:48Then I clicked on start building and I simply provided details around the type of app that I'm trying to build and I ended up with this result
00:55Conceptually, this app is really simple
00:57We want users to pass in any unstructured data, whether it's text, files, or images, and they can request to receive the data back in a structured way, like a JSON structure
01:10I think the UI looks very cool, and it also supports light and dark mode, and everything looks really nice
01:16But there are a few visual issues
01:20For instance, if we look at the logo, we can see that the bottom of this G has been cut off
01:25And the same thing with this G in this yellow section, the bottom part is cut off
01:30And these types of issues are not specific to my text stack either
01:35The same thing happens on things like Bolt and Lovable
01:37And I've even seen it in other experienced developers apps like WebDev Cod's video suggestions app where we can also see the bottom of these G's are cut off
01:46And I can also try this in a different browser
01:50And the same issue is still there
01:53So what's happening here is that agents are really good at writing code, but when it comes to UI design, they're effectively coding blind
02:00They can't see what you see
02:02So one option is to take a screenshot of this page or the specific element and then send that into the chat and ask the agent to make a fix
02:10Or what we can do instead is give the agent access to the browser
02:15That way it can look at the page itself, identify any issues, make the fixes, and then test the changes itself
02:23And all we have to do is set up one MCP server to make this work
02:28And that is the Playright MCP server
02:31And it's completely free to use, which is awesome
02:34So after adding the server, simply start Lord Code again
02:38And you should see that the server is now connected
02:40So, what we can do now is ask the agent to look at the page and make the fix
02:45So, let's say, hey, there seems to be an issue on the homepage
02:50The bottom of some of the G characters seems to be cut off, like in the logo and the euro section
02:55Please can you use the Playright MCP server to navigate to the page and troubleshoot the issue? And let's send this
03:03And Claude Code will now automatically open up the browser and do its thing
03:07I'm not touching the screen at all
03:10So yes, we can see this G is cut off in its browser as well
03:12And let's have a look at the chat
03:15It's saying perfect
03:16I can clearly see the text clipping issue
03:18Looking at the screenshot, I can observe that the bottom portions of the G characters are being cut off and it's now fixing the CSS styling issues and it's made the changes and it's now verifying that the changes worked by taking another screenshot
03:33All right
03:33And the agent says it's done
03:35And now we can actually see the bottom part of that G
03:37We can use the Playright MCP server to do a lot more than fixing UI issues
03:42We can also get it to test the application for us
03:47So let's say we wanted to make sure the user is able to go to the dashboard, click on manage API keys, and then create a new key and delete the key that it just created
03:58If everything went well, I want the agent to report back on it
04:02Or if it ran into any issues, it needs to resolve those issues along the way
04:07So let's do that
04:07I'm going to clear the chat and let's say please use the Playright MCP server to test the following process
04:14From the landing page, click on dashboard
04:16Then click on manage API keys
04:19Create a new key and call it testing
04:23Then try to delete the key and let me know if the process worked
04:28If you run into any issues, report on those as well
04:30If you find any visual bugs along the way, correct those bugs and then test again
04:36Looks good
04:38Let's send this and let's sit back and see what the agent does
04:41Right
04:41Again, I'm not touching anything
04:43The agent is taking control over this browser
04:45So, I'm expecting the agent to click on the dashboard link first, which it did
04:49Now, I'm expecting it to click on manage API keys, which it did
04:55So, let's see if it's able to create a new key
04:57That's really cool
05:00It was able to click on create API key
05:02Now it should call the key something like testing which it did
05:07Now can it actually create the key? Yes, it did
05:09So we got this popup showing the API key
05:12But there are clearly some visual issues with this popup
05:15And I'm curious to see if the agent actually picked this up
05:19And the agent was able to delete the key as well
05:21And we get the final results
05:24And let's just have a look
05:26So I don't see anything specific around that UI issue
05:28So let's actually say after you created the API key, there seems to be a small UI issue
05:34After you created the key, the model showed you the actual API key
05:39The content of that popup was overlapping with the actual container
05:45Please could you use the MCP server again to create a new key and then troubleshoot that issue
05:50Let's send this
05:52And the agent actually went back and forth quite a few times and eventually it was able to find the solution
05:58So it decided to add this scroll bar to make everything fit
06:01So hopefully you'll agree I think this Playright MCP server is actually really cool
06:07Not only can you use it to fix UI issues, but you can also use it to test certain processes in your application
06:14Let me know in the comments if you would like me to continue with the series so that we can build out this application together and I'll teach you a bunch of tips and tricks along the way
06:22And also let me know if there's anything specific that you would like me to cover in the next video
06:28And remember to check out my Aentic coding starter kit where I show you how to set up this boilerplate project from scratch.
