diff --git a/docs/docs/cloud/how-tos/studio/faqs.md b/docs/docs/cloud/how-tos/studio/faqs.md deleted file mode 100644 index 57c0a82bf..000000000 --- a/docs/docs/cloud/how-tos/studio/faqs.md +++ /dev/null @@ -1,48 +0,0 @@ -# LangGraph Studio FAQs - -## Why is my project failing to start? - -A project may fail to start if the configuration file is defined incorrectly, or if required environment variables are missing. See [here](../../reference/cli.md#configuration-file) for how your configuration file should be defined. - - -## 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 - -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: - -=== "Python" - - ```python - graph.add_conditional_edges("node_a", routing_function, {True: "node_b", False: "node_c"}) - ``` - -=== "Javascript" - - ```ts - graph.addConditionalEdges("node_a", routingFunction, { true: "node_b", false: "node_c" }); - ``` - -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) - -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: - -```python -def routing_function(state: GraphState) -> Literal["node_b","node_c"]: - if state['some_condition'] == True: - return "node_b" - else: - return "node_c" -``` - - -## 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. - -## Can I use Studio without using LangSmith? -By default, LangGraph Studio is accessed from the LangSmith UI, within the LangGraph Platform Deployments tab. For local development, if you do not wish to have data traced to Langsmith, simply set `LANGSMITH_TRACING=false` in your application's `.env` file. With tracing disabled, no data will leave your local server. \ No newline at end of file diff --git a/docs/docs/cloud/how-tos/studio/quick_start.md b/docs/docs/cloud/how-tos/studio/quick_start.md index a1c75316c..c3b903821 100644 --- a/docs/docs/cloud/how-tos/studio/quick_start.md +++ b/docs/docs/cloud/how-tos/studio/quick_start.md @@ -7,9 +7,11 @@ LangGraph Studio supports connecting to two types of graphs: - Graphs deployed on [LangGraph Platform](../../../cloud/quick_start.md) - Graphs running locally via the [LangGraph Server](../../../tutorials/langgraph-platform/local-server.md). +LangGraph Studio is accessed from the LangSmith UI, within the LangGraph Platform Deployments tab. + ## Deployed application -For applications that are deployed on LangGraph Platform, you can access 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. +For applications that are [deployed](../../quick_start.md) on LangGraph Platform, you can access 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. This will load the Studio UI connected to your live deployment, allowing you to create, read, and update the [threads](../../concepts/threads.md), [assistants](../../../concepts/assistants.md), and [memory](../../../concepts//memory.md) in that deployment. @@ -17,6 +19,9 @@ This will load the Studio UI connected to your live deployment, allowing you to To test your locally running application using LangGraph Studio, ensure your application is set up following [this guide](https://langchain-ai.github.io/langgraph/cloud/deployment/setup/). +!!! info "LangSmith Tracing" +For local development, if you do not wish to have data traced to LangSmith, set `LANGSMITH_TRACING=false` in your application's `.env` file. With tracing disabled, no data will leave your local server. + Next, install the [LangGraph CLI](../../../concepts/langgraph_cli.md): ``` @@ -30,7 +35,7 @@ langgraph dev ``` !!! warning "Browser Compatibility" - Safari blocks `localhost` connections to Studio. To work around this, run the above command with `--tunnel` to access Studio via a secure tunnel. +Safari blocks `localhost` connections to Studio. To work around this, run the above command with `--tunnel` to access Studio via a secure tunnel. This will start the LangGraph Server locally, running in-memory. The server will run in watch mode, listening for and automatically restarting on code changes. Read this [reference](https://langchain-ai.github.io/langgraph/cloud/reference/cli/#dev) to learn about all the options for starting the API server. @@ -44,15 +49,14 @@ If successful, you will see the following logs: > > - LangGraph Studio Web UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024 -Once running, you will automatically be directed to LangGraph Studio. - +Once running, you will automatically be directed to LangGraph Studio. For an already running server, access Studio by either: - 1. Directly navigate to the following URL: `https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024`. - 2. Within LangSmith, navigate to the LangGraph Platform Deployments tab, click the "LangGraph Studio" button, enter `http://127.0.0.1:2024` and click "Connect". - - If running your server at a different host or port, simply update the `baseUrl` to match. +1. Directly navigate to the following URL: `https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024`. +2. Within LangSmith, navigate to the LangGraph Platform Deployments tab, click the "LangGraph Studio" button, enter `http://127.0.0.1:2024` and click "Connect". + +If running your server at a different host or port, simply update the `baseUrl` to match. ### (Optional) Attach a debugger @@ -69,8 +73,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", @@ -80,16 +84,14 @@ 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 +=== "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 +## Troubleshooting + +For issues getting started, please see this [troubleshooting guide](../../../troubleshooting/studio.md). ## Next steps diff --git a/docs/docs/concepts/langgraph_studio.md b/docs/docs/concepts/langgraph_studio.md index 521005e29..988219fb9 100644 --- a/docs/docs/concepts/langgraph_studio.md +++ b/docs/docs/concepts/langgraph_studio.md @@ -41,5 +41,4 @@ Chat mode is a simpler UI for iterating on and testing chat-specific agents. It ## Learn more -- See this guide on how to [get started](../cloud/how-tos/studio/quick_start.md) with LangGraph Studio. -- See [here](../cloud//how-tos/studio/faqs.md) for frequently asked questions. +- See this guide on how to [get started](../cloud/how-tos/studio/quick_start.md) with LangGraph Studio. \ No newline at end of file diff --git a/docs/docs/troubleshooting/studio.md b/docs/docs/troubleshooting/studio.md index 278d94cef..b06f325de 100644 --- a/docs/docs/troubleshooting/studio.md +++ b/docs/docs/troubleshooting/studio.md @@ -1,10 +1,10 @@ -# Troubleshooting LangGraph Studio +# LangGraph Studio Troubleshooting -## :fontawesome-brands-safari:{ .safari } Safari connection error with local dev server +## :fontawesome-brands-safari:{ .safari } Safari Connection Issues -Safari blocks plain‑HTTP traffic on localhost. If you start Studio with a vanilla `langgraph dev`, the page may report a "Failed to load assistants" error and the browser DevTools will show network errors. +Safari blocks plain-HTTP traffic on localhost. When running Studio with `langgraph dev`, you may see "Failed to load assistants" errors. -#### Quick fix — run Studio through a secure Cloudflare tunnel +### Solution 1: Use Cloudflare Tunnel === "Python" @@ -20,42 +20,29 @@ Safari blocks plain‑HTTP traffic on localhost. If you start Studio with a van npx @langchain/langgraph-cli dev ``` -The command prints a URL like: +The command outputs a URL in this format: ```shell https://smith.langchain.com/studio/?baseUrl=https://hamilton-praise-heart-costumes.trycloudflare.com ``` -where +Use this URL in Safari to load Studio. Here, the `baseUrl` parameter specifies your agent server endpoint. -```shell -?baseUrl=https://hamilton-praise-heart-costumes.trycloudflare.com -``` +### Solution 2: Use Chromium Browser -indicates the endpoint where your agent server is exposed. Open that URL in Safari and Studio should load immediately. +Chrome and other Chromium browsers allow HTTP on localhost. Use `langgraph dev` without additional configuration. -#### Alternative — use a Chromium‑based browser +## :fontawesome-brands-brave:{ .brave } Brave Connection Issues -Chrome and other Chromium‑based browsers allow HTTP on localhost, so a plain `langgraph dev` should work without extra steps. +Brave blocks plain-HTTP traffic on localhost when Brave Shields are enabled. When running Studio with `langgraph dev`, you may see "Failed to load assistants" errors. -#### If it’s still not loading +### Solution 1: Disable Brave Shields -1. Make sure the `baseUrl` query parameter in the studio URL points to the **tunnel URL** NOT to localhost. -2. Confirm your CLI version with `langgraph --version`. - -No other configuration, certificates, or CORS tweaks are required. - -## :fontawesome-brands-brave:{ .brave } Brave connection error with local dev server - -By default, Brave blocks plain‑HTTP traffic on localhost if Brave Shields are enabled. If you start Studio with a vanilla `langgraph dev`, the page may report a "Failed to load assistants" error and the browser DevTools will show network errors. - -#### Quick fix — disable Brave Shields for LangSmith - -Click the Brave icon next to the URL bar and turn off the Brave Shields in the popover. +Disable Brave Shields for LangSmith using the Brave icon in the URL bar. ![Brave Shields](./img/brave-shields.png) -#### Alternative — run Studio through a secure Cloudflare tunnel +### Solution 2: Use Cloudflare Tunnel === "Python" @@ -71,16 +58,43 @@ Click the Brave icon next to the URL bar and turn off the Brave Shields in the p npx @langchain/langgraph-cli dev ``` -The command prints a URL like: +The command outputs a URL in this format: ```shell https://smith.langchain.com/studio/?baseUrl=https://hamilton-praise-heart-costumes.trycloudflare.com ``` -where +Use this URL in Brave to load Studio. Here, the `baseUrl` parameter specifies your agent server endpoint. -```shell -?baseUrl=https://hamilton-praise-heart-costumes.trycloudflare.com +## Graph Edge Issues + +Undefined conditional edges may show unexpected connections in your graph. This is +because without proper definition, LangGraph Studio assumes the conditional edge could access all other nodes. To address this, explicitly define the routing paths using one of these methods: + +### Solution 1: Path Map + +Define a mapping between router outputs and target nodes: + +=== "Python" + + ```python + graph.add_conditional_edges("node_a", routing_function, {True: "node_b", False: "node_c"}) + ``` + +=== "Javascript" + + ```ts + graph.addConditionalEdges("node_a", routingFunction, { true: "node_b", false: "node_c" }); + ``` + +### Solution 2: Router Type Definition (Python) + +Specify possible routing destinations using Python's `Literal` type: + +```python +def routing_function(state: GraphState) -> Literal["node_b","node_c"]: + if state['some_condition'] == True: + return "node_b" + else: + return "node_c" ``` - -indicates the endpoint where your agent server is exposed. Open that URL in Brave and Studio should load immediately. diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 56b416c80..2709c96c9 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -183,7 +183,6 @@ nav: - cloud/how-tos/iterate_graph_studio.md - cloud/how-tos/clone_traces_studio.md - cloud/how-tos/datasets_studio.md - - cloud/how-tos/studio/faqs.md - LangGraph SDK: concepts/sdk.md - Data management: - Add semantic search: cloud/deployment/semantic_search.md