https://github.com/tubone24/langviz-studio
LangViz-Studio is an observability toolkit for LangGraph workflows.
https://github.com/tubone24/langviz-studio
langgraph observability
Last synced: 7 months ago
JSON representation
LangViz-Studio is an observability toolkit for LangGraph workflows.
- Host: GitHub
- URL: https://github.com/tubone24/langviz-studio
- Owner: tubone24
- License: mit
- Created: 2025-01-18T10:33:26.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-18T13:40:57.000Z (10 months ago)
- Last Synced: 2025-04-20T07:49:45.908Z (7 months ago)
- Topics: langgraph, observability
- Language: TypeScript
- Homepage:
- Size: 22.4 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LangViz-studio
LangViz-Studio is an observability toolkit for [LangGraph](https://pypi.org/project/langgraph/) workflows.
It enables you to track the execution states, node transitions, and conditional edges of your state-based flows or agent pipelines in real-time, sending all data asynchronously to a customizable endpoint (e.g., a Next.js server) for visualization.
## Overview
LangViz-Studio (Python side) collects runtime states (node start/end, edges, conditional branches, etc.) in an ObservabilityStateGraph and sends JSON logs to Next.js endpoints. These logs are then stored or displayed so you can track the flow’s execution in real time.
Common use cases include:
Visualizing which node your agent or state-machine is on
Inspecting how many times each edge is used
Monitoring large workflows in real-time
## Key Features
- GraphObservability
- Automatically records and sends node start/end events, edge transitions, and conditional branch usage.
- Maintains a unique graphId (UUID by default) and an optional friendly graph_name.
- Sends data to a configured endpoint (http://localhost:3000 by default).
- ObservabilityStateGraph
- A subclass of langgraph.graph.StateGraph that automatically wraps node functions and edge definitions so all observability data is captured with no extra code.
- Just use add_node(...), add_edge(...), add_conditional_edges(...) as normal, and your graph’s runtime states will be sent in real-time for visualization.
- Asynchronous and Non-blocking
- Uses an internal background thread running an asyncio event loop to POST updates via httpx.AsyncClient, ensuring minimal impact on your main workflow thread.
## Quick Start
```bash
# 1) Spin up the local MySQL DB:
docker-compose up -d
# 2) Install packages:
npm install
# 3) Run Prisma migrations:
npx prisma migrate dev
# 4) Start the Next.js server:
npm run dev
```
## DEMO
https://github.com/user-attachments/assets/d7e1e6cd-76d3-4904-98a6-4f97f66258b4
## License
MIT License. See [LICENSE](./LICENSE) for details.
## Contributing
We welcome PRs and issues! Feel free to open an Issue or Pull Request if you want to fix a bug, suggest a feature, or improve documentation.
Enjoy tracking your flows in real time with LangViz-Studio!