LangGraph Studio ofrece una nueva forma de desarrollar aplicaciones LLM al proporcionar un IDE de agente especializado que permite la visualización, interacción y depuración de aplicaciones agentes complejas.
Con gráficos visuales y la capacidad de editar el estado, puede comprender mejor los flujos de trabajo de los agentes e iterarlos más rápido. LangGraph Studio se integra con LangSmith para que pueda colaborar con sus compañeros de equipo para depurar modos de falla.
Mientras está en Beta, LangGraph Studio está disponible de forma gratuita para todos los usuarios de LangSmith en cualquier nivel del plan. Regístrese en LangSmith aquí.
Descargue el último archivo .dmg de LangGraph Studio haciendo clic aquí o visitando la página de lanzamientos.
Actualmente, solo se admite macOS. La compatibilidad con Windows y Linux llegará pronto. También dependemos de que Docker Engine se esté ejecutando; actualmente solo admitimos los siguientes tiempos de ejecución:
LangGraph Studio requiere la versión 2.22.0+ o superior de Docker-Compose. Asegúrese de tener Docker Desktop u Orbstack instalado y ejecutándose antes de continuar.
Para utilizar LangGraph Studio, asegúrese de tener un proyecto con una aplicación LangGraph configurada.
Para este ejemplo, usaremos este repositorio de ejemplo que usa un archivo requirements.txt para las dependencias:
git clone https://github.com/langchain-ai/langgraph-example.git Si desea utilizar un archivo pyproject.toml en lugar de administrar dependencias, puede utilizar este repositorio de ejemplo.
git clone https://github.com/langchain-ai/langgraph-example-pyproject.git Luego querrás crear un archivo .env con las variables de entorno relevantes:
cp .env.example .env Luego debe abrir el archivo .env y completarlo con las claves API de OpenAI, Anthropic y Tavily relevantes.
Si ya los tiene configurados en su entorno, puede guardarlos en este archivo .env con los siguientes comandos:
echo " OPENAI_API_KEY= " $OPENAI_API_KEY " " > .env
echo " ANTHROPIC_API_KEY= " $ANTHROPIC_API_KEY " " >> .env
echo " TAVILY_API_KEY= " $TAVILY_API_KEY " " >> .envNota: NO agregue LANGSMITH_API_KEY al archivo .env. Haremos esto automáticamente cuando se autentique y configurarlo manualmente puede causar errores.
Una vez que haya configurado el proyecto, podrá usarlo en LangGraph Studio. ¡Vamos a sumergirnos!
Cuando abre la aplicación de escritorio LangGraph Studio por primera vez, debe iniciar sesión a través de LangSmith.
Una vez que se haya autenticado exitosamente, puede elegir la carpeta de la aplicación LangGraph que desea usar; puede arrastrarla y soltarla o seleccionarla manualmente en el selector de archivos. Si está utilizando el proyecto de ejemplo, la carpeta sería langgraph-example .
Importante
El directorio de la aplicación que seleccione debe contener el archivo langgraph.json configurado correctamente. Vea más información sobre cómo configurarlo aquí y cómo configurar una aplicación LangGraph aquí.
Una vez que seleccione un proyecto válido, LangGraph Studio iniciará un servidor API de LangGraph y debería ver una interfaz de usuario con su gráfico representado.
¡Ahora podemos ejecutar el gráfico! LangGraph Studio le permite ejecutar su gráfico con diferentes entradas y configuraciones.
Para iniciar una nueva ejecución:
agent . La lista de gráficos corresponde a las claves graphs en su configuración de langgraph.json .Input .Submit para invocar el gráfico seleccionado.El siguiente vídeo muestra cómo iniciar una nueva ejecución:
Para cambiar la configuración para una ejecución de gráfico determinada, presione el botón Configurable en la sección Input . Luego haga clic en Submit para invocar el gráfico.
Importante
Para que el menú Configurable sea visible, asegúrese de especificar el esquema de configuración al crear StateGraph . Puede leer más sobre cómo agregar un esquema de configuración a su gráfico aquí.
El siguiente vídeo muestra cómo editar la configuración e iniciar una nueva ejecución:
Cuando abras LangGraph Studio, automáticamente estarás en una nueva ventana de hilo. Si tiene un hilo existente abierto, siga estos pasos para crear un hilo nuevo:
+ para abrir un nuevo menú de hilo.El siguiente vídeo muestra cómo crear un hilo:
Para seleccionar un hilo:
New Thread / Thread <thread-id> en la parte superior del panel derecho para abrir un menú desplegable de lista de hilos.El siguiente vídeo muestra cómo seleccionar un hilo:
LangGraph Studio le permite editar el estado del hilo y bifurcar los hilos para crear una ejecución de gráfico alternativa con el estado actualizado. Para hacerlo:
Fork para actualizar el estado y crear una nueva ejecución de gráfico con el estado actualizado.El siguiente vídeo muestra cómo editar un hilo en el estudio:
Es posible que desee ejecutar su gráfico paso a paso o detener la ejecución del gráfico antes o después de que se ejecute un nodo específico. Puede hacerlo agregando interrupciones. Las interrupciones se pueden configurar para todos los nodos (es decir, recorrer la ejecución del agente paso a paso) o para nodos específicos. Una interrupción en LangGraph Studio significa que la ejecución del gráfico se interrumpirá antes y después de que se ejecute un nodo determinado.
Para recorrer la ejecución del agente paso a paso, puede agregar interrupciones a todos o a un subconjunto de nodos en el gráfico:
Interrupt .Interrupt on all .El siguiente video muestra cómo agregar interrupciones a todos los nodos:
+ en el lado izquierdo del nodo.+ para invocar el gráfico seleccionado.Input /configuración y haciendo clic en SubmitEl siguiente video muestra cómo agregar interrupciones a un nodo específico:
Para eliminar la interrupción, simplemente siga el mismo paso y presione el botón x en el lado izquierdo del nodo.
Además de interrumpir un nodo y editar el estado del gráfico, es posible que desee admitir flujos de trabajo humanos en el ciclo con la capacidad de actualizar el estado manualmente. Aquí hay una versión modificada de agent.py con nodos human y agent , donde la ejecución del gráfico se interrumpirá en el nodo human . Esto le permitirá enviar información como parte del nodo human . Esto puede resultar útil cuando desea que el agente obtenga información del usuario. Básicamente, esto reemplaza la forma en que podría usar input() si estuviera ejecutando esto desde la línea de comando.
from typing import TypedDict , Annotated , Sequence , Literal
from langchain_core . messages import BaseMessage , HumanMessage
from langchain_anthropic import ChatAnthropic
from langgraph . graph import StateGraph , END , add_messages
class AgentState ( TypedDict ):
messages : Annotated [ Sequence [ BaseMessage ], add_messages ]
model = ChatAnthropic ( temperature = 0 , model_name = "claude-3-sonnet-20240229" )
def call_model ( state : AgentState ) -> AgentState :
messages = state [ "messages" ]
response = model . invoke ( messages )
return { "messages" : [ response ]}
# no-op node that should be interrupted on
def human_feedback ( state : AgentState ) -> AgentState :
pass
def should_continue ( state : AgentState ) -> Literal [ "agent" , "end" ]:
messages = state [ 'messages' ]
last_message = messages [ - 1 ]
if isinstance ( last_message , HumanMessage ):
return "agent"
return "end"
workflow = StateGraph ( AgentState )
workflow . set_entry_point ( "agent" )
workflow . add_node ( "agent" , call_model )
workflow . add_node ( "human" , human_feedback )
workflow . add_edge ( "agent" , "human" )
workflow . add_conditional_edges (
"human" ,
should_continue ,
{
"agent" : "agent" ,
"end" : END ,
},
)
graph = workflow . compile ( interrupt_before = [ "human" ])El siguiente vídeo muestra cómo enviar manualmente actualizaciones de estado (es decir, mensajes en nuestro ejemplo) cuando se interrumpe:
LangGraph Studio le permite modificar la configuración de su proyecto ( langgraph.json ) de forma interactiva.
Para modificar la configuración desde el estudio, siga estos pasos:
Configure en la parte inferior derecha. Esto abrirá un menú de configuración interactivo con los valores que corresponden al langgraph.json existente.Save and Restart para recargar el servidor API LangGraph con la configuración actualizada.El siguiente vídeo muestra cómo editar la configuración del proyecto desde el estudio:
Con LangGraph Studio puede modificar el código de su gráfico y sincronizar los cambios en vivo con el gráfico interactivo.
Para modificar tu gráfica desde el estudio, sigue estos pasos:
Open in VS Code en la parte inferior derecha. Esto abrirá el proyecto que está actualmente abierto en LangGraph Studio..py donde se define el gráfico compilado o las dependencias asociadas.El siguiente video muestra cómo abrir el editor de código desde el estudio:
Después de modificar el código subyacente, también puede reproducir un nodo en el gráfico. Por ejemplo, si un agente responde mal, puede actualizar la implementación del nodo del agente en su editor de código y volver a ejecutarlo. Esto puede hacer que sea mucho más fácil iterar sobre agentes de larga duración.
LangGraph Studio se basa en Docker Compose para ejecutar API, Redis y Postgres, que a su vez crea su propia red. Por lo tanto, para acceder a los servicios locales necesita usar host.docker.internal como nombre de host en lugar de localhost . Consulte el n.° 112 para obtener más detalles.
De forma predeterminada, intentamos hacer la imagen lo más pequeña posible, por lo que faltan algunas dependencias como gcc o build-essentials en la imagen base. Si necesita instalar dependencias adicionales, puede hacerlo agregando instrucciones adicionales de Dockerfile en la sección dockerfile_lines de su archivo langgraph.json :
{
"dockerfile_lines": [
"RUN apt-get update && apt-get install -y gcc"
]
}
Consulte Cómo personalizar Dockerfile para obtener más detalles.
