Skip to content

nottelabs/notte-langchain

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@notte-ai/langchain

LangChain JS toolkit for Notte, the browser-infrastructure platform for AI agents. This package gives any LangChain agent a managed browser via four tools: navigate, act, extract, and observe.

Why this exists

LangChain agents that need to interact with the live web typically reach for a local Playwright browser inside the agent loop. That works on a developer laptop and falls apart at scale: there is no session management, no fingerprinting story, no way to share state between agent runs, and captchas / bot-detection break the loop quickly.

Notte is a managed browser platform built specifically for AI agents. It exposes a perception layer that turns a live web page into a small, structured action space (interactive elements, with stable IDs), and a session API that handles browser lifecycle, cookies, captcha solving, and replay. This toolkit is the thin LangChain adapter on top of the Notte SDK: four tools that an agent can drive with natural language, backed by a real, hosted browser.

If you have used the Stagehand toolkit, the surface here will feel familiar by design. The tools mirror the navigate / act / extract / observe primitives that any agent needs to drive a browser, and they wrap a single Session instance that you can share across calls or let the toolkit create on demand.

Installation

npm install @notte-ai/langchain notte-sdk @langchain/core

Authentication

Sign up at notte.cc and get an API key. The toolkit reads NOTTE_API_KEY from the environment by default:

export NOTTE_API_KEY=sk-notte-...

Or pass it explicitly when constructing the client:

import { NotteClient } from "notte-sdk";

const client = new NotteClient({ apiKey: "sk-notte-..." });

Usage

import { NotteClient } from "notte-sdk";
import { NotteBrowserToolkit } from "@notte-ai/langchain/agents/toolkits/notte_browser";
import { ChatOpenAI } from "@langchain/openai";
import { createAgent } from "langchain";

async function main() {
  const client = new NotteClient();
  const session = client.Session({ headless: true });
  await session.start();

  try {
    const toolkit = await NotteBrowserToolkit.fromClient(client, session);

    const model = new ChatOpenAI({ modelName: "gpt-4o", temperature: 0 });
    const agent = createAgent({ model, tools: toolkit.getTools() });

    const stream = await agent.stream(
      {
        messages: [
          {
            role: "user",
            content:
              "Go to https://news.ycombinator.com and report the titles of the top three posts.",
          },
        ],
      },
      { streamMode: "values" },
    );

    for await (const { messages } of stream) {
      const last = messages?.[messages.length - 1];
      if (last?.content) console.log(last.content);
      else if (last?.tool_calls) console.log(last.tool_calls);
    }
  } finally {
    await session.stop();
  }
}

main();

The tools

Tool Purpose
NotteNavigateTool Navigate the session to a URL. Input: a single URL string.
NotteActTool Perform a natural-language action on the current page (e.g. "click the sign-up button", "search for 'OpenAI'"). Backed by Notte's perception model. Input: a single instruction string.
NotteExtractTool Extract structured information from the current page. Input: an instruction string and a JSON Schema describing the expected output shape.
NotteObserveTool Return the interactive elements on the current page (buttons, inputs, links). Useful for letting the LLM plan its next action.

Each tool can also be imported individually if you do not want the whole toolkit:

import {
  NotteNavigateTool,
  NotteActTool,
  NotteExtractTool,
  NotteObserveTool,
} from "@notte-ai/langchain/agents/toolkits/notte_browser";

Session management

By default, the toolkit reuses one Session across all four tools. You have three options.

1. You own the session (recommended). Start it, pass it in, stop it when you are done:

const session = client.Session({ headless: true });
await session.start();
const toolkit = await NotteBrowserToolkit.fromClient(client, session);
// ... use toolkit ...
await session.stop();

2. The toolkit creates a session on first call. Convenient for quick scripts:

const toolkit = await NotteBrowserToolkit.fromClient(client);
// the first tool call lazily creates and starts a Session under the hood

3. Per-tool sessions. Construct individual tools and pass different sessions to each. Useful if you want to drive multiple browsers in parallel from one agent.

Running the example

git clone https://github.com/nottelabs/notte-langchain.git
cd notte-langchain
npm install
export NOTTE_API_KEY=sk-notte-...
export OPENAI_API_KEY=sk-...
npx tsx examples/agent.ts

Links

Licence

MIT.

About

LangChain JS toolkit for Notte: navigate, act, extract, observe via the Notte browser-infrastructure platform

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors