Getting Started

Drop AI Autocomplete into any web stack — React, Vue, Svelte, Angular, or plain HTML. ~10 KB gzipped, zero dependencies.

Install

Install the framework-agnostic SDK:

Terminal
pnpm add @magicx-eng/ai-autocomplete-vanilla

No peer dependencies — no React, no framework runtime, no virtual DOM.

Mount the widget

Mount the SDK by passing a container element and an options object. Everything else — input, pills, dropdown, keyboard — is handled for you.

autocomplete.ts
import { AIAutocomplete } from "@magicx-eng/ai-autocomplete-vanilla";


const root = document.getElementById("root")!;


const ac = new AIAutocomplete(root, {
  apiConfig: { apiKey: "pk_v1_your_public_key" },
  onSubmit: (result) => {
    console.log(result.query);            // "Create a email"
    console.log(result.raw_query);        // "Create a {{TASK_1}}"
    console.log(result.completed_params); // [{ placeholder, type, ... }]
  },
});

Authentication

Grab a public key from your account and set it as an environment variable. Public keys are safe to ship in client bundles.