Ejecutar Embeddings y Bases de Datos Vectoriales localmente

Usa esta página para ejecutar el chatbot del curso extraído en tu computadora. Instala dos paquetes que la descarga omite, adapta la configuración de OpenAI y Supabase del chatbot para Vite e inicia el proyecto en el navegador contra la base de datos que construiste durante el curso.

Lo que necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24 e incluye npm. También necesitas una clave de API de OpenAI y un proyecto Supabase existente que contenga los datos del curso.

Para Supabase, usa una clave publicable (comienza con sb_publishable_) o la clave heredada anon. Estas claves están diseñadas para aparecer en código de navegador: quien copie una solo puede hacer lo que tus políticas de Row Level Security, las reglas de acceso por fila de Supabase, permitan. Supabase está retirando las claves heredadas antes de fin de 2026, así que prefiere la clave publicable cuando tu proyecto muestre una. Nunca pongas una clave secreta o clave service_role en este proyecto de navegador. Consulta Claves API de Supabase para los tipos de clave actuales.

La clave de OpenAI no tiene un alcance equivalente: cualquier copia de ella puede hacer solicitudes facturadas a tu cuenta, así que en producción nunca pertenece en código cliente. Este setup de aprendizaje la envía al navegador de todas formas, y la advertencia en la sección Vite abajo explica los límites de hacerlo. El proyecto Vercel AI SDK muestra el arreglo del lado del servidor: usa una clave secreta de Supabase, que es aceptable allí porque ese proyecto se ejecuta en un servidor y sus claves nunca llegan a un navegador.

JunoLo que necesitas primero Instala Node.js LTS, luego ten lista tu clave de OpenAI y el proyecto Supabase que construiste durante el curso.

Para Supabase, usa una clave publicable o anon, el tipo diseñado para navegadores, nunca un secreto de servidor.

JunoLo que necesitas primero Este proyecto necesita Node más dos servicios en vivo: OpenAI y la base de datos Supabase del curso.

La clave Supabase que configures se vuelve legible en código cliente, así que debe ser una clave publicable o anon cuyo acceso Row Level Security limite. Mantén toda clave del lado del servidor fuera de este proyecto.

JunoLo que necesitas primero Una clave publicable o anon copiada solo puede hacer lo que tus políticas de Row Level Security permitan, por eso ese tipo de clave está hecha para código de navegador. La clave de OpenAI no tiene tal limitación y gasta tu dinero hasta que la revoques.

Así que una clave Supabase en código cliente es una cuestión de política, mientras que una clave de OpenAI en código cliente de producción es un error.

Abre la carpeta del proyecto

Abre una terminal en la carpeta extraída del chatbot que contiene package.json:

$ cd path-to-your-downloaded-project

Para confirmar que tienes la descarga correcta, abre package.json: el chatbot declara Vite, y el código junto a él incluye los archivos config.js e index.js que la siguiente sección edita. Estas instrucciones se adaptan al chatbot completado, cuyo código importa tanto openai como @supabase/supabase-js; el nombre de la carpeta solo no lo distingue de la descarga de una lección anterior.

JunoAbre la carpeta del proyecto Trabaja en la carpeta extraída que contiene package.json; cada instalación y cada archivo en esta página pertenece allí.

Si la terminal está en cualquier otro lugar, los comandos se ejecutan en la carpeta equivocada. Verifica el listado de carpeta para package.json antes de escribir nada.

JunoAbre la carpeta del proyecto Confirma la carpeta antes de editar nada: package.json en el nivel superior con Vite declarado dentro, y config.js e index.js junto a él.

Cada comando en esta página asume que estás en esta carpeta.

JunoAbre la carpeta del proyecto Lee los imports antes de reparar nada. Estos pasos se adaptan a la descarga cuyo código importa tanto OpenAI como Supabase y ejecuta el flujo del chatbot completado.

La descarga de una lección anterior se ve casi idéntica por nombre de carpeta, y aplicar estas ediciones a ella repara problemas que no tiene.

Prepara el proyecto para Vite

Instala la dependencia Vite declarada, luego los dos paquetes que el código importa pero el package.json descargado no declara:

$ npm install
$ npm install openai @supabase/supabase-js

Abre config.js y reemplaza cada lectura de entorno de Scrimba. Mantén los imports, exports y validación existentes, pero reemplaza tres nombres de entorno en cuatro ocurrencias:

process.env.OPENAI_API_KEY
import.meta.env.VITE_OPENAI_API_KEY

process.env.SUPABASE_API_KEY
import.meta.env.VITE_SUPABASE_API_KEY

process.env.SUPABASE_URL
import.meta.env.VITE_SUPABASE_URL

Las dos lecturas OPENAI_API_KEY están en la verificación de validación y en el cliente de OpenAI, así que cambia ambas.

Abre index.js y cambia el modelo de chat de gpt-4 a gpt-4o-mini. Deja el modelo de embedding text-embedding-ada-002 suministrado sin cambios mientras sigues el curso. Los vectores existentes en la base de datos del curso deben tener las mismas dimensiones que los embeddings de consulta; cambiar ese modelo es una migración de base de datos separada, no parte de la configuración local.

Crea .env junto a package.json:

VITE_OPENAI_API_KEY=your-openai-api-key
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_API_KEY=your-publishable-or-anon-key

También crea .gitignore:

.env
node_modules/

Enviar .env a un repositorio Git es la forma más común en que una clave se filtra; ignorar archivos y buenos hábitos cubre el hábito en detalle.

Estas credenciales son visibles en el navegador

Vite copia valores VITE_ en el bundle del frontend. Usa credenciales de aprendizaje restringidas, habilita Row Level Security en Supabase y nunca publiques esta versión. Una app de producción debe mover la solicitud de OpenAI a un backend.

JunoPrepara el proyecto para Vite Instala los paquetes faltantes, reemplaza cada lectura de entorno anterior con su equivalente de Vite, y pon tus claves en .env con una clave Supabase segura para navegador.

Luego agrega .gitignore para que .env se mantenga fuera de Git.

JunoPrepara el proyecto para Vite El código importa dos SDKs que la descarga nunca declaró y lee los nombres de entorno de Scrimba, así que instala ambos paquetes y cambia las cuatro lecturas antes de iniciar Vite.

Una lectura que pierdas falla cuando la página se ejecuta, no cuando Vite inicia. El par .env y .gitignore termina la reparación.

JunoPrepara el proyecto para Vite Instalar los SDKs arregla los imports; los nombres VITE_ son lo que coloca los valores en el bundle, que también entrega la clave de OpenAI al código del navegador.

Eso es aceptable para una lección y descalificador para producción, así que mueve la llamada de OpenAI detrás de un backend antes de que usuarios reales lleguen a este chatbot.

Ejecuta el proyecto

$ npm start

Abre la URL Local impresa por Vite y hazle al chatbot una pregunta cubierta por los datos del curso. Una respuesta útil muestra que la página, la recuperación de Supabase y la solicitud de OpenAI están funcionando. Reinicia el comando después de cambiar .env y detente con Ctrl+C.

JunoEjecuta el proyecto Ejecuta npm start, abre la URL Local, y hazle al chatbot algo que los datos del curso cubran.

Si cambias .env, reinicia el comando para que Vite lea los nuevos valores. Presiona Ctrl+C cuando termines.

JunoEjecuta el proyecto Vite iniciando sin errores comprueba que el proyecto reparado se agrupa; una respuesta útil comprueba el resto.

Una buena pregunta prueba el acceso de OpenAI y las filas y políticas de Supabase juntas, así que trátala como tu prueba de integración. Reinicia después de cualquier cambio en .env.

JunoEjecuta el proyecto Una página que se carga no es una prueba aprobada. La prestación local, la recuperación de Supabase, la búsqueda de embedding y la generación de respuesta son puntos de control separados, y cada uno puede fallar detrás de una página normalmente renderizada.

Solución de problemas

Failed to resolve import "openai" o "@supabase/supabase-js": Ejecuta ambos comandos de instalación mostrados anteriormente en esta página, en la carpeta que contiene package.json.

process is not defined: Una referencia process.env permanece en config.js. Reemplázala con el valor correspondiente import.meta.env.VITE_....

Supabase no devuelve filas o un error de permisos: Confirma la URL del proyecto, usa una clave publicable o anon, y verifica que la tabla del curso y las políticas de Row Level Security existan en ese mismo proyecto.

OpenAI rechaza el modelo o la clave: Confirma la facturación y el acceso de la clave en la cuenta de OpenAI. Usa un modelo actual disponible para ese proyecto.

JunoSolución de problemas Lee el error como una pista: un import faltante significa que los paquetes extra no están instalados, process is not defined significa que un nombre de Vite sigue siendo incorrecto, y respuestas vacías usualmente apuntan a datos de Supabase o permisos.

Arregla uno a la vez y ejecuta la página nuevamente después de cada uno.

JunoSolución de problemas Verifica en orden de dependencia: resolución de paquetes, luego las cuatro sustituciones de entorno, luego la URL de Supabase y políticas RLS, luego la clave de OpenAI y el modelo.

Cada capa depende de la anterior, así que detente en la primera capa rota y repárala allí.

JunoSolución de problemas Un chatbot sin respuesta útil falla en una de tres capas: el bundle del navegador, los permisos y filas de Supabase, o la solicitud de OpenAI. Verifica en ese orden; una página que se abre solo comprueba que Vite está ejecutándose.