WEBDIENSTE/langgraph
1
0
Fork 0
mirror of https://github.com/langchain-ai/langgraph.git synced 2026-08-24 08:32:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

update getting started docs

Browse Source
This commit is contained in:
Arjun Natarajan
2025-02-20 18:00:26 -08:00
parent 39b2bb9c8f
commit 32df0016ee
1 changed files with 19 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/docs/concepts/langgraph_studio.md
+19 -57
View File
@@ -7,7 +7,7 @@
LangGraph Studio offers a new way to develop LLM applications by providing a specialized agent IDE that enables visualization, interaction, and debugging of complex agentic applications.
With visual graphs and the ability to edit state, you can better understand agent workflows and iterate faster. LangGraph Studio integrates with LangSmith allowing you to collaborate with teammates to debug failure modes.
With visual graphs and the ability to edit state, you can better understand agent workflows and iterate faster. LangGraph Studio integrates with LangSmith allowing you to collaborate with teammates to debug failure modes.
![](img/lg_studio.png)
@@ -23,81 +23,44 @@ The key features of LangGraph Studio are:
- View and manage [long term memory](memory.md)
- Add node input/outputs to [LangSmith](https://smith.langchain.com/) datasets for testing
## Types
## Getting started
### Development server with web UI
There are two ways to connect your LangGraph app with the studio:
You can [run a local in-memory development server](../tutorials/langgraph-platform/local-server.md) that can be used to connect a local LangGraph app with a web version of the studio.
For example, if you start the local server with `langgraph dev` (running at `http://127.0.0.1:2024` by default), you can connect to the studio by navigating to:
### Deployed Application
If you have deployed your LangGraph application on LangGraph Platform (Cloud), you can access the studio as part of that deployment. To do so, navigate to the deployment in LangGraph Platform and click the "LangGraph Studio" button.
### Local Development Server
If you have a LangGraph application that is [running locally in-memory](../tutorials/langgraph-platform/local-server.md), you can connect it to LangGraph Studio in the browser within LangSmith.
By default, starting the local server with `langgraph dev` will run the server at `http://127.0.0.1:2024` and automatically open Studio in your browser. However, you can also manually connect to Studio by either:
1. In LangGraph Platform, clicking the "LangGraph Studio" button and entering the server URL in the dialog that appears.
or
2. Navigating to the URL in your browser:
```
https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024
```
See [instructions here](../cloud/reference/cli.md#dev) for more information.
The web UI version of the studio will connect to your locally running server — your agent is still running locally and never leaves your device.
### Cloud studio
If you have deployed your LangGraph application on LangGraph Platform (Cloud), you can access the studio as part of that
### Desktop app
LangGraph Studio is available as a [desktop app](https://studio.langchain.com/) for MacOS users.
While in Beta, LangGraph Studio is available for free to all [LangSmith](https://smith.langchain.com/) users on any plan tier.
## Studio FAQs
### Why is my project failing to start?
There are a few reasons that your project might fail to start, here are some of the most common ones.
#### Docker issues (desktop only)
LangGraph Studio (desktop) requires Docker Desktop version 4.24 or higher. Please make sure you have a version of Docker installed that satisfies that requirement and also make sure you have the Docker Desktop app up and running before trying to use LangGraph Studio. In addition, make sure you have docker-compose updated to version 2.22.0 or higher.
#### Configuration or environment issues
Another reason your project might fail to start is because your configuration file is defined incorrectly, or you are missing required environment variables.
!!! Important "Note (desktop only)"
LangGraph Studio Desktop automatically populates `LANGCHAIN_*` environment variables for license verification and tracing, regardless of the contents of the `.env` file. All other environment variables defined in `.env` will be read as normal.
#### Incorrect data region (desktop only)
If you receive a license verification error when attempting to start the LangGraph Server, you may be logged into the incorrect LangSmith data region. Ensure that you're logged into the correct LangSmith data region and ensure that the LangSmith account has access to LangGraph platform.
1. In the top right-hand corner, click the user icon and select `Logout`.
1. At the login screen, click the `Data Region` dropdown menu and select the appropriate data region. Then click `Login to LangSmith`.
### How does interrupt work?
When you select the `Interrupts` dropdown and select a node to interrupt the graph will pause execution before and after (unless the node goes straight to `END`) that node has run. This means that you will be able to both edit the state before the node is ran and the state after the node has ran. This is intended to allow developers more fine-grained control over the behavior of a node and make it easier to observe how the node is behaving. You will not be able to edit the state after the node has ran if the node is the final node in the graph.
### How do I reload the app? (desktop only)
If you would like to reload the app, don't use Command+R as you might normally do. Instead, close and reopen the app for a full refresh.
### How does automatic rebuilding work? (desktop only)
One of the key features of LangGraph Studio is that it automatically rebuilds your image when you change the source code. This allows for a super fast development and testing cycle which makes it easy to iterate on your graph. There are two different ways that LangGraph rebuilds your image: either by editing the image or completely rebuilding it.
#### Rebuilds from source code changes
If you modified the source code only (no configuration or dependency changes!) then the image does not require a full rebuild, and LangGraph Studio will only update the relevant parts. The UI status in the bottom left will switch from `Online` to `Stopping` temporarily while the image gets edited. The logs will be shown as this process is happening, and after the image has been edited the status will change back to `Online` and you will be able to run your graph with the modified code!
#### Rebuilds from configuration or dependency changes
If you edit your graph configuration file (`langgraph.json`) or the dependencies (either `pyproject.toml` or `requirements.txt`) then the entire image will be rebuilt. This will cause the UI to switch away from the graph view and start showing the logs of the new image building process. This can take a minute or two, and once it is done your updated image will be ready to use!
### Why is my graph taking so long to startup? (desktop only)
The LangGraph Studio interacts with a local LangGraph API server. To stay aligned with ongoing updates, the LangGraph API requires regular rebuilding. As a result, you may occasionally experience slight delays when starting up your project.
## Why are extra edges showing up in my graph?
If you don't define your conditional edges carefully, you might notice extra edges appearing in your graph. This is because without proper definition, LangGraph Studio assumes the conditional edge could access all other nodes. In order for this to not be the case, you need to be explicit about how you define the nodes the conditional edge routes to. There are two ways you can do this:
@@ -132,9 +95,8 @@ def routing_function(state: GraphState) -> Literal["node_b","node_c"]:
return "node_c"
```
## Related
For more information please see the following:
* [LangGraph Studio how-to guides](../how-tos/index.md#langgraph-studio)
- [LangGraph Studio how-to guides](../how-tos/index.md#langgraph-studio)