Embedded assistant chat

const response = await fetch("/api/embed/deployments", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    organizationId: "YOUR_ORGANIZATION_ID",
    agentId: "YOUR_AGENT_ID",
    audience: "public_visitor",
    allowedOrigins: ["https://shop.example.com"],
  }),
});
if (!response.ok) throw new Error("Publication failed");
const { deploymentId } = await response.json();

yarn add https://omnicommerce.sg/sdk/omni-commerce-sdk.tgz react

"use client";

import { OmniProvider, OmniChatLayout } from "@omni-commerce/sdk/react";
import type { ReactNode } from "react";

export function ApplicationAssistant({ children }: { children: ReactNode }) {
  return (
    <OmniProvider appId="operations-dashboard">
      <OmniChatLayout>{children}</OmniChatLayout>
    </OmniProvider>
  );
}

<>
  <OmniProvider deploymentId="PUBLIC_SUPPORT_DEPLOYMENT_UUID">
    <OmniChat title="Store support" style={{ height: 500 }} />
  </OmniProvider>
  <OmniProvider
    organizationId="YOUR_ORGANIZATION_ID"
    appId="internal-dashboard"
  >
    <OmniChat title="Internal assistant" style={{ height: 500 }} />
  </OmniProvider>
</>

<OmniProvider
  appId="sales-dashboard"
  systemPrompt="Help users interpret the supplied dashboard data and use its view controls. Describe only capabilities available in this application."
  tools={[]}
  application={{
    name: "Sales dashboard",
    description: "A dashboard with overview and activity views.",
    getContext: () => ({ activeView, filters }),
  }}
  frontendTools={{
    app_set_view: {
      description: "Change the visible dashboard view.",
      parameters: {
        type: "object",
        properties: {
          updates: {
            type: "array",
            minItems: 1,
            maxItems: 1,
            items: {
              type: "object",
              properties: {
                view: { type: "string", enum: ["overview", "activity"] },
              },
              required: ["view"],
              additionalProperties: false,
            },
          },
        },
        required: ["updates"],
        additionalProperties: false,
      },
      execute: async ({ updates }) => {
        const [{ view }] = updates as { view: "overview" | "activity" }[];
        setActiveView(view);
        return {
          success: true,
          views: [view],
          succeededCount: 1,
          failedCount: 0,
          results: [{ view, success: true }],
        };
      },
    },
  }}
>
  <OmniChat style={{ height: 600 }} />
</OmniProvider>

import { createOmniChatEmbed } from "@omni-commerce/sdk/embed";

const chat = createOmniChatEmbed(document.getElementById("support-chat"), {
  deploymentId: "YOUR_DEPLOYMENT_UUID",
  onError: (error) => console.error(error.message),
});

// When removing the host view:
chat.destroy();

import { createOmniChatWidget } from "@omni-commerce/sdk/embed";

const chat = createOmniChatWidget(document.body, {
  deploymentId: "YOUR_DEPLOYMENT_UUID",
  presentation: "sidebar",
  position: "right",
});