LangGraph.js ReAct Agent Template

This template showcases a ReAct agent implemented using LangGraph.js, designed for LangGraph Studio. ReAct agents are uncomplicated, prototypical agents that can be flexibly extended to many tools.

The core logic, defined in src/react_agent/graph.ts, demonstrates a flexible ReAct agent that iteratively reasons about user queries and executes actions, showcasing the power of this approach for complex problem-solving tasks.

What it does

The ReAct agent:

1. Takes a user query as input
2. Reasons about the query and decides on an action
3. Executes the chosen action using available tools
4. Observes the result of the action
5. Repeats steps 2-4 until it can provide a final answer

By default, it's set up with a basic set of tools, but can be easily extended with custom tools to suit various use cases.

Getting Started

Assuming you have already installed LangGraph Studio, to set up:

1. Create a .env file.

cp .env.example .env

2. Define required API keys in your .env file.

The primary search tool ¹ used is Tavily. Create an API key here.

<

Setup Model

The defaults values for model are shown below:

model: anthropic/claude-3-5-sonnet-20240620

Follow the instructions below to get set up, or pick one of the additional options.

Anthropic

To use Anthropic's chat models:

1. Sign up for an Anthropic API key if you haven't already.
2. Once you have your API key, add it to your .env file:

ANTHROPIC_API_KEY=your-api-key

OpenAI

To use OpenAI's chat models:

1. Sign up for an OpenAI API key.
2. Once you have your API key, add it to your .env file:

OPENAI_API_KEY=your-api-key

3. Customize whatever you'd like in the code.
4. Open the folder in LangGraph Studio!

How to customize

1. Add new tools: Extend the agent's capabilities by adding new tools in src/react_agent/tools.ts. These can be any TypeScript functions that perform specific tasks.
2. Select a different model: We default to Anthropic's Claude 3.5 Sonnet. You can select a compatible chat model using provider/model-name via configuration, then installing the proper chat model integration package. Example: openai/gpt-4-turbo-preview, then run npm i @langchain/openai.
3. Customize the prompt: We provide a default system prompt in src/react_agent/prompts.ts. You can easily update this via configuration in the studio.

You can also quickly extend this template by:

• Modifying the agent's reasoning process in src/react_agent/graph.ts.
• Adjusting the ReAct loop or adding additional steps to the agent's decision-making process.

Development

While iterating on your graph, you can edit past state and rerun your app from past states to debug specific nodes. Local changes will be automatically applied via hot reload. Try adding an interrupt before the agent calls tools, updating the default system message in src/react_agent/configuration.ts to take on a persona, or adding additional nodes and edges!

Follow up requests will be appended to the same thread. You can create an entirely new thread, clearing previous history, using the + button in the top right.

You can find the latest (under construction) docs on LangGraph here, including examples and other references. Using those guides can help you pick the right patterns to adapt here for your use case.

LangGraph Studio also integrates with LangSmith for more in-depth tracing and collaboration with teammates.

Footnotes

1. https://js.langchain.com/docs/concepts#tools ↩