Cómo crear aplicaciones con cualquier modelo de GenAI usando AI SDK

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.

Figura 1:Cómo crear aplicaciones con cualquier

modelo de GenAI usando AI SDK

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). 

Figura 3:Optimiza tu Web con Next.js: Un Enfoque Práctico

Además de Next.js, cuentan con numerosas aplicaciones y proyectos que para aprender y potenciar tus desarrollos software son muy buenas, como es el caso de v0.dev (un chatbot para crear interfaces web usando código React con TailwindCSS)

Figura 4: v0.dev

    
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.

Figura 5: Integraciones AI SDK

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.

Figura 6: 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”.

Figura 7: Creación de la API Key

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.

Figura 8: Creando la API Key

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

Figura 9: API de ejemplo generada

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.

Figura 10: Uso de la API Key el POST de curl

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:

 \api\<path>\route.ts 

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).

Figura 11: Esquema de routes

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: 

Paso 1: Instalar el AI SDK y el del provider seleccionado, en nuestro caso Google (npm install ai @ai-sdk/google).

Paso 2: Guardar en la variable de entorno GOOGLE_GENERATIVE_AI_API_KEY la API key generada anteriormente.

Paso 3: Escribir el código siguiente en el fichero de la API route creada. Este SDK nos permite generar texto (como en el ejemplo de la imagen), objetos (JSON) o tomar como entrada texto, imágenes e incluso PDFs (a partir de la versión 4 de AI SDK.

Figura 12: Prompting usando el SDK

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:

Figura 13: Resultado final

Cambiando de provider a Anthropic Claude 3.5 Haiku u Ollama

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:

1. Instalar la dependencia relativa al proveedor elegido

2. Cambiar la variable de entorno con el nombre que nos indique el proveedor (esta información se puede encontrar en la documentación de AI SDK, en la sección Provider Instance de cada proveedor)

3. Modificar dos líneas en la API route

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.

Figura 14: Usando Claude 3.5 Haiku

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”.

Figura 15: Ollama Server running

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.

Figura 16: Usando Ollama como proveedor

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. 

Figura 17: Proyecto de ejemplo usando GenAI

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!!

Autor: Javier Álvarez Páramo (Investigador en el IdeasLocas)

Contactar con Javier Álvarez Páramo