Ejecutar embeddings y bases de datos vectoriales localmente

Usa esta página para ejecutar el chatbot de películas ReelRecs extraído de Embeddings and Vector Databases en tu computadora, con tu propia clave de OpenAI y la base de datos de Supabase que construiste durante el curso. Hay tres diferencias con respecto al editor de Scrimba: dos paquetes deben instalarse por nombre, las lecturas en config.js necesitan la sintaxis de Vite, y el modelo de chat que usa el proyecto ha sido descontinuado.

Lo que necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24 e incluye npm.

Verifica que ambos comandos funcionen. Tus números de versión pueden ser diferentes:

$ node --version
v24.18.0
$ npm --version
11.18.0

También necesitas tres valores:

• Una clave de API de OpenAI. Crea una que eliminarás cuando termines: este proyecto llama a OpenAI directamente desde el navegador, así que la clave termina en la página.
• Tu URL de proyecto de Supabase, del proyecto de Supabase que contiene las películas y la función match_movies que hiciste durante el curso.
• La clave publicable de ese proyecto, que comienza con sb_publishable_. Si tu proyecto solo muestra la clave anon más antigua, úsala. Nunca uses la clave secreta o la clave service_role aquí.

JunoLo que necesitas primero Instala la versión LTS de Node.js y verifica que node --version y npm --version impriman una versión.

Luego reúne tu clave de OpenAI, tu URL de proyecto de Supabase y su clave publicable. El proyecto de Supabase debe ser el que llenaste con películas en el curso.

JunoLo que necesitas primero Este proyecto solo lee tus películas: nada en él crea la tabla, los números o match_movies. Si ese proyecto de Supabase está vacío, el chatbot se ejecuta pero responde "Lo siento, no sé la respuesta".

JunoLo que necesitas primero La clave publicable solo puede hacer lo que permitan tus políticas de Row Level Security, por eso Supabase la crea para código del navegador. La clave de OpenAI no tiene tal límite: quien la copie puede gastar tu crédito hasta que la elimines.

Instala los paquetes

Abre una terminal en la carpeta extraída. Es la que contiene package.json, config.js e index.js:

$ cd ruta-a-tu-proyecto-extraído

package.json lista solo Vite, pero config.js también importa los paquetes de OpenAI y Supabase. El editor de Scrimba los instala por ti; en tu computadora, nómbralos e npm los instala junto con Vite:

$ npm install openai @supabase/supabase-js
added 25 packages, and audited 26 packages in 9s

npm termina reportando cuántos paquetes agregó.

JunoInstala los paquetes Abre la terminal en la carpeta que contiene package.json, luego ejecuta npm install openai @supabase/supabase-js. npm termina diciendo cuántos paquetes agregó.

Si npm dice que no encuentra package.json, estás en la carpeta equivocada.

JunoInstala los paquetes npm instala lo que package.json lista, y nombrar dos paquetes los agrega a esa lista, así que un comando instala los tres. Un simple npm install te daría solo Vite.

JunoInstala los paquetes Sin los dos paquetes, npm start sigue sirviendo la página: el escaneo de inicio de Vite solo imprime una advertencia, y la importación falla cuando el navegador solicita config.js, como un error en la página.

Cambia config.js e index.js

El editor de Scrimba completa process.env.OPENAI_API_KEY, process.env.SUPABASE_API_KEY y process.env.SUPABASE_URL por ti. El navegador no tiene process, y Vite no crea uno, así que las cuatro lecturas en config.js deben cambiar; la clave de OpenAI se lee dos veces. Vite entrega al código del navegador solo las variables cuyos nombres comienzan con VITE_, por eso cada nombre gana ese prefijo.

Reemplaza el contenido de config.js con:

import OpenAI from 'openai';
import { createClient } from "@supabase/supabase-js";

/** Configuración de OpenAI */
if (!import.meta.env.VITE_OPENAI_API_KEY) throw new Error("OpenAI API key is missing or invalid.");
export const openai = new OpenAI({
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  dangerouslyAllowBrowser: true
});

/** Configuración de Supabase */
const privateKey = import.meta.env.VITE_SUPABASE_API_KEY;
if (!privateKey) throw new Error(`Expected env var SUPABASE_API_KEY`);
const url = import.meta.env.VITE_SUPABASE_URL;
if (!url) throw new Error(`Expected env var SUPABASE_URL`);
export const supabase = createClient(url, privateKey);

Solo las cuatro lecturas difieren del archivo que descargaste. Los dos mensajes de error de Supabase aún nombran las variables antiguas; déjalos como están.

Luego abre index.js. La solicitud de chat pide gpt-4, que OpenAI ha descontinuado. En getChatCompletion, cambia:

model: 'gpt-4',

a:

model: 'gpt-4o-mini',

Deja el otro modelo en index.js, text-embedding-ada-002, como está. Las películas en tu base de datos se convirtieron en números con ese modelo, y tu pregunta tiene que convertirse en números de la misma manera para compararse con ellas.

JunoCambia config.js e index.js Pega el nuevo config.js sobre el antiguo, luego cambia gpt-4 a gpt-4o-mini en index.js.

No toques text-embedding-ada-002; tu base de datos depende de él.

JunoCambia config.js e index.js Cuando Vite sirve config.js, reemplaza cada lectura import.meta.env.VITE_... con el valor de .env. Un nombre sin el prefijo permanece oculto del código del navegador, llega como undefined, y activa las verificaciones en config.js.

JunoCambia config.js e index.jsconfig.js lanza una excepción mientras carga, antes de que index.js adjunte su controlador de formulario. Así que una lectura incorrecta deja una página que se ve normal, pero presionar Enter la recarga y tu pregunta desaparece.

Agrega tus claves a .env

Crea .env junto a package.json con tus tres valores:

VITE_OPENAI_API_KEY=tu-clave-de-api-openai
VITE_SUPABASE_URL=https://tu-proyecto.supabase.co
VITE_SUPABASE_API_KEY=tu-clave-publicable

Crea .gitignore junto a package.json y agrega:

.env
node_modules/

Una clave que llega a un repositorio Git permanece en su historial incluso después de que elimines el archivo. El manual de Git cubre el hábito en ignorar archivos y buenas prácticas.

Estas claves son visibles en el navegador

Vite escribe cada valor VITE_ en el código que envía al navegador, así que cualquiera que abra esta página puede leer tu clave de OpenAI. Mantén esta versión en tu propia computadora: nunca la despliegues ni la compartas, y nunca hagas commit de .env. Una versión que publiques necesita un backend que mantenga la clave de OpenAI en el servidor, como en el proyecto del SDK de Vercel AI.

JunoAgrega tus claves a .env Crea un archivo llamado .env junto a package.json con tus tres valores, uno por línea, luego lista .env en .gitignore para que Git nunca lo guarde.

JunoAgrega tus claves a .env Vite lee .env cuando comienza y luego lo vigila: guardar un cambio imprime .env changed, restarting server..., y la página abierta se recarga con los nuevos valores.

JunoAgrega tus claves a .env El prefijo VITE_ es una lista blanca de exposición, no almacenamiento secreto: la clave de OpenAI está en el módulo que Vite sirve y en el encabezado de cada solicitud que el navegador envía a OpenAI.

Inicia el chatbot y haz una pregunta

Inicia el servidor de desarrollo:

$ npm start

Vite puede imprimir primero una advertencia que comience con (!) Your Vite config uses features. No detiene la aplicación. Una advertencia diferente, (!) Failed to run dependency scan, significa que faltan los dos paquetes: vuelve al paso de instalación. Debajo de las advertencias, Vite imprime la dirección para abrir:

  VITE v8.3.4  ready in 218 ms

  ➜  Local:   http://localhost:5173/

Abre la dirección Local exacta. La página muestra ReelRecs y una caja que dice "How can I help?". Pregunta sobre una película en tu base de datos y presiona Enter. Thinking... aparece, y después de unos segundos la respuesta lo reemplaza. Una respuesta sobre tus películas significa que OpenAI y Supabase funcionan.

Si tu pregunta desaparece y nada más sucede, la página nunca recibió tus claves; las primeras entradas de solución de problemas coinciden con la línea de la terminal.

Si la página dice "Sorry, something went wrong. Please try again.", busca en la terminal donde npm start se está ejecutando. Vite copia el error del navegador allí, en una línea que contiene Error in main function.; la solución de problemas debajo coincide con cada mensaje. La misma línea está en las herramientas de desarrollo del navegador (F12, o Cmd+Opción+J en Chrome en una Mac), en la pestaña Console.

Detén el proyecto con Ctrl+C. Si guardas .env mientras se ejecuta, Vite se reinicia a sí mismo (.env changed, restarting server...) y la página se recarga con los nuevos valores.

JunoInicia el chatbot y haz una pregunta Ejecuta npm start, ignora la advertencia de configuración si aparece, y abre la dirección Local. Pregunta sobre una de tus películas y espera la respuesta.

Si obtienes "Sorry, something went wrong", lee la línea más reciente en la terminal.

JunoInicia el chatbot y haz una pregunta Una pregunta ejecuta tres solicitudes en orden: OpenAI hace números a partir de ella, match_movies de Supabase encuentra las películas más cercanas, y OpenAI escribe la respuesta. Si alguna falla, muestra el mismo mensaje de disculpa, así que la línea de error te dice cuál arreglar.

JunoInicia el chatbot y haz una preguntamain envuelve las tres solicitudes en un try/catch y solo registra el mensaje del error. Vite 8 reenvía ese console.error del navegador a la terminal, por eso la terminal muestra una falla del navegador.

Solución de problemas

La terminal muestra (!) Failed to run dependency scan, y el navegador muestra Failed to resolve import "openai" from "config.js": Los dos paquetes no están instalados. Detén el proyecto, ejecuta npm install openai @supabase/supabase-js en la carpeta que contiene package.json, luego inicia el proyecto de nuevo.

Tu pregunta desaparece cuando presionas Enter, y la terminal muestra ReferenceError: process is not defined: Aún hay una lectura process.env en config.js. Reemplaza el archivo con la versión mostrada arriba y guárdalo.

Tu pregunta desaparece, y la terminal muestra OpenAI API key is missing or invalid o Expected env var: Vite no encontró ningún valor. Verifica que .env esté junto a package.json y que cada nombre comience con VITE_, luego guárdalo; Vite se reinicia a sí mismo y la página se recarga. Los mensajes nombran las variables antiguas, pero los nombres en .env son los que comienzan con VITE_.

Error in main function. 401 Incorrect API key provided: OpenAI no aceptó la clave. Cópiala de nuevo de tu cuenta de OpenAI y verifica que no haya sido eliminada.

Error in main function. 429 You exceeded your current quota: La clave funciona, pero la cuenta no tiene crédito para gastar. Agrega crédito en Billing en tu cuenta de OpenAI, luego pregunta de nuevo.

Error in main function. Cannot read properties of null (reading 'map'): OpenAI funcionó, pero Supabase envió un error en lugar de películas. Verifica la URL del proyecto, usa la clave publicable, y verifica que match_movies exista en ese mismo proyecto. Para la razón exacta, abre la pestaña Network de las herramientas de desarrollo, pregunta de nuevo, y haz clic en la solicitud llamada match_movies.

El chatbot responde "Sorry, I don't know the answer.": Todo se ejecutó, pero Supabase no encontró ninguna película lo suficientemente cercana a tu pregunta. Pregunta sobre una película que está en tu tabla. Si cada pregunta obtiene esta respuesta, verifica en Supabase que la tabla tenga filas y que Row Level Security permita a la clave publicable leerlas.

Error in main function. seguido de un mensaje que nombra el modelo (gpt-4 o gpt-4o-mini): Verifica que index.js pida gpt-4o-mini, no gpt-4. Después del 14 de enero de 2027, OpenAI también deja de servir gpt-4o-mini; desde entonces, usa el reemplazo que su página de depreciaciones nombra.

JunoSolución de problemas Busca la línea en la terminal que comienza con Error in main function. y haz coincidir las palabras después de ella con un encabezado en negrita arriba. Si tu pregunta solo desaparece, mira config.js y .env primero.

JunoSolución de problemas Las fallas vienen en el orden en que se ejecuta el código: los paquetes, las lecturas en config.js, la clave de OpenAI, luego Supabase, luego tus datos. Arregla la primera que encuentres; la siguiente solo muestra una vez que se haya ido.

JunoSolución de problemasfindNearestMatch ignora el error que Supabase devuelve y llama data.map en el null al lado. Así que una URL incorrecta, una clave rechazada y una función faltante se leen como el mismo null; la pestaña Network tiene la razón real.