Smart Autocomplete

Smart autocomplete is an AI UX pattern that predicts the next text, code, or field value from context and offers inline acceptance (Tab, ghost text, or suggestion chips) without opening a separate chat. It accelerates composition while leaving the user in control of the caret.

Share

Interactive demo

Tomaya@acme.com
SubjectRe: Project update
Suggestion available. Press Tab to accept, Escape to dismiss.

Overview

The design problem

How might we predict the next text or value from context without stealing the caret or committing edits people did not ask for?

Use this pattern

When people are already composing

  • Code editors and IDEs where whole-line or multi-token predictions speed composition (Copilot, Tabnine).
  • Email and docs where phrase completions continue natural prose (Gmail Smart Compose).
  • Form and search fields where context-aware values beat generic dictionary autocomplete.
  • Surfaces where Tab or chip accept is faster than opening a separate chat or command palette.

Avoid this pattern

When a blank field must stay blank

  • Fields that must stay empty until a verified source fills them (legal attestations).
  • Shared screens where ghost text would leak another user’s private predictions.
  • Ultra-low latency UIs that cannot afford model round-trips on every keystroke.

States

Design the suggest–accept–dismiss loop, not only grey ghost text.

Smart autocomplete suggest–accept loop

Loading diagram…

  1. 01

    Typing

    The person is composing. No suggestion yet, or the prior one was cleared by a keystroke that diverged.

  2. 02

    Predicting

    Context is enough to request a completion. Latency stays short; the caret does not jump.

  3. 03

    Suggested

    Ghost text, inline completion, or a chip shows the prediction after the caret. Nothing is committed.

  4. 04

    Accepted

    Tab, Right, or an explicit Accept inserts the suggestion. The caret lands at the end of the accepted span.

  5. 05

    Dismissed

    Escape, arrow away, or continued typing that conflicts clears the suggestion without inserting it.

  6. 06

    Suppressed

    Passwords, selections, multi-cursor, or a user off switch hide predictions so they cannot leak or fight the edit.

Key UX elements

The parts that must be present for autocomplete to feel fast and controllable.

Ghost

Show the prediction after the caret.

Dim inline text or a chip continues what was typed. Contrast must stay readable without competing with committed characters.

Accept

Require an explicit accept gesture.

Tab or Right in editors; tap a chip on mobile. Never insert on pause alone.

Caret

Keep the caret where the person left it.

Suggestions append after the caret. Do not overwrite a selection or multi-cursor range unless that is the documented accept behavior.

Dismiss

Make ignore as easy as accept.

Escape, arrow keys, or typing that diverges should clear the suggestion without friction.

Context

Ground predictions in local intent.

Use surrounding code, thread, or field semantics—not a generic word list—so completions feel relevant.

Off

Let people silence suggestions.

A global or per-surface disable for focus sessions, secrets fields, and noisy days is table stakes.

Anti-patterns to avoid

  • Suggestions that auto-commit without an explicit accept gesture.

  • Ghost text with contrast too low to read or too high to ignore.

  • Autocomplete that overwrites multi-cursor or selected ranges unexpectedly.

  • No way to disable suggestions when they become noisy.

How products use it

ProductImplementation
GitHub CopilotInline code ghost text accepted with Tab in the editor.
Gmail Smart ComposePhrase completions in email that users tab-accept.
TabnineIDE completions tuned to team or local code context.
Editor IntelliSense + AISymbol completion layered with AI whole-line predictions.

Implementation

Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.

Generate a production-ready implementation of the "Smart Autocomplete" AI interface design pattern.

Pattern Definition:

Frequently asked questions

What is smart autocomplete in AI UX?

Smart autocomplete predicts the next text, code, or value from context and offers it inline for explicit accept, speeding composition without leaving the current field or editor.

How does it differ from prompt starters?

Prompt starters appear on empty chat to begin a conversation. Smart autocomplete continues what the user is already typing inside an input or document.

Should accept be Tab or click?

Keyboard accept (Tab/Right) is the norm in editors; mobile often uses a suggestion chip tap. Never insert on mere pause without an accept action.

When should products suppress suggestions?

In passwords, secrets, and when the user is navigating or selecting, not typing. Also offer a global off switch for focus sessions.

Weekly AI UX in your inbox

Weekly AI interface UX notes and resources on Substack, no spam, unsubscribe anytime.

Subscribe on Substack