Turn any list into fast, accurate autocomplete

The characters you entered stay in full ink; the rest is what AutoSugges supplied. This is an illustration of the interaction, not a live query — try a real one on an integration guide, with your own publishable key.

Illustrative example

• DallasTexas, United States
• Dallas Fort WorthTexas, United States
• DarlingtonEngland, United Kingdom

1. 1. Author a list

   Add items with hierarchy, aliases, locales and metadata — through the dashboard or a CSV/JSON import.

2. 2. Publish an immutable version

   A version activates only after it verifies. Once published, it never changes — no client ever sees data mixed from two versions.

3. 3. Serve it from the edge

   A Cloudflare Worker answers from Workers KV. PostgreSQL is never on the autocomplete hot path.

See the compiler, prefix buckets and edge lookup order in detail

• Row-level security, enabled and forced

  Every table is isolated by tenant with PostgreSQL RLS explicitly enabled and forced — not the default Supabase only applies to its own public schema.

• Credentials in a schema nothing can read

  Signing keys and usage ledgers live in a schema no API role is ever granted access to — a policy mistake elsewhere cannot reach them.

• A runtime that exposes zero tables

  The edge Data API exposes nothing to query — the autocomplete hot path reads a compiled artifact from KV, never your database.

• Origin-restricted keys, quota before cache

  Publishable keys are origin-restricted, and quota is enforced at the edge before the cache is ever consulted — never trusting the client.

import { useState } from 'react';
import { createAutosuggesClient } from '@autosugges/client';
import { Autocomplete } from '@autosugges/client/react';

// One client per app, created outside the component so it survives re-renders.
const autosugges = createAutosuggesClient({
  baseUrl: 'YOUR_RUNTIME_BASE_URL',
  publishableKey: 'YOUR_PUBLISHABLE_KEY',
});

// Reads the list's real minChars/debounce (DEC-LIST-003). Fire-and-forget: the
// component works on documented fallbacks until this resolves, and the SDK has
// already logged any failure once at its own boundary.
void autosugges.bootstrap().catch(() => {});

export function CityField() {
  const [city, setCity] = useState('');
  const [region, setRegion] = useState('');
  const [errorCode, setErrorCode] = useState<string | undefined>();

  return (
    <>
      <Autocomplete
        source={autosugges}
        label="City"
        placeholder="Start typing a city"
        onSelect={(item, { ancestors }) => {
          // item.value is what you store; item.displayValue is what was shown.
          // ancestors is the precomputed hierarchy chain, root first — use it to
          // auto-fill state/country fields without a second request.
          setCity(item.value);
          setRegion(ancestors.map((ancestor) => ancestor.displayValue).join(', '));
        }}
        onError={(error) => {
          // error is an AutosuggesError. Switch on error.code — the codes and
          // their remediation are listed below. Never invent a message string.
          setErrorCode(error.code);
        }}
      />
      <input type="hidden" name="city" value={city} />
      <input type="hidden" name="region" value={region} />
      {errorCode !== undefined && <p role="alert">Lookup unavailable ({errorCode}).</p>}
    </>
  );
}

React, Next.js, Expo and vanilla JS guides all carry the same Copy for AI / LLM control next to the code.