LangGraph Studio: 使用 LangChain 可视化和测试 AI 代理

在我之前的文章中，我向您介绍了如何使用LangGraph构建AI代理的整个过程，在这个过程中，我们探讨了如何创建能够管理复杂多步骤任务的智能、适应性强的AI系统。我们使用节点来表示单独的动作或计算，用边来控制决策流程，并依靠状态来在整个交互过程中保持上下文。这使我们能够构建一个AI代理，用于计算太阳能板的潜在节能效果，展示了LangGraph如何让开发者能够创建能够根据用户输入动态响应的真实世界应用程序。

今天，我想要更进一步，介绍一个能够使AI代理开发更加高效的全新工具：LangGraph Studio。这是第一个专门为可视化、测试和调试基于LangChain的AI代理而构建的集成开发环境（IDE）。在这篇文章中，我们将深入了解LangGraph Studio的功能，它如何简化开发流程，以及为什么它是希望轻松创建智能、灵活系统的开发人员必不可少的工具。

LangGraph Studio 是一个集成开发环境（IDE），旨在支持使用 LangChain 构建的项目的 AI 代理的创建和测试。它提供了一个可视化的界面，用户可以使用节点和边来设计代理的工作流程，其中节点代表任务，边代表任务之间的连接。该工具还允许实时可视化代理的行为，并提供调试功能。通过提供复杂流程的图形表示，LangGraph Studio 帮助开发人员更高效地管理多步骤任务、监控状态并测试 AI 代理，而无需在纯代码环境中进行操作。

LangGraph Studio IDE

LangGraph Studio 可以作为桌面应用使用，并且目前支持 Apple Silicon 设备。要开始使用，您可以从官方 LangGraph Studio GitHub 页面 下载应用。下载完成后，只需打开应用程序并使用您的 LangSmith 账户登录。如果您还没有账户，可以免费创建一个。在测试阶段，所有 LangSmith 用户都可以使用 LangGraph Studio，无论账户类型如何。虽然当前版本仅限于 Apple Silicon 设备，但预计未来不久将支持更多平台。

LangGraph Studio 需要 Docker Engine 和 Docker Compose 版本 2.22.0 或更高版本在您的系统上运行。目前支持的运行时环境是 Docker Desktop 和 Orbstack，请确保安装并运行了其中一个环境后再启动应用程序。

为了有效使用 LangGraph Studio，你需要正确设置一个 LangGraph 项目。本节将指导你完成项目配置、指定依赖项、创建代理以及准备必要的配置文件。我将通过我在 之前的文章 中介绍的 太阳能板 AI 代理 来演示这一过程。你也可以在我的 GitHub 仓库 中找到这个设置的完整示例。

从创建必要的项目结构开始。在这个例子中，我们将目录命名为 agent-solarpanels-tutorial。

    agent-solarpanels-tutorial/  
    ├── .env  
    ├── agent.py  
    ├── requirements.txt  
    └── langgraph.json

• **agent.py**: 此文件将定义您的 LangGraph 代理。

• **requirements.txt**: 此文件列出了您的项目依赖项。

• **langgraph.json**: 此配置文件定义了依赖项、环境变量以及 LangGraph 代理的路径。

• **.env**: 环境变量文件。

在你的 requirements.txt 文件中，列出你的 LangGraph 代理所需的依赖项。以下是 太阳能板 AI 代理 所需的依赖项：

    LangGraph  
    LangChain_Anthropic  
    Tavily_Python  
    LangChain_Community  
    LangChain_AWS

如果你的 LangGraph AI 代理需要特定的环境变量，例如 API 密钥或端点，你可以将它们定义在 .env 文件中。对于 太阳能板 AI 代理，你需要以下变量：

    TAVILY_API_KEY = ""  
    LANGCHAIN_TRACING_V2 = "true"  
    LANGCHAIN_ENDPOINT = "https://api.smith.langchain.com"  
    LANGCHAIN_API_KEY = ""  
    LANGCHAIN_PROJECT = "agent-solarpanels-tutorial"  
    AWS_ACCESS_KEY_ID = ""  
    AWS_SECRET_ACCESS_KEY = ""  
    AWS_REGION = "us-east-1"

langgraph.json 文件非常重要，因为它会告知 LangGraph Studio 关于你的代理的依赖项、环境变量以及代理编译图的位置。此配置文件允许 LangGraph Studio 正确加载并运行代理。

下面是 langgraph.json 文件的一个示例：

    {  
      "graphs": {  
        "agent": "./agent.py:graph"  
      },  
      "env": ".env",  
      "python_version": "3.11",  
      "dependencies": [  
        "."  
      ]  
    }

接下来，在 agent.py 文件中实现你的 LangGraph 代理。这个文件定义了你的图的节点、边和工作流。在我的 GitHub 仓库中可以找到一个完整的示例：示例代码。

在 LangGraph Studio 中打开你的项目

一旦你的项目设置并配置完毕，你就可以准备将你的代理加载到 LangGraph Studio 中了。按照以下步骤操作：

1. 确保 Docker 正在运行：在继续之前，请确保您的机器上已安装并运行了 Docker。
2. 打开 LangGraph Studio：在您的机器上启动 LangGraph Studio。您将被提示使用您的 LangSmith 账户登录。如果您还没有账户，可以免费创建一个。
3. 加载您的项目：登录后，选择加载现有项目的选项。导航到您的项目目录（agent-solarpanels-tutorial），找到 langgraph.json 文件所在的位置。

LangGraph Studio 将自动加载您的代理。如果一切设置正确，您应该能看到代理的可视化表示。如果出现问题，您可以在 LangGraph Studio 中访问日志以帮助识别和调试任何问题。

要运行AI代理，请首先从左上角的下拉菜单中选择所需的图。接下来，在输入部分，选择 消息 ，输入您的问题或内容，然后点击 提交 来调用图。代理的响应将在右侧窗格中显示。

发送消息给AI代理

当你调用一个图时，LangGraph Studio 会自动为该会话创建一个新的线程。你可以通过切换位于右侧窗格左上角的下拉菜单来管理多个线程。如果你需要创建额外的线程，只需点击 + 图标打开一个新的线程窗口，这样你就可以在不同的会话中工作而不影响其他会话。

将创建一个新的线程

在每条消息下方，你可以找到多个选项：

• 查看检查点处的输出：提供有关消息ID的详细信息。
• 编辑：允许你编辑该线程（更多信息请参见下方）。
• 重新运行：允许你重新运行一个步骤，可能是在进行了代码更改之后（更多信息请参见下方）。
• 在LangSmith中运行。
• 关于token使用情况的信息。
• 关于延迟的信息。

每个消息的选项

LangGraph Studio 还允许你编辑线程的状态，并将其分叉以根据更新后的状态创建一个替代的图执行。要编辑一个线程，首先选择你想要修改的线程。然后，在右侧的面板中，将鼠标悬停在你想要更改的具体步骤上，并点击铅笔图标开始编辑。完成调整后，点击 分叉 来更新线程并生成一个新的图执行，以探索不同的结果或场景。

编辑你的线程

在 LangGraph Studio 中，你可以通过添加 中断 来控制图的执行流程。中断允许你在特定节点之前或之后暂停执行，甚至可以跨所有节点暂停执行，从而让你能够逐步执行图。这在你希望密切监控代理行为或排查特定步骤时特别有用。

为了添加中断，请导航到左侧窗格右上角的下拉菜单并点击 Interrupt。您可以选择将中断应用于所有节点，或者选择一部分节点进行重点关注。这使您能够更精细地控制图形执行过程，检查代理在每一步的操作。

中断图

在使用中断控制执行流程后，你可能会发现需要对图的底层代码进行调整。LangGraph Studio 允许你直接修改图代码，并实时同步这些更改到交互式图中。

要编辑你的图代码，请点击界面右下角的 在 VS Code 中打开。这将打开你的项目并在 Visual Studio Code 中进行编辑，你可以修改定义图的 agent.py 文件。保存更改后，LangGraph Studio 将自动重新加载并应用这些更改。

如果你进行了调整并希望测试它，你可以重播图中的特定节点。例如，如果一个代理响应不佳，你可以更新代理节点的实现，保存更改并重新运行该节点。这种实时反馈使得迭代代理的行为变得更加容易，尤其是在处理复杂且长时间运行的图时。

在 VSC 中修改你的代码

LangGraph Studio 提供了一种实用的方法来使用 LangChain 开发和测试 AI 代理。结合其视觉工具和实时代码编辑功能，它使与代理交互的过程更加顺畅。您可以轻松管理图的执行，修改代理的逻辑，并立即看到结果。对于希望构建更复杂 AI 代理的任何人来说，它都是一款非常有用的工具，并且简化了许多在代码中完成时可能棘手的任务。

关注我，了解更多人工智能的深度解析！

中等, Instagram, YouTube