Sdks
React SDK
Dynamic client tool hooks, lifecycle management, and Generative UI in chat for React applications.
Overview
The Unii React SDK (@unii/react) provides React hooks and context providers for integrating Unii into React 18+ and React 19 applications, including Next.js, Vite, and Remix. It features dynamic client tool hooks (useUniiAction), full mount/unmount execution lifecycles, and Generative UI in chat.
Installation
Install the React package alongside the core SDK:
npm install @unii/react @unii/sdkInitialize the provider
Wrap your application tree in UniiProvider and supply an initialized UniiClient:
import { UniiClient } from "@unii/sdk";
import { UniiProvider } from "@unii/react";
const uniiClient = new UniiClient({
apiKey: process.env.NEXT_PUBLIC_UNII_API_KEY,
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return <UniiProvider client={uniiClient}>{children}</UniiProvider>;
}Register screen-level actions
Use useUniiAction to register actions that mount when a component mounts and automatically deregister when the component unmounts:
import { useState } from "react";
import { useUniiAction } from "@unii/react";
import { UserPlusIcon } from "lucide-react";
export function PricingScreen() {
const [isModalOpen, setIsModalOpen] = useState(false);
useUniiAction({
name: "trigger_signup",
description:
"Opens the registration dialog when the user wants to sign up or join a tier",
parameters: {
type: "object",
properties: {
plan: { type: "string", enum: ["starter", "pro", "enterprise"] },
},
required: ["plan"],
},
icon: UserPlusIcon,
onBeforeMount: () =>
console.log("Registering signup action with active chatbot..."),
onAfterMount: () => console.log("Signup action active in chat!"),
onBeforeUnmount: () => console.log("Cleaning up signup action..."),
execute: async ({ plan }) => {
setIsModalOpen(true);
return { status: "modal_opened", selectedPlan: plan };
},
});
return <div>{/* Pricing screen UI */}</div>;
}