Introduction

[00:00:00]
>> Scott Moss:Welcome to AI Agents V2. I'm your instructor here, Scott Moss, back again with the Frontend Masters team and super excited to be back to update this course because since the last time I taught it, so much has changed in the community, the technology, and even with my own opinions since I haven't stopped building. But before we get into it and talk about how this course is going to work and what you're going to be doing, first, I want to show you something super cool.

[00:00:26]
Really, if you've never seen an AI agent, this demo might be super impressive. If you've seen AI agents, you might be wondering how it's done. So I'm going to show you a quick agent that I built that has the ability to control a browser the way that we would, and we can just give it any task in human language, and then we can inspect it as it goes. So I'm just going to say npm run agent, and I'm going to say go to Hacker News and summarize the top three posts, please.

[00:01:01]
So we can run that and the agent's going to open up a browser, probably going to navigate to Hacker News, and from there, it's going to look at all the tools that it has and decide on what it should do, right? So if you look at the tools, it has access to navigate, click, type, get text, get page info, scroll, wait for element, and it's already doing all that stuff. So it went to Hacker News. It inspected the DOM to see all the things that it can click on, and I'm guessing it's probably going to start clicking on these top links.

[00:01:30]
So we have this transparent leadership thing, it's time to free JavaScript. It's probably going to start clicking on some of these things and get all the info from those pages and try to summarize it. And again, we can inspect the state here. We can see that it got the page info. It's waiting for the element to load, and then it's getting the text on some of these titles just to make sure that it's clicking on the right thing.

[00:01:55]
And it's going to continue to do this on a loop until it's satisfied and has all the information that it needs to answer our question. So, as you see right here, it did find one of the top posts here on Hacker News, and it just decided that it didn't really need to click on them. It was enough to just look at the links themselves and summarize it, and it spit out this summary. So we have the transparent leadership one.

[00:02:19]
It's time to free JavaScript just like I said it was going to, and then ignore the spotlight. So it just summarized all the stats that it saw for each one of those posts on Hacker News, like the score, you know, posted by comments, things like that. And we didn't have to do anything. I could have asked this thing to go to Nike and find some shoes for me and it would have done it. Now, what's cool about this agent is that it's pretty simple to make.

[00:02:46]
In fact, I used an SDK that does the heavy lifting, and the agent itself is just a few lines of code. Everything else that you see here is mostly just for setting up the browser and logging, and then the additional stuff are just these things called tools that we'll learn about. But tools are just functions. In this case, they're functions that map to Playwright things like click, scroll, and view a page.

[00:03:11]
So agents themselves aren't that hard to make. But the problem with this is that it's just a demo. This is not something that you would actually build in production. It's not reliable, it has too much agency and you're going to learn about what agency means. But it's really cool to show off and it's a great thing to use personally. So in this course, what we're going to do is we're going to learn how do we do this from scratch?

[00:03:32]
How do we do this without a framework? How do we make this reliable? What is the thought framework that we need to adopt to build something that's actually going to be trustworthy, useful, and, you know, goes beyond the expectations that you would think most agents have today. But I wanted to show you the power of agents and just quite frankly, how easy it is to make them.