🚀 Cómo utilizar la Función de Llamada de Open AI con Next.js y el IA SDK de Vercel

¿Qué es la función de llamada de OpenAI?

Para contextualizar, GPT-4 y GPT-3.5 Turbo son Modelos Grandes de Lenguaje (LLM) que han sido entrenados por OpenAI en un vasto corpus de datos de texto. Sobresalen en una amplia gama de tareas de lenguaje, incluyendo la completación de texto, la sumarización e incluso la escritura creativa.

Con la función de llamada, los LLMs ahora pueden recibir definiciones de funciones y generar un objeto JSON con los argumentos necesarios para invocar esas funciones. Esto facilita la integración de las características de GPT con herramientas y APIs externas, permitiendo a los desarrolladores construir experiencias intuitivas impulsadas por la IA aprovechando el poder de los LLMs.

Tipos de flujos de experiencia de usuario para la función de llamada

Hemos identificado tres flujos principales de experiencia de usuario que son esenciales para la nueva API de Llamada de Función de OpenAI:

1- Ejecución Automática de Funciones
Este es el flujo típico de ejecución de llamada de función:

• El cliente/usuario envía un mensaje en lenguaje natural.
• En el servidor, el IA SDK envía la lista de funciones predefinidas junto con la entrada del usuario a OpenAI, que devuelve el JSON requerido para la llamada de función.
• El servidor ejecuta la llamada de función.
• El IA SDK envía la salida de la llamada de función a OpenAI y obtiene una salida resumida.
• El IA SDK envía la salida al cliente a través del borde.

2- Ejecución Automática de Funciones con Intención y Progreso
Si bien la función todavía se ejecuta automáticamente, este flujo proporciona contexto al usuario sobre la progresión de la función:

• El cliente/usuario envía un mensaje en lenguaje natural.
• En el servidor, el IA SDK envía la lista de funciones predefinidas junto con la entrada del usuario a OpenAI, que devuelve el JSON requerido para la llamada de función.
• El servidor envía una intención al cliente de que habrá una ejecución de llamada de función a través del IA SDK, y procede a ejecutar la llamada de función.
• Mientras la llamada de función se está ejecutando, el IA SDK envía el progreso al cliente.
• Una vez completada, el IA SDK envía la salida de la llamada de función a OpenAI y obtiene una salida resumida.
• El IA SDK envía la salida al cliente a través del edge.

3- Ejecución de Función con Aprobación del Usuario
La función solo se ejecuta con la confirmación del usuario:

• El cliente/usuario envía un mensaje en lenguaje natural.
• En el servidor, el IA SDK envía la lista de funciones predefinidas junto con la entrada del usuario a OpenAI, que devuelve el JSON requerido para la llamada de función.
• El servidor envía una intención al cliente. Si el cliente confirma, el servidor ejecuta la llamada de función.
• El SDK de IA envía la salida de la llamada de función a OpenAI y obtiene una salida resumida.
• El IA SDK envía la salida al cliente a través del borde.

Casos de uso para la función de llamada de OpenAI

La función de llamada de OpenAI es una herramienta poderosa para construir experiencias de usuario mejoradas con IA.

Aquí hay algunos ejemplos:

1. Análisis y procesamiento de datos en formato libre: En lugar de codificar manualmente complejas expresiones regulares para analizar y procesar datos en formato libre, ahora puedes aprovechar la función de llamada de OpenAI para convertir datos en formato libre en entradas de funciones completamente formateadas y seguras que se pueden usar para realizar operaciones POST/PUT en tu base de datos.

2. Chatbots que interactúan con APIs externas: Con la llamada de función, puedes crear rápidamente chatbots que pueden interactuar con APIs de terceros utilizando lenguaje natural. Esto es similar a cómo funcionan los complementos de ChatGPT; toma el Plugin WeatherGPT, por ejemplo, que convierte una pregunta del usuario sobre el clima en una salida JSON estructurada que se puede enviar a una API de clima de tu elección.

Cómo usar la Función de Llamada de OpenAI

Para aprender más sobre la Función de Llamada de OpenAI, construiremos un chatbot de IA que interactúe con la API de Hacker News en tiempo real utilizando la Función de Llamada de OpenAI y el IA SDK de Vercel.

Si prefieres no empezar desde cero, hemos preparado una plantilla que puedes clonar localmente y utilizar como punto de partida en su lugar.

git clone https://github.com/steven-tey/chathn

Paso 1: Crear una ruta de API para el chat
Primero, crea una ruta de API utilizando el tiempo de ejecución Edge. Podemos usar el ejemplo predeterminado en la documentación del AI SDK por ahora:

// app/api/chat/route.ts

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

// Optional, but recommended: run on the edge runtime.
// See https://vercel.com/docs/concepts/functions/edge-functions
export const runtime = 'edge';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

export async function POST(req: Request) {
  // Extract the `messages` from the body of the request
  const { messages } = await req.json();

  // Request the OpenAI API for the response based on the prompt
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages: messages,
  });

  // Convert the response into a friendly text-stream
  const stream = OpenAIStream(response);

  // Respond with the stream
  return new StreamingTextResponse(stream);
}

Paso 2: Definir tus funciones
Piensa en las funciones como una serie de arrays posibles que se pueden utilizar para interactuar con tu API, similar a las opciones definidas en una especificación de OpenAPI.

A continuación, se muestra un ejemplo de una función que obtiene y devuelve las mejores historias en Hacker News. Puedes consultar la lista completa de funciones en la plantilla ChatHN aquí.

// app/api/chat/functions.ts

import { CompletionCreateParams } from "openai/resources/chat/index";

export const functions: CompletionCreateParams.Function[] = [
  {
    name: "get_top_stories",
    description:
      "Get the top stories from Hacker News. Also returns the Hacker News URL to each story.",
    parameters: {
      type: "object",
      properties: {
        limit: {
          type: "number",
          description: "The number of stories to return. Defaults to 10.",
        },
      },
      required: [],
    },
  },
  ... // more functions
];

async function get_top_stories(limit: number = 10) {
  const response = await fetch(
    "https://hacker-news.firebaseio.com/v0/topstories.json",
  );
  const ids = await response.json();
  const stories = await Promise.all(
    ids.slice(0, limit).map((id: number) => get_story(id)),
  );
  return stories;
}

export async function runFunction(name: string, args: any) {
  switch (name) {
    case "get_top_stories":
      return await get_top_stories();
     ... // more functions
  }
}

Si lo prefieres, puedes colocar el archivo de funciones en el mismo directorio que tu ruta de API, ya que solo el contenido devuelto por page.js o route.js se envía al cliente.

Paso 3: Agregar el mecanismo de llamada de funciones a la ruta de API
Una vez que hayas definido tus funciones, puedes comenzar a agregar la llamada de funciones a la ruta de API que creaste en el Paso 1.

// app/api/chat/route.ts

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

// Optional, but recommended: run on the edge runtime.
// See https://vercel.com/docs/concepts/functions/edge-functions
export const runtime = 'edge';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

export async function POST(req: Request) {
  // Extract the `messages` from the body of the request
  const { messages } = await req.json();

  // ---------- NEW CODE STARTS HERE! ----------
  // check if the conversation requires a function call to be made
  const initialResponse = await openai.chat.completions.create({
    model: "gpt-3.5-turbo-0613",
    messages,
    stream: true,
    functions,
    function_call: "auto",
  });

  const stream = OpenAIStream(initialResponse, {
    experimental_onFunctionCall: async (
      { name, arguments: args },
      createFunctionCallMessages,
    ) => {
      const result = await runFunction(name, args);
      const newMessages = createFunctionCallMessages(result);
      return openai.chat.completions.create({
        model: "gpt-3.5-turbo-0613",
        stream: true,
        messages: [...messages, ...newMessages],
      });
    },
  });
  // ---------- NEW CODE ENDS HERE! ----------

  // Respond with the stream
  return new StreamingTextResponse(stream);
}

Paso 4: Conectar la interfaz de chat con el AI SDK
El último paso es conectar la interfaz de chat con el IA SDK de Vercel.

Hemos creado un diseño simple similar a ChatGPT en el repositorio ChatHN que puedes copiar y pegar en tu aplicación.

Una vez que todo esté listo, puedes ejecutar el siguiente comando para iniciar la aplicación:

npm i
npm run dev

Construye una experiencia de usuario con IA con llamada de función y el AI SDK

En resumen, la función de llamada de OpenAI proporciona una forma poderosa de integrar chatbots de IA con APIs de terceros. Al definir funciones y utilizar el SDK de OpenAI, puedes interactuar fácilmente con APIs en tiempo real.

Con el ejemplo proporcionado, puedes crear un chatbot que obtenga las mejores historias de Hacker News y más. Siguiendo los pasos descritos, puedes incorporar la llamada de función en tu ruta de API y conectarla con la interfaz de chat utilizando el SDK de IA de Vercel. A través de este enfoque, tendrás un chatbot que puede interactuar sin problemas con APIs de terceros, mejorando sus capacidades y proporcionando más valor a los usuarios.