LangGraph.js Workflow Visualization Graph

gistfile1.txt

// Receive the compiled app graph

import Image from 'next/image';

export interface GraphApp {
  getGraphAsync(): Promise<{
    drawMermaidPng(): Promise<{
      arrayBuffer(): Promise<ArrayBuffer>;
    }>;
  }>;
}

export default async function GraphVisualize({ app }: { app: GraphApp }) {
  try {
    const representation = await app.getGraphAsync();
    const image = await representation.drawMermaidPng();
    const arrayBuffer = await image.arrayBuffer();
    const buffer = new Uint8Array(arrayBuffer);

    // Convert buffer to base64 string
    const base64String = Buffer.from(buffer).toString('base64');
    const imageUrl = `data:image/png;base64,${base64String}`;

    return (
      <div className="graph-container">
        <div>
          <Image
            src={imageUrl}
            alt="Workflow Graph"
            width={500}
            height={300}
            className="graph-image"
          />
        </div>
      </div>
    );
  } catch (error) {
    console.error('Error generating graph:', error);
    return (
      <div className="graph-container">
        <pre>{error instanceof Error ? error.message : JSON.stringify(error)}</pre>
      </div>
    );
  }
}