• May 3, 2024
• 6 min read

Notte for dummies

(The Easy Way to Dip Your Toes into Agentic Web Stuff!)

Hey there, smarty pants! Ever wondered if computers could just... do stuff on the internet for you? Like, book flights or find the best cat videos without you even lifting a finger? Well, that future is closer than you think, and projects like Notte are making it happen.

Think of Notte as a special kind of web browser – one that's super friendly to computer programs (we call them "agents"). These agents, powered by smart brains called Large Language Models (LLMs), can actually understand websites and click buttons and stuff.

This guide is for anyone who's curious about this cool new technology but doesn't want to get bogged down in complicated techy jargon. We'll walk through setting up Notte step-by-step, nice and easy.

What the Heck is Notte Anyway? (The "Explain it Like I'm Five" Version)

Imagine the internet as a giant playground. Right now, you have to run around, climb the slides (click links), and find the toys (information). Notte is building special helpers (agents) that can run around the playground for you.

Notte calls itself the "full stack for the agentic internet layer". Sounds fancy, right? But all it means is that Notte gives these helper agents all the tools they need to play on the internet nicely.

What makes Notte so special?

• It "Sees" Websites Like a Human (Almost): Websites are built with complicated code. Notte has a special "brain" that can look at this code and turn it into simple words and maps that the helper agents can understand. It's like giving the agent a pair of super-smart glasses! This means we can use smaller, faster "brains" for the agents, which is cheaper and quicker.

• It's Got All the Right Tools: Notte isn't just about seeing. It also has things like a place to remember website logins (safely!), the ability to watch what the agent did before (so it can learn), and even ways to sneak past those annoying "Are you a robot?" tests.

• It's Speedy and Reliable (Apparently!): The folks behind Notte say it's faster and more likely to get the job done compared to other ways of making web agents. Think of it as the speedy helper that doesn't mess things up.

• It's Built for Geeks (But We Can Handle It!): Notte gives developers all sorts of cool ways to customize things, build special website tools, and manage their agents. We'll just focus on the basics for now.

Basically, Notte wants to make it super easy to build and manage these helpful internet robots.

What You'll Need (Your Agent-Building Toolkit)

Before we start building our first agent, you'll need a couple of things:

• uv: The Super-Fast Package Installer (Think of it Like a Turbo-Charged App Store for Computer Code): The Notte people really like this tool called uv. It's like a super-speedy way to install computer programs. It's made by the same folks who made another cool tool called Ruff. It's way faster than the regular way of installing stuff, so things will go quicker.

• A Secret Key from Google AI (Your Agent's Brain Power Pass): Notte's helper agents need a brain to figure out what to do on websites. They use smart programs from Google called Gemini. To let them use these brains, you need a special key from Google AI Studio. This key tells Google it's okay for your agent to use their smarts (and keeps track of how much you're using).

Let's Get Started! (The Fun Part)

Okay, time to actually set up Notte on your computer. Don't worry, we'll take it slow.

Step 1: Install uv (The Turbo-Charged App Store)

If you don't have uv yet, open that black screen thingy on your computer (it's called the terminal or command prompt). Then, copy and paste the right code for your computer:

For Macs and Linux (Copy and paste this whole thing):

Bash

curl -LsSf https://astral.sh/uv/install.sh | sh

Just hit Enter after you paste it. Follow any instructions that pop up on the screen. This will install uv so your computer can use it.

For Windows (Copy and paste this whole thing into PowerShell):

Powershell

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

Just hit Enter after you paste it. Follow any instructions that pop up on the screen. This will install uv so your computer can use it.

Step 2: Grab the Notte Code (Think of it Like Downloading the Notte App)

Open that black screen thingy again and go to the folder where you like to keep your computer projects. Then, copy and paste this to download the Notte code:

Bash

# Download the Notte code
git clone https://github.com/nottelabs/notte.git
# Go into the Notte folder
cd notte

Hit Enter after each line. This will download all the Notte files to your computer.

Step 3: Install All the Necessary Bits and Pieces with uv (Installing All the App Features)

Now, we need to install all the other computer programs that Notte needs to work. Luckily, uv makes this easy. Just copy and paste this into your black screen thingy and hit Enter:

Bash

# Install everything Notte needs (and some extra helpful stuff too!)
uv sync --dev --all-extras

This tells uv to look at Notte's instructions and download and install everything it needs. Because uv is super-fast, this shouldn't take too long!

Step 4: Install the Special Browser Stuff (The Part That Helps Notte "See" Websites Properly)

Notte needs special tools to actually look at and interact with websites. It uses a modified version of a tool called Playwright, which they call patchright. This patchright is designed to be a bit sneaky so websites don't realize it's a computer program and block it. To install the right browser stuff (mostly for Google Chrome), copy and paste this and hit Enter:

Bash

# Install the special browser tools
uv run patchright install --with-deps chromium

This will download the special version of Chrome that patchright uses to do its website magic.

Step 5: Tell Notte Your Secret Key (Giving Your Agent Its Brain Power Pass)

Remember that secret key you got from Google AI? Now we need to tell Notte about it.

1. First, we need to make a special file to store this key. Copy and paste this into your black screen thingy and hit Enter:

Bash

# Make a copy of the example file
cp .env.example .env

1. Now, you need to open this .env file with a simple text editor (like Notepad on Windows or TextEdit on Mac).

2. Look for a line that says GEMINI_API_KEY=.

3. Right after the =, paste your secret key. It should look something like this:

.env

# Inside your .env file
GEMINI_API_KEY=YOUR_VERY_SECRET_KEY_HERE

1. Save the file and close the text editor. Notte will automatically find this key when it needs to use the Gemini brains.

Let's Make Your Agent Do Something! (The "Look, Ma, No Hands!" Part)

Alright, the hard part is over! Now let's make a Notte agent actually do something. The Notte code comes with some examples. We're going to try one called human_in_the_loop.py. This one might ask you for a little help or confirmation while it's doing its thing.

To run an example, you usually type something like this in your black screen thingy: uv run examples/<name_of_the_example_file> --some_instructions "something".

Let's try making our agent look for cheap flights on Google Flights:

Bash

# Make sure your secret key is in that .env file!
# Tell the agent what we want it to do
export task="open google flights and find the cheapest round-trip flight from NYC to SF departing next month"
# Run the example and tell it what to do and which brain to use
uv run examples/human_in_the_loop.py \
    --task "$task" \
    --reasoning_model "gemini/gemini-pro" \
    --session.disable_web_security True

Let's break down that last long line:

• uv run examples/human_in_the_loop.py: This tells your computer to run the human_in_the_loop.py program using uv.

• --task "$task": This tells the agent what we want it to do ("open google flights...").

• --reasoning_model "gemini/gemini-pro": This tells Notte which Gemini brain to use. Make sure this matches the type of key you got from Google!

• --session.disable_web_security True: This flag adjusts the browser's security settings for the session.

When you hit Enter, you should see some stuff happening in your black screen thingy. You might even see a web browser pop up (or not, depending on how the example is set up) and watch the agent try to follow your instructions!