So far we've only developed two nodes, with only one of them being an action node which has some kind of execution behind it. So let's quickly take a peek at our code base. How would we go about adding a brand new node? Well, good news is all the files we have to modify are inside of features workflows. We would Start with defining a brand new executor, which is something like this open URL file, which we have.
Once we define a new executor, we have to register it inside of our node executors, so it satisfies the record. And then we have to register the new node inside of the node registry. So not too bad actually. We only have to modify two files and create one new file and everything will automatically sit in its place because we built this using factory type of development, right? We don't have to modify the right sidebar, we don't have to modify the run workflow task.
We essentially built small factories which do all of that for us modularly. And While that makes it easy for us to add new nodes, it also makes it very easy and deterministic for agents to add new nodes for us. So instead of instructing the agent how to do that every time, one trick that we can do is modify our agents.md or claud.md and add the following snippet. Adding a workflow node. Three edits required all under features workflows nodes.
First we create the actual implementation file for example the open URL which is the nodes executor logic. We then register it inside of the node executors and make sure that the satisfy contract makes a missing executor a compile error for action nodes. And then we have to add its manifest entry inside of the node registry. We define the kind, label, icon, accent, all of the input fields it's going to have and the outputs downstream nodes can then reference. The run task and the canvas step are registry driven.
Never touch them to add a node. So exactly what we just went through in our code base is what we've described here. You can of course find my agents.md file in the GitHub repository and simply copy this snippet if you don't want to pause the video and write it yourself. And now we can create prompts which are going to reliably create new nodes in our codebase. I have once again prepared chapter 19 remaining nodes specification file for you in which you can find the exact change we've added to agents MD as well as all the prompts which we're going to add to generate new nodes.
So let's execute the prompt which is going to add the act node to our code. Let's take a look at the code which was generated. So first of all we now have a new executor called act and it's located right next to the open url in the nodes folder. So very similarly as to open url the act node accepts a stagehand instance, the instruction value and then uses stage hand API to perform an act, whatever that is per user's instruction in the natural language. In the return, we bring back to the user whether it was successful or not, whether there's any messages, and the URL that we are now on after an act was performed.
So now inside of the node executors, which is my other change, that new act executor was registered, the same as the open URL. So we pass the stage hand and we pass the instruction using values.instruction and then inside of the node registry I don't know which icon it's gonna choose for you, for me it chose the pointer icon and it added an act node It gave it a label of Act, icon of pointer, it used purple color it seems, and fields is just a single multi-line required field called instruction. So whether yours is multi-line or not, it doesn't really matter. It's a preference for the agent. And the outputs are exactly what we output inside of the act node, success message and the URL.
Now let's see if it actually works. So I'm going to open my website codewithantonio.com and I'm going to tell it to click on the browse courses button. So it should perform this right here. Let's see if it's actually going to work. So make sure that you have your trigger development server running and your app running.
And let's take a look at our latest session. So what I presume has happened is we first went on to CodeWithAntonio.com and then we should click on the Browse Courses button. And there we go. We clicked on the Browse Courses button and it did a redirect. Now go ahead and try chaining another action to it and make sure that you can see the output of the previous act node which should allow you to interpolate the whatever output values the previous node has produced.
Now let's go ahead and add the extract node. Once again, a Stagehand powered action node with a single multi-line instruction field. It pulls data off the page described in the instruction using Stagehand's exact extract method. Surface the extracted result as an output. Follow our convention for adding a node.
And once again, we have the exact same output, a new executor called extract registered inside of the node executors And then Node Registry has a new manifest entry called extract. The executor for the extract is quite simple. All it does is it performs stagehand extract with natural language instruction from the user and returns the output of the extraction. I would recommend performing the test for the extract node on a very simple website, for example, quotes2scrape.com which is essentially a sandbox for web scraping and it's also HTML static and very simple so there shouldn't be any problems and you should get very deterministic outputs. So let's go ahead and run this one.
So now inside of your newest browser base session, if you scroll down here, you will find the exact timeline first of opening the URL and then the result of the instruction extract five quotes and you can click on output and down here you will see five quotes extracted. I'd also recommend testing that if you connect any other node to the extract node that you can actually interpolate the output of that previous extract node inside. Now let's add the observe node which is another stage hand powered action which doesn't do any acts or any extraction but instead it simply finds the clickable elements and the other DOM elements on the website which you can then use to more precisely use the act node. Make sure that the executor generated for the Observe node looks something like this. So we use Stagehand API to invoke the Observe action passing the natural language which is the user's instruction and then we simply iterate over the matches and return those matches.
And you should also make sure that this is properly registered in the executors and in the node registry. To test it out, let's once again load our quotes scraping page and let's tell our observe node to find all clickable elements And then inside of the Act node, let's go ahead and tell it to click on the first item inside of our Observe 1 matches. So I assume that this will basically give us a list of all clickable elements, so let's click on the first item that it finds. And if you visit your browser-based session, it's going to be a bit anticlimactic because the first clickable element is the quotes to scrape button. So perhaps we should have told it to click on the second clickable element.
And you can see all of that in here. So first we navigate to quotes to scrape, then we find all clickable elements and inside of the output you can see exactly everything it found and you can see that the first one in this array is the link quotes to scrape. So the second one would have been a login link or maybe the about link. So yes, the act node in the end just clicked on the quotes to scrape. It might have been more fun if it clicked on maybe login or Albert Einstein, something like that.
So yes, the video is going to be a bit anticlimactic but you can actually see that it clicks on quote to scrape. But I think we've demonstrated the power of this node, right? If you want to play around, go ahead and tell it maybe to click on the second item and see what happens. Now let's develop the star of the show, the Agent node, which is another stagehand powered action node with a single multi-line instruction field. It runs an autonomous multi-step browser task from one instruction using stagehand's agent.
Surface whether it succeeded, a summary message and whether it completed as outputs and then followed our convention for adding a node. So this is basically our superpowered node which is able to act as if a human were navigating a website. So once again you should have the agent executor registered in the node executors and the node registry. And my agent has generated the following executor. So once again, stagehand API, which runs the agent and runs execute on the user's instruction and returns success message and whether it was completed or not.
So let's test our super powered node once again in a very simple scraping sandbox and let's tell it to log in with a username of admin and password admin click on the about link in the first author that appears and then connect the extract node and extract the information about that author and just make sure that you can see the connections from the previous node to ensure that that is working correctly. So we are purposely doing a very simple example even though this is a very powerful node and I'm sure you can only imagine the things you can do with this but I recommend testing it out in a sandbox for scraping because you can get very deterministic results with this. And let's run it. And if you actually visit the session on time, you will see the live session of what your agent is currently doing. So you just saw how it entered admin as the password and the username.
And you will now see the whole timeline of everything the agent did. So you can see how agent has its own access to the act node, its own access to observe, right? So that's what the agent can do. So agent is essentially all nodes in one. But if you do want more granular access, then you would combine both the agent to maybe do some long task and then do some very deterministic simple task with a specific act, observe, or in our case, extract, which I've extracted the About Albert Einstein description.
So you can see how useful it is to create a code base which serves as a factory for your coding agents because this couldn't be further away from a vibe coding and yet we didn't write a single line of code for any of these tools which work extremely reliably and the code is exactly as we expected because we created an environment in which coding agents perform very well. And then go ahead and stage, commit and push your changes.