Edytor wizualny dla agentów LangGraph
LangGraph uruchamia maszynę stanu agenta. Logic Forms zapewnia użytkownikom końcowym płótno. Zamontuj wbudowany edytor React na swoim backendie LangGraph w ciągu 1 dnia i pozwól, aby PM, operatorzy i klienci tworzyli przepływy - bez pisania Python.
LangGraph dla środowiska wykonawczego, Logic Forms dla edytora
LangGraph to oparta na kodzie platforma agenta stanowego firmy LangChain, Inc. - na licencji Python i TypeScript SDK, MIT, z punktami kontrolnymi, podróżami w czasie i prymitywami HITL (interrupt() i Command(resume=...) w Python, nowe polecenie({ CV: ... }) w TypeScript) zapieczętowany. Uruchamia maszynę stanu agenta.
Logic Forms to bezgłowy React SDK, który montuje płótno edytora wewnątrz produktu — tworzenie wizualne, przyjazne dla użytkownika końcowego, nie jest wymagane Python. Daje autorom powierzchnię.
Razem:LangGraph uruchamia agenta. Logic Forms umożliwia osobom niebędącym programistami tworzenie, sprawdzanie i zatwierdzanie przepływów. Oba są oprogramowaniem typu open source, oba są hostowane samodzielnie i oba pozostają na stosie.
Podsumowanie w 1 linii: LangGraph dla środowiska wykonawczego, Logic Forms dla edytora.
Ostatnia aktualizacja: maj 2026 · Źródła: LangGraph dokumenty publiczne, GitHub repozytorium, Synergy Codes prace integracyjne.
Problem parowania
LangGraph uruchamia agenta. Kto buduje UI dla Twoich użytkowników końcowych?
LangGraph to odpowiednie narzędzie dla backendów agentów produkcyjnych. Maszyna stanu, punkty kontrolne, orkiestracja wieloagentowa – wszystko na najwyższym poziomie. Jeśli Twój zespół tworzy agenty AI wymagające trwałego stanu i HITL przepływów pracy, LangGraph zasługuje na swoje miejsce.
Redaktor to twój problem. Twój PM nie może utworzyć przepływu w Python. Twój zespół operacyjny nie może dostroić wykresu w swoim środowisku IDE. Twój klient nie może zobaczyć, co robi jego agent, nie mówiąc już o zmianie tego. LangGraph Studio to debugger przeznaczony dla programistów (internetowy, dostępny poprzez platformę LangSmith / LangGraph) - doskonały dla inżynierów, a nie pakowany jako produkt UI dla osób, które faktycznie korzystają z Twojego produktu.
Logic Forms wypełnia tę lukę. Płótno żyje wewnątrz Twojej aplikacji. Autorzy użytkownika końcowego przepływają wizualnie. Wynikiem jest wpisana definicja wykresu JSON. Twój backend tłumaczy to na wykres stanu LangGraph i uruchamia go. Zachowujesz środowisko wykonawcze LangGraph, któremu już ufasz, i dodajesz edytor, jakiego oczekują Twoi klienci.
Jak LangGraph i Logic Forms pasują do siebie
- Twój produkt montuje komponent WB React - jeden import, jeden komponent.
- Użytkownicy końcowi budują przepływy na kanwie - przeciągaj i upuszczaj węzły, łącz krawędzie, wypełniaj niestandardowe schematy formularzy węzłów.
- WB wyświetla wpisaną definicję wykresu JSON przy zapisie.
- Twój backend tłumaczy JSON na LangGraph węzłów + krawędzie - cienki adapter, patrz przykładowy kod poniżej.
- LangGraph kompiluje i wykonuje z pełnym zarządzaniem stanem (punkty kontrolne, HITL, podróże w czasie).
| Warstwa | Temporal | Logic Forms |
|---|---|---|
| Maszyna stanu agenta | Tak | Nie |
| Płótno wizualne | Nie | Tak |
| Punkt kontrolny + powtórka | Tak | Nie |
| Tworzenie przez użytkownika końcowego | Nie | Tak |
| HITL operacje podstawowe (przerwanie, polecenie.wznów) | Tak | UI dla nich |
| Niestandardowe schematy formularzy węzłów | Nie | Tak |
| Orkiestracja wieloagentowa | Tak | UI za to |
Co Logic Forms dodaje do twojego stosu LangGraph
Kanwa wizualna dla osób niebędących programistami - PM, operatorzy i klienci mogą tworzyć przepływy bez wpisywania Python.
Wbudowany komponent React - zamontuj go w swoim produkcie, w swoim systemie projektowym, na swoim adresie URL.
Niestandardowe schematy formularzy węzłów- wpisane dane wejściowe, które użytkownicy końcowi wypełniają (model, temperatura, monit, źródło pobierania, cokolwiek).
Produkcja UX wypieczona- cofanie / ponawianie, wyznaczanie krawędzi, automatyczne układanie, minimapa, przyciąganie do siatki.
Żetony tematyczne- Zmienne CSS pasujące do systemu projektowania Twojego produktu.
Nie jest wymagana wiedza Python ani LangChain dla autorów - umowa JSON jest jedyną rzeczą, której dotykają pośrednio.
Ogólne kształty węzłów obok kształtów AI - dane, zatwierdzenie, węzły specyficzne dla domeny są najwyższej klasy, a nie obejścia.
Przykład kodu: od canvas do LangGraph w 30 liniach
Minimalne okablowanie. Dostosuj się do swojego schematu, swojego uwierzytelnienia i miejsca na dysku.
importuj { WorkflowBuilder } z „@workflowbuilder/sdk”;
typ importu {PaletteItemOrGroup} z „@workflowbuilder/sdk”;
const typy węzłów: PaletteItemOrGroup[] = [
{ wpisz: 'llm', etykieta: 'LLM', kategoria: 'AI' },
{ typ: „retriever”, etykieta: „retriever”, kategoria: „AI” },
{ wpisz: „bramka zatwierdzenia”, etykieta: „bramka zatwierdzenia”, kategoria: „Człowiek w pętli” },
{ typ: „router”, etykieta: „Router”, kategoria: „Kontrola przepływu” },
];
funkcja eksportu AgentEditor({ agentId }: { agentId: string }) {
powrót (
<WorkflowBuilder.Korzeń
nazwa={`agent-${agentId}`}
nodeTypes={nodeTypes}
integracja={{
strategia: „api”,
punkty końcowe: {
wczytaj: `/api/agents/${agentId}`,
zapisz: `/api/agents/${agentId}`,
},
}}
/>
);
}z langgraph.graph importuj StateGraph, START, END
z langgraph.checkpoint.postgres importuj PostgresSaver
od wpisania import TypedDict
klasa AgentState(TypedDict):
wejście: ul
pobrano: lista
wyjście: ul
def wb_json_to_langgraph(graph_json: dict) -> StateGraph:
"""Przetłumacz WB płótno JSON na wykres stanu LangGraph."""
g = Graf Stanu (Stan Agenta)
dla węzła w graph_json["nodes"]:
g.add_node(node["id"], NODE_HANDLERS[węzeł["typ"]](węzeł["config"]))
dla krawędzi w graph_json["edges"]:
g.add_edge(krawędź["źródło"], krawędź["cel"])
powrót G
@app.put("/api/agents/{id_agenta}")
async def save_agent(id_agenta: str, graph_json: dict):
wykres = wb_json_to_langgraph(graph_json)
skompilowany = graph.compile(checkpointer=PostgresSaver.from_conn_string(DB_URL))
save_compiled_agent(id_agenta, skompilowany)
zwróć {"status": "ok"}Pełny adapter referencyjny znajduje się w naszym przykładowym repozytorium — link w Szybkim uruchomieniu poniżej.
Gdzie LangGraph + Logic Forms się opłaca
Przepływy zatwierdzania typu „człowiek w pętli”.
LangGraph dostarcza HITL prymitywów - przerwanie() wstrzymuje wykres, Command.resume kontynuuje działanie z wartością podaną przez człowieka. W kodzie są to dwie funkcje. Dla użytkownika końcowego jest to przepływ na kanwie z węzłem bramki zatwierdzającej, przypisaniem recenzenta i etapem powiadomienia. Logic Forms udostępnia typy węzłów; Twój adapter mapuje je na przerwania LangGraph. PM są autorami procesu zatwierdzania; LangGraph wykonuje to. Recenzent nigdy nie widzi Python.
Kreatorzy agentów skierowanych do klienta
Twoje B2B SaaS sprzedaje agentów AI. Twoi klienci — analitycy korporacyjni, wewnętrzne zespoły automatyzacji, właściciele branż — muszą skonfigurować własne przepływy. Nie są deweloperami. Możesz albo zbudować niestandardowe płótno (3-6 miesięcy prac inżynieryjnych przed dodaniem pojedynczego węzła LLM), albo osadzić Logic Forms i uruchomić przepływy stworzone przez klienta na LangGraph. Athena Intelligence wybrał drugą ścieżkę - 1 dzień na integrację, 1 tydzień na dopracowanie.
Wizualne debugowanie produkcji dla zespołów produktowych
LangGraph Studio to debuger przeznaczony dla programistów — inspekcja grafów, podróże w czasie z rozwidlaniem, szybkie dostrajanie, eksperymenty ze zbiorami danych, wszystko dla inżynierów. Twój zespół operacyjny musi także widzieć, co się dzieje: który węzeł jest uruchomiony, gdzie przepływ został wstrzymany, przez jakie dane przepłynęły. Logic Forms żyje w Twoim produkcie i renderuje ten sam grafowy model mentalny dla osób niebędących programistami. Ten sam stan źródła prawdy, inna publiczność.
Orkiestracja wieloagentowa UI
Wzorce nadzorców i roju są potężne w LangGraph, ale niewidoczne dla osób niebędących programistami. Logic Forms renderuje topologię agenta - który podagent wywołuje, jaki jest warunek przekazania, gdzie znajduje się osoba nadzorująca. Menedżerowie produktu mogą analizować system bez czytania kodu. Kiedy potrzebują nowego subagenta, szkicują go na płótnie, a adapter łączy go z przełożonym.
Athena Intelligence: edytor wizualny na zapleczu agenta
Specyficzny backend Atheny to niestandardowe środowisko wykonawcze Python, a nie LangGraph, ale wzorzec architektoniczny jest identyczny – autor użytkownika końcowego przepływa po wizualnym płótnie wewnątrz produktu Athena, a backend tłumaczy i wykonuje. Parowanie LangGraph dziedziczy ten sam kształt.
Athena Intelligenceto działająca w USA platforma sztucznej inteligencji wspierana przez VC służąca do analizy danych dotyczących kwestii prawnych i energii odnawialnej. Ich klienci - analitycy korporacyjni, a nie programiści - muszą budować wieloetapowe potoki LLM bez pisania Python. Przed Logic Forms Athena oferowała Python SDK w środowisku wykonawczym typu lambda. Użytkownicy końcowi musieli napisać kod. Model ten nie był dostosowany do klientów niebędących programistami, dla których platforma została zbudowana.
Jeśli używasz LangGraph jako środowiska wykonawczego agenta, wzorzec integracji jest taki sam. Kształt adaptera referencyjnego (zobacz przykładowy kod powyżej) pokazuje, jak WB JSON jest odwzorowywane na wywołania langgraph.StateGraph — jedynym dostarczonym dzisiaj adapterem wykonawczym w backendie WB Reference jest Temporal, więc adapter LangGraph jest implementacją referencyjną, którą łączysz z pracownikiem, a nie pakietem typu drop-in.
Ceny
Cennik: para bez płacenia dwukrotnie
LangGraph
OSS:bezpłatnie do MIT, własny hosting, brak opłat za użytkowanie.
Platforma LangGraph (zarządzany czas wykonania, wymaga LangSmith): Plus jest płatny zgodnie z rzeczywistym użyciem i kosztuje 0,001 USD za wykonany węzeł plus minuty czuwania (~0,0007 USD/min programowanie, ~0,0036 USD/min prod) i wymaga stanowiska LangSmith Plus; Przedsiębiorstwo jest niestandardowe.
LangSmitha (oddzielne SKU obserwowalności, platforma Gates Plus): Programista jest bezpłatny z 5 tys. śladów bazowych/mies. i 1 stanowiskiem; Plus to 39 USD/użytkownika/mies. z 10 tys. podstawowych śladów/mies. i nieograniczoną liczbą miejsc; Przedsiębiorstwo jest niestandardowe.
Logic Forms
Licencja korporacyjna: 6990 EUR jednorazowo
React SDK + referencyjny backend z dołączonym przykładem adaptera LangGraph.
Self-host na Apache 2.0: bezpłatny, bez dodatku, white-label dozwolony.
Brak opłat za obszar roboczy, stanowisko lub wykonanie po stronie redaktora.
LangGraph opłaty po stronie wykonawczej (wdrożenia, ślady, obserwowalność). Logic Forms pobiera jednorazową opłatę za redaktora SDK. Żadnego podwójnego fakturowania w tym samym wymiarze.
Zobacz pełny cennik Logic Forms.
Trzy kroki do pierwszego przepływu LangGraph
Przeczytaj przewodnik integracji
Wzorzec adaptera LangGraph, kontrakt JSON i rejestr typu węzła. Otwórz dokumenty.
Sklonuj repozytorium referencyjne
Działające płótno plus backend Python z adapterem LangGraph, gotowe do kompleksowego działania.Zobacz na GitHub.
Zarezerwuj recenzję architektury
30 minut z naszym zespołem. Podczas rozmowy szkicujemy kształt integracji. Żadnych slajdów. Zarezerwuj tutaj.
STUDIA PRZYPADKÓW
FAQ
LangGraph + Logic Forms, odpowiedział
- Czy Logic Forms zastępuje LangGraph?
Nie. Łączą się w pary. LangGraph uruchamia maszynę stanu agenta - punkty kontrolne, podróże w czasie, HITL operacje podstawowe, orkiestracja wielu agentów. Logic Forms to edytor, w którym autorami są Twoi użytkownicy końcowi. Adapter referencyjny pokazuje okablowanie: WB generuje wpisany wykres JSON, twój backend tłumaczy go na LangGraph StateGraph i kompiluje go. Obydwa statki MIT lub Apache 2.0, oba z własnym hostem, bez blokady dostawców po obu stronach.
- Czy mogę użyć Logic Forms bez LangGraph?
Tak. Logic Forms jest niezależne od czasu wykonania. Referencyjny backend jest dostarczany z adapterem Temporal; LangGraph jest jednym z kilku obsługiwanych środowisk wykonawczych. Wybierz to, co pasuje do Twojego stosu. Jeśli nie jesteś jeszcze na LangGraph, nadal możesz zamontować Logic Forms i podłączyć go do niestandardowego modułu wykonującego, Inngest lub dowolnego backendu, który wykorzystuje definicję wykresu JSON.
- Co to jest LangGraph?
LangGraph to oparta na kodzie platforma agenta stanowego firmy LangChain, Inc., na licencji MIT. Modeluje wieloetapowe aplikacje LLM jako wykresy z pierwszorzędnym zarządzaniem stanem - wskaźnikami kontrolnymi, debugowaniem podróży w czasie i operacjami podstawowymi HITL (interrupt() plus Command(resume=...) w Python lub nowe polecenie({ CV: ... }) w TypeScript). Jest to środowisko wykonawcze i biblioteka, a nie produkt UI. Tworzenie treści przez użytkownika końcowego wymaga osobnej warstwy edytora.
- Dlaczego LangGraph potrzebuje edytora wizualnego?
Wykresy LangGraph są zdefiniowane w kodzie Python lub TypeScript. To działa dla programistów. Nie sprawdzi się to w przypadku kierownika projektu, który musi zaprojektować proces zatwierdzania, monitów zespołu operacyjnego o dostrojenie lub klienta, który kupuje Twój produkt AI i zamierza go skonfigurować. LangGraph Studio to debuger przeznaczony dla programistów, a nie produkt UI dla użytkowników końcowych.
- Jak Logic Forms integruje się z LangGraph?
Logic Forms eksportuje wpisaną definicję wykresu JSON, gdy autor zapisuje płótno. Twój backend odczytuje to JSON i konstruuje LangGraph StateGraph - jeden węzeł na JSON węzeł, jedna krawędź na JSON krawędź, niestandardowa konfiguracja na typ węzła. Skompiluj wykres za pomocą wskaźnika kontrolnego (Postgres, Redis, SQLite, w pamięci) i uruchom. Zobacz przykładowy kod powyżej.
- Czy LangGraph Studio już to robi?
LangGraph Studio to narzędzie skierowane do programistów (internetowe, dostępne poprzez platformę LangSmith / LangGraph) - inspekcja grafów, podróże w czasie z rozwidlaniem, szybkie dostrajanie, eksperymenty ze zbiorami danych, obserwowalność za pośrednictwem LangSmith. Doskonały dla inżynierów. Nie jest on dostarczany jako produkt UI dla użytkowników końcowych, nie można go osadzić w aplikacji i nie jest przeznaczony do tworzenia przepływów przez osoby niebędące programistami. Logic Forms wypełnia tę lukę.
- Ile kosztuje Logic Forms w połączeniu z LangGraph?
6990 EUR jednorazowo za licencję Logic Forms Enterprise. Obejmuje to React SDK, referencyjny backend z przykładami adapterów dla Temporal i LangGraph oraz funkcje produkcyjne UX (cofywanie/ponawianie, routing brzegowy, automatyczny układ, minimapa, motywy), których osiągnięcie jakości produkcyjnej zajęłoby setki godzin inżynieryjnych. LangGraph ładuje się osobno po stronie środowiska wykonawczego. Żadnego podwójnego fakturowania w tym samym wymiarze.
Gotowy, aby dodać edytor wizualny do swoich agentów LangGraph?
30-minutowy przegląd architektury powie Ci, czy Logic Forms pasuje do Twojej konfiguracji LangGraph. Naszkicujemy adapter podczas rozmowy. Żadnych slajdów.