@aiaiai-pt/martha-chat

Embeddable Martha chat widget for framework apps and modern JavaScript hosts.

Use this package when your app already has a build step and wants typed imports, version pinning, and framework-native wrappers. Plain HTML, CMS, and no-build hosts can keep using the hosted bundle from https://martha.nomadriver.co/embed/v1/.

Install

npm install @aiaiai-pt/martha-chat

Plain ESM

import "@aiaiai-pt/martha-chat/css";
import { mountMarthaChat } from "@aiaiai-pt/martha-chat";

const chat = mountMarthaChat("#martha-chat", {
  apiUrl: "https://martha.nomadriver.co",
  selectedClientId: "your-client-key",
  launcher: true,
  getAccessToken: async () => {
    const response = await fetch("/api/martha-embed-token", {
      method: "POST",
      credentials: "include"
    });
    const payload = await response.json();
    return payload.access_token;
  }
});

Web Component

import stylesheetUrl from "@aiaiai-pt/martha-chat/css?url";
import "@aiaiai-pt/martha-chat/web-component";

window.MarthaChat = {
  stylesheetUrl,
  getAccessToken: async () => {
    const response = await fetch("/api/martha-embed-token", {
      method: "POST",
      credentials: "include"
    });
    const payload = await response.json();
    return payload.access_token;
  }
};

<martha-chat
  api-url="https://martha.nomadriver.co"
  client-key="your-client-key"
  launcher
></martha-chat>

The web component renders inside Shadow DOM, so package consumers should pass a bundled CSS asset URL through window.MarthaChat.stylesheetUrl or the stylesheet-url attribute. Hosted script-tag installs get the CSS URL automatically because the JavaScript and CSS assets are served from the same /embed/v1/ folder.

React

import "@aiaiai-pt/martha-chat/css";
import { MarthaChat } from "@aiaiai-pt/martha-chat/react";

export function SupportChat() {
  return (
    <MarthaChat
      apiUrl="https://martha.nomadriver.co"
      selectedClientId="your-client-key"
      launcher
      placement="bottom-right"
      getAccessToken={async () => {
        const response = await fetch("/api/martha-embed-token", {
          method: "POST",
          credentials: "include"
        });
        const payload = await response.json();
        return payload.access_token;
      }}
    />
  );
}

React is an optional peer dependency and is only required when importing @aiaiai-pt/martha-chat/react.

Svelte

<script lang="ts">
  import "@aiaiai-pt/martha-chat/css";
  import { MarthaChatLauncher } from "@aiaiai-pt/martha-chat/svelte";

  async function getAccessToken() {
    const response = await fetch("/api/martha-embed-token", {
      method: "POST",
      credentials: "include"
    });
    const payload = await response.json();
    return payload.access_token;
  }
</script>

<MarthaChatLauncher
  apiUrl="https://martha.nomadriver.co"
  selectedClientId="your-client-key"
  placement="bottom-right"
  {getAccessToken}
/>

Svelte is an optional peer dependency and is only required when importing @aiaiai-pt/martha-chat/svelte from a Svelte app.

Auth Modes

Use host-token when the host app already has Martha-compatible user tokens.

Use embed-token when the host app has its own auth. In that mode, the host backend authenticates its own user, calls Martha server-to-server to mint a short-lived embed token, and returns that token to the browser. Never expose the Martha embed credential client secret or service-account token to browser code.

Standalone third-party PKCE login is not part of the v1 embed package.

Package Exports

• @aiaiai-pt/martha-chat - imperative mount API, client helpers, Svelte component exports, and shared types.
• @aiaiai-pt/martha-chat/web-component - defines <martha-chat> as a side effect and re-exports the base API.
• @aiaiai-pt/martha-chat/react - React wrapper.
• @aiaiai-pt/martha-chat/svelte - Svelte component exports.
• @aiaiai-pt/martha-chat/css - shared widget styles.

Hosted Alternative

The hosted bundle remains first-class:

<script
  type="module"
  src="https://martha.nomadriver.co/embed/v1/martha-chat.ce.js"
></script>

Choose hosted scripts for no-build pages. Choose the npm package for framework apps that want typed imports and normal dependency management.