{"id":13723187,"url":"https://github.com/langchain-ai/langgraph-studio","last_synced_at":"2025-05-14T03:08:17.712Z","repository":{"id":251225729,"uuid":"835458362","full_name":"langchain-ai/langgraph-studio","owner":"langchain-ai","description":"Desktop app for prototyping and debugging LangGraph applications locally.","archived":false,"fork":false,"pushed_at":"2025-03-11T16:53:30.000Z","size":11760,"stargazers_count":2704,"open_issues_count":54,"forks_count":167,"subscribers_count":32,"default_branch":"main","last_synced_at":"2025-04-04T06:09:24.532Z","etag":null,"topics":["agents","ai","desktop","langgraph"],"latest_commit_sha":null,"homepage":"https://studio.langchain.com","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/langchain-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-29T22:11:00.000Z","updated_at":"2025-04-04T05:03:29.000Z","dependencies_parsed_at":"2024-08-12T20:06:20.467Z","dependency_job_id":"8478a0fb-e22e-44f9-b7ea-ebeb4877d5bd","html_url":"https://github.com/langchain-ai/langgraph-studio","commit_stats":{"total_commits":38,"total_committers":8,"mean_commits":4.75,"dds":0.6842105263157895,"last_synced_commit":"c864dfddeca6f7ce1ed2f2b8bd26be6457a24a28"},"previous_names":["langchain-ai/langgraph-studio"],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flanggraph-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flanggraph-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flanggraph-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flanggraph-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/langchain-ai","download_url":"https://codeload.github.com/langchain-ai/langgraph-studio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248403688,"owners_count":21097569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agents","ai","desktop","langgraph"],"created_at":"2024-08-03T01:01:36.982Z","updated_at":"2025-04-11T12:53:43.583Z","avatar_url":"https://github.com/langchain-ai.png","language":null,"funding_links":[],"categories":["\u003cspan id=\"game\"\u003eGame (World Model \u0026 Agent)\u003c/span\u003e","Others","AI Frameworks (Drag and Drop)","A01_文本生成_文本对话","Librerías para usar NLP en español","Developer \u0026 Coding Assistants"],"sub_categories":["\u003cspan id=\"tool\"\u003eLLM (LLM \u0026 Tool)\u003c/span\u003e","大语言对话模型及数据","Modelos de Embeddings para Sentence Similarity y Semantic Search","IDE Integrations"],"readme":"![LangGraph Studio](./cover.svg)\n\n# LangGraph Studio Desktop (Beta)\n\nLangGraph 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\n\nWith visual graphs and the ability to edit state, you can better understand agent workflows and iterate faster. LangGraph Studio integrates with [LangSmith](https://smith.langchain.com/) so you can collaborate with teammates to debug failure modes.\n\nWhile in Beta, LangGraph Studio is available for free to all LangSmith users on any plan tier. [Sign up for LangSmith here](http://smith.langchain.com/).\n\n\u003e [!NOTE]\n\u003e We recommend that users [run a local LangGraph server and use the web version of LangGraph Studio](https://langchain-ai.github.io/langgraph/tutorials/langgraph-platform/local-server/) instead of using the LangGraph Studio Desktop application. This is a newer feature that improves the development experience, as it works without Docker, significantly shortens startup times, supports code hot-reloading, and works across all platforms.\n\n![](./img/intro.gif)\n\n## Download\n\nDownload the latest `.dmg` file of LangGraph Studio by clicking [here](https://langgraph-studio.vercel.app/api/mac/latest) or by visiting the [releases page](https://github.com/langchain-ai/langgraph-studio/releases).\n\nThe desktop application only supports macOS. Other users can [run a local LangGraph server and use the web studio](https://langchain-ai.github.io/langgraph/tutorials/langgraph-platform/local-server/#langgraph-studio-web-ui). We also depend on Docker Engine to be running, currently we only support the following runtimes:\n\n- [Docker Desktop](https://docs.docker.com/engine/install/)\n- [Orbstack](https://orbstack.dev/)\n\n## Setup\n\nLangGraph Studio requires docker-compose version 2.22.0+ or higher. Please make sure you have [Docker Desktop](https://docs.docker.com/engine/install/) or [Orbstack](https://orbstack.dev/) installed and running before continuing.\n\nTo use LangGraph Studio, make sure you have a [project with a LangGraph app](https://langchain-ai.github.io/langgraph/cloud/deployment/setup/) set up.\n\nFor this example, we will use this example repository [here](https://github.com/langchain-ai/langgraph-example) which uses a `requirements.txt` file for dependencies:\n\n```shell\ngit clone https://github.com/langchain-ai/langgraph-example.git\n```\n\nIf you would like to use a `pyproject.toml` file instead for managing dependencies, you can use [this](https://github.com/langchain-ai/langgraph-example-pyproject) example repository.\n\n```shell\ngit clone https://github.com/langchain-ai/langgraph-example-pyproject.git\n```\n\nYou will then want to create a `.env` file with the relevant environment variables:\n\n```shell\ncp .env.example .env\n```\n\nYou should then open up the `.env` file and fill in with relevant OpenAI, Anthropic, and [Tavily](https://app.tavily.com/sign-in) API keys.\n\nIf you already have them set in your environment, you can save them to this .env file with the following commands:\n\n```shell\necho \"OPENAI_API_KEY=\\\"$OPENAI_API_KEY\\\"\" \u003e .env\necho \"ANTHROPIC_API_KEY=\\\"$ANTHROPIC_API_KEY\\\"\" \u003e\u003e .env\necho \"TAVILY_API_KEY=\\\"$TAVILY_API_KEY\\\"\" \u003e\u003e .env\n```\n\n**Note: do NOT add a LANGSMITH_API_KEY to the .env file.** We will do this automatically for you when you authenticate, and manually setting this may cause errors.\n\nOnce you've set up the project, you can use it in LangGraph Studio. Let's dive in!\n\n## Open a project\n\nWhen you open LangGraph Studio desktop app for the first time, you need to login via LangSmith.\n\n![Login Screen](./img/login_screen.png)\n\nOnce you have successfully authenticated, you can choose the LangGraph application folder to use — you can either drag and drop or manually select it in the file picker. If you are using the example project, the folder would be `langgraph-example`.\n\n\u003e [!IMPORTANT]\n\u003e The application directory you select needs to contain correctly configured `langgraph.json` file. See more information on how to configure it [here](https://langchain-ai.github.io/langgraph/cloud/reference/cli/#configuration-file) and how to set up a LangGraph app [here](https://langchain-ai.github.io/langgraph/cloud/deployment/setup/).\n\n![Select Project Screen](./img/select_project_screen.png)\n\nOnce you select a valid project, LangGraph Studio will start a LangGraph API server and you should see a UI with your graph rendered.\n\n![Graph Screen](./img/graph_screen.png)\n\n## Invoke graph\n\nNow we can run the graph! LangGraph Studio lets you run your graph with different inputs and configurations.\n\n### Start a new run\n\nTo start a new run:\n\n1. In the dropdown menu (top-left corner of the left-hand pane), select a graph. In our example the graph is called `agent`. The list of graphs corresponds to the `graphs` keys in your `langgraph.json` configuration.\n1. In the bottom of the left-hand pane, edit the `Input` section.\n1. Click `Submit` to invoke the selected graph.\n1. View output of the invocation in the right-hand pane.\n\nThe following video shows how to start a new run:\n\nhttps://github.com/user-attachments/assets/e0e7487e-17e2-4194-a4ad-85b346c2f1c4\n\n### Configure graph run\n\nTo change configuration for a given graph run, press `Configurable` button in the `Input` section. Then click `Submit` to invoke the graph.\n\n\u003e [!IMPORTANT]\n\u003e In order for the `Configurable` menu to be visible, make sure to specify config schema when creating `StateGraph`. You can read more about how to add config schema to your graph [here](https://langchain-ai.github.io/langgraph/how-tos/configuration/#configure-the-graph).\n\nThe following video shows how to edit configuration and start a new run:\n\nhttps://github.com/user-attachments/assets/8495b476-7e33-42d4-85cb-2f9269bea20c\n\n## Create and edit threads\n\n### Create a thread\n\nWhen you open LangGraph Studio, you will automatically be in a new thread window. If you have an existing thread open, follow these steps to create a new thread:\n\n1. In the top-right corner of the right-hand pane, press `+` to open a new thread menu.\n\nThe following video shows how to create a thread:\n\nhttps://github.com/user-attachments/assets/78d4a692-2042-48e2-a7e2-5a7ca3d5a611\n\n### Select a thread\n\nTo select a thread:\n\n1. Click on `New Thread` / `Thread \u003cthread-id\u003e` label at the top of the right-hand pane to open a thread list dropdown.\n1. Select a thread that you wish to view / edit.\n\nThe following video shows how to select a thread:\n\nhttps://github.com/user-attachments/assets/5f0dbd63-fa59-4496-8d8e-4fb8d0eab893\n\n### Edit thread state\n\nLangGraph Studio allows you to edit the thread state and fork the threads to create alternative graph execution with the updated state. To do it:\n\n1. Select a thread you wish to edit.\n1. In the right-hand pane hover over the step you wish to edit and click on \"pencil\" icon to edit.\n1. Make your edits.\n1. Click `Fork` to update the state and create a new graph execution with the updated state.\n\nThe following video shows how to edit a thread in the studio:\n\nhttps://github.com/user-attachments/assets/47f887e7-2e3f-46ce-977c-f474c3cd797e\n\n## How to add interrupts to your graph\n\nYou might want to execute your graph step by step, or stop graph execution before/after a specific node executes. You can do so by adding interrupts. Interrupts can be set for all nodes (i.e. walk through the agent execution step by step) or for specific nodes. An interrupt in LangGraph Studio means that the graph execution will be interrupted both before and after a given node runs.\n\n### Add interrupts to a list of nodes\n\nTo walk through the agent execution step by step, you can add interrupts to a all or a subset of nodes in the graph:\n\n1. In the dropdown menu (top-right corner of the left-hand pane), click `Interrupt`.\n2. Select a subset of nodes to interrupt on, or click `Interrupt on all`.\n\nThe following video shows how to add interrupts to all nodes:\n\nhttps://github.com/user-attachments/assets/db44ebda-4d6e-482d-9ac8-ea8f5f0148ea\n\n### Add interrupt to a specific node\n\n1. Navigate to the left-hand pane with the graph visualization.\n1. Hover over a node you want to add an interrupt to. You should see a `+` button show up on the left side of the node.\n1. Click `+` to invoke the selected graph.\n1. Run the graph by adding `Input` / configuration and clicking `Submit`\n\nThe following video shows how to add interrupts to a specific node:\n\nhttps://github.com/user-attachments/assets/13429609-18fc-4f21-9cb9-4e0daeea62c4\n\nTo remove the interrupt, simply follow the same step and press `x` button on the left side of the node.\n\n## Human-in-the-loop\n\nIn addition to interrupting on a node and editing the graph state, you might want to support human-in-the-loop workflows with the ability to manually update state. Here is a modified version of `agent.py` with `agent` and `human` nodes, where the graph execution will be interrupted on `human` node. This will let you send input as part of the `human` node. This can be useful when you want the agent to get user input. This essentially replaces how you might use `input()` if you were running this from the command line.\n\n```python\nfrom typing import Literal\n\nfrom langchain_openai import ChatOpenAI\nfrom langgraph.graph import MessagesState, StateGraph, END\nfrom langgraph.types import Command, interrupt\n\n\nmodel = ChatOpenAI(temperature=0, model_name=\"gpt-4o\")\n\n\ndef call_model(state: MessagesState) -\u003e Command[Literal[\"human\", END]]:\n    messages = state[\"messages\"]\n    response = model.invoke(messages)\n\n    return Command(\n        goto=\"human\",\n        update={\"messages\": [response]},\n    )\n\n\ndef human_feedback(state: MessagesState) -\u003e Command[Literal[\"agent\"]]:\n    \"\"\"A node for collecting user input.\"\"\"\n    print(\"Waiting for user input...\")\n    user_input = interrupt(value=\"Ready for user input.\")\n\n    print(\"user input:\", user_input)\n\n    return Command(\n        goto=\"agent\",\n        update={\n            \"messages\": [\n                {\n                    \"role\": \"human\",\n                    \"content\": user_input,\n                }\n            ]\n        },\n    )\n\n\nworkflow = StateGraph(MessagesState)\nworkflow.set_entry_point(\"agent\")\nworkflow.add_node(\"agent\", call_model)\nworkflow.add_node(\"human\", human_feedback)\n\ngraph = workflow.compile()\n```\n\nThe following video shows how to manually send state updates (i.e. messages in our example) when interrupted:\n\nhttps://github.com/user-attachments/assets/f6d4fd18-df4d-45b7-8b1b-ad8506d08abd\n\n## Edit project config\n\nLangGraph Studio allows you to modify your project config (`langgraph.json`) interactively.\n\nTo modify the config from the studio, follow these steps:\n\n1. Click `Configure` on the bottom right. This will open an interactive config menu with the values that correspond to the existing `langgraph.json`.\n1. Make your edits.\n1. Click `Save and Restart` to reload the LangGraph API server with the updated config.\n\nThe following video shows how to edit project config from the studio:\n\nhttps://github.com/user-attachments/assets/86d7d1f7-800c-4739-80bc-8122b4728817\n\n## Edit graph code\n\nWith LangGraph Studio you can modify your graph code and sync the changes live to the interactive graph.\n\nTo modify your graph from the studio, follow these steps:\n\n1. Click `Open in VS Code` on the bottom right. This will open the project that is currently opened in LangGraph studio.\n1. Make changes to the `.py` files where the compiled graph is defined or associated dependencies.\n1. LangGraph studio will automatically reload once the changes are saved in the project directory.\n\nThe following video shows how to open code editor from the studio:\n\nhttps://github.com/user-attachments/assets/8ac0443d-460b-438e-a379-182ec9f68ff5\n\nAfter you modify the underlying code you can also replay a node in the graph. For example, if an agent responds poorly, you can update the agent node implementation in your code editor and rerun it. This can make it much easier to iterate on long-running agents.\n\nhttps://github.com/user-attachments/assets/9ec1b8ed-c6f8-433d-8bef-0dbda58a1075\n\n## Troubleshooting\n\n### How do I access local services and models such as Ollama, Chroma, etc?\n\nLangGraph Studio relies on Docker Compose to run the API, Redis and Postgres, which in turn creates its own network. Thus, to access local services you need to use `host.docker.internal` as the hostname instead of `localhost`. See [#112](https://github.com/langchain-ai/langgraph-studio/issues/112) for more details.\n\n### Failing to install native dependencies during build\n\nBy default, we try to make the image as small as possible, thus some dependencies such as `gcc` or `build-essentials` are missing from the base image. If you need to install additional dependencies, you can do so by adding additional Dockerfile instructions in the `dockerfile_lines` section of your `langgraph.json` file:\n\n```\n{\n    \"dockerfile_lines\": [\n        \"RUN apt-get update \u0026\u0026 apt-get install -y gcc\"\n    ]\n}\n```\n\nSee [How to customize Dockerfile](https://langchain-ai.github.io/langgraph/cloud/deployment/custom_docker) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flangchain-ai%2Flanggraph-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flangchain-ai%2Flanggraph-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flangchain-ai%2Flanggraph-studio/lists"}