AiqlProvider

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

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

function App() {
  const { token, status } = useToken();

  if (status !== "ready" || !token) return null;

  return (
    <AiqlProvider token={token}>
      <Canvas canvasId="your-canvas-id" />
    </AiqlProvider>
  );
}

<AiqlProvider token={token} theme="dark">
  <Canvas canvasId="your-canvas-id" />
</AiqlProvider>

<AiqlProvider token={token} theme="auto">
  <Canvas canvasId="canvas-1" />
  <Dashboard dashboardId="dashboard-1" />
</AiqlProvider>

import { useRouter } from "next/navigation";
import { AiqlProvider, Chat, useToken } from "@aiql.io/react";
import type { ArtifactOpenEvent } from "@aiql.io/react";

function App() {
  const router = useRouter();
  const { token, status } = useToken();

  if (status !== "ready" || !token) return null;

  function handleArtifactOpen(event: ArtifactOpenEvent) {
    if (event.type === "canvas") {
      router.push(`/brainstorm/${event.id}`);
      return;
    }
    if (event.type === "dashboard") {
      router.push(`/analyze/${event.id}`);
      return;
    }
    if (event.type === "presentation") {
      router.push(`/present/${event.id}`);
    }
  }

  return (
    <AiqlProvider token={token} onArtifactOpen={handleArtifactOpen}>
      <Chat inquiryId={inquiryId} />
    </AiqlProvider>
  );
}