Cómo Usar la API de OpenAI con JavaScript

3 minuto(s)

Demo Github

La API de Open AI te permite hacer uso de su modelo GPT de manera conversacional.

Este modelo entrenado para responder y resolver muchas dudas de los usuarios, puede decirte cuántos habitantes hay un país, en qué época existieron los dinosaurios y mucho más.

En este tutorial te enseñaré a Cómo Usar la API de OpenAI con JavaScript, vamos con ello.

Aplicación que usa la API KEY de OpenAI — La API de Open AI puede ser usada en diferentes tipos de aplicaciones

Obtener Una API KEY de OpenAI

Para obtener una API KEY de OpenAI sigue los pasos del tutorial Como Obtener Una API KEY de OpenAI ChatGPT (Si ya tienes una API KEY de OpenAI, puedes saltarte este paso):

Como Obtener Una API KEY de OpenAI ChatGPT

Una vez que tengas tu API KEY de OpenAI, puedes continuar con el siguiente paso de este tutorial.

Usando la API Key de OpenAI

Vamos a crear 2 archivos para este proyecto uno se llamará index.html y el otro app.js

En el archivo index.html agregaré una caja de texto con un botón para que el usuario ingrese su consulta y la envie a la IA (He colocado comentarios en el código para explicar que hacen algunas líneas del código más importantes):


<div class="col-md-12 text-center mt-5 mb-5">

  <h1>Cómo Usar la API de OpenAI con JavaScript</h1>

  <!-- Caja de texto y botón -->
  <div class="input-group input-group-lg mt-5">
    <input type="text" class="form-control" placeholder="¿Cuántos habitantes tiene México?" id="prompt">
    <span class="input-group-btn">
      <button class="btn btn-primary btn-lg ms-1" id="enviar">Enviar</button>
    </span>
  </div>

  <!-- Respuesta de la IA -->
  <p id="mensajes" class="fs-3"></p>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div class="col-md-12 text-center mt-5 mb-5">

<h1>Cómo Usar la API de OpenAI con JavaScript</h1>

<div class="input-group input-group-lg mt-5">

<input type="text" class="form-control" placeholder="¿Cuántos habitantes tiene México?" id="prompt">

<span class="input-group-btn">

<button class="btn btn-primary btn-lg ms-1" id="enviar">Enviar</button>

</span>

</div>

<p id="mensajes" class="fs-3"></p>

</div>

Ahora en el archivo app.js agrego lo siguiente (He colocado comentarios en el código para explicar que hacen algunas líneas del código más importantes):


const url = "https://api.openai.com/v1/completions"; // Endpoint de la API de OpenAI 
const beareryapikey = "Bearer " + "ACÁ TU API KEY DE OPENAI"; // API KEY de OpenAI

async function getCompletion(prompt) {
    const response = await fetch(url, {
        method: "POST", // Método HTTP 
        headers: {
            "Content-Type": "application/json", // Tipo de contenido que enviamos y recibimos
            Authorization: beareryapikey, // Pasamos nuestra API KEY de OpenAI 
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo-instruct", // Modelo de la IA que deseamos usar
            prompt: prompt, // prompt que le hacemos a la IA
            temperature: 0, // Permite que la IA siempre de responses diferentes 
            max_tokens: 256, // Tamaño de la response
        }),
    });

    // Obtenemos la response de la IA 
    const data = await response.json();
    return data;
}

// Elementos de la vista HTML 
const prompt = document.getElementById("prompt");
const btn = document.getElementById("enviar");
const mensajes = document.getElementById("mensajes");

// prompt a la IA 
btn.addEventListener("click", async () => {

    console.log(prompt.value); // Mostramos la prompt del usuario en la consola 

    if (!prompt.value) {
        // Si el usuario no ha ingresado una prompt le avisamos 
        alert("Por favor ingresa tu prompt");

    } else {
        // Enviamos la prompt del usuario y le respondemos 
        const response = await getCompletion(prompt.value);

        // Mostramos la response de la IA en la consola
        console.log(response);

        // Mostramos la response de la IA en la vista HTML 
        mensajes.innerHTML = response.choices[0].text;

    }


});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

const url = "https://api.openai.com/v1/completions"; // Endpoint de la API de OpenAI

const beareryapikey = "Bearer " + "ACÁ TU API KEY DE OPENAI"; // API KEY de OpenAI

async function getCompletion(prompt) {

const response = await fetch(url, {

method: "POST", // Método HTTP

headers: {

"Content-Type": "application/json", // Tipo de contenido que enviamos y recibimos

Authorization: beareryapikey, // Pasamos nuestra API KEY de OpenAI

},

body: JSON.stringify({

model: "gpt-3.5-turbo-instruct", // Modelo de la IA que deseamos usar

prompt: prompt, // prompt que le hacemos a la IA

temperature: 0, // Permite que la IA siempre de responses diferentes

max_tokens: 256, // Tamaño de la response

}),

});

// Obtenemos la response de la IA

const data = await response.json();

return data;

}

// Elementos de la vista HTML

const prompt = document.getElementById("prompt");

const btn = document.getElementById("enviar");

const mensajes = document.getElementById("mensajes");

// prompt a la IA

btn.addEventListener("click", async () => {

console.log(prompt.value); // Mostramos la prompt del usuario en la consola

if (!prompt.value) {

// Si el usuario no ha ingresado una prompt le avisamos

alert("Por favor ingresa tu prompt");

} else {

// Enviamos la prompt del usuario y le respondemos

const response = await getCompletion(prompt.value);

// Mostramos la response de la IA en la consola

console.log(response);

// Mostramos la response de la IA en la vista HTML

mensajes.innerHTML = response.choices[0].text;

}

});

Si vamos al navegador, podemos ver nuestra interfaz sin problemas y le hemos realizado una consulta a la Inteligencia Artificial y nos da una respuesta:

Proyecto al cual le hemos agregado una API KEY de OpenAI — La API de OpenAI es compatible con otros lenguajes de programación y tecnologías

Asi de sencillo puedes usar una API KEY de OpenAI.

Al inicio de este tutorial, he colocado una Demo para que veas el proyecto en acción y también un enlace a un repositorio de GitHub en donde encontrarás el código de este proyecto.

Aprende a Como Ser Mejor Programador Según la IA de Google.

Conclusión

En este tutorial has aprendido a Cómo Usar la API de OpenAI con JavaScript.

Saber hacer esto te servirá como base para usar una API KEY de OpenAI en proyectos más complejos o avanzados.

Recuerda practicar mucho, ya que ello hace al maestro.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

api
IA

Todas Nuestras Páginas y Categorías:

Agile Android Android Studio Angular Anuncios Apache Cassandra API REST APIs Apple WWDC Arduino Arq. de Software Articulos Axios Backend Bases de Datos Blockchain Bootstrap C# CDNs Chrome Dev Tools Ciberseguridad Cloud Computing CSS DApps Dart Data Mining Data Science (Ciencia de Datos) DevOps Devs Devs Hardware Django Docker Editores de Código Electron JS Entretenimiento Eventos Dev Experimental Firebase Flutter Frontend Game Dev Gin Git GitHub GitOps Google IO GraphQL Hacking Ético HTML 5 Inteligencia Artificial Ionic iOS JAMStack Java JavaScript jQuery Kotlin Kubernetes Laravel Linux Machine Learning Marketing Digital Material Design Micro Frontend MongoDB Móvil MS SQL Server MySQL News NFT Node JS Oracle DB Pentesting PHP PostgreSQL Premium Principal Python Ranking BD Ranking Lenguajes Raspberry Pi React JS React Native Recursos Redis Ruby Ruby on Rails Rust Seguridad SEO Servidores Social Media Socket IO Spring SQL SQLite Stack Overflow Svelte Swift Tailwind CSS Tecnología Tendencias GitHub Testing Tutoriales Tutoriales de Go TypeScript UI Unicode Unity UX Vite JS VPS Vue JS Web 3.0 Wordpress

Partners

Utilizamos cookies para proporcionar y mejorar nuestros servicios. Al navegar por nuestro sitio, usted acepta las cookies. Política de Cookies | Política de Privacidad