Primeros pasos con Gemini Fullstack LangGraph

Si quieres sacar el máximo partido del modelo Géminis, lo mejor es utilizar la API Google Gen AI junto con la aplicación de chat Géminis Fullstack LangGraph. Esta configuración proporciona un asistente de investigación de IA completo, con un frontend React y un backend LangGraph.

En este tutorial, aprenderás a configurar la aplicación desde cero: instalarás tanto el frontend como el backend, los ejecutarás juntos con un único comando y probarás la aplicación para asegurarte de que todo funciona correctamente. 

Después, recorreremos el despliegue de la aplicación utilizando Docker, que es una forma mucho más fácil para los principiantes de acceder a la aplicación y experimentar las capacidades de generación de respuestas altamente precisas y detalladas del modelo Gemini.

Si buscas otros proyectos basados en Gemini o LangGraph, no dejes de leer nuestros tutoriales Gemini 2.5 Pro API: Una Guía con Proyecto Demo y Tutorial LangGraph: ¿Qué es LangGraph y cómo se utiliza?. 

1. Configuración

Si utilizas Windows, es muy recomendable utilizar el Subsistema de Windows para Linux (WSL) para una experiencia de desarrollo más fluida. WSL te permite ejecutar un entorno Linux completo directamente en Windows, lo que facilita el uso de herramientas Linux.

1. Abre PowerShell como Administrador y ejecuta el comando wsl --install. Esto instalará Ubuntu por defecto y puede requerir un reinicio del sistema.

2. Tras reiniciar, inicia Ubuntu desde el menú Inicio o escribiendo wsl en PowerShell.

3. Instala Node.js 18 utilizando NVM (Node Version Manager).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18

4. Comprueba la versión de Node.js que tienes instalada y asegúrate de que es la 18 o superior.

node --version
npm --version
v18.20.8
10.8.2

2. Instalar Frontend y Backend

1. Clona el repositorio Gemini Fullstack LangGraph Quickstart y navega hasta el directorio del proyecto:

git clone https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart.git
cd gemini-fullstack-langgraph-quickstart

Tu estructura de directorios debería tener ahora este aspecto:

2. Ve a Google AI Studio y genera una clave API Gemini. 

Fuente: Obtener clave API | Google AI Studio

3. Navega hasta el directorio backend y crea el archivo .env con la clave API Gemini. Sustituye "TU_CLAVE_API_REAL" por la clave que has generado.

4. Instala todos los paquetes de Python utilizando el comando PIP. 

cd backend                                
echo 'GEMINI_API_KEY="YOUR_ACTUAL_API_KEY"' > .env
pip install .

5. Vuelve a la raíz del proyecto y navega hasta el directorio del frontend. Instala las dependencias del frontend utilizando npm.

cd ..
cd frontend                               
npm install  

3. Ejecutar la aplicación 

Una vez que hayas instalado todas las dependencias, puedes iniciar los servidores frontend y backend en modo de desarrollo desde la raíz del proyecto.

1. Desde el directorio raíz de tu proyecto, ejecuta

make dev

Este comando lanzará tanto el frontend (utilizando Vite) como el backend (utilizando LangGraph/FastAPI) en modo de desarrollo.

2. El frontend funciona con Vite, una moderna herramienta de compilación que proporciona una experiencia de desarrollo rápida y eficaz para los proyectos web. 

> frontend@0.0.0 dev
> vite


  VITE v6.3.4  ready in 392 ms

  ➜  Local:   http://localhost:5173/app/
  ➜  Network: use --host to expose

3. El servidor backend se iniciará y mostrará información como:

INFO:langgraph_api.cli:

        Welcome to

╦  ┌─┐┌┐┌┌─┐╔═╗┬─┐┌─┐┌─┐┬ ┬
║  ├─┤││││ ┬║ ╦├┬┘├─┤├─┘├─┤
╩═╝┴ ┴┘└┘└─┘╚═╝┴└─┴ ┴┴  ┴ ┴

- 🚀 API: http://127.0.0.1:2024
- 🎨 Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024
- 📚 API Docs: http://127.0.0.1:2024/docs

This in-memory server is designed for development and testing.
For production use, please use LangGraph Cloud.

• API backend: http://127.0.0.1:2024
• Documentación de la API: http://127.0.0.1:2024/docsYoupuedes utilizar esta documentación OpenAPI para probar los puntos finales del backend directamente desde tu navegador.
• Interfaz de usuario de LangGraph Studio: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024ThisEl panel de control te permite visualizar y probar tus flujos de trabajo de LangGraph.

4. Puedes probar el flujo de trabajo de LangGraph accediendo a la interfaz de usuario de LangGraph Studio. 

Fuente: smith.langchain.com

La API del backend se encuentra en: http://127.0.0.1:2024. La documentación de la API se encuentra en: http://127.0.0.1:2024/docs. Puedes probar cada punto final del backend utilizando la documentación de OpenAPI.

Abre http://localhost:5173/app/ en tu navegador para acceder a la interfaz de la aplicación de chat. La aplicación de chat es similar a la ChatGPT. Sólo tienes que escribir la pregunta y empezará a hacer su magia. 

Cómo funciona la aplicación de chat en el backend:

1. A partir de la información introducida por el usuario, genera un conjunto de consultas de búsqueda iniciales utilizando un modelo Gemini.
2. Para cada consulta, utiliza el modelo Gemini con la API de búsqueda de Google para encontrar páginas web relevantes.
3. El agente analiza los resultados de la búsqueda para identificar las lagunas de conocimiento, utilizando el modelo Géminis para la reflexión.
4. Si se encuentran lagunas, genera consultas de seguimiento y repite los pasos de investigación y reflexión (hasta un límite establecido).
5. Una vez recopilada suficiente información, el agente sintetiza una respuesta coherente con citas.

Como esta aplicación aún está en sus primeras fases, es posible que encuentres algunos errores e incoherencias, sobre todo en la interfaz del frontend. Un problema frecuente es la representación inconsistente del frontend.

Para solucionarlo, actualiza la línea 57 de frontend/src/App.tsx como se indica a continuación:

-           : `Need more information, searching for ${event.reflection.follow_up_queries.join(
+           : `Need more information, searching for ${(event.reflection.follow_up_queries || []).join(

4. Desplegar la aplicación utilizando Docker

Desplegar tu aplicación con Docker es sencillo y eficaz. Docker te permite empaquetar tu aplicación y sus dependencias en un único contenedor.

1. Descarga e instala Docker Desktop para tu sistema operativo (Windows, macOS o Linux). Puedes encontrar el instalador e instrucciones detalladas en el sitio web oficial de Docker. Una vez instalado, inicia Docker Desktop para asegurarte de que funciona correctamente.

2. Navega hasta el directorio raíz del proyecto y ejecuta el siguiente comando en tu terminal para construir la imagen Docker:

docker build -t gemini-fullstack-langgraph -f Dockerfile .

3. Para ejecutar la aplicación, necesitarás dos claves API:

• Clave API Gemini: Consíguelo en Google AI Studio.
• LangSmith API Key: Visita el sitio web oficial de LangSmith, regístrate para obtener una cuenta gratuita y genera tu clave API.

Fuente: LangSmith

4. Inicia la aplicación utilizando Docker Compose, sustituyendo los marcadores de posición por tus claves de API reales:

GEMINI_API_KEY=<your_gemini_api_key> LANGSMITH_API_KEY=<your_langsmith_api_key> docker-compose up

5. Accede a la aplicación:

• Frontend: http://localhost:8123/app/
• Documentación de la API: http://localhost:8123/docs

5. Probar la aplicación 

Navega hasta http://localhost:8123/app/ en tu navegador web. Escribe una pregunta en la casilla de entrada "Enumera los 5 principales titulares de noticias".

Una vez que envíes tu pregunta, la aplicación comenzará su proceso de investigación. Verás un desglose paso a paso de cómo el agente recopila y analiza la información para responder a tu consulta.

La solicitud proporcionará una respuesta detallada, incluyendo enlaces directos a las publicaciones pertinentes. La calidad y profundidad de las respuestas a menudo superan a las de otras herramientas de investigación profunda, ofreciendo más transparencia y contexto en los resultados.

Para una visión aún más profunda, visita tu Panel LangSmith. Aquí puedes revisar un registro completo de cada paso que dio el agente para generar tu respuesta. Este rastreo detallado te ayuda a comprender el proceso de razonamiento del agente y garantiza la transparencia en la construcción de las respuestas.

Fuente: LangSmith

Conclusión

En menos de 10 minutos, puedes construir la imagen Docker y lanzar tu propia aplicación de IA de investigación profunda localmente, utilizando las API gratuitas proporcionadas por Google Gemini y LangSmith. 

Esta guía te ha guiado a través de una implementación sencilla, demostrando cómo el modelo Géminis avanza en su capacidad para identificar las herramientas adecuadas, generar respuestas de investigación muy detalladas, precisas y actualizadas.

Has aprendido a configurar la aplicación, a instalar tanto el backend como el frontend, y a ejecutarlo todo localmente. Además, cubrimos un método de despliegue alternativo utilizando Docker, lo que hace aún más fácil empezar y experimentar el poder de la IA de investigación profunda.

Si estás buscando tu próximo proyecto, consulta nuestra guía sobre Gemini Diffusion: Una guía con 8 ejemplos prácticos.