ZynexTech AI Widget

A React component for embedding AI chat functionality into your applications.

Getting Started with ZynexTech AI

Before using the widget, you'll need to:

1. Sign up at zynextechai.com
2. Create an agent in your dashboard
3. Get your credentials:
   • agentId - Found in your agent settings
   • userId - Your user ID from the dashboard
4. Configure the widget with your credentials

Visit zynextechai.com to get started and create your first AI agent!

Installation

pnpm add @zynextechai/widget

All dependencies are automatically bundled and installed.

Basic Usage

"use client";

import { useState, useEffect } from "react";
import dynamic from "next/dynamic";

const AgentChatDrawer = dynamic(
  () =>
    import("@zynextechai/widget").then((mod) => ({
      default: mod.AgentChatDrawer,
    })),
  { ssr: false }
);

import type { WidgetConfig } from "@zynextechai/widget";

export function ZynextechWidget() {
  const [showAgentWidget, setShowAgentWidget] = useState(false);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const widgetConfig: WidgetConfig = {
    agentId: "your-agent-id-here",
    userId: "your-user-id-here",
    apiUrl: "https://zynextechai.com/widget/api/agent/chat/your-agent-id-here",
    theme: {
      css: `
        :root {
          --background: hsl(0 0% 100%);
          --foreground: hsl(240 10% 3.9%);
          --card: hsl(0 0% 100%);
          --card-foreground: hsl(240 10% 3.9%);
          --popover: hsl(0 0% 100%);
          --popover-foreground: hsl(240 10% 3.9%);
          --primary: hsl(240 5.9% 10%);
          --primary-foreground: hsl(0 0% 98%);
          --secondary: hsl(240 4.8% 95.9%);
          --secondary-foreground: hsl(240 5.9% 10%);
          --muted: hsl(240 4.8% 95.9%);
          --muted-foreground: hsl(240 3.8% 46.1%);
          --accent: hsl(240 4.8% 95.9%);
          --accent-foreground: hsl(240 5.9% 10%);
          --destructive: hsl(0 84.2% 60.2%);
          --destructive-foreground: hsl(0 0% 98%);
          --border: hsl(240 5.9% 50%);
          --input: hsl(240 5.9% 90%);
          --ring: hsl(240 5.9% 10%);
          --radius: 0.6rem;
        }
        
        .bg-background { background-color: var(--background) !important; }
        .bg-foreground { background-color: var(--foreground) !important; }
        .bg-card { background-color: var(--card) !important; }
        .bg-popover { background-color: var(--popover) !important; }
        .bg-primary { background-color: var(--primary) !important; }
        .bg-secondary { background-color: var(--secondary) !important; }
        .bg-muted { background-color: var(--muted) !important; }
        .bg-accent { background-color: var(--accent) !important; }
        .bg-input { background-color: var(--input) !important; }
        
        .text-foreground { color: var(--foreground) !important; }
        .text-muted-foreground { color: var(--muted-foreground) !important; }
        .text-primary { color: var(--primary) !important; }
        
        .border-border { border-color: var(--border) !important; }
        
        .rounded-4xl { border-radius: 2rem !important; }
        .rounded-3xl { border-radius: 1.5rem !important; }
        .rounded-full { border-radius: 9999px !important; }
        
        [data-radix-popper-content-wrapper] {
          z-index: 9999 !important;
        }
      `,
    },
    branding: {
      companyName: "ZynexTech AI",
      logo: "https://your-domain.com/logo.png",
      hideBranding: false,
    },
    features: {
      showTypingIndicator: true,
      showTimestamp: false,
      enableFileUpload: true,
      showModelSelector: true,
    },
    text: {
      placeholder: "Type your message...",
      welcomeMessage: "Hello! How can I help you today?",
      startConversationText: "Start a conversation",
    },
    model: {
      provider: "openai",
      model: "gpt-4.1",
    },
  };

  if (!isMounted) {
    return null;
  }

  return (
    <>
      {/* Widget Button */}
      <button
        className="fixed bottom-6 right-6 z-50 bg-black text-white w-16 h-16 rounded-full shadow-sm hover:bg-gray-800 transition-all duration-200 flex items-center justify-center cursor-pointer border border-gray-200"
        onClick={() => setShowAgentWidget(true)}
      >
        <svg
          className="w-6 h-6 text-white"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
          />
        </svg>
      </button>

      {/* Agent Chat Drawer */}
      <AgentChatDrawer
        isOpen={showAgentWidget}
        onOpenChange={setShowAgentWidget}
        config={widgetConfig}
        onMessage={(message) => {
          console.log("Agent message:", message);
        }}
        onError={(error) => {
          console.error("Agent error:", error);
        }}
      />
    </>
  );
}

WidgetConfig Interface

interface WidgetConfig {
  agentId: string;
  userId: string;
  orgId?: string;
  apiUrl?: string;
  theme?: {
    css?: string; // Custom CSS for theming
    className?: string;
    headerClassName?: string;
    buttonClassName?: string;
    inputClassName?: string;
    messageClassName?: string;
    dropdownClassName?: string;
  };
  branding?: {
    logo?: string; // URL, local path, or emoji
    companyName?: string;
    hideBranding?: boolean;
  };
  features?: {
    showTypingIndicator?: boolean;
    showTimestamp?: boolean;
    enableFileUpload?: boolean;
    showModelSelector?: boolean;
  };
  text?: {
    placeholder?: string;
    welcomeMessage?: string;
    startConversationText?: string;
  };
  model?: {
    provider: string;
    model: string;
  };
}

API Endpoints

The widget only uses these essential APIs:

Chat Endpoint

POST /widget/api/agent/chat/{your-agent-id}

Request Body:

{
  "id": "agent-chat-{your-agent-id}",
  "messages": [
    {
      "parts": [
        {
          "type": "text",
          "text": "hi"
        }
      ],
      "id": "{message-id}",
      "role": "user"
    }
  ],
  "userId": "{your-user-id}",
  "instructions": "Custom instructions for this conversation",
  "model": {
    "provider": "openai",
    "model": "gpt-4.1"
  }
}

Response: Server-Sent Events (SSE) stream

data: {"type":"start","messageId":"{message-id}"}
data: {"type":"start-step"}
data: {"type":"reasoning-start","id":"reasoning-0"}
data: {"type":"reasoning-delta","id":"reasoning-0","delta":"The"}
data: {"type":"reasoning-delta","id":"reasoning-0","delta":" user"}
data: {"type":"text-delta","delta":"Hello"}
data: {"type":"text-delta","delta":"!"}
data: {"type":"finish","totalUsage":{"inputTokens":100,"outputTokens":50}}

Available Models

GET /api/chat/models

Response:

[
  {
    "provider": "openai",
    "models": [
      {
        "name": "gpt-4.1",
        "isToolCallUnsupported": false
      },
      {
        "name": "gpt-4o-mini",
        "isToolCallUnsupported": false
      }
    ]
  }
]

Chat Actions

POST /widget/api/chat/actions

Request Body:

{
  "action": "deleteMessagesByChatIdAfterTimestamp",
  "messageId": "{message-id}"
}

Available Actions:

• deleteMessagesByChatIdAfterTimestamp - Delete messages after a specific timestamp
• deleteMessage - Delete a specific message
• generateObject - Generate structured data

Response:

{
  "success": true
}

File Upload

POST /api/widget/uploadthing

Request: Multipart form data with files

Supported File Types:

• Images: image/* (max 16MB)
• Text files: text/* (max 16MB)
• PDFs: application/pdf (max 16MB)

Response:

{
  "uploadedAt": "2024-01-01T00:00:00.000Z",
  "fileUrl": "https://uploadthing.com/f/abc123",
  "key": "abc123"
}

Configuration

• Website: https://zynextechai.com
• Documentation: https://zynextechai.com/docs
• Support: [email protected]

Getting Help

• Visit zynextechai.com to create and manage your AI agents
• Check the documentation at zynextechai.com/docs for detailed guides
• Contact support at [email protected] for assistance

Exports

The package exports:

• AgentChatDrawer - Main widget component
• WidgetConfig - TypeScript interface for configuration