jsongraph-builder

A modern, open-source tool for building JSON graphs through an interactive conversation with a chatbot powered by Langgraph. Using Vite, OpenAI, XYFlow/React, and Dagree, this project dynamically generates a structured graph of nodes and edges, making it easy to visualize and manage complex workflows.

---

Table of Contents

• jsongraph-builder
  • Table of Contents
  • Overview
  • Tech Stack
  • Installation
  • Usage
    • Development Server
    • Building the Project
  • License

---

Overview

The jsongraph-builder project leverages a simple Langgraph agent (using createReactAgent) that triggers a tool to generate a JSON graph structure. The graph consists of nodes and edges represented by the following type:

export type IGraph = {
  nodes: {
    id: string;
    nodeId: string;
  }[];
  edges: {
    sourceId: string;
    targetId: string;
  }[];
};

These nodes get mapped to a predefined list of nodes, grouped by category, such as Trigger Nodes, API Integration Nodes, File Processing Nodes, Data Processing Nodes, Database & Query Nodes, Logic & Transformation Nodes, and Output Nodes.

---

Tech Stack

• Vite - Next Generation Frontend Tooling.
• React - A JavaScript library for building user interfaces.
• Langgraph - For creating and managing graph-based workflows.
• OpenAI - To power AI features and integrations.
• XYFlow/React - For advanced flow management in React.
• Dagree - For graph layout and visualization.

---

Installation

Clone the repository and install the dependencies:

git clone https://github.com/Leniolabs/jsongraph-builder.git
cd jsongraph-builder
npm install

Setup your OPENAI_API_KEY under the .env (copy the .env.example)

---

Usage

Development Server

Start the development server with:

npm run dev

This will launch the Vite development server.

Building the Project

To build the project for deployment:

docker-compose build

---

License

This project is open source under the MIT License.

---

Happy coding!