@simplr-ai/web-components

@simplr-ai/web-components

Framework-agnostic Web Components for the Simplr platform.

One universal package of standard Custom Elements + a small imperative controller that work in any framework — Vue, Angular, Svelte, Astro, plain HTML — or none. It is a thin adapter over the browser core @simplr-ai/js: it does not reimplement any feature, it wraps the core's full surface as custom elements.

Covers the complete client feature surface: device fingerprint · behavioral biometrics · fraud/identity check (/v1/check) · order scoring (/v1/orders) · feature flags (local eval) · RUM · profiles · AI delegation · input validation helpers.

Install

npm / bun (bundled apps + frameworks)

npm install @simplr-ai/web-components @simplr-ai/js

import { defineSimplrElements, SimplrElements } from "@simplr-ai/web-components";

defineSimplrElements();                          // register the custom elements
SimplrElements.configure({ apiKey: "pk_live_…" }); // or use <simplr-provider>

<script> tag / CDN (zero build step)

The global bundle is self-contained — the core SDK is bundled inline. Just drop in one tag; all elements auto-register.

<script src="https://cdn.jsdelivr.net/npm/@simplr-ai/web-components/dist/simplr-web-components.global.js"></script>

<simplr-provider api-key="pk_live_…" app-id="my-app"></simplr-provider>

<simplr-protected-form auto-check>
  <form>
    <input type="email" name="email" required />
    <button type="submit">Sign up</button>
  </form>
</simplr-protected-form>

<script>
  document.querySelector("simplr-protected-form")
    .addEventListener("simplr-submit", (e) => {
      console.log(e.detail.signals, e.detail.check);
    });
</script>

Everything is also exposed on window.SimplrWebComponents.

Configuration

Configure the shared client once — every element + helper reads from it. Any of:

1. <simplr-provider> element — api-key (or public-key) attribute.
2. data-simplr-key attribute on the provider, <html> or <body>.
3. window.SIMPLR_CONFIG = { apiKey, baseUrl?, appId? } global.
4. Imperative — SimplrElements.configure({ apiKey, baseUrl?, autoStart?, flags?, profiles?, rum?, ai? }).

<simplr-provider
  api-key="pk_live_…"
  base-url="https://api.simplr-ai.com"
  app-id="my-app"   <!-- enables RUM -->
  flags="true" profiles="true" ai="true">
</simplr-provider>

Custom elements

<simplr-provider>

Configures the shared Simplr client and provides context to all descendant elements. Emits simplr-ready.

<simplr-protected-form>

Wraps a <form> (via slot). On submit it collects device + behavioral signals (and runs /v1/check if auto-check is set), injects a hidden simplr_signals field, and emits a simplr-submit CustomEvent with { signals, check, event }. Native submit is prevented unless native-submit is present.

<simplr-protected-form auto-check>
  <form action="/signup" method="post">
    <simplr-protected-input field="email"><input name="email" type="email" /></simplr-protected-input>
    <button type="submit">Go</button>
  </form>
</simplr-protected-form>

<simplr-protected-input field="email">

Attaches keystroke biometrics to a slotted <input>/<textarea>.

<simplr-feature-flag key="…" user-id="…">

Renders its slotted content only when the flag is enabled (local eval, reacts to flag refresh). Emits simplr-flag. Also use the helper isFeatureEnabled(key, ctx?).

<simplr-feature-flag key="new-checkout" user-id="user_123">
  <div>✨ new checkout</div>
</simplr-feature-flag>

<simplr-rum-view name="Checkout">

Fires trackView(name) on connect (and when name changes). Auto-RUM init is done through the provider's app-id. Emits simplr-view.

<simplr-ai-delegation user-id="…">

Slotted trigger (default a <button>); on click calls ai.createDelegation(...) (or ai.connect(...) with mode="connect") and emits simplr-delegation. For list/get/revoke/stats/validate/revokeAllForUser use SimplrElements.ai directly.

Imperative controller (SimplrElements)

For non-HTML consumers (or alongside the elements):

import { SimplrElements, isFeatureEnabled } from "@simplr-ai/web-components";

SimplrElements.configure({ apiKey: "pk_live_…", rum: { apiKey: "pk_live_…", applicationId: "my-app" } });

// Sub-clients (the full core surface)
SimplrElements.fraud      // SimplrFraud   — device fingerprint + biometrics
SimplrElements.flags      // SimplrFlags   — feature flags (local eval)
SimplrElements.profiles   // SimplrProfiles — identify / submitOrder / risk / reportOutcome
SimplrElements.rum        // SimplrRUM     — trackView / trackAction / trackError / log …
SimplrElements.ai         // SimplrAI      — connect / createDelegation / validate / revoke / list / get / stats / revokeAllForUser

// Convenience
await SimplrElements.collect();            // device + behavior signals
await SimplrElements.getDeviceSignals();   // device fingerprint only
SimplrElements.getBehaviorSignals();       // biometrics (sync)
await SimplrElements.check({ email });     // POST /v1/check
SimplrElements.trackInput("email");        // keystroke handlers
isFeatureEnabled("new-checkout", { userId: "u_1" });

One-liner per framework

The same elements work everywhere — register once, use as normal tags.

Plain HTML — load the <script> global bundle (auto-registers), then use the tags.

Vue (vite.config compilerOptions.isCustomElement = (t) => t.startsWith("simplr-")):

import { defineSimplrElements } from "@simplr-ai/web-components"; defineSimplrElements();

<simplr-feature-flag key="beta"><BetaBanner /></simplr-feature-flag>

Angular (add CUSTOM_ELEMENTS_SCHEMA to the module/component):

import { defineSimplrElements } from "@simplr-ai/web-components"; defineSimplrElements();

<simplr-protected-form auto-check (simplr-submit)="onSubmit($event)"><form>…</form></simplr-protected-form>

Svelte (works natively):

import { defineSimplrElements } from "@simplr-ai/web-components"; defineSimplrElements();

<simplr-rum-view name="Checkout" />

Astro (in a client:load script):

<script>import { defineSimplrElements } from "@simplr-ai/web-components"; defineSimplrElements();</script>
<simplr-provider api-key="pk_live_…" />

SSR safety

Importing the package never touches window/customElements. Elements only register when you call defineSimplrElements() in a browser (or load the global bundle). The controller's collectors guard for non-browser environments.

License

Commercial software — see LICENSE. Wraps the @simplr-ai/js package. core. Docs: https://simplr-docs-three.vercel.app/sdks/ (Web Components page).