# Getting Started | JavaScript AI Autocomplete Docs

> For the complete documentation index, see [llms.txt](https://ai-autocomplete.com/llms.txt). A markdown version of any page on this site is available by appending `.md` to its URL path — the homepage is at `/index.md`.

Getting Started guide for integrating the AI Autocomplete SDK with JavaScript. Code examples, setup, and API reference.

Source: https://ai-autocomplete.com/docs/vanilla/getting-started

---

Drop AI Autocomplete into any web stack: React, Vue, Svelte, Angular, or plain HTML. About 62 KB gzipped, with zero dependencies.

## Install with an AI agent

Let your AI coding agent set up the integration and walk you through the two browser steps.

Paste this into your agent. It will scaffold the integration and tell you exactly what to do in the browser to finish setup.

**Agent prompt**

```bash
Install AI Autocomplete using the instructions at https://ai-autocomplete.com/install/vanilla.md
```

Works with Claude Code, Cursor, Windsurf, GitHub Copilot, ChatGPT — any agent that can read URLs and run shell commands. [View the prompt](https://ai-autocomplete.com/install/vanilla.md)

## Install

Install the framework-agnostic SDK:

**Terminal**

```bash
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**

```tsx
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, ... }]
  },
});
```

No CSS import needed. Styles auto-inject the first time you instantiate the library.

## Authentication

Grab a [public key](https://ai-autocomplete.com/account/keys) from your account and set it as an environment variable. Public keys are safe to ship in client bundles.

Security

Public keys are scoped and safe in client bundles, but for production we recommend the secret key + access token flow — your server holds the secret key and mints short-lived tokens for the browser. See Authentication.