Deploy · Control

Governed chat widget

Add a protected chat surface to your site. Each send is an independent governed POST /run — Boundary checks the prompt before provider inference. Use a script tag or an npm adapter; all paths share the same core.

Choose an integration

Script embed — fastest; load /chat/v1.js on quantlix.ai or the CDN.
npm adapters — React, Vue, or Svelte components on @quantlix-ai/chat-*.
SDK / API — full control via POST /run from your backend or client SDK.

Script embed

On quantlix.ai, the portal serves the widget at /chat/v1.js (built from @quantlix-ai/chat-core). Production CDN: https://cdn.quantlix.ai/chat/v1.js.

Inline (mount in your page)

<!-- Try it live -->
<div id="quantlix-chat-root"></div>
<script
  src="https://cdn.quantlix.ai/chat/v1.js"
  data-deployment="YOUR_DEPLOYMENT_ID"
  data-api-key="pk_YOUR_PUBLISHABLE_KEY"
  data-mode="inline"
  data-theme="dark"
  data-greeting="Messages are checked by Quantlix before the model."
  async
></script>

Floating launcher

<script
  src="https://cdn.quantlix.ai/chat/v1.js"
  data-deployment="YOUR_DEPLOYMENT_ID"
  data-api-key="pk_YOUR_PUBLISHABLE_KEY"
  data-position="bottom-right"
  async
></script>

Script attributes

Attribute	Required	Notes
data-deployment	true	Deployment id from the dashboard.
data-api-key	one of key or runUrl	Publishable key (pk_…). Never use secret qxl_ keys in HTML.
data-run-url	one of key or runUrl	Same-origin proxy URL; session cookie auth instead of api-key.
data-api-url	false	API base (default https://api.quantlix.ai).
data-mode	false	inline (mount in #quantlix-chat-root) or floating (default).
data-target	false	CSS selector for inline mount (default #quantlix-chat-root).
data-position	false	bottom-right or bottom-left (floating).
data-theme	false	dark, light, or auto.
data-greeting	false	First line shown in the transcript.
data-provider	false	Optional gateway routing metadata.
data-model	false	Optional gateway routing metadata.
data-lazy	false	true or 1 to defer init until visible.

npm packages

Framework adapters wrap @quantlix-ai/chat-core — they do not reimplement chat logic. Published on npm under the @quantlix-ai scope.

@quantlix-ai/chat-core — Vanilla mountQuantlixChat / embed IIFE source
@quantlix-ai/chat-react — React 18+ <QuantlixChat />
@quantlix-ai/chat-vue — Vue 3 <QuantlixChat />
@quantlix-ai/chat-svelte — Svelte 5 <QuantlixChat />

React (Next.js App Router)

pnpm add @quantlix-ai/chat-react @quantlix-ai/chat-core

// components/quantlix-chat.tsx
"use client";
import { QuantlixChat } from "@quantlix-ai/chat-react";

export function QuantlixChatPanel() {
  return (
    <QuantlixChat
      deploymentId={process.env.NEXT_PUBLIC_QUANTLIX_DEPLOYMENT_ID!}
      apiKey={process.env.NEXT_PUBLIC_QUANTLIX_PUBLISHABLE_KEY!}
      theme="dark"
      greeting="Try a message — Quantlix checks it before the model."
    />
  );
}

Vue 3 (Nuxt)

pnpm add @quantlix-ai/chat-vue @quantlix-ai/chat-core vue

<script setup lang="ts">
import { QuantlixChat } from "@quantlix-ai/chat-vue";
</script>

<template>
  <ClientOnly>
    <QuantlixChat
      deployment-id="YOUR_DEPLOYMENT_ID"
      :api-key="publishableKey"
      theme="dark"
    />
  </ClientOnly>
</template>

Svelte 5 (SvelteKit)

pnpm add @quantlix-ai/chat-svelte @quantlix-ai/chat-core svelte

<script lang="ts">
  import { browser } from "$app/environment";
  import { QuantlixChat } from "@quantlix-ai/chat-svelte";
</script>

{#if browser}
  <QuantlixChat
    deploymentId="YOUR_DEPLOYMENT_ID"
    apiKey="pk_YOUR_PUBLISHABLE_KEY"
  />
{/if}

Shared props: deploymentId, apiKey, apiUrl, runUrl, theme, position, greeting, provider, model, mode, lazy. Adapters mount only in the browser (SSR-safe).

Keys, CORS, and security

Publishable keys — use pk_… in the browser. Do not embed secret qxl_ API keys in HTML or client bundles.
Server proxy — set runUrl to a same-origin route that forwards to Quantlix with your server-held key or session cookie.
CORS — cross-origin widgets need each site origin in the API CORS_ORIGINS env var (comma-separated).
Transcript model — each send is one governed run; the widget does not maintain ChatGPT-style multi-turn memory in the UI today.

Portal sandbox bot protection

The public Boundary sandbox and homepage hero demo can require Cloudflare Turnstile when your portal deployment sets both NEXT_PUBLIC_TURNSTILE_SITE_KEY and TURNSTILE_SECRET_KEY. That protects Quantlix-hosted demos — not customer sites embedding the widget. Create keys in the Cloudflare dashboard → Turnstile → add widget domains (localhost, production host).

Boundary enforcement — policies and budgets on the request path.
Test Boundary live — try prompts without signup.
Runtime policies — packs, redaction, and CLI.