Canvas

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

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

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

  return (
    <AiqlProvider token={token}>
      <Canvas canvasId={canvasId} title="Brainstorm" />
    </AiqlProvider>
  );
}

import { useRef } from "react";
import type { EmbedChatHandle } from "@aiql.io/react";

const ref = useRef<EmbedChatHandle>(null);

<Canvas
  ref={ref}
  canvasId={canvasId}
  onReady={() => ref.current?.sendMessage("Add a section for risks")}
/>

<Canvas
  canvasId={canvasId}
  renderLoading={() => <p>Opening canvas…</p>}
  renderError={(message) => <p role="alert">{message}</p>}
  onLoad={() => console.log("iframe loaded")}
  onError={(message) => console.error(message)}
/>

<Canvas
  canvasId={canvasId}
  className="my-canvas"
  style={{ minHeight: 720, borderRadius: 16 }}
/>