Turn any list into fast, accurate autocomplete

The characters you enter stay in full ink; the rest is what AutoSugges supplied. This is a real query against the platform’s countries list, answered from the Cloudflare edge — the same component you would mount, on the same runtime your own lists are served from.

Wire this into your own list on an integration guide.

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

   Every query is answered from the edge, close to your users, from the version you published.

See how publishing and lookups work

• Isolated by tenant

  Every tenant's data is isolated from every other tenant's.

• Credentials kept apart

  Signing keys and billing records are stored separately from your list data.

• Your database is never in the path

  Autocomplete is served from your published version, never from your database.

• Origin-restricted keys

  Publishable keys can be restricted to your own origins, and usage limits are enforced on our side, 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. 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.

Default result limit

10 suggestions

A list owner can set another default.

Default minimum query length

2 characters

Configurable per list, never 1.

Default debounce

150 ms

Delivered with the list settings and raisable per list.

Free reference datasets

24

Never priced on their own; every plan includes them.

Measured round-trip latency, p50 / p95

72 ms / 92 ms

Measured on 2026-09-23 from a single client; includes the network round trip.

As of 2026-10-25.