@ddrinnova/agentsgt-widget

@agentsgt/widget

A customizable widget for embedding a chat assistant in any web application.

Installation

npm install @agentsgt/widget

Usage

Method 1: Direct Import (React apps)

import { App as AgentSGTWidget } from "@agentsgt/widget";
import "@agentsgt/widget/style.css";

function MyApp() {
  return (
    <div>
      <h1>My Application</h1>
      <AgentSGTWidget
        title="My Assistant"
        initialMessage="How can I help you today?"
        runtimeUrl="https://your-backend-url.com/api"
      />
    </div>
  );
}

Method 2: Script Loader (Any website)

Add a container to your HTML:

<div id="agent-widget-container"></div>

<script>
  window.onload = function () {
    if (window.AgentSGTWidgetLoader) {
      AgentSGTWidgetLoader.load("agent-widget-container", {
        title: "My Assistant",
        initialMessage: "How can I help you today?",
        runtimeUrl: "https://your-backend-url.com/api",
      });
    }
  };
</script>
<script src="https://unpkg.com/@agentsgt/widget/dist/loader.umd.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/@agentsgt/widget/dist/style.css"
/>

Configuration Options

Option	Type	Description
title	string	The title displayed in the widget header
initialMessage	string	The first message displayed in the chat
runtimeUrl	string	URL to your backend API endpoint (required)

License

MIT

Publishing Steps

Once you have these files set up, follow these steps to publish your package:

1. First, login to npm:

npm login

2. Then build and publish your package:

npm run build
npm publish --access public

If you're publishing a scoped package for the first time, make sure to use the --access public flag.

3. For testing before publishing, you can use:

npm pack

This will create a tarball that you can install locally to test the package.

These configurations should prepare your widget package for proper publication to npm!