Knowledge Graph

import { KnowledgeGraph } from "@aiql.io/react";

import { AiqlProvider, KnowledgeGraph, useToken } from "@aiql.io/react";

function Graph({ documentId }: { documentId: string }) {
  const { token, status } = useToken();
  if (status !== "ready" || !token) return null;

  return (
    <AiqlProvider token={token}>
      <KnowledgeGraph documentId={documentId} title="Knowledge Graph" />
    </AiqlProvider>
  );
}

<KnowledgeGraph
  documentId={documentId}
  renderLoading={() => <p>Opening knowledge graph…</p>}
  renderError={(message) => <p role="alert">{message}</p>}
  onLoad={() => console.log("iframe loaded")}
  onError={(message) => console.error(message)}
/>

<KnowledgeGraph
  documentId={documentId}
  className="my-knowledge-graph"
  style={{ minHeight: 720, borderRadius: 16 }}
/>