React SDK Overview

@ilana/react provides React hooks and a context provider for Bring Your Own Frontend (BYOFE) in React and Next.js applications. Build any UI — chat, search, forms, dashboards — and let Ilana handle governance behind the scenes.

It wraps @ilana/sdk with React-friendly state management, so you get loading states, error handling, and automatic conversation tracking out of the box.

Installation

npm install @ilana/react

@ilana/react includes @ilana/sdk as a dependency — you don't need to install it separately.

Quick Example

Here's a search interface (not chat!) powered by Ilana's governance engine:

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

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

function SearchBar() {
  const { query, data, isLoading } = useSearch();
  const [input, setInput] = useState('');

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Ask anything..."
      />
      <button onClick={() => query(input)} disabled={isLoading}>
        Search
      </button>
      {data && (
        <div>
          <p>{data.response}</p>
          {!data.metadata.capabilityAllowed && (
            <p>This topic is outside the configured capabilities.</p>
          )}
        </div>
      )}
    </div>
  );
}

Notice how governance metadata (data.metadata.capabilityAllowed) lets you build a UI that reacts to the governance layer — showing different content based on whether a query was within the AI's configured capabilities.

What's Included

• IlanaProvider — Context provider that initializes the SDK client
• useQuery — Hook for multi-turn conversations with automatic conversationId tracking
• useSearch — Hook for stateless one-shot queries (search bars, form helpers, etc.)
• useIlanaContext — Access the underlying client and config

Sections

• Provider Setup — Wrapping your app with IlanaProvider
• useQuery — Multi-turn conversation hook
• useSearch — One-shot query hook