LangGraph Studio menawarkan cara baru untuk mengembangkan aplikasi LLM dengan menyediakan IDE agen khusus yang memungkinkan visualisasi, interaksi, dan debugging aplikasi agen yang kompleks
Dengan grafik visual dan kemampuan untuk mengedit status, Anda dapat lebih memahami alur kerja agen dan melakukan iterasi lebih cepat. LangGraph Studio terintegrasi dengan LangSmith sehingga Anda dapat berkolaborasi dengan rekan satu tim untuk men-debug mode kegagalan.
Saat dalam versi Beta, LangGraph Studio tersedia gratis untuk semua pengguna LangSmith pada tingkat paket apa pun. Daftar ke LangSmith di sini.
Unduh file .dmg terbaru dari LangGraph Studio dengan mengklik di sini atau dengan mengunjungi halaman rilis.
Saat ini, hanya macOS yang didukung. Dukungan Windows dan Linux akan segera hadir. Kami juga bergantung pada Docker Engine untuk dapat berjalan, saat ini kami hanya mendukung runtime berikut:
LangGraph Studio memerlukan pembuatan buruh pelabuhan versi 2.22.0+ atau lebih tinggi. Harap pastikan Anda telah menginstal dan menjalankan Docker Desktop atau Orbstack sebelum melanjutkan.
Untuk menggunakan LangGraph Studio, pastikan Anda telah menyiapkan proyek dengan aplikasi LangGraph.
Untuk contoh ini, kita akan menggunakan contoh repositori di sini yang menggunakan file requirements.txt untuk dependensi:
git clone https://github.com/langchain-ai/langgraph-example.git Jika Anda ingin menggunakan file pyproject.toml untuk mengelola dependensi, Anda dapat menggunakan contoh repositori ini.
git clone https://github.com/langchain-ai/langgraph-example-pyproject.git Anda kemudian ingin membuat file .env dengan variabel lingkungan yang relevan:
cp .env.example .env Anda kemudian harus membuka file .env dan mengisi dengan kunci OpenAI, Anthropic, dan Tavily API yang relevan.
Jika Anda sudah mengaturnya di lingkungan Anda, Anda dapat menyimpannya ke file .env ini dengan perintah berikut:
echo " OPENAI_API_KEY= " $OPENAI_API_KEY " " > .env
echo " ANTHROPIC_API_KEY= " $ANTHROPIC_API_KEY " " >> .env
echo " TAVILY_API_KEY= " $TAVILY_API_KEY " " >> .envCatatan: JANGAN tambahkan LANGSMITH_API_KEY ke file .env. Kami akan melakukan ini secara otomatis untuk Anda saat Anda mengautentikasi, dan pengaturan ini secara manual dapat menyebabkan kesalahan.
Setelah Anda menyiapkan proyek, Anda dapat menggunakannya di LangGraph Studio. Ayo selami!
Saat Anda membuka aplikasi desktop LangGraph Studio untuk pertama kalinya, Anda harus login melalui LangSmith.
Setelah Anda berhasil mengautentikasi, Anda dapat memilih folder aplikasi LangGraph yang akan digunakan — Anda dapat menarik dan melepas atau memilihnya secara manual di pemilih file. Jika Anda menggunakan proyek contoh, foldernya adalah langgraph-example .
Penting
Direktori aplikasi yang Anda pilih harus berisi file langgraph.json yang dikonfigurasi dengan benar. Lihat informasi selengkapnya tentang cara mengonfigurasinya di sini dan cara menyiapkan aplikasi LangGraph di sini.
Setelah Anda memilih proyek yang valid, LangGraph Studio akan memulai server API LangGraph dan Anda akan melihat UI dengan grafik yang dirender.
Sekarang kita dapat menjalankan grafiknya! LangGraph Studio memungkinkan Anda menjalankan grafik dengan input dan konfigurasi berbeda.
Untuk memulai proses baru:
agent . Daftar grafik sesuai dengan kunci graphs dalam konfigurasi langgraph.json Anda.Input .Submit untuk memanggil grafik yang dipilih.Video berikut menunjukkan cara memulai proses baru:
Untuk mengubah konfigurasi pengoperasian grafik tertentu, tekan tombol Configurable di bagian Input . Lalu klik Submit untuk menjalankan grafik.
Penting
Agar menu Configurable dapat terlihat, pastikan untuk menentukan skema konfigurasi saat membuat StateGraph . Anda dapat membaca lebih lanjut tentang cara menambahkan skema konfigurasi ke grafik Anda di sini.
Video berikut menunjukkan cara mengedit konfigurasi dan memulai proses baru:
Saat Anda membuka LangGraph Studio, Anda secara otomatis akan berada di jendela thread baru. Jika Anda sudah membuka thread, ikuti langkah-langkah berikut untuk membuat thread baru:
+ untuk membuka menu rangkaian pesan baru.Video berikut menunjukkan cara membuat thread:
Untuk memilih topik:
New Thread / Thread <thread-id> di bagian atas panel sebelah kanan untuk membuka dropdown daftar thread.Video berikut menunjukkan cara memilih thread:
LangGraph Studio memungkinkan Anda mengedit status thread dan membagi thread untuk membuat eksekusi grafik alternatif dengan status yang diperbarui. Untuk melakukannya:
Fork untuk memperbarui status dan membuat eksekusi grafik baru dengan status yang diperbarui.Video berikut menunjukkan cara mengedit thread di studio:
Anda mungkin ingin mengeksekusi grafik Anda langkah demi langkah, atau menghentikan eksekusi grafik sebelum/setelah node tertentu dijalankan. Anda dapat melakukannya dengan menambahkan interupsi. Interupsi dapat diatur untuk semua node (yaitu berjalan melalui eksekusi agen langkah demi langkah) atau untuk node tertentu. Interupsi di LangGraph Studio berarti eksekusi grafik akan terganggu sebelum dan sesudah node tertentu berjalan.
Untuk menjalani eksekusi agen langkah demi langkah, Anda dapat menambahkan interupsi ke semua atau sebagian node dalam grafik:
Interrupt .Interrupt on all .Video berikut menunjukkan cara menambahkan interupsi ke semua node:
+ muncul di sisi kiri node.+ untuk memanggil grafik yang dipilih.Input /konfigurasi dan klik SubmitVideo berikut menunjukkan cara menambahkan interupsi ke node tertentu:
Untuk menghilangkan interupsi, cukup ikuti langkah yang sama dan tekan tombol x di sisi kiri node.
Selain melakukan interupsi pada node dan mengedit status grafik, Anda mungkin ingin mendukung alur kerja human-in-the-loop dengan kemampuan memperbarui status secara manual. Berikut adalah versi modifikasi dari agent.py dengan agent dan node human , dimana eksekusi grafik akan terganggu pada node human . Ini memungkinkan Anda mengirim masukan sebagai bagian dari simpul human . Ini dapat berguna ketika Anda ingin agen mendapatkan masukan pengguna. Ini pada dasarnya menggantikan cara Anda menggunakan input() jika Anda menjalankan ini dari baris perintah.
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" ])Video berikut menunjukkan cara mengirim pembaruan status secara manual (yaitu pesan dalam contoh kita) ketika terputus:
LangGraph Studio memungkinkan Anda mengubah konfigurasi proyek Anda ( langgraph.json ) secara interaktif.
Untuk mengubah konfigurasi dari studio, ikuti langkah-langkah berikut:
Configure di kanan bawah. Ini akan membuka menu konfigurasi interaktif dengan nilai yang sesuai dengan langgraph.json yang ada.Save and Restart untuk memuat ulang server LangGraph API dengan konfigurasi yang diperbarui.Video berikut menunjukkan cara mengedit konfigurasi proyek dari studio:
Dengan LangGraph Studio Anda dapat memodifikasi kode grafik dan menyinkronkan perubahan secara langsung ke grafik interaktif.
Untuk mengubah grafik Anda dari studio, ikuti langkah-langkah berikut:
Open in VS Code di kanan bawah. Ini akan membuka proyek yang sedang dibuka di studio LangGraph..py tempat grafik yang dikompilasi ditentukan atau dependensi terkait.Video berikut menunjukkan cara membuka editor kode dari studio:
Setelah Anda memodifikasi kode yang mendasarinya, Anda juga dapat memutar ulang sebuah node di grafik. Misalnya, jika agen merespons dengan buruk, Anda dapat memperbarui implementasi simpul agen di editor kode dan menjalankannya kembali. Hal ini dapat mempermudah perulangan pada agen yang sudah berjalan lama.
LangGraph Studio mengandalkan Docker Compose untuk menjalankan API, Redis, dan Postgres, yang kemudian membuat jaringannya sendiri. Jadi, untuk mengakses layanan lokal Anda perlu menggunakan host.docker.internal sebagai nama host, bukan localhost . Lihat #112 untuk lebih jelasnya.
Secara default, kami mencoba membuat gambar sekecil mungkin, sehingga beberapa dependensi seperti gcc atau build-essentials hilang dari gambar dasar. Jika Anda perlu menginstal dependensi tambahan, Anda dapat melakukannya dengan menambahkan instruksi Dockerfile tambahan di bagian dockerfile_lines pada file langgraph.json Anda:
{
"dockerfile_lines": [
"RUN apt-get update && apt-get install -y gcc"
]
}
Lihat Cara menyesuaikan Dockerfile untuk detail selengkapnya.
