toon-package

LangGraph Integration Example

This example shows how to integrate Toon Agent Bridge with LangGraph.

Overview

LangGraph is a library for building stateful, multi-actor applications with LLMs. This integration allows you to:

  1. Export LangGraph workflows as agents.json
  2. Stream LangGraph state changes as events
  3. Visualize LangGraph execution in real-time

Setup

cd examples/langgraph-integration
pip install -r requirements.txt
python server.py

Integration Pattern

from langgraph.graph import StateGraph
from toon_backend import create_server, EventEmitter
from toon_backend.event_emitter import EventType, AgentEvent

# Create your LangGraph workflow
workflow = StateGraph(...)

# Create event emitter
event_emitter = EventEmitter()

# Hook into LangGraph callbacks
def on_state_change(state):
    event_emitter.emit(AgentEvent(
        event_type=EventType.STATE_UPDATE,
        event_id=f"state_{time.time()}",
        timestamp=int(time.time() * 1000),
        state=state
    ))

# Convert LangGraph to agents.json format
# (Implementation details depend on LangGraph API)

Complete Integration Example

server.py

from langgraph.graph import StateGraph
from toon_backend import create_server, EventEmitter
from toon_backend.event_emitter import EventType, AgentEvent
import time

# Create your LangGraph workflow
workflow = StateGraph(...)

# Create event emitter
event_emitter = EventEmitter()

# Hook into LangGraph callbacks
def on_state_change(state):
    event_emitter.emit(AgentEvent(
        event_type=EventType.STATE_UPDATE,
        event_id=f"state_{int(time.time() * 1000)}",
        timestamp=int(time.time() * 1000),
        state=state
    ))

# Convert LangGraph to agents.json format
# (Implementation details depend on LangGraph API)

# Create server
server = await create_server({
    'schema_source': './agents.json',
    'port': 8000,
    'cors': True,
})

await server.start()

Frontend Integration

Use the React components to visualize LangGraph execution:

import { AgentVisualizer } from '@programsmagic/toon-frontend';
import '@programsmagic/toon-frontend/styles';

function App() {
  return (
    <AgentVisualizer
      url="http://localhost:8000/events"
      protocol="sse"
      showTimeline={true}
      showFlowDiagram={true}
    />
  );
}

Expected Output

When LangGraph state changes, you’ll see events like:

{
  "type": "STATE_UPDATE",
  "id": "state_1234567890",
  "timestamp": 1234567890,
  "state": {
    "nodes": [...],
    "edges": [...]
  }
}

Troubleshooting

State Not Updating

Problem: State changes not appearing in frontend.

Solution:

Integration Errors

Problem: Integration with LangGraph fails.

Solution:

Next Steps