From 32df0016eea1d342a6ec6efe775611e65c366b9e Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Thu, 20 Feb 2025 18:00:26 -0800 Subject: [PATCH 1/8] update getting started docs --- docs/docs/concepts/langgraph_studio.md | 76 +++++++------------------- 1 file changed, 19 insertions(+), 57 deletions(-) diff --git a/docs/docs/concepts/langgraph_studio.md b/docs/docs/concepts/langgraph_studio.md index bf0d31fb0..3d8889d20 100644 --- a/docs/docs/concepts/langgraph_studio.md +++ b/docs/docs/concepts/langgraph_studio.md @@ -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) \ No newline at end of file +- [LangGraph Studio how-to guides](../how-tos/index.md#langgraph-studio) From 6615c6bb0d55c56d6c9098b21e6112365e0cb4ed Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Thu, 20 Feb 2025 18:16:49 -0800 Subject: [PATCH 2/8] remove other references to desktop : --- docs/docs/cloud/how-tos/test_deployment.md | 6 ++-- docs/docs/cloud/reference/cli.md | 2 +- docs/docs/concepts/faq.md | 2 +- docs/docs/concepts/langgraph_cli.md | 2 +- docs/docs/how-tos/index.md | 7 ++--- docs/docs/how-tos/local-studio.md | 33 ++++++---------------- 6 files changed, 17 insertions(+), 35 deletions(-) diff --git a/docs/docs/cloud/how-tos/test_deployment.md b/docs/docs/cloud/how-tos/test_deployment.md index 127e1e25e..b35bf5e13 100644 --- a/docs/docs/cloud/how-tos/test_deployment.md +++ b/docs/docs/cloud/how-tos/test_deployment.md @@ -1,10 +1,10 @@ -# Test Cloud Deployment +# Test LangGraph Platform Deployment -The LangGraph Studio UI connects directly to LangGraph Cloud deployments. +The LangGraph Studio UI connects directly to LangGraph Platform deployments. Starting from the LangSmith UI... -1. In the left-hand navigation panel, select `LangGraph Cloud`. The `LangGraph Cloud` view contains a list of existing LangGraph Cloud deployments. +1. In the left-hand navigation panel, select `LangGraph Platform`. The `LangGraph Platform` view contains a list of existing LangGraph Platform deployments. 1. Select an existing deployment to test with LangGraph Studio. 1. In the top-right corner, select `Open LangGraph Studio`. 1. [Invoke an assistant](./invoke_studio.md) or [view an existing thread](./threads_studio.md). diff --git a/docs/docs/cloud/reference/cli.md b/docs/docs/cloud/reference/cli.md index 01286a5e3..ae2324da8 100644 --- a/docs/docs/cloud/reference/cli.md +++ b/docs/docs/cloud/reference/cli.md @@ -1,6 +1,6 @@ # LangGraph CLI -The LangGraph command line interface includes commands to build and run a LangGraph Cloud API server locally in [Docker](https://www.docker.com/). For development and testing, you can use the CLI to deploy a local API server as an alternative to the [Studio desktop app](../../concepts/langgraph_studio.md). +The LangGraph command line interface includes commands to build and run a LangGraph Cloud API server locally in [Docker](https://www.docker.com/). For development and testing, you can use the CLI to deploy a local API server. ## Installation diff --git a/docs/docs/concepts/faq.md b/docs/docs/concepts/faq.md index a626e8133..582db8c7c 100644 --- a/docs/docs/concepts/faq.md +++ b/docs/docs/concepts/faq.md @@ -36,7 +36,7 @@ LangGraph is a stateful, orchestration framework that brings added control to ag | Concurrency Control | Simple threading | Supports double-texting | | Scheduling | None | Cron scheduling | | Monitoring | None | Integrated with LangSmith for observability | -| IDE integration | LangGraph Studio for Desktop | LangGraph Studio for Desktop & Cloud | +| IDE integration | LangGraph Studio | LangGraph Studio | ## What are my deployment options for LangGraph Platform? diff --git a/docs/docs/concepts/langgraph_cli.md b/docs/docs/concepts/langgraph_cli.md index 9eec86ffb..2c69c0193 100644 --- a/docs/docs/concepts/langgraph_cli.md +++ b/docs/docs/concepts/langgraph_cli.md @@ -4,7 +4,7 @@ - [LangGraph Platform](./langgraph_platform.md) - [LangGraph Server](./langgraph_server.md) -The LangGraph CLI is a multi-platform command-line tool for building and running the [LangGraph API server](./langgraph_server.md) locally. This offers an alternative to the [LangGraph Studio desktop app](./langgraph_studio.md) for developing and testing agents across all major operating systems (Linux, Windows, MacOS). The resulting server includes all API endpoints for your graph's runs, threads, assistants, etc. as well as the other services required to run your agent, including a managed database for checkpointing and storage. +The LangGraph CLI is a multi-platform command-line tool for building and running the [LangGraph API server](./langgraph_server.md) locally. The resulting server includes all API endpoints for your graph's runs, threads, assistants, etc. as well as the other services required to run your agent, including a managed database for checkpointing and storage. ## Installation diff --git a/docs/docs/how-tos/index.md b/docs/docs/how-tos/index.md index d27eb5ae8..560b801a5 100644 --- a/docs/docs/how-tos/index.md +++ b/docs/docs/how-tos/index.md @@ -59,12 +59,10 @@ LangGraph makes it easy to manage conversation [memory](../concepts/memory.md) i [Human-in-the-loop](../concepts/human_in_the_loop.md) functionality allows you to involve humans in the decision-making process of your graph. These how-to guides show how to implement human-in-the-loop workflows in your graph. - Key workflows: - [How to wait for user input](human_in_the_loop/wait-user-input.ipynb): A basic example that shows how to implement a human-in-the-loop workflow in your graph using the `interrupt` function. - [How to review tool calls](human_in_the_loop/review-tool-calls.ipynb): Incorporate human-in-the-loop for reviewing/editing/accepting tool call requests before they executed using the `interrupt` function. - Other methods: @@ -284,10 +282,9 @@ Graph execution can take a while, and sometimes users may change their mind abou LangGraph Studio is a built-in UI for visualizing, testing, and debugging your agents. -- [How to connect to a LangGraph Cloud deployment](../cloud/how-tos/test_deployment.md) +- [How to connect to a LangGraph Platform deployment](../cloud/how-tos/test_deployment.md) - [How to connect to a local dev server](../how-tos/local-studio.md) - [How to connect to a local deployment (Docker)](../cloud/how-tos/test_local_deployment.md) -- [How to test your graph in LangGraph Studio (MacOS only)](../cloud/how-tos/invoke_studio.md) - [How to interact with threads in LangGraph Studio](../cloud/how-tos/threads_studio.md) - [How to add nodes as dataset examples in LangGraph Studio](../cloud/how-tos/datasets_studio.md) - [How to engineer prompts in LangGraph Studio](../cloud/how-tos/iterate_graph_studio.md) @@ -306,4 +303,4 @@ These are the guides for resolving common errors you may find while building wit These guides provide troubleshooting information for errors that are specific to the LangGraph Platform. -- [INVALID_LICENSE](../troubleshooting/errors/INVALID_LICENSE.md) \ No newline at end of file +- [INVALID_LICENSE](../troubleshooting/errors/INVALID_LICENSE.md) diff --git a/docs/docs/how-tos/local-studio.md b/docs/docs/how-tos/local-studio.md index 3a892386a..747aa6d69 100644 --- a/docs/docs/how-tos/local-studio.md +++ b/docs/docs/how-tos/local-studio.md @@ -1,15 +1,6 @@ # How to connect a local agent to LangGraph Studio -This guide shows you how to connect your local agent to [LangGraph Studio](../concepts/langgraph_studio.md) for visualization, interaction, and debugging. - -## Connection Options - -There are two ways to connect your local agent to LangGraph Studio: - -- [Development Server](../concepts/langgraph_studio.md#development-server-with-web-ui): Python package, all platforms, no Docker -- [LangGraph Desktop](../concepts/langgraph_studio.md#desktop-app): Application, Mac only, requires Docker - -In this guide we will cover how to use the development server as that is generally an easier and better experience. +This guide shows you how to connect your local agent to [LangGraph Studio](../concepts/langgraph_studio.md) for visualization, interaction, and debugging using the development server. ## Setup your application @@ -24,9 +15,8 @@ You will need to make sure to install the `inmem` extras. ???+ note "Minimum version" - The minimum version to use the `inmem` extra with `langgraph-cli` is `0.1.55`. - Python 3.11 or higher is required. - +The minimum version to use the `inmem` extra with `langgraph-cli` is `0.1.55`. +Python 3.11 or higher is required. ```shell pip install -U "langgraph-cli[inmem]" @@ -41,7 +31,7 @@ pip install -U "langgraph-cli[inmem]" langgraph dev ``` -This will look for the `langgraph.json` file in your current directory. +This will look for the `langgraph.json` file in your current directory. In there, it will find the paths to the graph(s), and start those up. It will then automatically connect to the cloud-hosted studio. @@ -70,8 +60,8 @@ langgraph dev --debug-port 5678 Then attach your preferred debugger: === "VS Code" - Add this configuration to `launch.json`: - ```json +Add this configuration to `launch.json`: +`json { "name": "Attach to LangGraph", "type": "debugpy", @@ -81,12 +71,7 @@ Then attach your preferred debugger: "port": 5678 } } - ``` - Specify the port number you chose in the previous step. + ` +Specify the port number you chose in the previous step. -=== "PyCharm" - 1. Go to Run → Edit Configurations - 2. Click + and select "Python Debug Server" - 3. Set IDE host name: `localhost` - 4. Set port: `5678` (or the port number you chose in the previous step) - 5. Click "OK" and start debugging \ No newline at end of file +=== "PyCharm" 1. Go to Run → Edit Configurations 2. Click + and select "Python Debug Server" 3. Set IDE host name: `localhost` 4. Set port: `5678` (or the port number you chose in the previous step) 5. Click "OK" and start debugging From e679ab73c416660bbef4518453a3fa32d98f0f7a Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Tue, 25 Feb 2025 15:53:23 -0500 Subject: [PATCH 3/8] fix broken docs part --- docs/docs/how-tos/local-studio.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/docs/how-tos/local-studio.md b/docs/docs/how-tos/local-studio.md index 747aa6d69..2f83f4c23 100644 --- a/docs/docs/how-tos/local-studio.md +++ b/docs/docs/how-tos/local-studio.md @@ -60,8 +60,8 @@ langgraph dev --debug-port 5678 Then attach your preferred debugger: === "VS Code" -Add this configuration to `launch.json`: -`json + Add this configuration to `launch.json`: + ```json { "name": "Attach to LangGraph", "type": "debugpy", @@ -71,7 +71,12 @@ Add this configuration to `launch.json`: "port": 5678 } } - ` -Specify the port number you chose in the previous step. + ``` + Specify the port number you chose in the previous step. -=== "PyCharm" 1. Go to Run → Edit Configurations 2. Click + and select "Python Debug Server" 3. Set IDE host name: `localhost` 4. Set port: `5678` (or the port number you chose in the previous step) 5. Click "OK" and start debugging +=== "PyCharm" + 1. Go to Run → Edit Configurations + 2. Click + and select "Python Debug Server" + 3. Set IDE host name: `localhost` + 4. Set port: `5678` (or the port number you chose in the previous step) + 5. Click "OK" and start debugging From a0969b61a3ff0fdcf86f32ca09b082a5024acba9 Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Tue, 25 Feb 2025 16:08:21 -0500 Subject: [PATCH 4/8] add back desktop docs in dedicated section w deprecation warning --- docs/docs/concepts/langgraph_studio.md | 54 +++++++++++++++++++++++--- 1 file changed, 48 insertions(+), 6 deletions(-) diff --git a/docs/docs/concepts/langgraph_studio.md b/docs/docs/concepts/langgraph_studio.md index 3d8889d20..5abee8454 100644 --- a/docs/docs/concepts/langgraph_studio.md +++ b/docs/docs/concepts/langgraph_studio.md @@ -47,6 +47,12 @@ By default, starting the local server with `langgraph dev` will run the server a https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024 ``` +## Related + +For more information please see the following: + +- [LangGraph Studio how-to guides](../how-tos/index.md#langgraph-studio) + ## Studio FAQs ### Why is my project failing to start? @@ -61,11 +67,11 @@ Another reason your project might fail to start is because your configuration fi 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. -## Why are extra edges showing up in my graph? +### 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: -### Solution 1: Include a path map +#### Solution 1: Include a path map The first way to solve this is to add path maps to your conditional edges. A path map is just a dictionary or array that maps the possible outputs of your router function with the names of the nodes that each output corresponds to. The path map is passed as the third argument to the `add_conditional_edges` function like so: @@ -83,7 +89,7 @@ The first way to solve this is to add path maps to your conditional edges. A pat In this case, the routing function returns either True or False, which map to `node_b` and `node_c` respectively. -### Solution 2: Update the typing of the router (Python only) +#### Solution 2: Update the typing of the router (Python only) Instead of passing a path map, you can also be explicit about the typing of your routing function by specifying the nodes it can map to using the `Literal` python definition. Here is an example of how to define a routing function in that way: @@ -95,8 +101,44 @@ def routing_function(state: GraphState) -> Literal["node_b","node_c"]: return "node_c" ``` -## Related +### LangGraph Studio Desktop App FAQs -For more information please see the following: +!!! warning "Deprecation Warning" + In order to support more platforms, we now recommend following the above instructions to connect to LangGraph Studio using the development server instead of the desktop app. -- [LangGraph Studio how-to guides](../how-tos/index.md#langgraph-studio) +The LangGraph Studio Desktop App is a standalone application that allows you to connect to your LangGraph application and visualize and interact with your graph. It is available for MacOS only and requires Docker to be installed. + +#### Docker issues + +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. + +!!! Important "Note " + + 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 + +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 do I reload the app? + +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? + +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? + +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. \ No newline at end of file From 302aa8b9cb297b1ab399665ba573ca3b6fa92075 Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Wed, 26 Feb 2025 15:57:05 -0500 Subject: [PATCH 5/8] clean up docs --- docs/docs/concepts/langgraph_studio.md | 34 ++++++++++++++------------ 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/docs/docs/concepts/langgraph_studio.md b/docs/docs/concepts/langgraph_studio.md index 5abee8454..2b45fa88b 100644 --- a/docs/docs/concepts/langgraph_studio.md +++ b/docs/docs/concepts/langgraph_studio.md @@ -15,7 +15,7 @@ With visual graphs and the ability to edit state, you can better understand agen The key features of LangGraph Studio are: -- Visualizes your graph +- Visualize your graphs - Test your graph by running it from the UI - Debug your agent by [modifying its state and rerunning](human_in_the_loop.md) - Create and manage [assistants](assistants.md) @@ -53,20 +53,18 @@ For more information please see the following: - [LangGraph Studio how-to guides](../how-tos/index.md#langgraph-studio) -## Studio FAQs +## LangGraph 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. - -#### 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. +A project may fail to start if the configuration file is defined incorrectly, or if required environment variables are missing. See [here](../cloud/reference/cli.md#configuration-file) for how your configuration file should be defined. ### 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. +For more information on interrupts and human in the loop, see [here](../human_in_the_loop). + ### 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: @@ -101,33 +99,37 @@ def routing_function(state: GraphState) -> Literal["node_b","node_c"]: return "node_c" ``` -### LangGraph Studio Desktop App FAQs +### Studio Desktop FAQs !!! warning "Deprecation Warning" - In order to support more platforms, we now recommend following the above instructions to connect to LangGraph Studio using the development server instead of the desktop app. + In order to support a wider range of platforms and users, we now recommend following the above instructions to connect to LangGraph Studio using the development server instead of the desktop app. The LangGraph Studio Desktop App is a standalone application that allows you to connect to your LangGraph application and visualize and interact with your graph. It is available for MacOS only and requires Docker to be installed. -#### Docker issues +#### Why is my project failing to start? -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. +In addition to the reasons listed above, for the desktop app there are a few more reasons that your project might fail to start: !!! Important "Note " 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 +##### Docker issues + +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. + +##### Incorrect data region 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 do I reload the app? +### How do I reload the app? 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? +### How does automatic rebuilding work? 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. @@ -139,6 +141,6 @@ If you modified the source code only (no configuration or dependency changes!) t 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? +### Why is my graph taking so long to startup? -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. \ No newline at end of file +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. From 7cb0bd52e8f509816533fccc31f8c801327b564d Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Wed, 26 Feb 2025 21:31:33 -0500 Subject: [PATCH 6/8] add link to cli --- docs/docs/concepts/langgraph_studio.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/docs/concepts/langgraph_studio.md b/docs/docs/concepts/langgraph_studio.md index 2b45fa88b..a2a189e2c 100644 --- a/docs/docs/concepts/langgraph_studio.md +++ b/docs/docs/concepts/langgraph_studio.md @@ -52,6 +52,7 @@ https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024 For more information please see the following: - [LangGraph Studio how-to guides](../how-tos/index.md#langgraph-studio) +- [LangGraph CLI Documentation](../cloud/reference/cli.md) ## LangGraph Studio FAQs @@ -102,7 +103,7 @@ def routing_function(state: GraphState) -> Literal["node_b","node_c"]: ### Studio Desktop FAQs !!! warning "Deprecation Warning" - In order to support a wider range of platforms and users, we now recommend following the above instructions to connect to LangGraph Studio using the development server instead of the desktop app. +In order to support a wider range of platforms and users, we now recommend following the above instructions to connect to LangGraph Studio using the development server instead of the desktop app. The LangGraph Studio Desktop App is a standalone application that allows you to connect to your LangGraph application and visualize and interact with your graph. It is available for MacOS only and requires Docker to be installed. From de888b40328ffa397eb118d9e2333f6f257d5e61 Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Wed, 26 Feb 2025 21:33:45 -0500 Subject: [PATCH 7/8] make reference to langsmith a bit cleareR --- docs/docs/concepts/langgraph_studio.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/concepts/langgraph_studio.md b/docs/docs/concepts/langgraph_studio.md index a2a189e2c..c83982101 100644 --- a/docs/docs/concepts/langgraph_studio.md +++ b/docs/docs/concepts/langgraph_studio.md @@ -29,7 +29,7 @@ There are two ways to connect your LangGraph app with the studio: ### 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. +If you have deployed your LangGraph application on LangGraph Platform, you can access the studio as part of that deployment. To do so, navigate to the deployment in LangGraph Platform within the LangSmith UI and click the "LangGraph Studio" button. ### Local Development Server From f136e40065c1e1ab368b78035c04912c89cdf4c7 Mon Sep 17 00:00:00 2001 From: Arjun Natarajan Date: Wed, 26 Feb 2025 21:47:32 -0500 Subject: [PATCH 8/8] fix link --- docs/docs/concepts/langgraph_studio.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/concepts/langgraph_studio.md b/docs/docs/concepts/langgraph_studio.md index c83982101..0f2c708c9 100644 --- a/docs/docs/concepts/langgraph_studio.md +++ b/docs/docs/concepts/langgraph_studio.md @@ -64,7 +64,7 @@ A project may fail to start if the configuration file is defined incorrectly, or 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. -For more information on interrupts and human in the loop, see [here](../human_in_the_loop). +For more information on interrupts and human in the loop, see [here](./human_in_the_loop.md). ### Why are extra edges showing up in my graph?