Implementation

Adding the Widget

Get the AI chat widget running in your own app or website in just a few minutes.

1. Get your Workspace ID

Each widget needs a unique ID to know which database it should talk to.

  • 1
    Go to your Dashboard and select a Workspace.
  • 2
    Copy the "Workspace ID" or "Publishable Key" from the settings.

For Websites (HTML)

Copy and paste this script tag at the bottom of your website's HTML, just before the closing body tag.

index.html
<script 
  src="https://cdn.stellix.ai/v1/widget.js" 
  data-workspace-id="YOUR_WORKSPACE_ID"
  defer
></script>

For Apps (React)

If you are building a React or Next.js app, use our component for more control.

App.tsx
import { StellixWidget } from '@stellix/react';

export default function MyDashboard() {
  return (
    <StellixWidget 
      workspaceId="YOUR_WORKSPACE_ID"
    />
  );
}
Privacy & Security

Keep Customer Data Private

If you have multiple customers, you must ensure Customer A cannot see Customer B's data. We use a secure "handshake" (JWT) to enforce this.

Security Guardrails

We never trust data filters sent directly from the browser. Instead, your server signs a "Security Token" that the AI uses to filter results automatically.

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