Saltar al contenido principal

Conceptos y componentes principales del GenUI SDK

Familiarízate con los componentes y conceptos principales del SDK de Flutter para GenUI.

Componentes principales

#

El paquete genui está construido alrededor de los siguientes componentes principales:

Conversation

La fachada principal y punto de entrada para el paquete. Incluye la clase SurfaceController, gestiona el historial de conversaciones y orquesta todo el proceso de interfaz de usuario generativa.

Catalog

Una colección de objetos CatalogItem que define el conjunto de widgets que la IA tiene permitido usar. El SurfaceController admite múltiples catálogos, lo que te permite organizar tus widgets en grupos lógicos. Cada CatalogItem especifica el nombre de un widget (para que la IA lo referencie), un esquema de datos para sus propiedades y una función constructora (builder) para renderizar el widget de Flutter.

DataModel

Un almacén centralizado y observable para todo el estado dinámico de la interfaz de usuario. Los widgets están vinculados a los datos en este modelo. Cuando los datos cambian, solo se reconstruyen los widgets que dependen de ese fragmento específico de datos.

A2uiTransportAdapter

Un puente que analiza flujos de texto sin procesar provenientes de tu LLM en comandos A2uiMessage para el SurfaceController.

A2uiMessage

Un mensaje enviado desde la IA (analizado por el A2uiTransportAdapter) a la interfaz de usuario, indicándole que realice acciones como createSurface, surfaceUpdate, dataModelUpdate o deleteSurface.

SurfaceController

Maneja el procesamiento de los A2uiMessages, gestiona el DataModel y mantiene el estado de las superficies de la interfaz de usuario.

Cómo funciona

#

La clase Conversation gestiona el ciclo de interacción:

  1. User input

    El usuario proporciona un prompt (por ejemplo, a través de un campo de texto). La aplicación llama a conversation.sendMessage().

  2. AI invocation

    La clase Conversation envía el mensaje del usuario al SDK del LLM.

  3. AI response

    El LLM, guiado por los esquemas de widgets proporcionados en su prompt del sistema, envía respuestas de vuelta.

  4. Stream handling

    El flujo de texto del SDK del LLM se introduce en el A2uiTransportAdapter.

  5. UI state update

    Los A2uiMessages analizados por el adaptador se pasan a SurfaceController.handleMessage(), lo que actualiza el estado de la interfaz de usuario y el DataModel.

  6. UI rendering

    El SurfaceController difunde una actualización, y cualquier widget Surface que esté escuchando ese ID de superficie se reconstruirá. Los widgets están vinculados al DataModel, por lo que se actualizan automáticamente cuando cambian sus datos.

  7. Callbacks

    Las respuestas de texto y los errores activan callbacks en la clase Conversation o son manejados por tu flujo específico de integración de LLM.

  8. User interaction

    El usuario interactúa con la interfaz de usuario recién generada (por ejemplo, escribiendo en un campo de texto). Esta interacción actualiza directamente el DataModel. Si la interacción es una acción (como un clic en un botón), la Surface captura el evento y lo reenvía al SurfaceController, el cual crea automáticamente un nuevo UserMessage que contiene el estado actual del modelo de datos y reinicia el ciclo.

Para obtener información más detallada sobre la implementación del GenUI SDK para Flutter, consulta el documento de diseño.

La siguiente sección te guiará a través de la adición de genui a tu aplicación.