@bridge-ai-dev/ecom-chat
v1.0.16
Published
Bridge E-commerce Chat widget integration for Next.js with Litium authentication
Maintainers
Readme
Bridge E-commerce Chat widget integration for Next.js
A powerful chat widget integration specifically designed for Next.js and Litium storefronts. It handles complex authentication flows and automatic cart context initialization.
Features
- Automatic Cart Scaling: Server-side cart creation using Litium's
CreateCartmutation. - Secure Auth Bridge: Handles HttpOnly cookies (
.AspNetCore.Identity.Applicationandcart-context) safely. - Next.js Optimized: Built for the App Router and React Server Components.
- Zero Configuration: Scaffolding tool to get you started in seconds.
Quick Start
Run the following command in your Next.js project root:
npx @bridge-ai-dev/ecom-chatThis will:
- Create
app/api/bridge-auth/route.ts(The secure auth bridge) - Create
components/ChatWrapper.tsx(A pre-configured component wrapper)
Configuration
Add the following environment variables to your .env.local:
# Required for the Widget
NEXT_PUBLIC_BRIDGE_TENANT_ID=your-tenant-uuid
NEXT_PUBLIC_BRIDGE_WIDGET_URL=https://...
# Required for server-side cart initialization
RUNTIME_LITIUM_SERVER_URL=https://your-litium-backend.comUsage
In your app/layout.tsx:
import ChatWrapper from '@/components/ChatWrapper';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<ChatWrapper />
</body>
</html>
);
}How it works
The library uses a "Bridge Auth" pattern:
- The ChatComponent (client-side) calls the
/api/bridge-authroute. - The Auth Route (server-side) reads the secure Litium cookies.
- If the cart-context cookie is missing, the route automatically performs a
CreateCartmutation to Litium's GraphQL API. - The route returns the auth data to the widget and forwards any new
Set-Cookieheaders to the browser.
Customization
ChatComponent Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| tenantId | string | Required | Your Bridge AI tenant ID. |
| widgetScriptUrl | string | Required | URL of the chat widget script. |
| cartCreationMode | 'server' \| 'client' \| 'none' | 'server' | How to handle missing carts. |
License
MIT
