LangGraph Studio facilita testes dos seus Agentes de IA

Já pensou? Você cria um workflow no LangGraph e simplesmente ele aparece de forma visual na sua tela com um front-end prontinho? Vamos entender isso...

Se você tem acompanhado nosso curso gratuito de LangGraph e LangChain, já construímos algumas coisas interessantes, como nosso primeiro ReAct Agent com Tools. Mas, à medida que os grafos se tornam mais complexos, com múltiplos nós e condicionais, pode ser difícil rastrear exatamente o que está acontecendo por baixo dos panos. É aí que o LangGraph Studio entra em cena.

O Ecossistema LangChain

Antes de mergulharmos no Studio, é importante entender onde ele se encaixa. O ecossistema da LangChain é vasto e continua crescendo. Temos:

• LangChain e LangGraph: As bibliotecas open-source que temos usado para construir nossos agentes.

• LangSmith: Uma plataforma para observabilidade e avaliação de LLMs, ótima para tracing e debugging (vamos falar mais dela no futuro).

• LangGraph Platform: A solução paga e hospedada na nuvem para deploy de agentes.

E, claro, a estrela de hoje:

• LangGraph Studio: Uma IDE visual, que roda localmente, para interagir e depurar nossos grafos. Pense nela como um front-end que monta seu grafo visualmente, permitindo que você envie mensagens e observe cada nó sendo executado em tempo real.

Aula em vídeo

Como sempre, já criei uma aula em vídeo sobre tudo o que estou falando neste texto para facilitar a sua vida.

• Link do curso gratuito de LangChain e LangGraph com Python

• Link do nosso repositório

Instalação do LangGraph CLI

Para usar o LangGraph Studio, precisaremos do LangGraph CLI. O comando abaixo fará este trabalho em nosso ambiente do curso.

uv add "langgraph-cli[in-mem]"

Se precisar, você sempre pode clonar nosso repositório.

Após a instalação, você terá o comando langgraph disponível no seu ambiente.

Configurando o langgraph.json

Para que o Studio saiba onde encontrar e como executar seu grafo, precisamos criar um arquivo de configuração chamado langgraph.json. Este arquivo define quais grafos expor, a versão do Python, as dependências e outras configurações.

Vamos criar o arquivo langgraph.json na raiz do nosso projeto (ou na pasta da aula específica).

{
  “$schema”: “https://langgra.ph/schema.json”,
  “graphs”: {
    “grafo”: “src/examples/ex006/graph.py:build_graph”
  },
  “env”: “.env”,
  “python_version”: “3.13”,
  “dependencies”: [”.”]
}

Eu estou usando o código da aula anterior, por isso criei meu langgraph.json na mesma pasta por questão de organização.

Creio que este arquivo é praticamente auto explicativo, mas uma parte que pode ser confusa é o final do caminho de “grafo”. Nele usamos um caminho de arquivo Python, dois pontos (:) uma variável ou função que gere o seu grafo compilado. No meu caso estou usando uma função.

Executando o LangGraph Studio

Com tudo configurado, basta executar o seguinte comando no seu terminal:

uv run langgraph dev --config src/examples/ex006/langgraph.json

Atenção: O argumento --config é opcional se o seu langgraph.json estiver na raiz do projeto. Como o meu está dentro de uma pasta específica, eu informo o caminho.

Este comando irá:

1. Iniciar o LangGraph Server.

2. Usar a função build_graph para compilar seu grafo.

3. Abrir o LangGraph Studio automaticamente no seu navegador.

Explorando a Interface

Ao abrir, você verá seu grafo desenhado na tela, com todos os nós (nodes) e arestas (edges) que definimos no código.

Principais Funcionalidades:

• Visualização do Grafo: A tela principal mostra a estrutura do seu agente.

• Threads de Conversa: No lado esquerdo, você tem as “threads”, que são basicamente históricos de conversa. Cada nova conversa cria uma nova thread, permitindo que você teste diferentes cenários de forma isolada.

• Envio de Mensagens: Você pode criar mensagens (Human, AI, Tool) e enviá-las diretamente para o grafo, simulando a interação do usuário.

• Tracing em Tempo Real: Ao enviar uma mensagem, você pode acompanhar o fluxo de execução. O Studio destaca o nó atual e mostra os dados de entrada e saída para cada passo, incluindo as tool_calls. Isso é extremamente útil para depuração!

• Interface de Chat: Clicando na aba “Chat”, você tem uma interface de conversação mais tradicional, onde pode conversar com seu agente como se fosse um usuário final, com a opção de visualizar os tool_calls e outros dados de debug.

Conclusão

O LangGraph Studio é uma ferramenta poderosa para o desenvolvimento de agentes com LangGraph. Ele transforma a depuração de um processo de “adivinhar e imprimir” para uma experiência visual e interativa.

Embora eu, pessoalmente, ainda faça muita depuração diretamente no código, sei que essa ferramenta vai acelerar imensamente o ciclo de testes para muitos de vocês.

Experimente! Suba o grafo que criamos na aula anterior e veja por si mesmo como é fácil rastrear o fluxo de uma conversa e o acionamento de ferramentas.

Se ainda não fez isso, vai lá ver o vídeo (garanto que vai gostar).