React quickstart

Want to see the finished integration first? Try the live React SDK demo.

1. Install the packages

npm install @dataira/react @dataira/node

@dataira/node is optional; use it here to keep the first server route small.

2. Mint a token on your backend

app/api/dataira-token/route.ts

import { Dataira } from "@dataira/node";

const dataira = new Dataira({
  apiKey: process.env.DATAIRA_API_KEY!,
  baseUrl: process.env.DATAIRA_GATEWAY_URL!,
});

export async function POST(request: Request) {
  const user = await requireUser(request); // Your authentication
  const result = await dataira.createToken({
    endUserId: user.id,
    datasourceId: process.env.DATAIRA_DATASOURCE_ID!,
    scopeColumn: "customer_id",
    scopeValue: user.customerId,
  });
  return Response.json(result);
}

The API key belongs to one Project and one Environment. Never expose it to the browser or prefix it with NEXT_PUBLIC_.

3. Render the workspace

app/analytics/page.tsx

"use client";

import { DatairaInsights, DatairaProvider } from "@dataira/react";
import "@dataira/react/styles.css";

const getToken = async () => {
  const response = await fetch("/api/dataira-token", { method: "POST" });
  if (!response.ok) throw new Error("Could not start Dataira");
  return (await response.json()).token;
};

export default function AnalyticsPage() {
  return (
    <main style={{ height: "100dvh" }}>
      <DatairaProvider baseUrl="https://api.dataira.ai" getToken={getToken}>
        <DatairaInsights examplePrompts={["Revenue by month", "Top products"]} />
      </DatairaProvider>
    </main>
  );
}

Give the host a definite height. Long conversations then scroll inside the SDK instead of growing the surrounding page. The layout adapts to its container for desktop, tablet, and mobile widths.

Next, customize the React SDK.