Google AI Dart SDKを使ってGeminiとチャットできるアプリを作ってみた

はじめに

2024年2月16日 (JST)、Googleは、DartやFlutterでGeminiなどを扱えるGoogle AI Dart SDKを発表しました。
早速、このSDKを使ってGeminiとチャットできるアプリを作ってみました！(リリースはしてません。)

Google AI Dart SDKの詳細については、こちらの記事を見てください！
https://medium.com/flutter/harness-gemini-in-your-dart-and-flutter-apps-00573e560381

API Keyの取得

Google AI StudioでAPI Keyを取得します。
無料で取得できます。
https://aistudio.google.com/app/apikey

Flutterプロジェクトの作成

Flutter 3.19以上、Dart 3.3以上が必要になります。
最新のFlutterをインストール後、プロジェクトを作成します。

asdf install flutter 3.19.0

flutter create google_ai_dart_sdk_sample

パッケージの追加

google_generative_aiパッケージを追加します。
https://pub.dev/packages/google_generative_ai

flutter pub add google_generative_ai

これで、準備が整いました！

UI無しで試してみる

まずは、UI無しで試してみます。
API Keyは、dart-defineで実行時にセットしています。

import 'package:flutter/material.dart';
import 'package:google_ai_dart_sdk_sample/screens/app.dart';
import 'package:google_generative_ai/google_generative_ai.dart';

void main() async {
  const apiKey = String.fromEnvironment('API_KEY');
  final model = GenerativeModel(
    model: 'gemini-pro',
    apiKey: apiKey,
  );

  const prompt = '猫ミームについて一文で簡潔に教えてください';
  final content = [Content.text(prompt)];
  final response = await model.generateContent(content);

  print('結果: ${response.text}');

  runApp(const App());
}

flutter run --dart-define=API_KEY=[YOUR_API_KEY]

以下のような結果が出力されました。
めちゃくちゃ簡単に実装できました！

結果: 猫の面白い行動や表情を捉えた画像や動画で、インターネット上で広く共有され、サブカルチャーや言語の一部となっている。

チャットUIで試してみる

UIを追加して、チャット形式で会話できるようにしていきます。

パッケージの追加

簡単にチャット機能が実装できる以下のパッケージを追加します。
https://pub.dev/packages/flutter_chat_ui

flutter pub add flutter_chat_ui flutter_chat_types

コードを書いていく

Flutter Hooksを使用していますが、各々の環境に合わせて置き換えてください。

import 'package:flutter/material.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_chat_types/flutter_chat_types.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:google_generative_ai/google_generative_ai.dart';

const ai = User(id: 'gemini');
const user = User(id: 'user');

class HomeScreen extends HookWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final chat = useState<ChatSession?>(null);
    final messages = useState<List<types.Message>>([]);

    void addMessage(User author, String text) {
      final timeStamp = DateTime.now().millisecondsSinceEpoch.toString();
      final message = types.TextMessage(
        author: author,
        id: timeStamp,
        text: text,
      );
      messages.value = [message, ...messages.value];
    }

    Future<void> onSendPressed(PartialText text) async {
      addMessage(user, text.text);

      final content = Content.text(text.text);
      try {
        final response = await chat.value?.sendMessage(content);
        final message = response?.text ?? 'エラーが発生しました';
        addMessage(ai, message);
      } on Exception catch (err) {
        final isOverloaded = err.toString().contains('overloaded');
        final message = isOverloaded
          ? '混雑しています。しばらくしてからもう一度お試しください。'
          : 'エラーが発生しました';
        addMessage(ai, message);
      }
    }

    useEffect(() {
      const apiKey = String.fromEnvironment('API_KEY');
      final model = GenerativeModel(
        model: 'gemini-pro',
        apiKey: apiKey,
      );

      chat.value = model.startChat();

      return null;
    }, [],);

    return Scaffold(
      body: Chat(
        user: user,
        messages: messages.value,
        onSendPressed: onSendPressed,
      ),
    );
  }
}

実行してみる

完成しました🎉

さいごに

SDKを使うことで、とても簡単にGeminiとチャットできるアプリを作ることができました。
みなさんもぜひ試してみてください！

今回実装したコードは以下のリポジトリにあります。
https://github.com/hori-design/google_ai_dart_sdk_sample