@ownichat/next
v0.1.0
Published
Next.js integration for the owni.chat AI chat widget: App Router component, client hooks and server helpers.
Downloads
148
Maintainers
dev2studioReadme
@ownichat/next
Next.js integration for the owni.chat AI chat widget.
npm install @ownichat/next| | |
| --- | --- |
| ⚡ Server component | <OwniChat> adds the widget with no client JS of its own |
| 🎛️ Client hooks | @ownichat/next/client — open the chat from your own button |
| 📥 Webhook route | Signature-verified route handler in three lines |
| 🛍️ Catalog sync | Typed API client for Server Actions and cron routes |
App Router and Pages Router. Next.js 13.4+, React 18 and 19.
Add the widget
// app/layout.tsx
import { OwniChat } from '@ownichat/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<OwniChat projectKey={process.env.NEXT_PUBLIC_OWNI_PROJECT_KEY!} />
</body>
</html>
);
}<OwniChat> is a server component — no 'use client', no client bundle cost
beyond the widget itself. It renders next/script with strategy="afterInteractive",
so the widget never competes with your content for bandwidth.
Set <html lang>: the widget uses it to pick its language.
Pages Router works the same way from pages/_app.tsx.
Control it from a client component
'use client';
import { OwniChatProvider, useOwniChat } from '@ownichat/next/client';
export function ChatButton() {
const chat = useOwniChat();
return <button onClick={chat.open}>Chat with us</button>;
}The hooks need a provider in the tree. Since <OwniChat> already loads the script,
render it with autoLoad={false}:
'use client';
import { OwniChatProvider } from '@ownichat/next/client';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<OwniChatProvider projectKey={process.env.NEXT_PUBLIC_OWNI_PROJECT_KEY!} autoLoad={false}>
{children}
</OwniChatProvider>
);
}Everything from @ownichat/react —
useOwniChat, useOwniEvent, OwniChatInline — is re-exported from
@ownichat/next/client.
Receive leads
owni.chat signs every webhook. createWebhookHandler verifies the signature and the
timestamp for you:
// app/api/owni/webhook/route.ts
import { createWebhookHandler } from '@ownichat/next/server';
export const POST = createWebhookHandler({
onLead: async (fields) => {
await db.lead.create({ data: fields });
},
});Set OWNI_WEBHOOK_SECRET to the signing secret shown when you connect the webhook in
Integrations → Webhooks, then paste your route URL there.
It reads the raw body with request.text() — the signature covers the exact bytes
sent, so request.json() would not verify. Invalid deliveries get 401 and never reach
your callback; a missing secret gets 503 rather than accepting anything.
Sync a product catalog
// app/actions/sync-catalog.ts
'use server';
import { createOwniClientFromEnv } from '@ownichat/next/server';
export async function syncCatalog() {
const owni = createOwniClientFromEnv();
const products = await db.product.findMany();
await owni.products.bulkUpsert(
products.map((product) => ({
external_id: String(product.id),
title: product.name,
url: `https://shop.example.com/p/${product.slug}`,
price: product.price.toFixed(2),
currency: 'EUR',
availability: product.stock > 0 ? 'in_stock' : 'out_of_stock',
})),
);
}Batching to the API's 100-item limit is handled for you. Full client documentation
lives in @ownichat/sdk.
Environment variables
| Variable | Where | Purpose |
| --- | --- | --- |
| NEXT_PUBLIC_OWNI_PROJECT_KEY | client | Public pk_… key for the widget |
| OWNI_API_KEY | server only | ak_live_… — catalog and knowledge writes |
| OWNI_WEBHOOK_SECRET | server only | whsec_… — webhook verification |
| OWNI_API_BASE_URL | server only | Self-hosted instances |
Never prefix OWNI_API_KEY with NEXT_PUBLIC_ — that would ship a write-capable
credential to every visitor. createOwniClientFromEnv() throws when the key is
missing, so a misconfigured deployment fails immediately instead of mid-sync.
Related packages
| Package | For |
| --- | --- |
| @ownichat/sdk | The API client re-exported by /server, documented in full |
| @ownichat/react | The hooks re-exported by /client, documented in full |
Not on Next.js? owni.chat also ships official plugins for WordPress/WooCommerce, Shopify and OpenCart — see owni.chat/integrations.
License
MIT © owni.chat