@hgt-weprotalk/mira-client

Mira Chat Widget — embeddable AI chat for React / Next.js sites.

Install

pnpm add @hgt-weprotalk/mira-client
# or
npm install @hgt-weprotalk/mira-client

Peer dependencies: react ^18 || ^19, react-dom ^18 || ^19

Integration options

| Mode | Use case | |------|----------| | React component (recommended) | Next.js App Router — import ChatWidget directly | | Script embed | Floating launcher + iframe panel | | Inline iframe | Host-controlled layout (drawer, sidebar, etc.) |

React component (Next.js)

"use client";

import { ChatWidget, type Locale } from "@hgt-weprotalk/mira-client";
import "@hgt-weprotalk/mira-client/style.css";

export function MiraChat({ site = "en" }: { site?: string }) {
  return (
    <ChatWidget
      agentName="your_agent_name"
      site={site}
      apiBaseUrl="/prod-api"
      locale={"en-US" satisfies Locale}
    />
  );
}

For logged-in users, use the exported helpers:

import { setMiraChatUser } from "@hgt-weprotalk/mira-client";

await setMiraChatUser({
  loginUserId: customer.id,
  name: customer.name,
  email: customer.email,
});

Use dynamic(..., { ssr: false }) if the host page is server-rendered.

Script embed (launcher)

Copy embed assets from the package to your static directory (e.g. public/embed/):

cp -r node_modules/@hgt-weprotalk/mira-client/dist/embed public/embed

<script
  src="/embed/chat-widget.js"
  data-agent-name="your_agent_name"
  data-site="en"
  defer
></script>
<script src="/embed/mira-chat-host.js" defer></script>

Host SDK: window.MiraChat (bindUser, setUser, open, close, on).

Inline iframe

<iframe
  src="/embed/frame.html?agentName=your_agent_name&site=en&parentOrigin=https://example.com&layout=inline"
  style="width: 100%; height: 100%; min-height: 700px; border: 0"
  allow="clipboard-write"
></iframe>
<script src="/embed/mira-chat-host.js" defer></script>

Exports

| Import | Description | |--------|-------------| | @hgt-weprotalk/mira-client | ChatWidget, runtime helpers, types | | @hgt-weprotalk/mira-client/style.css | Widget styles | | @hgt-weprotalk/mira-client/embed/* | Static embed files |

Configuration (runtime)

The widget does not read the host app's .env. Pass config via props or embed attributes:

| Prop / attribute | Description | |------------------|-------------| | agentName / data-agent-name | Agent identifier | | site / data-site | Site code (e.g. en, de) | | apiBaseUrl / data-api-base-url | Base URL for {apiBaseUrl}/client/agentChat/* | | locale | UI locale (en-US, zh-CN) |

Links

• Repository
• Issues

Maintainers: see README.dev.md for internal architecture and release docs.