DEV Community

Cover image for 馃殌 C贸mo utilizar la Funci贸n de Llamada de Open AI con Next.js y el IA SDK de Vercel
Emanuel Peire
Emanuel Peire

Posted on

馃殌 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.

Paso 1

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.

Paso 2

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.

Paso 3

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
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

ChatHN

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

npm i
npm run dev
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)