https://github.com/hridesh-net/langgraph_extension
LangGraph Visualizer is a Visual Studio Code (VS Code) extension that provides real-time visual representations of multi-agent LangGraph projects. It enables developers to intuitively understand and monitor the flow and interactions of agents within their projects.
https://github.com/hridesh-net/langgraph_extension
ai extension langchain langgraph typescript vs-code vscode vscode-extension
Last synced: 6 months ago
JSON representation
LangGraph Visualizer is a Visual Studio Code (VS Code) extension that provides real-time visual representations of multi-agent LangGraph projects. It enables developers to intuitively understand and monitor the flow and interactions of agents within their projects.
- Host: GitHub
- URL: https://github.com/hridesh-net/langgraph_extension
- Owner: hridesh-net
- License: other
- Created: 2024-12-28T02:22:44.000Z (12 months ago)
- Default Branch: ext-master
- Last Pushed: 2025-01-26T01:12:15.000Z (11 months ago)
- Last Synced: 2025-03-21T13:27:51.852Z (9 months ago)
- Topics: ai, extension, langchain, langgraph, typescript, vs-code, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 1.45 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# LangGraph Visualizer
LangGraph Visualizer is a Visual Studio Code (VS Code) extension that provides real-time visual representations of multi-agent LangGraph projects. It enables developers to intuitively understand and monitor the flow and interactions of agents within their projects.
> **Note:** After Installation just use command ```cmd+shift+l```To se the Visual representaion
## Features
- **Real-Time Visualization:** Automatically updates the graph as the langgraph.json file changes, reflecting the current state of your project.
- **Interactive Interface:** Allows users to explore agent nodes and their connections within the graph.
- **Seamless Integration:** Easily integrates into your VS Code workflow, enhancing productivity without disrupting your development process.
## Directory Structure
```bash
.
├── CHANGELOG.md
├── README.md
├── eslint.config.mjs
├── images
│ └── Langgraph_header.png
├── media
│ ├── main.js
│ └── node.css
├── package-lock.json
├── package.json
├── src
│ ├── extension.ts
│ ├── test
│ │ └── extension.test.ts
│ └── webview
│ └── ext-app
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── App.css
│ │ ├── App.test.tsx
│ │ ├── App.tsx
│ │ ├── components
│ │ │ ├── CustomCard.tsx
│ │ │ ├── Diagram.tsx
│ │ │ ├── Graph.tsx
│ │ │ ├── InlineEditableText.tsx
│ │ │ └── ResourceSidebar.tsx
│ │ ├── global.d.ts
│ │ ├── index.css
│ │ ├── index.tsx
│ │ ├── logo.svg
│ │ ├── react-app-env.d.ts
│ │ ├── reportWebVitals.ts
│ │ └── setupTests.ts
│ ├── tailwind.config.js
│ └── tsconfig.json
├── tailwind.config.js
├── tsconfig.json
└── vsc-extension-quickstart.md
```
## Example
----
