Skip to main content

​
Graph Serialization

lib/graph-serializer.ts handles converting between React Flow’s internal node format and the compact SimpleNode/SimpleEdge format used for storage, AI editing, and agent config conversion.

​
Types

​
SimpleNode

type SimpleNode = {
  id: string
  nodeType: string
  provider?: string
  [key: string]: unknown  // All user-configured parameters
}

​
SimpleEdge

type SimpleEdge = {
  source: string
  sourceHandle: string
  target: string
  targetHandle: string
}

​
ExportFormat

type ExportFormat = {
  version: string
  name: string
  exportedAt: string
  nodes: (SimpleNode & { position: { x: number; y: number } })[]
  edges: SimpleEdge[]
}

​
Key functions

​
serializeGraph(nodes, edges)

Converts React Flow nodes to SimpleNode[]. Strips all UI metadata (label, category, handles, icon, position) and keeps only user-configured parameter values.

​
deserializeGraphFromExport(data)

Reconstructs a React Flow graph from an exported JSON file. Calls enrichNewNode() to restore template metadata (label, subtitle, handles) from nodeTemplates.ts.

​
applyOperations(nodes, edges, operations)

Applies a list of EditOperation[] (from the AI generator) to the current graph state: 
type EditOperation =
  | { type: "update_node"; id: string; [key: string]: unknown }
  | { type: "add_node"; nodeType: string; provider?: string; [key: string]: unknown }
  | { type: "remove_node"; id: string }
  | { type: "add_edge"; source: string; sourceHandle: string; target: string; targetHandle: string }
  | { type: "remove_edge"; source: string; target: string }
Returns { nodes, edges, needsArrange } — needsArrange: true signals the canvas to auto-layout after node additions or deletions.

​
enrichNewNode(node)

Converts a SimpleNode into a full React Flow Node by:
  1. Looking up the template in nodeTemplates.ts
  2. Filling in default parameter values
  3. Attaching template metadata (label, subtitle, handles, category, icon)
  4. Setting the initial position to { x: 0, y: 0 }