AI 工具包

欢迎来到 Flutter AI 工具包！

AI 工具包是一套与 AI 聊天相关的组件，可以轻松地将 AI 聊天窗口添加到您的 Flutter 应用中。AI 工具包围绕一个抽象的 LLM 提供商 API 构建，以便轻松更换您希望聊天提供商使用的 LLM 提供商。开箱即用，它支持两种 LLM 提供商集成：Google Gemini AI 和 Firebase Vertex AI。

• 多轮对话：在多次交互中保持上下文。
• 流式响应：实时显示 AI 生成的响应。
• 富文本显示：支持聊天消息中的格式化文本。
• 语音输入：允许用户使用语音输入提示。
• 多媒体附件：支持发送和接收各种媒体类型。
• 自定义样式：提供广泛的自定义选项以匹配您的应用设计。
• 聊天序列化/反序列化：在应用会话之间存储和检索对话。
• 自定义响应组件：引入专用 UI 组件以呈现 LLM 响应。
• 可插拔的 LLM 支持：实现一个简单的接口来插入您自己的 LLM。
• 跨平台支持：兼容 Android、iOS、Web 和 macOS 平台。

这是托管 AI 工具包的在线演示

此演示的源代码可在 GitHub 仓库中找到。

或者，您可以在 Firebase Studio 中打开它，这是 Google 在云端运行的全栈 AI 工作区和 IDE。

1. 安装

   将以下依赖项添加到您的 pubspec.yaml 文件中

   yaml

   dependencies:
     flutter_ai_toolkit: ^latest_version
     google_generative_ai: ^latest_version # you might choose to use Gemini,
     firebase_core: ^latest_version        # or Vertex AI or both

2. Gemini AI 配置

   该工具包支持 Google Gemini AI 和 Firebase Vertex AI 作为 LLM 提供商。要使用 Google Gemini AI，请从 Gemini AI Studio 获取 API 密钥。请注意不要将此密钥提交到您的源代码仓库中，以防止未经授权的访问。

   您还需要选择一个特定的 Gemini 模型名称，用于创建 Gemini 模型实例。以下示例使用 gemini-2.0-flash，但您可以从不断扩展的模型集中选择。

   dart

   import 'package:google_generative_ai/google_generative_ai.dart';
   import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';
   
   // ... app stuff here
   
   class ChatPage extends StatelessWidget {
     const ChatPage({super.key});
   
     @override
     Widget build(BuildContext context) => Scaffold(
           appBar: AppBar(title: const Text(App.title)),
           body: LlmChatView(
             provider: GeminiProvider(
               model: GenerativeModel(
                 model: 'gemini-2.0-flash',
                 apiKey: 'GEMINI-API-KEY',
               ),
             ),
           ),
         );
   }

   GenerativeModel 类来自 google_generative_ai 包。AI 工具包在此包的基础上构建了 GeminiProvider，它将 Gemini AI 插入到 LlmChatView 中，LlmChatView 是一个顶层组件，可为您的用户提供基于 LLM 的聊天对话。

   有关完整示例，请查看 GitHub 上的 gemini.dart。

3. Vertex AI 配置

   虽然 Gemini AI 对于快速原型设计很有用，但生产应用的推荐解决方案是 Firebase 中的 Vertex AI。这消除了客户端应用中对 API 密钥的需求，并替换为更安全的 Firebase 项目。要在您的项目中使用 Vertex AI，请遵循 使用 Firebase SDK 中的 Vertex AI 开始使用 Gemini API 文档中描述的步骤。

   完成后，按照 将 Firebase 添加到您的 Flutter 应用 文档中的描述，使用 flutterfire CLI 工具将新的 Firebase 项目集成到您的 Flutter 应用中。

   遵循这些说明后，您就可以在 Flutter 应用中使用 Firebase Vertex AI 了。首先初始化 Firebase

   dart

   import 'package:firebase_core/firebase_core.dart';
   import 'package:firebase_vertexai/firebase_vertexai.dart';
   import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';
   
   // ... other imports
   
   import 'firebase_options.dart'; // from `flutterfire config`
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
     runApp(const App());
   }
   
   // ...app stuff here

   在您的 Flutter 应用中正确初始化 Firebase 后，您现在可以创建 Vertex 提供商的实例了

   dart

   class ChatPage extends StatelessWidget {
     const ChatPage({super.key});
   
     @override
     Widget build(BuildContext context) => Scaffold(
           appBar: AppBar(title: const Text(App.title)),
           // create the chat view, passing in the Vertex provider
           body: LlmChatView(
             provider: VertexProvider(
               chatModel: FirebaseVertexAI.instance.generativeModel(
                 model: 'gemini-2.0-flash',
               ),
             ),
           ),
         );
   }

   FirebaseVertexAI 类来自 firebase_vertexai 包。AI 工具包构建了 VertexProvider 类，以将 Vertex AI 暴露给 LlmChatView。请注意，您需要提供一个模型名称（您有几个选项可供选择），但无需提供 API 密钥。所有这些都作为 Firebase 项目的一部分进行处理。

   有关完整示例，请查看 GitHub 上的 vertex.dart。

4. 设置设备权限

   为了让您的用户能够利用语音输入和媒体附件等功能，请确保您的应用具有必要的权限

   • 网络访问：要在 macOS 上启用网络访问，请将以下内容添加到您的 *.entitlements 文件中

     xml

     <plist version="1.0">
       <dict>
         ...
         <key>com.apple.security.network.client</key>
         <true/>
       </dict>
     </plist>

     要在 Android 上启用网络访问，请确保您的 AndroidManifest.xml 文件包含以下内容

     xml

     <manifest xmlns:android="http://schemas.android.com/apk/res/android">
         ...
         <uses-permission android:name="android.permission.INTERNET"/>
     </manifest>

   • 麦克风访问：根据 record 包的权限设置说明进行配置。

   • 文件选择：遵循 file_selector 插件的说明。

   • 图片选择：要在设备上拍照或从设备中选择图片，请参阅 image_picker 插件的安装说明。

   • 网络照片：要在 Web 上拍照，请根据 camera 插件的设置说明配置应用。

要执行仓库中的示例应用，您需要替换 example/lib/gemini_api_key.dart 和 example/lib/firebase_options.dart 文件，这两个文件都只是占位符。它们是启用 example/lib 文件夹中示例项目所需的。

gemini_api_key.dart

大多数示例应用都依赖 Gemini API 密钥，因此要使其正常工作，您需要在 example/lib/gemini_api_key.dart 文件中插入您的 API 密钥。您可以在 Gemini AI Studio 中获取 API 密钥。

firebase_options.dart

要使用 Vertex AI 示例应用，请将您的 Firebase 配置详情放入 example/lib/firebase_options.dart 文件中。您可以使用 flutterfire CLI 工具完成此操作，如 将 Firebase 添加到您的 Flutter 应用 文档中所述，请在 example 目录内执行。

在使用此软件包的过程中，请随时提交问题和功能请求，并提交您希望贡献的代码。我们期待您的反馈和贡献，以确保 AI 工具包能够为您的实际应用提供尽可能强大和有用的支持。