@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) | | properties | json | Additional configuration properties for the widget | | actions | array | Available actions or functions that the assistant can perform |

Examples

Properties Example

const properties = {
  user: { 
    value: "John", 
    description: "name of the user" 
  },
  pokemones: {
    value: pokemonList, // Imagine an array of JSON objects, each representing a pokemon with properties like "name" and "url"
    description: "available pokemon resources that the assistant can reference"
  },
  instructions: {
    value: "You are an assistant that knows about pokemon and the user's name. Always refer to the user by their name.",
    description: "instructions for the assistant behavior"
  }
};

Actions Example

const actions = [
  {
    name: "openUrl",
    description: "Open a URL in a new tab",
    parameters: [
      { name: "url", type: "string", description: "The URL to open" }
    ],
    handler: ({ url }) => {
      window.open(url, "_blank");
    }
  },
  {
    name: "searchPokemon",
    description: "Search for a specific pokemon",
    parameters: [
      { name: "name", type: "string", description: "Pokemon name to search" }
    ],
    handler: ({ name }) => {
      // Custom logic to search pokemon
      console.log(`Searching for pokemon: ${name}`);
    }
  }
];

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!