IlanaProvider

Setup

Wrap your application (or the subtree that needs Ilana) with IlanaProvider:

import { IlanaProvider } from '@ilana/react';

function App() {
  return (
    <IlanaProvider
      config={{
        runtimeUrl: 'https://api.getilana.ai',
        token: 'your-embed-token',
        botId: 'your-bot-id',
      }}
    >
      {/* Your app here */}
    </IlanaProvider>
  );
}

IlanaConfig

Property	Type	Required	Description
`runtimeUrl`	`string`	Yes	Base URL of the Ilana runtime API
`token`	`string`	Yes	Embed token for authentication
`botId`	`string`	Yes	Bot ID to query

useIlanaContext

Access the Ilana context directly. Must be called within an IlanaProvider:

import { useIlanaContext } from '@ilana/react';

function MyComponent() {
  const ctx = useIlanaContext();
  // Access ctx.client, ctx.config, etc.
}

Throws an error if used outside of IlanaProvider.

Next.js App Router

In Next.js App Router, add the provider to your root layout. Since IlanaProvider uses React context, it must be in a Client Component:

// app/providers.tsx
'use client';

import { IlanaProvider } from '@ilana/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <IlanaProvider
      config={{
        runtimeUrl: process.env.NEXT_PUBLIC_ILANA_RUNTIME_URL!,
        token: process.env.NEXT_PUBLIC_ILANA_TOKEN!,
        botId: process.env.NEXT_PUBLIC_ILANA_BOT_ID!,
      }}
    >
      {children}
    </IlanaProvider>
  );
}

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

IlanaProvider

Setup

IlanaConfig

useIlanaContext

Next.js App Router

On this page