Flutter AI Toolkit

¡Hola y bienvenidos al Flutter AI Toolkit!

El AI Toolkit es un conjunto de widgets relacionados con chat de IA que facilitan añadir una ventana de chat de IA a tu aplicación Flutter. El AI Toolkit está organizado en torno a una API abstracta de proveedor de LLM para que sea fácil cambiar el proveedor de LLM que deseas que use tu proveedor de chat. De forma predeterminada, viene con soporte para Firebase AI Logic.

• Chat de múltiples turnos: Mantiene el contexto a lo largo de múltiples interacciones.
• Respuestas en streaming: Muestra las respuestas de la IA en tiempo real a medida que se generan.
• Visualización de texto enriquecido: Soporta texto con formato en los mensajes de chat.
• Entrada de voz: Permite a los usuarios ingresar prompts utilizando la voz.
• Archivos adjuntos multimedia: Permite enviar y recibir varios tipos de medios.
• Llamadas a funciones: Soporta llamadas a herramientas para el proveedor de LLM.
• Estilo personalizado: Ofrece una amplia personalización para adaptarse al diseño de tu aplicación.
• Serialización/deserialización de chat: Guarda y recupera conversaciones entre sesiones de la aplicación.
• Widgets de respuesta personalizados: Introduce componentes de interfaz de usuario especializados para presentar las respuestas del LLM.
• Soporte de LLM conectable: Implementa una interfaz sencilla para conectar tu propio LLM.
• Soporte multiplataforma: Compatible con las plataformas Android, iOS, web y macOS.

Así es como se ve el ejemplo de demo que aloja el AI Toolkit:

El código fuente de esta demo está disponible en el repositorio de GitHub.

1. Installation

   Añade las siguientes dependencias a tu archivo pubspec.yaml:

   yaml

   dependencies:
     flutter_ai_toolkit: ^latest_version
     firebase_ai: ^latest_version
     firebase_core: ^latest_version
   

   content_copy
2. Configuration

   El AI Toolkit soporta tanto el endpoint de Gemini (para prototipado) como el endpoint de Vertex (para producción). Ambos requieren un proyecto de Firebase y que el paquete firebase_core esté inicializado, como se describe en los documentos de Comenzar con la API de Gemini usando los SDK de Firebase AI Logic.

   Una vez completado esto, integra el nuevo proyecto de Firebase en tu aplicación Flutter usando la herramienta flutterfire CLI, como se describe en los documentos de Añadir Firebase a tu aplicación Flutter.

   Después de seguir estas instrucciones, estarás listo para usar Firebase para integrar IA en tu aplicación Flutter. Empieza inicializando Firebase:

   dart

   import 'package:firebase_core/firebase_core.dart';
   import 'package:firebase_ai/firebase_ai.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
   

   content_copy

   Con Firebase correctamente inicializado en tu aplicación Flutter, ahora estás listo para crear una instancia del proveedor de Firebase. Puedes hacer esto de dos maneras. Para prototipado, considera el endpoint de Gemini AI:

   dart

   import 'package:firebase_ai/firebase_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)),
           // create the chat view, passing in the Firebase provider
           body: LlmChatView(
             provider: FirebaseProvider(
               // Use the Google AI endpoint
               model: FirebaseAI.googleAI().generativeModel(
                 model: 'gemini-2.5-flash',
               ),
             ),
           ),
         );
   }
   

   content_copy

   La clase FirebaseProvider expone el SDK de Firebase AI Logic a la LlmChatView. Ten en cuenta que debes proporcionar un nombre de modelo (tienes varias opciones para elegir), pero no proporcionas una clave de API. Todo eso se maneja como parte del proyecto de Firebase.

   Para cargas de trabajo de producción, es fácil cambiar al endpoint de Firebase Logic AI:

   dart

   class ChatPage extends StatelessWidget {
     const ChatPage({super.key});
   ​
     @override
     Widget build(BuildContext context) => Scaffold(
           appBar: AppBar(title: const Text(App.title)),
           body: LlmChatView(
             provider: FirebaseProvider(
               // Use the Vertex AI endpoint
               model: FirebaseAI.vertexAI().generativeModel(
                 model: 'gemini-2.5-flash',
               ),
             ),
           ),
         );
   }
   

   content_copy

   Para un ejemplo completo, consulta los ejemplos gemini.dart y vertex.dart.

3. Set up device permissions

   Para permitir que tus usuarios aprovechen características como la entrada de voz y los archivos adjuntos multimedia, asegúrate de que tu aplicación tenga los permisos necesarios:

   • Acceso a la red: Para habilitar el acceso a la red en macOS, añade lo siguiente a tus archivos *.entitlements:

     xml

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

     content_copy

     Para habilitar el acceso a la red en Android, asegúrate de que tu archivo AndroidManifest.xml contenga lo siguiente:

     xml

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

     content_copy

   • Acceso al micrófono: Configura según las instrucciones de configuración de permisos del paquete record.

   • Selección de archivos: Sigue las instrucciones del plugin file_selector.

   • Selección de imágenes: Para tomar una foto o seleccionar una imagen de su dispositivo, consulta las instrucciones de instalación del plugin image_picker.

   • Foto web: Para tomar una foto en la web, configura la aplicación según las instrucciones de configuración del plugin camera.

firebase_options.dart

Para usar la aplicación de ejemplo de Vertex AI, coloca tus detalles de configuración de Firebase en el archivo example/lib/firebase_options.dart. Puedes hacer esto con la herramienta flutterfire CLI como se describe en los documentos de Añadir Firebase a tu aplicación Flutter desde el directorio example.

En el camino, a medida que uses este paquete, por favor registra problemas y solicitudes de características así como también envía cualquier código con el que te gustaría contribuir. Queremos tus comentarios y contribuciones para asegurarnos de que el AI Toolkit sea lo más robusto y útil posible para tus aplicaciones del mundo real.