Menghubungkan aplikasi Flutter dengan kecerdasan buatan modern: OpenAI, Gemini, Claude, & DeepSeek.
Tekan → untuk mulai
Perjalanan kita dari konsep dasar AI API hingga membangun Mini Project AI Assistant.
📌 Prasyarat: BAB 1–8 (REST API, JSON, State Mgmt, Clean Arch, MLKit).
API yang memberi aplikasimu akses ke "otak" kecerdasan buatan tanpa perlu melatih model sendiri.
Kamu (aplikasi) tidak perlu tahu cara memasak. Kamu cukup memesan ke pelayan (API), dan dapur AI raksasa di belakang yang menyiapkan hasilnya.
Intinya: kita berkomunikasi lewat HTTP request (POST) dan menerima JSON response — persis seperti REST API di BAB 1, tapi "isinya" cerdas.
Standar industri. Model GPT untuk chat, ringkasan, dan reasoning umum.
Seperti penerjemah jenius yang mengerti bahasa manusia & mengubahnya jadi jawaban tepat. Kamu cukup kirim teks, ia balas teks.
import 'package:http/http.dart' as http; import 'dart:convert'; class OpenAIService { final apiKey = "YOUR_API_KEY_HERE"; final url = Uri.parse( "https://api.openai.com/v1/chat/completions"); Future<String> ask(String prompt) async { final res = await http.post(url, headers: { "Authorization": "Bearer $apiKey", "Content-Type": "application/json", }, body: jsonEncode({ "model": "gpt-4o-mini", "messages": [ {"role": "user", "content": prompt} ], }), ); final data = jsonDecode(res.body); return data["choices"][0] ["message"]["content"]; } }
Multimodal — bisa memahami teks, gambar, dan punya package resmi Flutter.
Bukan cuma membaca, Gemini bisa "melihat" gambar & mendengar konteks. Seperti detektif yang memakai semua indranya untuk menyimpulkan.
// pubspec: google_generative_ai: ^0.4.0 import 'package:google_generative_ai/' 'google_generative_ai.dart'; class GeminiService { final model = GenerativeModel( model: "gemini-1.5-flash", apiKey: "YOUR_API_KEY_HERE", ); Future<String> ask(String prompt) async { final res = await model.generateContent( [Content.text(prompt)], ); return res.text ?? "(kosong)"; } }
Unggul di teks panjang, penalaran hati-hati, dan jawaban yang aman serta terstruktur.
Seperti penasihat senior yang membaca dokumen tebal lalu memberi ringkasan teliti & pertimbangan matang — fokus pada keamanan jawaban.
import 'package:http/http.dart' as http; import 'dart:convert'; class ClaudeService { final key = "YOUR_API_KEY_HERE"; final url = Uri.parse( "https://api.anthropic.com/v1/messages"); Future<String> ask(String prompt) async { final res = await http.post(url, headers: { "x-api-key": key, "anthropic-version": "2023-06-01", "content-type": "application/json", }, body: jsonEncode({ "model": "claude-3-5-sonnet-20241022", "max_tokens": 1024, "messages": [ {"role": "user", "content": prompt} ], }), ); final d = jsonDecode(res.body); return d["content"][0]["text"]; } }
Hemat biaya & kuat untuk coding/reasoning. Formatnya kompatibel dengan OpenAI.
Seperti insinyur yang menyelesaikan masalah teknis dengan biaya rendah. Karena formatnya = OpenAI, kamu cukup ganti URL & model.
import 'package:http/http.dart' as http; import 'dart:convert'; class DeepSeekService { final key = "YOUR_API_KEY_HERE"; // Endpoint mirip OpenAI final url = Uri.parse( "https://api.deepseek.com/chat/completions"); Future<String> ask(String prompt) async { final res = await http.post(url, headers: { "Authorization": "Bearer $key", "Content-Type": "application/json", }, body: jsonEncode({ "model": "deepseek-chat", "messages": [ {"role": "user", "content": prompt} ], }), ); final d = jsonDecode(res.body); return d["choices"][0]["message"]["content"]; } }
Setiap provider punya kekuatan berbeda. Pilih sesuai kebutuhan project-mu.
| Provider | Keunggulan | Package/Cara | Cocok Untuk |
|---|---|---|---|
| OpenAI | Serbaguna, ekosistem besar | http (REST) | Chatbot umum, asisten |
| Gemini | Multimodal (teks+gambar) | google_generative_ai | Analisis gambar + teks |
| Claude | Teks panjang, aman, teliti | http (REST) | Ringkasan dokumen |
| DeepSeek | Murah, kuat di coding | http (OpenAI-compatible) | Asisten coding hemat |
💡 Tips: Buat abstract class AIService agar bisa ganti provider tanpa ubah UI (lihat Mini Project).
Seni menyusun perintah agar AI memberi jawaban yang tepat & konsisten.
Resep detail → masakan konsisten. Resep asal → hasil acak. Prompt = resep untuk AI.
// System prompt menetapkan "peran" AI "messages": [ {"role":"system", "content":"Kamu tutor Flutter yang ramah."}, {"role":"user", "content":"Jelaskan StatelessWidget."}, ]
Pola dasar: kirim daftar pesan → AI melengkapi pesan berikutnya.
// "messages" menyimpan SELURUH riwayat percakapan List<Map> history = []; Future<String> chat(String userMsg) async { history.add({"role":"user", "content": userMsg}); // 1. simpan input final reply = await service.askWithHistory(history); // 2. kirim semua history.add({"role":"assistant", "content": reply}); // 3. simpan balasan return reply; // AI "ingat" konteks karena history dikirim ulang }
Jawaban muncul sepotong demi sepotong (token), bukan menunggu selesai semua.
Seperti orang mengetik di depanmu — kamu baca sambil ia menulis. Terasa cepat & hidup, tak perlu menunggu paragraf utuh.
// Gunakan Stream + StreamBuilder di UI Stream<String> askStream(String prompt) async* { final req = http.Request("POST", url) ..headers.addAll(headers) ..body = jsonEncode({ "model": "gpt-4o-mini", "stream": true, // kunci streaming! "messages": [{"role":"user","content":prompt}], }); final res = await req.send(); await for (final chunk in res.stream.transform(utf8.decoder)) { yield chunk; // kirim potongan ke UI } } // Di widget: StreamBuilder<String>( stream: askStream(prompt), builder: (ctx, snap) => Text(snap.data ?? ""), );
Arsitektur chatbot: UI ↔ State ↔ Service ↔ AI API.
class ChatScreen extends StatelessWidget { Widget build(ctx) { final p = ctx.watch<ChatProvider>(); return Scaffold( appBar: AppBar(title: Text("AI Chat")), body: ListView.builder( itemCount: p.messages.length, itemBuilder: (_, i) => ChatBubble(p.messages[i]), ), bottomNavigationBar: MessageInput( onSend: (text) => p.send(text), // panggil provider ), ); } }
Chatbot + "kemampuan khusus": jadwal, catatan, ringkasan — diarahkan lewat system prompt.
Assistant = chatbot dengan persona & tugas spesifik. Kita "kunci" perannya lewat system prompt sehingga jawabannya fokus.
const systemPrompt = """ Kamu asisten pribadi siswa SMK. Tugas: bantu jadwal, catatan, & belajar. Jawab singkat, ramah, Bahasa Indonesia. """; Future<String> assist(String q) { return service.askWithHistory([ {"role":"system","content": systemPrompt}, {"role":"user", "content": q}, ]); }
Mengubah teks panjang menjadi ringkasan padat — ideal untuk berita & artikel.
Future<String> summarize(String article) { final prompt = """ Ringkas teks berikut menjadi 3 poin utama dalam Bahasa Indonesia yang jelas: $article """; return service.ask(prompt); } // Tips: batasi panjang input agar hemat token if (article.length > 6000) { article = article.substring(0, 6000); }
Gabungkan MLKit (baca teks dari gambar) dengan AI (rapikan & pahami hasilnya).
// 1. MLKit (BAB 8) baca teks dari gambar final recognizer = TextRecognizer(); final result = await recognizer.processImage(inputImage); String rawText = result.text; // sering berantakan // 2. AI merapikan & menstrukturkan final prompt = """ Perbaiki typo & rapikan hasil OCR berikut, lalu buat poin ringkas: $rawText """; String clean = await aiService.ask(prompt);
Proyek puncak BAB 9: aplikasi asisten cerdas yang menggabungkan semua yang dipelajari.
Aplikasi chat AI dengan riwayat, streaming, & fitur ringkasan.
data / domain / presentation — sesuai BAB 6.
Lapisan yang rapi membuat AI mudah diganti tanpa menyentuh UI.
// Abstract: UI tak peduli provider apa di belakang abstract class AIService { Future<String> ask(String prompt); Stream<String> askStream(String prompt); } // Tinggal pilih implementasi: AIService service = OpenAIService(); // atau GeminiService(), dst
Inti logic: Provider yang mengelola pesan & memanggil AIService.
class ChatProvider extends ChangeNotifier { final AIService ai; ChatProvider(this.ai); final List<Message> messages = []; bool loading = false; Future<void> send(String text) async { messages.add(Message.user(text)); loading = true; notifyListeners(); final reply = await ai.ask(text); messages.add(Message.ai(reply)); loading = false; notifyListeners(); } }
class Message { final String text; final bool isUser; Message(this.text, this.isUser); factory Message.user(t)=>Message(t,true); factory Message.ai(t)=>Message(t,false); }
ChangeNotifierProvider( create: (_) => ChatProvider(OpenAIService()), child: ChatScreen(), );
Tampilan aplikasi AI Assistant yang sudah jadi.
🎉 Selamat! Kamu telah membangun aplikasi AI utuh dari nol.
Semua konsep penting dalam satu pandangan.
Buat aplikasi Flutter berisi satu layar chat yang terhubung ke OpenAI API. Pengguna mengetik pertanyaan, AI menjawab di bubble chat.
Ketentuanhttp package & chat completionKembangkan chatbot Tugas 1 agar jawaban AI muncul secara streaming (huruf per huruf) menggunakan Stream & StreamBuilder.
"stream": true pada request bodyhttp.Request().send() untuk membaca streamBangun aplikasi yang menerima teks berita (paste/input), lalu menampilkan ringkasan 3 poin dari AI. Terapkan struktur Clean Architecture sederhana.
Ketentuandata / domain / presentationAIService (bebas pilih provider)🏁 Selesai BAB 9 — kamu kini mampu mengintegrasikan AI ke aplikasi Flutter nyata!