Name: Stagehand
Uploaded: 2025-01-27T09:37:17.910Z
Duration: 2 min 33 s
Description: An AI web browsing framework focused on simplicity and extensibility.

stagehand

An AI web browsing framework focused on simplicity and extensibility.

Stagehand

All right let's just get straight into it and don't worry I'll explain everything I'm doing here later in this video. First I'm going to copy this, use the control K command, and then ask it to go over to IMDb to get the names of the latest movies coming out this January. But hey don't worry I'll walk you through what I'm doing here. 

So cursor is going to go ahead and write the code for me. Once it does I'll just accept it, save the file, and then get it all started up. As you can see it has already started the browser and now it's kind of going through its process. It's scanning the entire page and as you can imagine it's using GPT 4 via an API under the hood to fetch all the movie names. 

So let's see what it generates. As you can see in the terminal it successfully pulled up the names of the movies that are set to release this January. Everything worked just as

Expected pretty awesome right. The tool that you just saw is called Stage Hands. Stage Hands is a browser controlling AI agent built on Playwright. Playwright is a Node.js or JavaScript framework that lets you write just a bit of code to navigate through web pages with AI assistance. Based on how you set it up, there are three major APIs in the framework. 

First, that API. This lets you give an action in plain text and StageHands will perform that task on the current web page that's open in the browser. Next is the go to API. With this, you can make StageHands navigate to a URL by simply changing the browser URL to whatever you provide. 

And then there's the extract API. This extracts the current page's content and returns a Zod object based on what you define. For example, if you want to extract search results from a web page, you can just give it a Zod prototype object.

And it will return the data in a structured format under the hood. Stagehands writes playwright code that's durable, self-healing, and repeatable for web automation workflows that truly work. Plus, it gives you control over how it operates and the actions it should take at each step using the APIs I just mentioned. 

Now let me show how to install it and show you another demo. So this is the official GitHub repository for Stagehand. If you scroll down a bit, you'll find the quick start guide that they've provided. You can also see the command to quickly start a new project. I'm just going to copy it and paste it into my terminal. 

Now, if you use the example quick start command, it's going to run with the default configurations. However, if you want to run it with some custom configurations, like adding another LLM provider, you'll just replace the command with npx create.

Browser app the tool will first ask for some basic permissions and then install the initial dependencies. Once that's done it'll prompt you to name your project. You can name it whatever you want. I'm going to go with PR. 

After that it'll ask for a few other default configurations. If you're not super familiar with these you can just press enter to load the default settings. Finally for whatever model you select it'll ask you to enter its API key. You can enter that key right now or you can do it later in the EnV file. 

When you open the project in your code editor let me go ahead and paste my API key now and we'll continue. After you enter your open AI API key the tool will ask if you want to run it locally on your computer or use their own browser sessions. In the browser sessions the tool will spin up a browser as needed to perform actions within it. You can

Choose to run it locally on your machine or you can use the sessions provided by browser base which gives you 10 free sessions for this demo. I'm going to go ahead and run it locally. After that, it'll ask you a few more default questions. You can just press enter to load the default configurations. 

Finally, you'll see that they've also included further instructions to guide you through the process. So the further instructions, as you can see right here, will be provided to you. All you have to do is navigate into the directory. For some reason though, you'll need to type the directory name in single quotes; otherwise, it won't work. 

Once you're in the directory, just run npm install and it'll install all the dependencies you need. Now, as you can see, it's downloading the local Chromium browser which it's going to use to execute its commands. Once that installation

Is complete you can go ahead and run npm start to use the example script that comes with it. Or if you prefer you can open it in cursor by typing the cursor command and it'll launch right there in cursor. Of course you can also open it in VSS code but since cursor is AI enabled and can automatically write playwright scripts for us I'll be using cursor for this. Here in cursor you can see that I've opened up the project in the sidebar. We're going to open the main.

ES file where the installation instructions are also provided. We'll scroll down to add our code here. With cursor, we can simply instruct it to write the code we want to execute by describing it in plain English. Cursor will then convert our instructions into code automatically and handle the task. This is how it worked. Once the code is ready, you can execute it.

So I'm here in cursor right now, and I'm going to walk you through the project we just created. First, we'll open the main.ts file, and as you can see, the instructions to run the project are also provided there. If you scroll down a bit, you'll notice a section where you can add your code here. I'm going to use the command plus K promp to instruct the tool to navigate to a browser based repo and extract the description of the GitHub repository. This is exactly why I prefer using cursor instead of sharing AI Agent Store with colleagues.

Manually writing the code it makes it so much easier to generate the code automatically. Once the code is generated I'll go ahead and click on accept, save the file and then open a new terminal. In the terminal I'll run npm start which will kick things off. It'll spin up its own chromium based browser and as you can see the chromium based browser has launched and navigated to the GitHub repository. 

It's now scrolling through, pausing the information and extracting the description. And just like that it has successfully retrieved the description right here. And that's a wrap on our demo of Stagehand from browser base. As you saw it's a powerful tool for automating browser tasks with AI, making web scraping and automation super easy. Hope this gave you a good overview of how it works and how to set it up. Thanks for watching.

Note, that there may be slight differences in text and video. Watch video for the original content.

Stagehand Video