Advanced

Inject field options at runtime

Fields whose options come from your own data (a location search, a customer list, live inventory) have their own guide. Field Injection walks through marking a field as injected in Edit Logic and wiring optionOverrides to your endpoint.

Personalize suggestions per user

Suggestions can be tailored to each user with what your app already knows about them: a profile, saved preferences, recent activity. Personalization covers what to send, how to keep it current, the size cap, and what stays private.

Controlled mode

Pass value, completedParams, onChange, and onParamsChange to lift state out of the library. Push updates back in with setValue and setCompletedParams.

const ac = new AIAutocomplete(container, {
  apiConfig: { apiKey: "pk_v1_your_public_key" },
  value: "initial text",
  completedParams: [],
  onChange: (text) => {/* sync to your store */},
  onParamsChange: (params) => {/* sync to your store */},
  onSubmit: handleSubmit,
});

// Push updates back into the library
ac.setValue("new text");
ac.setCompletedParams([]);

SSR safety

The library is SSR-safe — there's no top-level document or window access. Instantiate the library only on the client (e.g. in a useEffect, onMount, or after window is defined).

Accessibility

The component implements the ARIA combobox pattern. Things you should know:

• The dropdown uses role="listbox" with aria-activedescendant pointing at the highlighted option.
• Pills are buttons (role="button") and announce as part of the live input.
• Keyboard: arrow keys navigate, Enter submits, Tab autocompletes, Escape closes the dropdown.