npm.io
0.0.29 • Published 11h ago

@orello/next

Licence
MIT
Version
0.0.29
Deps
0
Size
16 kB
Vulns
0
Weekly
352
SummaryDependencyVersions

@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.

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 add it to your .env.local as NEXT_PUBLIC_ORELLO_API_KEY, or pass it directly to the component.

npm version License: MIT

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)}
/>

License

MIT Orello Team

Keywords

ainextjsreactchat-widgetconversational-aicustomer-supportagentorello