Interfaz con Streamlit y Graphviz

En esta etapa del taller se construirá la interfaz web que permitirá al usuario ingresar la descripción de su app, enviar el prompt a Gemini, y visualizar el flujo de pantallas generado como un diagrama interactivo. Esta interfaz se desarrollará con Streamlit, una librería de Python que permite crear aplicaciones web rápidas sin necesidad de conocimientos de frontend. Además, para la visualización gráfica del flujo, se utilizará Graphviz, una herramienta para representar relaciones entre elementos mediante grafos dirigidos.

Estructura general de la interfaz

La app tendrá 3 secciones principales:

• Campo de entrada: donde el usuario describe su idea de app.
• Botón de acción: que al hacer clic enviará el prompt MCP a la API.
• Sección de resultados: mostrará el flujo de pantallas generado, tanto en texto como en diagrama con Graphviz.

Detalles clave del diseño

• st.text_input permite al usuario escribir su idea.
• st.button activa la generación.
• La respuesta del modelo se analiza y transforma en pasos.
• Se usa graphviz.Digraph() para construir un grafo dirigido.
• st.graphviz_chart() renderiza el grafo directamente en el navegador.

Ventajas de esta arquitectura

• Simplicidad: no se requiere JavaScript ni HTML.
• Interactividad: actualizaciones en tiempo real con cada nueva descripción.
• Visual atractivo: los diagramas ayudan a validar la idea de forma visual.
• Flexibilidad: fácilmente escalable para generar flujos condicionales, subtareas, o flujos múltiples.