@orello/next

v0.0.13

Published

19 hours ago

Next.js integration for Orello AI - Embed intelligent conversational assistants into your Next.js applications with ease.

Downloads

1,372

0High
0Medium
0Low

thecodeguyy

ai nextjs react chat-widget conversational-ai customer-support agent orello

@orello/next 🚀

The official Next.js integration for Orello AI. Easily embed intelligent, conversational support assistants into your Next.js applications with just a few lines of code.

✨ Features

Voice & Multimodal: Native support for Deepgram, ElevenLabs, and visual context capture.
Auto-Fallback: Intelligent fallback to browser Speech API and Synthesis.
Next.js Optimized: Designed specifically for Next.js (App Router & Pages Router).
TypeScript Ready: Full type definitions for a superior developer experience.
Fully Customizable: Control appearance, behavior, and API endpoints via props.

📦 Installation

# Using pnpm
pnpm add @orello/next

# Using npm
npm install @orello/next

# Using yarn
yarn add @orello/next

🚀 Quick Start (App Router)

To avoid SSR issues and manage the widget lifecycle, simply include the OrelloAgent component in your root layout.tsx or a dedicated client wrapper.

// app/layout.tsx
import { OrelloAgent } from "@orello/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <OrelloAgent 
          widgetKey={process.env.NEXT_PUBLIC_ORELLO_API_KEY} 
          agent={process.env.NEXT_PUBLIC_ORELLO_AGENT_ID} 
        />
      </body>
    </html>
  );
}

⚙️ Configuration (Props)

| Prop | Type | Required | Default | Description | | :--- | :--- | :---: | :--- | :--- | | widgetKey | string | Yes | - | Your unique Orello Widget API key. | | agent | string \| object | Yes | - | The Assistant UID or a full configuration object. | | scriptSrc | string | No | .../orello.min.js | Custom URL for the underlying SDK script. | | apiBase | string | No | https://api.orello.space | Base URL of the Orello API. | | agentEndpoint | string | No | /api/v1/embed/{agent} | Template for fetching agent details. | | wakeWord | boolean | No | true | Enable/disable the "Hey Assistant" listener. | | cleanupOnUnmount | boolean | No | false | Remove the widget and script when the component unmounts. | | onReady | (event) => void | No | - | Callback triggered when initialization completes. | | onError | (event) => void | No | - | Callback triggered on errors. |

🛠️ Advanced Usage

Customizing Endpoints

If you are running a self-hosted instance of the Orello service:

<OrelloAgent 
  widgetKey="YOUR_KEY"
  agent="AGENT_UID"
  apiBase="https://orello.yourdomain.com"
  agentEndpoint="/api/v1/embed/{agent}"
/>

Event Handling

Listen for widget states to synchronize with your application's state:

<OrelloAgent 
  widgetKey="YOUR_KEY"
  agent="AGENT_UID"
  onReady={(e) => console.log("Agent ready:", e.detail.agent)}
  onError={(e) => console.error("Orello error:", e.detail.message)}
/>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme