added langchain and crew ai stagehand integrations (#5)

Author: Kylejeong2

examples/integrations/crewai/README.md

@@ -15,4 +15,26 @@ AI Agents rely on tools to gather rich contexts and perform actions to achieve s
 Browserbase provides a `BrowserbaseLoadTool` that Agents can use to retrieve context from complex webpages, enabling them to:
 
 - Extract text from webpages using JavaScript or anti-bot mechanisms
-- Capture Images from webpages
+- Capture Images from webpages
+
+## Stagehand Integration
+
+Automate browser tasks using natural language instructions with CrewAI
+
+This tool integrates the Stagehand Python SDK with CrewAI, allowing agents to interact with websites and automate browser tasks using natural language instructions.
+
+### Description
+
+The StagehandTool wraps the Stagehand Python SDK to provide CrewAI agents with the ability to control a real web browser and interact with websites using three core primitives:
+
+- **Act**: Perform actions like clicking, typing, or navigating
+- **Extract**: Extract structured data from web pages  
+- **Observe**: Identify and analyze elements on the page
+
+### Requirements
+
+Before using this tool, you will need:
+
+- A Browserbase account with API key and project ID
+- An API key for an LLM (OpenAI or Anthropic Claude)
+- The Stagehand Python SDK installed

examples/integrations/crewai/stagehand/README.md

@@ -0,0 +1,21 @@
+# CrewAI Integration
+
+Automate browser tasks using natural language instructions with CrewAI
+
+This tool integrates the Stagehand Python SDK with CrewAI, allowing agents to interact with websites and automate browser tasks using natural language instructions.
+
+## Description
+
+The StagehandTool wraps the Stagehand Python SDK to provide CrewAI agents with the ability to control a real web browser and interact with websites using three core primitives:
+
+- **Act**: Perform actions like clicking, typing, or navigating
+- **Extract**: Extract structured data from web pages  
+- **Observe**: Identify and analyze elements on the page
+
+## Requirements
+
+Before using this tool, you will need:
+
+- A Browserbase account with API key and project ID
+- An API key for an LLM (OpenAI or Anthropic Claude)
+- The Stagehand Python SDK installed

examples/integrations/crewai/stagehand/main.py

@@ -0,0 +1,55 @@
+from crewai import Agent, Task, Crew
+from crewai_tools import StagehandTool
+from stagehand.schemas import AvailableModel
+import os
+
+# Get API keys from environment
+browserbase_api_key = os.environ.get("BROWSERBASE_API_KEY")
+browserbase_project_id = os.environ.get("BROWSERBASE_PROJECT_ID")
+model_api_key = os.environ.get("OPENAI_API_KEY")  # or ANTHROPIC_API_KEY
+
+# Initialize the tool
+stagehand_tool = StagehandTool(
+    api_key=browserbase_api_key,
+    project_id=browserbase_project_id,
+    model_api_key=model_api_key,
+    model_name=AvailableModel.GPT_4O,
+)
+
+# Create an agent
+researcher = Agent(
+    role="Web Researcher",
+    goal="Gather product information from an e-commerce website",
+    backstory="I specialize in extracting and analyzing web data.",
+    verbose=True,
+    tools=[stagehand_tool],
+)
+
+# Form submission task
+form_submission_task = Task(
+    description="""
+    Submit a contact form on example.com:
+    1. Go to example.com/contact
+    2. Fill out the contact form with:
+       - Name: John Doe
+       - Email: [email protected]
+       - Subject: Information Request
+       - Message: I would like to learn more about your services
+    3. Submit the form
+    4. Confirm the submission was successful
+    """,
+    agent=researcher,
+)
+
+# Run the crew
+crew = Crew(
+    agents=[researcher],
+    tasks=[form_submission_task],
+    verbose=True,
+)
+
+result = crew.kickoff()
+print(result)
+
+# Clean up resources
+stagehand_tool.close()

examples/integrations/langchain/README.md

@@ -1,25 +1,13 @@
-# Langchain Integration
+# Langchain Integration Examples
 
-Add Browserbase to your Langchain application (Python).
+This directory contains examples of integrating Langchain with our web automation tools:
 
-## Introduction
+1. **Browserbase Integration**: A lightweight solution for web scraping and data extraction using our managed browser infrastructure.
 
-Langchain is a Python framework to build applications on top of large-language models (OpenAI, Llama, Gemini).
+2. **Stagehand Integration**: Full web automation capabilities using our open-source AI-powered browser automation SDK.
 
-Building on top of LLMs comes with many challenges:
+Choose the example that best fits your needs:
+- Use Browserbase for simple web scraping and data collection
+- Use Stagehand for complex automation workflows with AI-driven interactions
 
-- Gathering and preparing the data (context) and providing memory to models
-- Orchestrating tasks to match LLM API requirements (ex, rate limiting, chunking) 
-- Parse the different LLM result format
-
-Langchain comes with a set of high-level concepts and tools to cope with those challenges:
-
-- Retrieval modules such as Document Loaders or Text splitter help with gathering and preparing the data provided to the models
-- Model I/O is a set of tools that help to normalize the APIs across multiple models (ex: Prompt Templates)
-- Agents and Tools help to build reasoning (ex: how to answer based on provided context, what actions to take)
-- Chains help in orchestrating all the above
-
-Browserbase provides a Document Loader to enable your Langchain application to browse the web to:
-
-- Extract text or raw HTML, including from web pages using JavaScript or dynamically rendered text
-- Load images via screenshots
+See the respective directories for detailed implementation guides.

examples/integrations/langchain/.gitignore renamed to examples/integrations/langchain/browserbase/.gitignore

@@ -0,0 +1,25 @@
+# Langchain Integration
+
+Add Browserbase to your Langchain application (Python).
+
+## Introduction
+
+Langchain is a Python framework to build applications on top of large-language models (OpenAI, Llama, Gemini).
+
+Building on top of LLMs comes with many challenges:
+
+- Gathering and preparing the data (context) and providing memory to models
+- Orchestrating tasks to match LLM API requirements (ex, rate limiting, chunking) 
+- Parse the different LLM result format
+
+Langchain comes with a set of high-level concepts and tools to cope with those challenges:
+
+- Retrieval modules such as Document Loaders or Text splitter help with gathering and preparing the data provided to the models
+- Model I/O is a set of tools that help to normalize the APIs across multiple models (ex: Prompt Templates)
+- Agents and Tools help to build reasoning (ex: how to answer based on provided context, what actions to take)
+- Chains help in orchestrating all the above
+
+Browserbase provides a Document Loader to enable your Langchain application to browse the web to:
+
+- Extract text or raw HTML, including from web pages using JavaScript or dynamically rendered text
+- Load images via screenshots

examples/integrations/langchain/browserbase/README.md

@@ -0,0 +1,34 @@
+# Langchain JS
+
+## Integrate Stagehand with Langchain JS
+
+Stagehand can be integrated into Langchain JS by wrapping Stagehand's browser automation functionality with the StagehandToolkit.
+
+This toolkit provides specialized tools such as navigate, act, extract, and observe, all powered by Stagehand's underlying capabilities.
+
+For more details on this integration and how to work with Langchain, see the official Langchain documentation.
+
+## Use the tools
+
+- **stagehand_navigate**: Navigate to a specific URL.
+- **stagehand_act**: Perform browser automation tasks like clicking buttons and typing in fields.
+- **stagehand_extract**: Extract structured data from pages using Zod schemas.
+- **stagehand_observe**: Investigate the DOM for possible actions or relevant elements.
+
+## Remote Browsers (Browserbase)
+
+Instead of `env: "LOCAL"`, specify `env: "BROWSERBASE"` and pass in your Browserbase credentials through environment variables:
+- `BROWSERBASE_API_KEY`
+- `BROWSERBASE_PROJECT_ID`
+
+## Using LangGraph Agents
+
+The StagehandToolkit can also be plugged into LangGraph's existing agent system. This lets you orchestrate more complex flows by combining Stagehand's tools with other Langchain tools.
+
+With the StagehandToolkit, you can quickly integrate natural-language-driven browser automation into workflows supported by Langchain. This enables use cases such as:
+
+- Searching, extracting, and summarizing data from websites
+- Automating login flows
+- Navigating or clicking through forms based on instructions from a larger chain of agents
+
+Consult Stagehand's and Langchain's official references for troubleshooting and advanced integrations or reach out to us on [Slack](https://stagehand.dev/slack).