Integrations
React / Frontend
Add Lelu's approval UI and reputation dashboard to any React application. The frontend SDK provides hooks and components for managing pending AI actions from the browser.
Never expose your Engine API key on the client. All direct Engine calls must go through your backend (Next.js Route Handler, Express, etc.). The frontend SDK is for the approval UI only.
Installation
terminal
npm install @lelu-auth/lelu
Approval UI
Drop the LeluApprovalUI component into your admin dashboard. It shows all pending agent requests and lets reviewers approve or deny them in one click.
ApprovalDashboard.tsx
import { LeluApprovalUI } from "lelu/react";
export function ApprovalDashboard() {
return (
<LeluApprovalUI
engineUrl="http://localhost:8082"
apiKey={import.meta.env.VITE_LELU_KEY}
onApprove={(requestId) => console.log("Approved:", requestId)}
onDeny={(requestId) => console.log("Denied:", requestId)}
pollInterval={3000} // Check every 3 seconds
/>
);
}Agent Reputation Dashboard
Show your users a live reputation score for each AI agent using the AgentReputationDashboard component.
AgentStatus.tsx
import { AgentReputationDashboard } from "lelu/react";
export function AgentStatus({ agentId }: { agentId: string }) {
return (
<AgentReputationDashboard
agentId={agentId}
platformUrl="http://localhost:9090"
apiKey={import.meta.env.VITE_PLATFORM_KEY}
/>
);
}