Aplicaciones inteligentes como ChatGPT, ya son algo practicamente normal en nuestro día a día, y esto no solo es para los usuarios sino tambien para los desarrolladores, asi que si tu eres uno de estos ultimos y estas intentando añadir caracteristicas inteligentes a tus aplicaciones, quizas estes pensando en la API de OpenAI de ChatGPT y desarrollar tu propia interfaz, usando React por ejemplo o un framework como Nextjs.

Que si bien no es muy dificil, tambien es posible hacerlo en cuestion de minutos gracias a un modulo de React llamado useLLM.

¿Qué es useLLM?

useLLM es un modulo de npm para proyectos de React (y frameworks basados en este como Nextjs) que permite añadir Modelos de lenguaje grandes o del ingles Large Language Models, dentro de proyectos de React simplemente añadiendo componentes y Hooks.

La biblioteca ofrece esto de momento:

• Usa el hook useLLM en tu componente react (lado del cliente)
• Usa createLLMService para crear un punto final de API para el hook (lado del servidor)
• Usa llmService.registerTemplate para configurar indicaciones y opciones predefinidas (lado del servidor)

El proyecto es Open Source y está disponible en Github

Creación del Proyecto

Pero para entenderlo mejor vamos a probarlo

Primero creemos un proyecto usando Vitejs:

❯ npm create vite
√ Project name: ... usellm-tutorial
√ Select a framework: » React
√ Select a variant: » JavaScript

Una vez creado el proyecto, vamos a instalar sus dependencias y ejecutarlo

cd usellm-tutorial
npm i
npm run dev

Una vez ejecutado la aplicación, vamos a isntalar useLLM.

Instalemos el modulo

Para instalar el modulo useLLM podemos usar el siguiente comando:

npm install usellm@latest

Ahora actualicemos el codigo de App.jsx con lo siguiente:

import useLLM from "usellm";

function App() {
  const llm = useLLM({ serviceUrl: "https://usellm.org/api/llm" });

  return (
    <div>
      <button
        onClick={async () => {
          try {
            const { message } = await llm.chat({
              messages: [{ role: "user", content: "Who are you?" }],
            });
            console.log("Received message: ", message.content);
          } catch (error) {
            console.error("Something went wrong!", error);
          }
        }}
      >
        Chat
      </button>
    </div>
  );
}

export default App;

Los mensajes deben ser arreglos en el formato de Mensajes de la API de OpenAI que estan documentados aqui: https://platform.openai.com/docs/api-reference/chat/create#chat/create-messages

Este codigo ejecuta el hook useLLM, el cual permite llamar la funcion Chat para poder recibir respuestas del backend de la API. Aunque ese backend es solo para testing.

Streamming Support

Este modulo tambien soporta la entrega de datos o respuestas por Streamming, esto significa que en lugar de esperar a la respuesta completa, va entregando de a pocos los textos, para ir mostrandolos en la interfaz. Para poder probar esto ejecuta lo siguiente:

await llm.chat({
  messages: [{ role: "user", content: "Who are you?" }],
  stream: true,
  onStream: ({ message }) => console.log(message),
});

Por supuesto la respuesta puedes incluirla en un estado de esta forma puedes ir viendola en una interfaz:

import useLLM from "usellm";
import { useState } from "react";
 
export default function Demo() {
  const llm = useLLM({ serviceUrl: "https://usellm.org/api/llm" });
  const [result, setResult] = useState("");
 
  async function handleClick() {
    try {
      await llm.chat({
        messages: [{ role: "user", content: "What is a language model?" }],
        stream: true,
        onStream: ({ message }) => setResult(message.content),
      });
    } catch (error) {
      console.error("Something went wrong!", error);
    }
  }
  return (
    <div>
      <button onClick={handleClick}>Send</button>
      <div style={{ whiteSpace: "pre-wrap" }}>{result}</div>
    </div>
  );
}

Mas Servicios

Si bien este modulo pareciera que solo sirve para añadir un Chat, lo cierto es que tambien tiene mas opciones para integrar otros servicios como