Vercel ISDK. Vamos a desarrollar una pequeña aplicación con ChagPT que está brutal y vamos
a ver cómo hacerlo de forma increíblemente sencilla. Vamos a aprender algunos conceptos
sobre la marcha, sobre inteligencia artificial, por ejemplo, LLM, Prompt Engineering y por qué
y qué es exactamente esto de ingeniería del prompt. Mira, en los últimos seis meses un montón de
compañías de inteligencia artificial, Scale, Jasper, Perplexity, Runaway, están utilizando
Next.js y Vercel para lanzar sus productos. Anunciaron dos cositas, un SDK para streamear y también te
explicaré qué es streamear, respuestas de la API desde modelos de inteligencia artificial y luego
un Playground para probar tanto chat como prompts y así poder explorar diferentes modelos de OpenAI.
Veremos la diferencia y la ventaja que tiene utilizar esto respecto a no utilizarlo para que veáis el
código. Tenemos aquí diferente código donde vamos a ver diferentes partes. Uno, la parte del frontend y
la parte del backend. Son tan pocas líneas de código que da vergüenza, ahí os lo dejo. Pero antes de
entrar al código, dejadme que os enseñe esto porque esta idea además también nos va a ayudar con el
código. Esto que veis aquí es el Playground que ha sacado Vercel para probar diferentes modelos. Le
podéis dar aquí y aquí podéis elegir Large Language Model, un modelo de lenguaje grande. Aquí tenéis
alpaca, Bloom, Command, GPT. Para poder probar GPT, este GPT 4, tenéis que loguearos, hay que iniciar sesión y lo
más interesante es que además podéis añadir un montón para comparar. Por ejemplo, ir a la universidad es
la mejor opción para aprender. Aprender programación. Lo que podéis ver aquí al mismo tiempo como cada uno
va contestando. Pero bueno, está bastante chulo porque así puedes comparar súper rápido en todos.
Sirve por dos cosas súper importantes. Una, todo esto que ves aquí está desarrollado con el SDK que
vamos a utilizar hoy. Y lo segundo y todavía más interesante es que si le das a este, a este iconito,
pone tomar el código de este template para este modelo. Si tú le das aquí, tienes aquí ya el código
listo para copiar y pegar. Y puedes sacar para Node.js, para Letge, JavaScript, TypeScript, para Next.js,
para Next.js, para páginas, para Svelkit y para Node.js. Incluso esto que vais a aprender hoy lo
podríais utilizar directamente en Node.js. No es ni siquiera necesario que utilicéis Next.js. Podéis utilizar
Node y ya está. También aquí veis que pone API y Page. Tendrías la parte del backend y la parte del front.
Y entonces ya tendrías copiar y pegar y ya está. No lo vamos a hacer así porque lo vamos a explicar caso a caso,
pero bueno, solo para que sepáis cómo funcionaría la cosa. Tenemos aquí dos, ¿no? Una que sea la rollo más chat y otra que
sea más el prompt. Que en el prompt es como que tú le pasas una sola cosa, no es que tengas una conversación,
sino que le pides una cosa. Por ejemplo, crea una función y ya va a clic que ponga la causa de menos
que genera. Usa el máximo a red. Entonces tú le das a Run, Playground y aquí cada uno pues te pondrá una
cosa, ¿no? Lo siento con modelo. No tengo la capacidad de interactuar con la consola. Bueno, pero bien que me has
puesto aquí el... bien que me has puesto aquí la función. Y aquí pues está bastante bien, ¿eh? Function, hace consulta,
no sé cómo se cuánto. Os voy a explicar rápidamente un modelo que tiene muy buena pinta. ¿Veis que aquí hay
diferentes iconitos? Esto es porque según el icono son diferentes empresas. Y esta
que tenemos aquí, esto es de Hugging Face. Hugging Face es como una comunidad que tienen un montón de
modelos de inteligencia artificial para utilizar y son todos como de código abierto. ¿Por qué te
cuento esto? Porque también es compatible con este SDK. Es el NPM de los modelos. Me ha gustado esa
descripción. Muy bien, Jorge. Hay unos proyectos aquí que tienen muy buena pinta. Bueno, hay un montón que
tienen muy buena pinta. De hecho, hay uno, por ejemplo, ¿ves? Facebook 1 de generar música. Pues aquí lo
tienes. Y además, desde aquí, puedes describir la música. Luffy Music Mario 8-Bit Pixeltones. Le das a
generar y te la genera, ¿vale? Esto obviamente no va súper rápido y puede tardar bastante, que podría
tardar 800 segundos. Pero bueno, es un poco para que os hagáis una idea, ¿vale? Hay un montón de modelos.
O sea, ChagPT es un modelo más de tantos que hay. Hay millones de modelos que cada uno hace una cosa. Y este
no lo vamos a poder utilizar con SDK, pero hay algunos que sí. Uno de los que mejor pinta tienen
se llama StarCoder. StarCoder es un modelo que ha sido entrenado con más de 80 lenguajes de
programación. Y con este modelo se está trabajando para hacer como un GitHub Copilot. Y este, por ejemplo,
sí que lo podríais utilizar con el SDK de Vercell. Vamos a empezar. Y para empezar, la documentación
del SDK de Vercell i es... Nice. Es gratuito. O sea, puedes probar todos los modelos, casi todos.
Pero verás aquí que tienes una cuenta pro y entonces ya te da nueva accesibilidad, te da prioridad en
algunas cosas. Bueno, total, la documentación del Vercell i SDK es increíble. Pero primero, la pregunta del
millón. ¿Qué es SDK? Un SDK es súper importante que sepáis este concepto porque es algo que se utiliza un
montón en programación, sobre todo en el software, porque es Software Development Kit. Es parecido a una
API, pero son un poquito distintas, ¿vale? Una API, un SDK, ya se parecen que son tres letras.
Una API, en realidad, serían como endpoints. Tendrías un endpoint al que atacarías directamente para
recuperar lo que sea. Por ejemplo, lo de chatGPT. Y una API tendrías que hacer curl, chatGPT. Y esto, pues,
te devuelve la respuesta, ¿no? Esto tiene la response. Y ya está. ¿Qué es un SDK? Un SDK pueden ser
muchas cosas. No tiene por qué utilizar una API. Pero un SDK, sobre todo, es un kit de desarrollo de
software. Normalmente son más bibliotecas y tal que tú puedes importar para utilizar y que lo que te
crea sería como una abstracción en la que tú no sabes lo que hace esto por dentro. Tú tienes este código
que no sabes lo que está haciendo por dentro, pero esto a lo mejor lo que está haciendo es llamar a una
API. Por ejemplo, ya sea externa o ya sea también a una API más interna del navegador o interna de lo
que sea. No tienes tú que preocuparte porque el SDK es como que te lo deja bastante más masticado. O sea,
que aquí la diferencia que tendríamos lo de chatGPT, la API sería esto y el SDK sería cuando lo
importamos así, ¿vale? ¿Se puede decir que un SDK es como una librería en pie? Totalmente. Aquí tendríamos
que es serverless edge ready. Esto está súper interesante y veremos cuál es la gracia de esto, ¿vale? El streaming.
Vamos a poner el modo oscuro pirata, ¿vale? Porque la verdad es que me estoy dejando a la vista yo aquí
también. Aquí. Modo oscuro pirata. El streaming, ¿qué es? Igual que cuando estamos en Twitch, lo que está
haciendo es streamear la respuesta porque no es que se descarga todo el directo y luego te lo enseña,
sino que mientras se está haciendo el directo lo está enviando. O sea, mientras yo estoy produciendo el
vídeo y el audio que estás escuchando, te lo estoy enviando y está llegando a ti. Eso es hacer streaming,
¿vale? Hay un flujo constante de datos y conforme se va creando, se está enviando y se está
distribuyendo. Pensad que si no hiciese ese streaming, la experiencia de usuario sería mucho
peor, ¿vale? Tiene un montón de ejemplos, templates. Lo podéis utilizar con Next.js, con Svelte, con Naxx.
Es compatible con Vue, que esto no es solo de Next.js. Vamos a hacer el Getting Started para hacer paso
a paso la primera aplicación y vamos a ver cómo funciona. Lo primero que necesitáis, súper importante,
Node.js 18 y una key de OpenAI. No hay otra forma y esto, por desgracia, nos vamos a tener que
habituar. Si no tienes, pues nada, te puedes crear una cuenta. Lo bueno es que durante unos meses tienes
gratis como un trozo. Yo tendría estos por aquí y luego vamos a poner aquí, ¿vale? Vamos a poner,
por ejemplo, Twitch. Y ahora pues saldrá la piquí. La voy a quitar porque si no, me la robáis y me
hacéis que salgan las cosas súper caras. Podemos utilizar este, podéis utilizar MPM, pero fijaos en una
cosa de Vercell que ya directamente utilizan PNPM. O sea, ya ni siquiera te dan la opción de
utilizar MPM, es del palo. No, no. PNPM. DLX. DLX, esto no tengo ni puñetera que
idea que es. Esto sin tener que instalarlo. O sea, es como el MPX que teníamos. ¿Ves? Es que
esto pone que es de la versión 8. En la versión 7 era PNPX, ¿vale? O sea, lo que hace es descargárselo
y sin necesidad de instalarlo, lo ejecuta el vuelo. Pues PNPM DLX Create Next App, que esto sería
igual para crear un proyecto de Next.js desde cero. Y ahora pues el nombre que le queramos poner.
Chat, GPT, I, App. Y esto ya pues descargaría todo. Nos empieza a hacer las preguntas. ¿Quieres
utilizar TypeScript? Vamos a decir que no. Slinn, sí. Tailwind, por si acaso. Directorio Source,
vamos a decirle que sí. El AppRouter, vamos a decirle también. In por alias, por supuesto que sí.
Y sí, lo dejamos así configurado. Perfecto. Ahora está instalando las dependencias, así que está
haciendo como un MPM install. Ok. Y ya lo tendríamos. Y hacemos un PNPM render. Vamos a limpiar un poco
la página, porque ya veis que tenía mucha historia que no vamos a necesitar. Y vamos
a poner aquí nuestra primera app con inteligencia artificial. Así, nuestra primera app con inteligencia
artificial. Vamos a poner class, grid, content, center, min, h. Ay, es que no es hfull, es hscreen.
Coño, hace tiempo que no utilizo ya Tailwind y ya se me está olvidando, ¿eh? Maldito Tailwind.
Bueno, muy bien. ¿Qué más nos dice esto? Pues instalar las dependencias. Pero os voy a explicar,
porque quiero que lo entendáis, no vamos a copiar y ya está. Os voy a estar explicando todo.
Aquí hay dos dependencias que tenemos que instalar. Una es AI y otra es OpenAI Edge. La
de PNPM install AI. Este es el SDK de Vercell que han preparado, que es el que tiene muy buena
pinta, el que vamos a importar para hacer las llamadas a ChatGPT y que nos va a devolver el
streaming de datos, todo preparado, súper fácil. Y además va a tener unas utilidades para el
frontend también, para facilitar el uso. Y luego OpenAI-Edge. Hay dos dependencias
de OpenAI. Ya tienen ellos una biblioteca para poder consumir ChatGPT, la API ChatGPT y todo
esto, ¿vale? OpenAI Node.js Library. ¿Ves que es OpenAI? Entonces la pregunta del millón
es, oye, ¿por qué utilizas OpenAI Edge? ¿Por qué utilizas esta? La diferencia es pequeña
pero importante. Y es que OpenAI Edge utiliza Fetch, nativo de la plataforma, ¿vale? Y OpenAI
utiliza por debajo Axios. Y tú dirás, ¿por qué esto es importante? Bueno, porque en
Edge ese es un tipo de servidor, es como Cloud. Imagínate, cuando hablan del Cloud, ¿no?
Que es la nube. El Edge son servidores que están muy cerca del usuario y no tienen
Node.js exactamente. Lo que se ejecuta ahí exactamente es otro tipo de cosa. Está basado
en V8, que es el mismo motor que tiene Node.js, pero no es exactamente Node.js. Tiene mucha
capa de compatibilidad, pero no es 100% lo mismo de Node.js. Y Axios da problemas por
eso, ¿vale? Lo bueno del Edge es que es mucho más rápido que Node.js. Está pensado justamente
para que sea mucho, mucho más rápido y casi no tenga latencia. Así que esa es la razón
por la que la librería que tenemos que instalar es la de OpenAI, guión. Vamos a poner, a ver,
.ev local, ¿vale? Está ignorado. El siguiente paso, lo primero que vamos a necesitar hacer,
va a ser básicamente crear nuestra primera ruta de la API, porque a lo mejor podríamos
utilizar esto totalmente sin una interfaz. Así que vamos a crear primero la API. Para
crear la API, vamos a irnos aquí. Veis que tenemos source app. En Next.js, cada vez que
queramos crear una nueva ruta, tendríamos que poner en app, podríais crear la carpeta
que queráis. Yo voy a crear API, pero esto no es obligatorio, ¿vale? Lo de crear API.
¿Por qué vamos a poner API? Hombre, yo creo que está bien porque así puedes hacer
.api, lo que sea. Y aquí ya podrías crear un root.js o .ts o lo que sea. Ahora esto lo que va
a hacer es responder con el método que tú le digas. Por ejemplo, si hacemos export async
function get y aquí te llegaría la request, puedes devolver directamente pues la respuesta.
Podríamos hacer new response y decirle que esto, el body, pues sea nuestra primera app.
Vamos a hacer esto, ¿vale? Esto está muy chulo porque esto es de la plataforma web. Y aquí
le llega la request, que por ahora hemos estado utilizando, luego la hacemos. Y lo que devolvemos
es una nueva respuesta que en el cuerpo va a tener un JSON Stringify con este mensaje.
Le tendríamos que poner aquí en los headers que es una application JSON y ya está. Esto sería como
lo más nativo. Ahora mismo casi no estamos viendo, o sea, no estamos viendo nada en el Next.js.
O sea, añadir otra, vamos a poner barra completion. Entonces ahora cuando nosotros vayamos a nuestro
proyecto este y hagamos barra API, barra completion e intentemos acceder, esto... Vale, me da un
object object. A ver, si ponemos aquí el JSON Stringify, claro, es que esto soy yo que he ido a por todas,
pasa por la API que me ha puesto iHackoPilot porque me fía, ¿vale? Primero creímos que
tendríamos que tener por aquí esto, ¿vale? La respuesta. Y aquí deberíamos tener los
headers con el content type y decirle que esto es un application JSON. Y ahora sí, ahora sí.
O sea, aquí tendríamos como primer parámetro tendríamos lo que devolvemos, ¿vale? Que
sea una cadena de texto con el JSON. Y aquí tendríamos las cabeceras, ¿vale? Le estamos diciendo que la
cabecera, le estamos diciendo que el tipo de contenido es application JSON y aquí lo tenemos. Vale, perfecto.
Ahora vamos a hacer que esto se conecte con ChatGPT. Así que vamos a importar primero las dependencias
que necesitamos y vamos a importar las de OpenAI Edge. Las dos que necesitamos es la configuración,
¿vale? Y OpenAI API. Si utilizásemos otra conexión, pues tendrías que utilizar HuggingFace,
la que sea, ¿vale? Y ahora sí tendríamos el OpenAI Stream, que esto es lo que nos está creando la utilidad
para poder hacer streaming de los datos de Vercell. Y luego tendríamos el Streaming Text Response,
que lo tendríamos de AI.