It contains a simple example graph exported from src/agent.ts that implements a basic ReAct pattern where the model can use tools for more information before responding to a user query, as well as the required langgraph.json for opening the graph in LangGraph Studio.

Getting Started

This demo requires an OpenAI API key and a Tavily API key for search results.

Clone this repository.
Rename the existing .env.example file .env and fill in your OPENAI_API_KEY and TAVILY_API_KEY.
Download the latest release of LangGraph Studio from here.
Log in/sign up for LangSmith if you haven't already.
Open the enclosing folder in LangGraph Studio.
Start testing your app!

The graph has access to a web search tool powered by Tavily - you can try asking it about current events like "What is the current conservation status of the Great Barrier Reef?" and see it use the tool.

Note that the Deploy button is currently not supported, but will be soon!

You will also need the latest versions of @langchain/langgraph and @langchain/core. See these instructions for help upgrading an existing project.

For a rough video walkthrough, click here.

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/utils/state.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.js here, including examples and other references.

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

You can swap in other models if you'd like by using the appropriate LangChain.js integration package or the appropriate SDK directly.