En los últimos meses, han proliferado multitud de soluciones para crear aplicaciones haciendo uso de la Inteligencia Artificial Generativa (GenAI de Generative Artificial Intelligence). Estas soluciones abarcan desde librerías y frameworks hasta servicios Software as a Service (SaaS), que se pueden integrar mediante APIs, plugins o integraciones directas en sitios web y comercios electrónicos.


Sin embargo, como desarrolladores y hackers que nos gusta exprimir la tecnología, es mejor optar por aquellas integraciones a nivel de código, ya que nos proporcionan mayor flexibilidad y control sobre las funcionalidades que queremos implementar. Hoy os quiero hablar sobre un SDK que, en mi opinión, combina excepcionalmente esta flexibilidad de soluciones de bajo nivel con la facilidad de uso característica de un plugin: AI SDK.

Figura 2: Libro de Machine Learning aplicado a Ciberseguridad de Carmen Torrano, Fran Ramírez, Paloma Recuero, José Torres y Santiago Hernández

Se trata de una librería escrita en TypeScript, totalmente open-source y creada por la empresa Vercel (junto a su comunidad). Para quienes no estén familiarizados, se trata de una empresa con sede en San Francisco, conocida por ser la creadora del framework de React, Next.js (del cual ya os hablé en este CodeTalk). 

    
Tras este contexto, comentar que AI SDK cuenta con multitud de integraciones de terceros (Gemini, OpenAI, Claude, ...) pero también nos brinda la posibilidad de conectar y desarrollar haciendo uso de modelos locales vía Ollama, entre otros más. Otra de las grandes ventajas de AI SDK es que nos permite hacer todo esto directamente desde el frontend, usando la misma base de código, siempre que el framework que utilicemos lo permita.


Y si estás pensando que, por hacerlo en el frontend, puede hacer que se exfiltre la API key del servicio de IA utilizado, déjame decirte que no, y ahora te explico cómo hacerlo para que así sea. En la imagen superior podéis ver todas las integraciones (tanto de terceros como Open-Source) con las que cuenta este SDK.

Eligiendo el provider

El primer paso es disponer de un motor de LLM de confianza. Para este artículo estaré utilizando tanto Google Gemini (cuya capa gratuita es bastante interesante) como Claude (de Anthropic), y también probaremos con Ollama haciendo llamadas a una API local en nuestro ordenador.

Como seguro todos tenemos cuenta de Google y además es gratuito y accesible para todos, te voy a explicar rápidamente como conseguir tu API key para hacer llamadas a Gemini vía API. Lo primero será acceder a Google AI Studio.


Una vez aquí, en el menú de la izquierda pulsamos sobre el botón “Get API key” de la izquierda y consecutivamente sobre “Crear clave de API”.


Este paso crea en Google Cloud un proyecto llamado “Generative Language Client”. Google AI Studio al final es un "wrapper" para facilitar a los desarrolladores el uso de sus APIs de Inteligencia Artificial Generativa, pero por debajo sigues usando Google Cloud.


Tras dar ese último clic ya tienes en tu poder la API key para utilizar en tu proyecto.


Por supuesto, esta API key la puedes utilizar donde quieras y desees, tanto desde la terminal, como veis en la siguiente imagen o desde código como vamos a estar haciendo en este post junto al SDK mencionado.


El uso de la API, como podéis observar, es totalmente gratuito siempre que se respeten ciertos límites de uso impuestos por Google. Una vez excedidos, comenzaremos a recibir errores al peticionar la API. No obstante, para realizar pruebas de concepto, desarrollos personales y aprender es más que suficiente. 

Integración con Next.js

Lo primero que debemos hacer es implementar un conector que permita enviar las peticiones desde nuestro frontend al servicio de LLM que hayamos seleccionado. Para lograrlo, crearemos una ruta dentro del directorio app o pages con la siguiente estructura:

Al utilizar un path que comienza con api, estamos configurando un endpoint interno en nuestra aplicación de Next.js. Este endpoint será el encargado de realizar las llamadas al servicio de GenAI desde el “backend del frontend”.

De esta forma, en lugar de enviar las peticiones directamente desde el navegador del cliente al servidor de LLM, donde un usuario podría interceptar la solicitud o visualizarla junto con información sensible (como el servicio de LLM utilizado, el prompt o, más importante, la API key), la comunicación se realiza desde el navegador hacia el endpoint interno que hemos creado en nuestra API de Next.js (o en cualquier otro framework con soporte de API routes, como Astro).


Ahora tenemos que escribir en este fichero, el código para hacer nuestra llamada a Google Gemini, te recomiendo seguir esta documentación oficial, pero básicamente los pasos a seguir son: 

Ahora desde el frontend tan sólo tenemos que llamar a ese endpoint (en mi caso lo he guardado en /api/curiosity/route.ts) y renderizar el resultado:

Ahora es donde llega una de las cosas que más me gusta de AI SDK y es que si queremos cambiar de proveedor ya sea a otro modelo propietario o a uno open-source, es tan fácil como:

Siguiendo con este ejemplo, he decidido que ahora quiero utilizar Anthropic y hacer uso de Claude 3.5 Haiku. Pues no hay problema, todo lo que tenemos que hacer es el siguiente cambio y tendremos nuestra aplicación funcionando nuevamente.


En el caso de Ollama, es muy similar tan solo tendremos que descargar Ollama en nuestro equipo y ejecutar “ollama server” para levantar la API en nuestro equipo. Por defecto, esta API hace uso del puerto 11434 y el endpoint “/api”.


Ollama por defecto no hace uso de API keys o Bearer tokens, por lo que si quisiéramos exponer esta API a Internet os recomiendo protegerla con un NGINX o un API Gateway para agregar esa capa de autenticación tan necesaria hoy en día. Para utilizar Ollama desde nuestro endpoint en Next.js como veis el cambio vuelve a ser menor.


Por cierto, os he comentado que también podemos generar objetos como JSONs con un formato específico. Esto es muy útil para convertir datos no estructurados, en datos estructurados. Os dejo por aquí un proyecto de ejemplo, donde con Google Gemini convierto una parrafada de una receta en un objeto que contiene los ingredientes, instrucciones y consejos en el formato que veis en la imagen. 

En este fichero, está toda la “lógica”. Os ánimo a probarlo, modificarlo y exprimirlo un poquito más… Y eso es todo, espero que os haya gustado. Como veis ya no hay excusas para ponerse a desarrollar aplicaciones utilizando la potencia de estos modelos generativos.

¡¡Saludos hackers!!