langgraph studio

Estúdio LangGraph (beta)

LangGraph Studio oferece uma nova maneira de desenvolver aplicativos LLM, fornecendo um IDE de agente especializado que permite visualização, interação e depuração de aplicativos de agente complexos

Com gráficos visuais e a capacidade de editar o estado, você pode entender melhor os fluxos de trabalho dos agentes e iterar com mais rapidez. O LangGraph Studio integra-se ao LangSmith para que você possa colaborar com colegas de equipe para depurar modos de falha.

Enquanto estiver na versão Beta, o LangGraph Studio está disponível gratuitamente para todos os usuários do LangSmith em qualquer nível de plano. Inscreva-se no LangSmith aqui.

Download

Baixe o arquivo .dmg mais recente do LangGraph Studio clicando aqui ou visitando a página de lançamentos.

Atualmente, apenas o macOS é compatível. O suporte para Windows e Linux estará disponível em breve. Também dependemos do Docker Engine para funcionar, atualmente suportamos apenas os seguintes tempos de execução:

• Área de Trabalho Docker
• pilha orb

Configurar

LangGraph Studio requer docker-compose versão 2.22.0+ ou superior. Certifique-se de ter o Docker Desktop ou Orbstack instalado e em execução antes de continuar.

Para usar o LangGraph Studio, certifique-se de ter um projeto com um aplicativo LangGraph configurado.

Para este exemplo, usaremos este repositório de exemplo aqui, que usa um arquivo requirements.txt para dependências:

git clone https://github.com/langchain-ai/langgraph-example.git

Se desejar usar um arquivo pyproject.toml para gerenciar dependências, você pode usar este repositório de exemplo.

git clone https://github.com/langchain-ai/langgraph-example-pyproject.git

Você desejará então criar um arquivo .env com as variáveis ​​de ambiente relevantes:

cp .env.example .env

Você deve então abrir o arquivo .env e preencher com as chaves relevantes da API OpenAI, Anthropic e Tavily.

Se você já os tiver configurado em seu ambiente, poderá salvá-los neste arquivo .env com os seguintes comandos:

 echo " OPENAI_API_KEY= " $OPENAI_API_KEY " " > .env
echo " ANTHROPIC_API_KEY= " $ANTHROPIC_API_KEY " " >> .env
echo " TAVILY_API_KEY= " $TAVILY_API_KEY " " >> .env

Nota: NÃO adicione LANGSMITH_API_KEY ao arquivo .env. Faremos isso automaticamente quando você se autenticar, e configurar isso manualmente pode causar erros.

Depois de configurar o projeto, você poderá usá-lo no LangGraph Studio. Vamos mergulhar!

Abra um projeto

Ao abrir o aplicativo de desktop LangGraph Studio pela primeira vez, você precisa fazer login via LangSmith.

Depois de autenticar com sucesso, você pode escolher a pasta do aplicativo LangGraph a ser usada – você pode arrastar e soltar ou selecioná-la manualmente no seletor de arquivos. Se você estiver usando o projeto de exemplo, a pasta seria langgraph-example .

Importante

O diretório do aplicativo selecionado precisa conter o arquivo langgraph.json configurado corretamente. Veja mais informações sobre como configurá-lo aqui e como configurar um aplicativo LangGraph aqui.

Depois de selecionar um projeto válido, o LangGraph Studio iniciará um servidor LangGraph API e você deverá ver uma UI com seu gráfico renderizado.

Invocar gráfico

Agora podemos executar o gráfico! LangGraph Studio permite executar seu gráfico com diferentes entradas e configurações.

Iniciar uma nova corrida

Para iniciar uma nova execução:

1. No menu suspenso (canto superior esquerdo do painel esquerdo), selecione um gráfico. Em nosso exemplo, o gráfico é chamado agent . A lista de gráficos corresponde às chaves graphs em sua configuração langgraph.json .
2. Na parte inferior do painel esquerdo, edite a seção Input .
3. Clique em Submit para invocar o gráfico selecionado.
4. Veja a saída da invocação no painel direito.

O vídeo a seguir mostra como iniciar uma nova execução:

gráfico_invoke.mp4

Configurar execução do gráfico

Para alterar a configuração de uma determinada execução gráfica, pressione o botão Configurable na seção Input . Em seguida, clique em Submit para invocar o gráfico.

Importante

Para que o menu Configurable fique visível, certifique-se de especificar o esquema de configuração ao criar StateGraph . Você pode ler mais sobre como adicionar esquema de configuração ao seu gráfico aqui.

O vídeo a seguir mostra como editar a configuração e iniciar uma nova execução:

gráfico_config.mp4

Criar e editar tópicos

Crie um tópico

Ao abrir o LangGraph Studio, você estará automaticamente em uma nova janela de thread. Se você tiver um tópico aberto, siga estas etapas para criar um novo tópico:

1. No canto superior direito do painel direito, pressione + para abrir um novo menu de tópico.

O vídeo a seguir mostra como criar um tópico:

create_thread.mp4

Selecione um tópico

Para selecionar um tópico:

1. Clique no rótulo New Thread / Thread <thread-id> na parte superior do painel direito para abrir um menu suspenso da lista de tópicos.
2. Selecione um tópico que você deseja visualizar/editar.

O vídeo a seguir mostra como selecionar um tópico:

select_thread.mp4

Editar estado do tópico

LangGraph Studio permite editar o estado do thread e bifurcar os threads para criar uma execução alternativa do gráfico com o estado atualizado. Para fazer isso:

1. Selecione um tópico que deseja editar.
2. No painel direito, passe o mouse sobre a etapa que deseja editar e clique no ícone "lápis" para editar.
3. Faça suas edições.
4. Clique em Fork para atualizar o estado e criar uma nova execução gráfica com o estado atualizado.

O vídeo a seguir mostra como editar um tópico no estúdio:

fork_thread.mp4

Como adicionar interrupções ao seu gráfico

Você pode querer executar seu gráfico passo a passo ou interromper a execução do gráfico antes/depois da execução de um nó específico. Você pode fazer isso adicionando interrupções. As interrupções podem ser definidas para todos os nós (ou seja, percorrer passo a passo a execução do agente) ou para nós específicos. Uma interrupção no LangGraph Studio significa que a execução do gráfico será interrompida antes e depois da execução de um determinado nó.

Adicione interrupções a uma lista de nós

Para percorrer a execução do agente passo a passo, você pode adicionar interrupções a todos ou a um subconjunto de nós no gráfico:

1. No menu suspenso (canto superior direito do painel esquerdo), clique em Interrupt .
2. Selecione um subconjunto de nós para interromper ou clique em Interrupt on all .

O vídeo a seguir mostra como adicionar interrupções a todos os nós:

gráfico_interrupts_all.mp4

Adicionar interrupção a um nó específico

1. Navegue até o painel esquerdo com a visualização do gráfico.
2. Passe o mouse sobre um nó ao qual deseja adicionar uma interrupção. Você deverá ver um botão + aparecer no lado esquerdo do nó.
3. Clique em + para invocar o gráfico selecionado.
4. Execute o gráfico adicionando Input /configuração e clicando em Submit

O vídeo a seguir mostra como adicionar interrupções a um nó específico:

gráfico_interrupções.mp4

Para remover a interrupção, basta seguir o mesmo passo e pressionar o botão x no lado esquerdo do nó.

Humano no circuito

Além de interromper um nó e editar o estado do gráfico, talvez você queira oferecer suporte a fluxos de trabalho humanos no circuito com a capacidade de atualizar manualmente o estado. Aqui está uma versão modificada de agent.py com nós agent e human , onde a execução do gráfico será interrompida no nó human . Isso permitirá que você envie entradas como parte do nó human . Isso pode ser útil quando você deseja que o agente obtenha informações do usuário. Isso essencialmente substitui como você poderia usar input() se estivesse executando isso na linha 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" ])

O vídeo a seguir mostra como enviar manualmente atualizações de estado (ou seja, mensagens em nosso exemplo) quando interrompido:

gráfico_hitl.mp4

Editar configuração do projeto

LangGraph Studio permite que você modifique a configuração do seu projeto ( langgraph.json ) interativamente.

Para modificar a configuração do estúdio, siga estas etapas:

1. Clique em Configure no canto inferior direito. Isso abrirá um menu de configuração interativo com os valores que correspondem ao langgraph.json existente.
2. Faça suas edições.
3. Clique em Save and Restart para recarregar o servidor LangGraph API com a configuração atualizada.

O vídeo a seguir mostra como editar a configuração do projeto no estúdio:

gráfico_edit_json.mp4

Editar código gráfico

Com LangGraph Studio você pode modificar o código do gráfico e sincronizar as alterações ao vivo com o gráfico interativo.

Para modificar seu gráfico no estúdio, siga estas etapas:

1. Clique em Open in VS Code no canto inferior direito. Isso abrirá o projeto que está atualmente aberto no estúdio LangGraph.
2. Faça alterações nos arquivos .py onde o gráfico compilado está definido ou nas dependências associadas.
3. O estúdio LangGraph será recarregado automaticamente assim que as alterações forem salvas no diretório do projeto.

O vídeo a seguir mostra como abrir o editor de código do estúdio:

gráfico_edit_code.mp4

Depois de modificar o código subjacente, você também poderá reproduzir um nó no gráfico. Por exemplo, se um agente responder mal, você poderá atualizar a implementação do nó do agente em seu editor de código e executá-lo novamente. Isso pode facilitar muito a iteração em agentes de longa execução.

repetição.mp4

Solução de problemas

Como faço para acessar serviços e modelos locais como Ollama, Chroma, etc?

LangGraph Studio depende do Docker Compose para executar a API, Redis e Postgres, que por sua vez cria sua própria rede. Assim, para acessar serviços locais você precisa usar host.docker.internal como nome do host em vez de localhost . Consulte #112 para obter mais detalhes.

Falha ao instalar dependências nativas durante a construção

Por padrão, tentamos tornar a imagem o menor possível, portanto, algumas dependências como gcc ou build-essentials estão faltando na imagem base. Se precisar instalar dependências adicionais, você pode fazer isso adicionando instruções adicionais do Dockerfile na seção dockerfile_lines do seu arquivo langgraph.json :

 {
    "dockerfile_lines": [
        "RUN apt-get update && apt-get install -y gcc"
    ]
}

Consulte Como personalizar o Dockerfile para obter mais detalhes.