Integrations

Next.js

Integrate Lelu into a Next.js application using Route Handlers (App Router) or API Routes (Pages Router). This guide also covers adding the approval UI widget to your dashboard.

Installation

terminal
npm install @lelu-auth/lelu

Route Handler (App Router)

Gate a server action or route handler before executing a sensitive AI task.

app/api/agent-action/route.ts
import { LeluClient } from "@lelu-auth/lelu";
import { NextResponse } from "next/server";

const lelu = new LeluClient({
  baseUrl: process.env.LELU_ENGINE_URL!,
  apiKey: process.env.LELU_API_KEY!,
});

export async function POST(request: Request) {
  const { action, confidence } = await request.json();

  const decision = await lelu.authorize({ action, confidence });

  if (decision.requiresHumanReview) {
    // Return 202 and let the client poll for approval
    return NextResponse.json(
      { status: "pending", requestId: decision.requestId },
      { status: 202 }
    );
  }

  if (!decision.allowed) {
    return NextResponse.json({ error: "Denied" }, { status: 403 });
  }

  // Proceed with the action
  return NextResponse.json({ status: "allowed" });
}

Approval UI Component

The Lelu React SDK includes a pre-built LeluApprovalUI component you can embed in your admin dashboard. It polls the engine for pending approvals.

app/admin/approvals/page.tsx
"use client";
import { LeluApprovalUI } from "lelu/react";

export default function ApprovalsPage() {
  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold mb-6">Pending AI Approvals</h1>
      <LeluApprovalUI
        engineUrl={process.env.NEXT_PUBLIC_LELU_URL!}
        apiKey={process.env.NEXT_PUBLIC_LELU_KEY!}
        onApprove={(id) => console.log("approved", id)}
        onDeny={(id) => console.log("denied", id)}
      />
    </main>
  );
}

Environment Variables

.env.local
# Server-side (Engine API — keep secret)
LELU_ENGINE_URL=http://localhost:8082
LELU_API_KEY=your_engine_api_key

# Client-side (if using the approval UI widget)
NEXT_PUBLIC_LELU_URL=http://localhost:8082
NEXT_PUBLIC_LELU_KEY=your_public_key
Previous: BackendNext: React