AI Autocomplete Implementation: From Concept to Polished UX

AI Autocomplete Implementation: From Concept to Polished UX

Imagine: a user types a reply in a messenger, and the app suggests finishing the sentence with "Thank you for your email, I will consider your proposal." If the suggestion appears with a 2-second delay or flickers at every character—the UX is broken. We solved this problem for a fintech app with 500k+ users. Result: 30% of users use autocomplete daily, typing time reduced by 40%. The gap between concept and working implementation lies in UX and performance details.

When to Show the Suggestion

The most underestimated part is the trigger. The suggestion should not appear on every character. A working heuristic: we provide autocomplete if the user has typed at least 3 words in the current line and paused for >600 ms, or pressed space at the end of an incomplete sentence. Below is a comparison of common trigger strategies.

Implementation Steps

To implement AI autocomplete, follow these steps:

1. Select a model (server API like gpt-4o-mini or on-device like Apple Intelligence/Gemini Nano).
2. Define trigger heuristics (pause, word count, punctuation).
3. Implement debounce (600ms) and cancel previous tasks.
4. Integrate the model using completion mode with stop tokens and low temperature.
5. Build inline UI that displays gray text after the cursor.
6. Handle deletion and flicker (compare new suggestion length).
7. Test on multiple devices for accuracy and latency.

// iOS - autocomplete trigger
private var autocompleteTask: Task<Void, Never>?

func textDidChange(_ textView: UITextView) {
    autocompleteTask?.cancel()

    let text = textView.text ?? ""
    let cursorPosition = textView.selectedRange.location
    let textBeforeCursor = String(text.prefix(cursorPosition))

    // Don't suggest mid-word
    guard textBeforeCursor.last == " " || textBeforeCursor.last == "\n" else {
        hideAutocomplete()
        return
    }

    // At least 15 characters of context
    guard textBeforeCursor.trimmingCharacters(in: .whitespaces).count > 15 else { return }

    autocompleteTask = Task {
        try? await Task.sleep(nanoseconds: 600_000_000) // 600ms debounce
        guard !Task.isCancelled else { return }
        await fetchAutocomplete(context: textBeforeCursor)
    }
}

Request to the Model and Response Parsing

We use completion mode, not chat. gpt-4o-mini with max_tokens: 30 and temperature: 0.3—fast and predictable. Server API costs roughly $0.01 per 1000 tokens, so each suggestion costs about $0.0003 — negligible for most apps.

struct AutocompleteRequest: Encodable {
    let model = "gpt-4o-mini"
    let messages: [ChatMessage]
    let maxTokens = 30
    let temperature = 0.3
    let stop = ["\n", "."]  // stop at end of sentence
}

func buildPrompt(context: String) -> [ChatMessage] {
    [
        ChatMessage(role: "system", content: "Complete the text naturally. Continue from where it ends. Output only the continuation, no commentary."),
        ChatMessage(role: "user", content: context)
    ]
}

Stop tokens \n and . are important. Without them, the model would generate multiple sentences, but we need a single continuation.

Why On-Device Models Aren't Always Suitable?

An alternative for on-device—CreateML Text Classifier—doesn't work; we need a generative model. On iOS 18+ there is the Foundation Models framework with on-device LLM (Apple Intelligence). On Android—Gemini Nano via Google AI Edge SDK. However, Gemini Nano is available on Pixel 8+ and some Samsung devices—not a universal solution. According to Apple Foundation Models, on-device LLM requires A17 Pro or M1+. For a wide audience, a server fallback is needed.

// Android - Gemini Nano on-device (requires device support)
val generativeModel = GenerativeModel(
    modelName = "gemini-nano",
    generationConfig = generationConfig {
        maxOutputTokens = 30
        temperature = 0.3f
        stopSequences = listOf(".", "\n")
    }
)

val response = generativeModel.generateContent(
    content { text("Complete naturally: $contextText") }
)
val completion = response.text?.trim() ?: ""

The table below compares the approaches:

A hybrid approach—on-device with server fallback—gives the best of both worlds.

How to Avoid Flickering?

Suggestion flickers. Occurs when a new request returns faster than 200 ms and immediately replaces the previous one. Solution—show only if the new suggestion differs from the current one by more than 3 characters.

Model continues deleted text. If the user deleted some text—the context for the prompt must be the current version, not the previous one. Keep textBeforeCursor in sync with the actual TextStorage state.

Tab is intercepted by the system. On Android, Tab on the soft keyboard is unavailable. Use a custom inline key or a swipe-right gesture via GestureDetector.

Displaying the Suggestion

Standard pattern: gray inline text after the cursor. The user presses Tab or swipes right—the suggestion is accepted. Any other input hides it.

// Android Compose - inline suggestion
@Composable
fun TextFieldWithSuggestion(
    value: String,
    suggestion: String,
    onValueChange: (String) -> Unit,
    onAcceptSuggestion: () -> Unit
) {
    val annotatedText = buildAnnotatedString {
        append(value)
        withStyle(SpanStyle(color = Color.Gray.copy(alpha = 0.6f))) {
            append(suggestion)
        }
    }

    BasicTextField(
        value = TextFieldValue(
            annotatedString = annotatedText,
            selection = TextRange(value.length)  // cursor after real text
        ),
        onValueChange = { tfv ->
            val newText = tfv.text.take(value.length + suggestion.length)
            if (newText.startsWith(value + suggestion)) {
                onAcceptSuggestion()
            } else {
                onValueChange(tfv.text.take(value.length))
            }
        },
        keyboardActions = KeyboardActions(
            onDone = { onAcceptSuggestion() }
        )
    )
}

On iOS, inline suggestion via UITextInput + drawText(in:) or simpler via overlay label positioned using caretRect(for:).

What's Included

When you order AI autocomplete implementation, you get:

• Architectural documentation: approach selection (server / on-device / hybrid), integration scheme.
• Trigger and debounce implementation considering UX.
• Integration with chosen API or on-device SDK.
• UI components for inline suggestion under iOS and Android.
• Testing on real devices: suggestion accuracy, no flickering, correct behavior on deletion.
• Operation instructions and recommendations for model fine-tuning.

With over 5 years of experience and 20+ AI projects, we guarantee stable suggestion operation. Contact us to evaluate your project—we'll determine the optimal solution in 1–2 days.

Timeline Estimates

Basic autocomplete with server API + inline UI—5–8 days. On-device via Apple Intelligence / Gemini Nano with server fallback—2–3 weeks. Exact timelines depend on the number of platforms, design requirements, and offline support needs. Get a consultation—we'll calculate the timeline for your project.

Common Problems and Their Solutions

Machine Learning in Mobile Apps: CoreML, TFLite, and On-Device Models

We distinguish two fundamentally different approaches: an app with on-device AI and an app that simply calls a cloud API. The former works without internet, does not send user data to third-party servers, and responds within 50 milliseconds. The latter depends on network latency and pricing plans. Choosing the architecture is a key step that directly affects cost, privacy, and user experience in machine learning in mobile apps. Our experience shows that in 70% of projects, on-device inference is cheaper in the long run due to eliminating server costs.

How to Choose Between CoreML and TFLite for On-Device Inference?

CoreML — Apple's native framework for running ML models on device. Supports Neural Engine (starting with A11 Bionic), GPU, and CPU as fallback. Models are converted to .mlmodel format via coremltools from PyTorch, ONNX, or TensorFlow. Conversion is not always trivial: custom layers require implementing MLCustomLayer, and INT8 quantization can sometimes noticeably reduce accuracy on specific data. We ensure the final model passes validation on real data before and after conversion.

TensorFlow Lite — cross-platform alternative for Android and Flutter. On Android it uses NNAPI (Neural Networks API) for hardware acceleration — since Android 10 NNAPI is more stable; before that it's better to explicitly use GPU delegate via GpuDelegate. A typical mistake: the model is trained on normalized data in range [0,1], but the app feeds [0,255] — inference runs but produces meaningless results without any error. We include an automatic input data validation module in the SDK.

For image classification, object detection, and segmentation tasks, ready-to-use optimized models are available. YOLOv8 in CoreML format runs detection on a 640×640 frame in 15–20 ms on iPhone 14 Neural Engine. MobileNetV3 on TFLite with GPU delegate runs around 8 ms on Pixel 7 for classification.

What If You Need Text Generation On-Device?

Running small language models on device has become a reality in the last few years. Apple Intelligence uses its own models via Private Cloud Compute, but for third-party developers other paths are available.

llama.cpp with Metal backend on iOS is a working approach for phi-3-mini (3.8B parameters, 4-bit quantization, ~2.3 GB). Inference: 15–25 tokens/second on iPhone 15 Pro. For integration in Swift, use the Swift Package llama.swift or a wrapper via C interface llama.h. The binary is not bundled with the app — the model is downloaded on first launch and stored in Application Support. Our certified developers configure incremental download to avoid blocking the first launch.

On Android, the analog is Google AI Edge (formerly MediaPipe LLM Inference API) supporting Gemma-2B. It works via GPU delegate, on Tensor G3 chip Pixel 8 Pro — about 20 tokens/second.

Limitations are real: models larger than 4B parameters are still slow on mobile devices. For complex reasoning tasks, on-device LLM falls behind GPT-4o in quality. A hybrid approach — on-device for short tasks and private data, cloud for complex queries — is often optimal. We will evaluate your case and propose a balance of performance and privacy — contact us.

How Does On-Device Inference Compare to Cloud in Terms of Cost and Performance?

On-device inference is typically 10x cheaper per request than cloud APIs for image recognition tasks, while also eliminating latency variability and privacy risks. The table below summarizes the trade-offs.

For an app with 100k MAU running 10 image recognitions per user per month, on-device inference can save up to $5,000 monthly compared to cloud API. Get a free consultation on your ML architecture today.

Integrating OpenAI API and Other Cloud Models

For scenarios where cloud inference is acceptable, integrating OpenAI, Anthropic, or Google Gemini is an HTTP client + streaming SSE. In Swift, AsyncThrowingStream is convenient for streaming responses. In Kotlin, use Flow.

Critically: API keys must never be stored in the app bundle. Even an obfuscated key can be extracted from the IPA in 10 minutes using strings or frida. Correct architecture: mobile app → your own backend → OpenAI API. The backend controls rate limiting, logs requests, and protects the key.

What Is Included in the Work (Deliverables)

• Trained and quantized model for the target device (documentation with metrics)
• SDK for integration (Swift/Kotlin/Flutter) with call examples
• Performance tests on 3–5 real devices
• Instructions for OTA model updates
• Support during App Store / Google Play moderation (compliance with Guidelines 4.2, 5.1)
• 2 weeks of technical support after release

Typical Project Pipeline

1. Task analysis — measure latency, privacy, size, supported devices.
2. Model prototyping — in Python, evaluate accuracy on target data.
3. Conversion and quantization — for CoreML/TFLite with validation.
4. Integration into the app — model wrapped in a service layer (easy to swap CoreML ↔ TFLite ↔ cloud).
5. Testing — on real devices, measure FPS, RAM, battery.
6. Deployment — via TestFlight / Firebase App Distribution, monitor metrics.

Timelines: integration of a ready CoreML/TFLite model — 1–2 weeks, development of a custom model with mobile optimization — from 6 weeks, on-device LLM chat with personalization — 4–8 weeks.

Why We Take on Complex Cases?

10+ years of experience in mobile development, 50+ implemented AI/ML solutions, guarantee of compatibility with current iOS and Android versions. All projects undergo code review and load testing. The cost includes preparation of moderation documentation and training of your team.

Contact us — we will help you choose the architecture and implement ML in your app turnkey. Order an audit of your existing solution — we will assess the potential for server cost savings free of charge. In some projects, savings can reach significant amounts per month.