@agentic-dashboard/web-chatbot

Embeddable website chatbot for published Agentic Dashboard agents.

The package ships with:

• a React wrapper: @agentic-dashboard/web-chatbot
• a framework-agnostic custom element: @agentic-dashboard/web-chatbot/web-component

Install

npm install @agentic-dashboard/web-chatbot

How It Works

1. Publish your agent in Agentic Dashboard.
2. Keep your workspace API key on your server.
3. From your backend, call POST /web/widget-tokens to mint a short-lived widget token.
4. Render the widget in your frontend with tokenEndpoint or getToken.

The browser should never receive your long-lived workspace API key directly.

React Usage

import { AgenticChatbot } from "@agentic-dashboard/web-chatbot";

export function SupportWidget() {
  return (
    <AgenticChatbot
      baseUrl="https://your-agentic-api.example.com"
      agent="acme.support-bot"
      tokenEndpoint="/api/agentic-widget-token"
      title="Acme support"
      subtitle="Answers from your published agent"
      welcomeMessage="Hi there. Ask about pricing, onboarding, or setup."
      theme={{ accentColor: "#0f766e", radius: "lg" }}
    />
  );
}

Web Component Usage

import { registerAgenticChatbot } from "@agentic-dashboard/web-chatbot/web-component";

registerAgenticChatbot();

const widget = document.querySelector("agentic-chatbot");

if (widget) {
  widget.config = {
    baseUrl: "https://your-agentic-api.example.com",
    agent: "acme.support-bot",
    tokenEndpoint: "/api/agentic-widget-token",
    title: "Acme support",
    subtitle: "Answers from your published agent",
    welcomeMessage: "Hi there. Ask about pricing, onboarding, or setup.",
    theme: {
      accentColor: "#0f766e",
      radius: "lg",
    },
  };
}

<agentic-chatbot></agentic-chatbot>

Backend Token Route Example

export async function POST() {
  const response = await fetch("https://your-agentic-api.example.com/web/widget-tokens", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.AGENTIC_API_KEY}`,
    },
    body: JSON.stringify({
      agent: "acme.support-bot",
      allowedOrigin: "https://www.acme.com",
    }),
  });

  const payload = await response.json();
  return Response.json(payload, { status: response.status });
}

API

AgenticChatbot

React component wrapper for the custom element.

registerAgenticChatbot()

Registers the <agentic-chatbot> custom element.

AgenticChatbotConfig

type AgenticChatbotConfig = {
  baseUrl: string;
  agent: string;
  tokenEndpoint?: string;
  getToken?: () => Promise<{ token: string; expiresAt?: string }>;
  title?: string;
  subtitle?: string;
  welcomeMessage?: string;
  placeholder?: string;
  metadata?: Record<string, unknown>;
  visitorId?: string;
  historyLimit?: number;
  position?: "bottom-right" | "bottom-left";
  theme?: {
    accentColor?: string;
    radius?: "sm" | "md" | "lg";
  };
};

Notes

• The widget stores chat history in sessionStorage.
• The widget uses short-lived bearer tokens for browser requests.
• Tool traces and file uploads are intentionally not exposed in v1.