@mintukrishnan/mintai-chat

AI-powered e-commerce chat widget. Drop-in React component with OpenAI intent extraction and pluggable product search.

Installation

npm install @mintukrishnan/mintai-chat

Peer dependencies (already in your project):

npm install react react-dom next

Usage

1. Set environment variables

STORE_NAME=Amazon
STORE_DESCRIPTION=Premium outdoor and sailing apparel
STORE_BASE_URL=https://www.amazon.com

OPENAI_KEY=sk-...

CONSTRUCTOR_KEY=your_key
CONSTRUCTOR_API_TOKEN=your_token
CONSTRUCTOR_BASE_URL=https://ac.cnstrc.com   # optional
CONSTRUCTOR_SECTION=Products                  # optional

2. Create the API route

In your Next.js app, create app/api/mintai/route.ts:

import { createHandlers } from "@mintukrishnan/mintai-chat/server";

export const { POST } = createHandlers({
  storeName: process.env.STORE_NAME!,
  storeDescription: process.env.STORE_DESCRIPTION,
  storeBaseUrl: process.env.STORE_BASE_URL,

  openaiKey: process.env.OPENAI_KEY!,

  search: {
    provider: "constructor",
    key: process.env.CONSTRUCTOR_KEY!,
    apiToken: process.env.CONSTRUCTOR_API_TOKEN!,
  },
});

3. Add the widget

import { ChatWidget } from "@mintukrishnan/mintai-chat";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <ChatWidget
        primaryColor="#0071e3"
        title="Shop Assistant"
        greeting="Hi! What are you looking for today?"
      />
    </>
  );
}

ChatWidget props

| Prop | Type | Default | Description | | -------------- | --------------------------------- | ----------------------- | ------------------------------------------- | | apiUrl | string | /api/mintai | POST endpoint created with createHandlers | | primaryColor | string | #0071e3 | Brand colour for header and buttons | | title | string | Shop Assistant | Header title | | placeholder | string | Ask about products... | Input placeholder | | greeting | string | — | Opening message from the bot | | position | 'bottom-right' \| 'bottom-left' | bottom-right | Widget anchor corner |

createHandlers config

Store

| Option | Type | Required | Description | | ------------------ | -------- | -------- | -------------------------------------------------------------------------- | | storeName | string | ✅ | Store name used in the AI system prompt (e.g. "Amazon") | | storeDescription | string | — | Extra context for the AI (e.g. "Premium outdoor apparel") | | storeBaseUrl | string | — | Base URL to resolve relative product URLs (e.g. https://www.mystore.com) |

OpenAI

| Option | Type | Required | Description | | ------------- | -------- | -------- | --------------------------------- | | openaiKey | string | ✅ | OpenAI API key | | openaiModel | string | — | Model to use (default: gpt-4.1) |

Search providers

Pass a search object with one of the built-in providers or a custom implementation.

Constructor.io

search: {
  provider: 'constructor',
  key: '...',
  apiToken: '...',
  baseUrl: 'https://ac.cnstrc.com',  // optional
  section: 'Products',               // optional
}

| Option | Type | Required | Description | | ---------- | --------------- | -------- | ------------------------ | | provider | 'constructor' | ✅ | | | key | string | ✅ | Constructor.io API key | | apiToken | string | ✅ | Constructor.io API token | | baseUrl | string | — | Constructor API base URL | | section | string | — | Catalog section |

Custom provider

Bring your own search (Algolia, Elasticsearch, Shopify, etc.):

search: {
  provider: 'custom',
  searchProducts: async (intents) => {
    // intents: Array<{ name: string, tagline: string }>
    // return: Promise<Product[]>
    return myAlgoliaSearch(intents)
  },
}

Non-Next.js apps

ChatWidget works in any React 18+ app. For the server handler, create your own endpoint using any framework — createHandlers returns a standard Web Request → Response function compatible with Remix, Astro, Hono, and others.

License

MIT