@orello/react

React wrapper for embedding the Orello AI widget. Supports real-time voice transcription, synthesis, and autonomous site navigation.

[!IMPORTANT] Orello AI requires an active API key to connect to the assistant service. Sign up or log in at orello.space to create your keys!

🔑 Step-by-Step API Key Setup

1. Visit the Dashboard: Go to orello.space and log in.
2. Generate Key: Navigate to Developer Settings > API Keys and click Generate New Key.
3. Save & Embed: Copy the key and pass it as the widgetKey prop to the <OrelloWidget> component.

✨ Features

• Voice-First: Deepgram & ElevenLabs integration with browser fallbacks.
• Multimodal: Visual page capture for AI awareness.
• Type-Safe: Full TypeScript support.

Install

npm install @orello/react

Basic Usage

import { OrelloWidget } from "@orello/react";

function App() {
  return (
    <>
      <YourApp />
      <OrelloWidget widgetKey="YOUR_WIDGET_KEY" />
    </>
  );
}

export default App;

Recommended Usage (Explicit Assistant)

<OrelloWidget
  widgetKey="YOUR_WIDGET_KEY"
  assistantId="ASSISTANT_UID"
/>

Props

• widgetKey (required): Widget API key sent as X-Api-Key.
• assistantId (optional): Assistant UID for /api/v1/assistants/public/{agentId}.
• scriptSrc (optional): Embed script URL. Default: https://cdn.orello.ai/orello.js.
• apiBase (optional): API base URL.
• agentEndpoint (optional): Assistant endpoint template with {agentId}.
• widgetUrl (optional): Widget iframe URL.
• wakeWord (optional): Enables wake-word listener. Default: true.
• onReady (optional): Called when orello:ready is emitted.
• onError (optional): Called when orello:error is emitted.
• cleanupOnUnmount (optional): Removes script + widget on unmount. Default: false.

Runtime API

After init, runtime is exposed at window.OrelloWidget.

window.OrelloWidget?.open();
window.OrelloWidget?.close();
window.OrelloWidget?.toggle();