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.
The ReAct agent:
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.
Assuming you have already installed LangGraph Studio, to set up:
.env
file.cp .env.example .env
.env
file.The primary search tool ^1 used is Tavily. Create an API key here.
<
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.
To use Anthropic's chat models:
.env
file:ANTHROPIC_API_KEY=your-api-key
To use OpenAI's chat models:
.env
file:OPENAI_API_KEY=your-api-key
src/react_agent/tools.ts
. These can be any TypeScript functions that perform specific tasks.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
.src/react_agent/prompts.ts
. You can easily update this via configuration in the studio.You can also quickly extend this template by:
src/react_agent/graph.ts
.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.