#10 | AI Feature Integration

Last updated: October 26, 2026

Bahasa Indonesia | English

Learning objectives

After completing this codelab, students will be able to:

understand LLM API integration concepts for mobile apps;
design chat interfaces with streaming responses;
integrate OCR, Speech-to-Text, and Image Understanding;
apply safe and effective prompt design;
handle privacy, cost, error handling, and fallback design;
evaluate user experience on AI features.

Preparation

A laptop/PC and the Week 5-9 project already completed (for example campus_notify or the Week 7 refactor). This codelab adds one AI feature to an existing project.
Flutter SDK, VS Code (Flutter/Dart extensions), Git, and one AI coding assistant (GitHub Copilot / Cursor / Claude Code / equivalent).
Understanding of Riverpod, repositories, and the Week 7 dependency rule.
An AI API provider account (e.g., Google Gemini, OpenAI, Hugging Face) to get an API key.

1. What is AI Feature Integration?

AI features enable mobile apps to communicate with cloud AI models to provide intelligent services to users:

Chat assistant — real-time Q&A with LLM API
OCR — text extraction from images or documents
Speech-to-Text — convert voice input to text
Image Understanding — caption and image analysis via AI
Recommendation — personalized suggestions based on user data

2. AI Integration Architecture

+----------------+      HTTPS/wss      +----------------+
|   Flutter UI   | <-----------------> |  AI API Layer  |
|  (Chat, OCR,   |      (Dio/http)     |  (LLM, OCR,    |
|   STT, Image)  |                     |   STT, Vision) |
+----------------+                     +----------------+
        |                                      |
        | API Key (secure storage)             | Response
        v                                      v
+----------------+      Optional      +----------------+
|  Local Cache   | <-----------------> |   Backend    |
|  (Hive/SQLite) |     (batching)     |  (auth, log) |
+----------------+                     +----------------+

API keys are never stored directly in source code
Use flutter_secure_storage to store tokens/keys
Consider cost per request and rate limits
Apply local caching to reduce repeated AI API calls

3. Prompt Design for Mobile

Component	Example	Purpose
System prompt	"You are a friendly campus assistant, answer in Indonesian, max 2 sentences"	Set persona and boundaries
User prompt	"Class schedule on Monday?"	User input
Context	Schedule data, user profile, location	Make response relevant
Limits	Do not share other users' private data	Privacy and security

Tips: Keep prompts short and specific, translate output if needed, and validate output before showing to user.

Step 1: Add dependencies

Add to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
  flutter_secure_storage: ^9.0.0
  riverpod: ^2.5.0

Step 2: Create AI Service

Create lib/ai/ai_service.dart:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class AiService {
  final _storage = const FlutterSecureStorage();
  final _apiUrl = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent';

  Future<String> ask(String question) async {
    final apiKey = await _storage.read(key: 'ai_api_key');
    if (apiKey == null || apiKey.isEmpty) {
      throw Exception('API key not available. Please set it in settings.');
    }

    final response = await http.post(
      Uri.parse('$_apiUrl?key=$apiKey'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({
        'contents': [{
          'parts': [{'text': question}]
        }]
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['candidates'][0]['content']['parts'][0]['text'];
    } else {
      throw Exception('Failed to call AI API: ${response.statusCode}');
    }
  }

  Future<void> saveApiKey(String key) async {
    await _storage.write(key: 'ai_api_key', value: key);
  }
}

Step 3: Create Chat Screen

Create lib/features/chat_screen.dart with streaming response and loading indicator.

OCR (Optical Character Recognition)

Take photo from camera/gallery using image_picker
Send to AI API for text extraction
Use for: student ID, receipts, documents, bulletin boards

Speech-to-Text

Record user voice using record or just_audio
Convert to text via AI API
Use for: fast input, accessibility

Image Understanding

Upload image and ask AI for description
Use for: product description, object identification, accessibility

final result = await aiService.recognizeText(imageFile);
final text = await aiService.speechToText(audioFile);

Risk and Mitigation Table

Risk	Mitigation
User data leakage	Never send sensitive data to AI API
Cost spike	Limit requests per user/day, use local cache
API error / down	Show friendly message, retry option, offline mode
Irrelevant response	Apply validation and fallback to local data

Fallback Example

try {
  final response = await aiService.ask(question);
} catch (e) {
  showDialog(
    context: context,
    builder: (_) => AlertDialog(
      title: const Text('AI Service Busy'),
      content: const Text('Try again later or use offline mode.'),
    ),
  );
}

Mini project / Industry Challenge

Integrate one AI feature (chat or OCR or Speech-to-Text) into an existing project.
Include system prompt, user prompt, and initial AI output in docs/ai-log.md.
Green-machine evidence: flutter analyze + flutter test in README.
Risk table + privacy and cost mitigation in README.
Push to 10-week-10-ai-feature-integration/ with lib/, docs/, README.md, screenshots/.

Reflection

Which AI feature did you integrate and why?
How do you protect user privacy when using AI API?
What fallback do you provide if AI service errors?
One thing you learned about AI feature UX on mobile?