Implementation

Mounting the Widget

Embed powerful Conversational AI directly into your SaaS ecosystem using our lightweight client script or React SDK.

1. Locate your Workspace ID

Every widget instance is securely anchored to a specific Workspace. Navigation requires this cryptographically unique sequence.

1
Open the Workspace detail view in your dashboard.
2
Copy the Workspace ID located under the workspace header settings.

Standard HTML / Vanilla JS

Inject our lightweight orchestration engine at the base of your document body.

index.html

<!-- Append terminal node before </body> -->
<script 
  src="https://cdn.stellix.ai/v1/widget.js" 
  data-workspace-id="YOUR_WORKSPACE_ID"
  data-theme="light"
  data-primary-color="#6366f1"
  defer
></script>

React / Next.js Framework

For modern React applications, use our type-safe primitive for deep UI control and framework persistence.

app.tsx

import { StellixWidget } from '@stellix/react';

export default function AppRoot() {
  return (
    <main>
      <StellixWidget 
        workspaceId="YOUR_WORKSPACE_ID" 
        theme="light"
        primaryColor="#6366f1"
      />
    </main>
  );
}

Enterprise Feature

Row-Level Security (RLS)

For multi-tenant SaaS environments, enforce strict cryptographic isolation via JWT handshakes to prevent data bleed.

Integrity Enforcement

Never pass raw user filters from the browser. Malicious payloads are easily spoofed. Stellar enforces Nested Audience RLS using Cryptographic Signatures generated by your private backend node.

Step 1: Sign

Generate JWT

Sign your desired hard constraints (e.g. tenant_id) using your Secret Key on your secure backend server.

const token = jwt.sign(
  { tenant_id: 'tenant_123' },
  SECRET_KEY
);

Step 2: Pass

Hydrate Widget

Pass the resulting token to the widget parameter. The engine will verify the signature before SQL execution.

<StellixWidget 
  workspaceId="YOUR_ID" 
  token={token} 
/>

Looking for Federated API?

Node.js Webhook Guide

Python Webhook Guide