Executando Embeddings e Bancos de Dados Vetoriais localmente

Use esta página para rodar o chatbot do curso extraído em seu computador. Ela instala dois pacotes que o download deixa de fora, adapta as configurações de OpenAI e Supabase do chatbot para o Vite e inicia o projeto do navegador contra o banco de dados que você construiu durante o curso.

O que você precisa primeiro

Instale uma versão LTS suportada do Node.js. Node 24 é recomendado e inclui npm. Você também precisa de uma chave de API OpenAI e de um projeto Supabase existente contendo os dados do curso.

Para o Supabase, use uma chave publicável (começa com sb_publishable_) ou a chave anon legada. Essas chaves são projetadas para aparecer em código do navegador: qualquer pessoa que copiar uma delas pode fazer apenas o que suas políticas Row Level Security, as regras de acesso por linha do Supabase, permitem. O Supabase está descontinuando as chaves legadas até o final de 2026, então prefira a chave publicável quando seu projeto mostrar uma. Nunca coloque uma chave secreta ou chave service_role neste projeto do navegador. Veja Chaves de API do Supabase para os tipos de chave atuais.

A chave OpenAI não tem escopo equivalente: qualquer cópia dela pode fazer requisições cobradas em sua conta, então em produção ela nunca deve estar em código cliente. Esta configuração de aprendizado a envia para o navegador mesmo assim, e o aviso na seção Vite abaixo explica os limites de fazer isso. O projeto Vercel AI SDK mostra a organização do lado do servidor: usa uma chave secreta do Supabase, o que é aceitável lá porque esse projeto roda em um servidor e suas chaves nunca chegam a um navegador.

JunoO que você precisa primeiro Instale o Node.js LTS, depois tenha sua chave OpenAI e o projeto Supabase que você construiu durante o curso prontos.

Para o Supabase, use uma chave publicável ou anon, o tipo projetado para navegadores, nunca um segredo do servidor.

JunoO que você precisa primeiro Este projeto precisa de Node mais dois serviços ativos: OpenAI e o banco de dados Supabase do curso.

A chave Supabase que você configura fica legível no código cliente, então deve ser uma chave publicável ou anon cujo acesso a Row Level Security limita. Mantenha toda chave do lado do servidor fora deste projeto.

JunoO que você precisa primeiro Uma chave publicável ou anon copiada pode fazer apenas o que suas políticas Row Level Security permitem, e é por isso que esse tipo de chave é feito para código de navegador. A chave OpenAI não tem esse escopo e gasta seu dinheiro até você revogá-la.

Então uma chave Supabase em código cliente é uma questão de política, enquanto uma chave OpenAI em código cliente de produção é um erro.

Abra a pasta do projeto

Abra um terminal na pasta do chatbot extraído contendo package.json:

$ cd path-to-your-downloaded-project

Para confirmar que você tem o download certo, abra package.json: o chatbot declara Vite, e o source ao lado inclui os arquivos config.js e index.js que a próxima seção edita. Estas instruções se encaixam no chatbot completo, cujo código importa tanto openai quanto @supabase/supabase-js; o nome da pasta sozinho não o distingue do download de uma lição anterior.

JunoAbra a pasta do projeto Trabalhe na pasta extraída que contém package.json; toda instalação e todo arquivo nesta página pertence a ela.

Se o terminal está em outro lugar, os comandos rodam na pasta errada. Verifique a listagem da pasta por package.json antes de digitar qualquer coisa.

JunoAbra a pasta do projeto Confirme a pasta antes de editar qualquer coisa: package.json no nível superior com Vite declarado dentro, e config.js e index.js ao lado.

Todo comando nesta página assume que você está nesta pasta.

JunoAbra a pasta do projeto Leia os imports antes de reparar qualquer coisa. Esses passos se encaixam no download cujo source importa tanto OpenAI quanto Supabase e executa o fluxo completo do chatbot.

O download de uma lição anterior parece quase idêntico pelo nome da pasta, e aplicar essas edições a ele conserta problemas que ele não tem.

Prepare o projeto para o Vite

Instale a dependência declarada do Vite, depois os dois pacotes que o source importa mas o package.json baixado não declara:

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

Abra config.js e substitua toda leitura de ambiente do Scrimba. Mantenha os imports, exports e validação existentes, mas substitua três nomes de ambiente em quatro ocorrências:

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

As duas leituras de OPENAI_API_KEY ficam na verificação de validação e no cliente OpenAI, então mude ambas.

Abra index.js e mude o modelo de chat de gpt-4 para gpt-4o-mini. Deixe o modelo de embedding text-embedding-ada-002 fornecido inalterado enquanto segue o curso. Os vetores existentes no banco de dados do curso devem ter as mesmas dimensões que os embeddings de consulta; mudar esse modelo é uma migração de banco de dados separada, não parte da configuração local.

Crie .env ao lado de 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

Também crie .gitignore:

.env
node_modules/

Enviar .env para um repositório Git é a forma mais comum de uma chave vazar; ignorando arquivos e bons hábitos cobre o hábito completamente.

Essas credenciais são visíveis no navegador

O Vite copia valores de VITE_ no bundle do frontend. Use credenciais de aprendizado restritas, ative Row Level Security no Supabase e nunca publique esta versão. Um aplicativo de produção deve mover a requisição OpenAI para um backend.

JunoPrepare o projeto para o Vite Instale os pacotes ausentes, substitua toda leitura de ambiente antiga por seu equivalente Vite, e coloque suas chaves em .env com uma chave Supabase segura para navegador.

Depois adicione .gitignore para que .env fique fora do Git.

JunoPrepare o projeto para o Vite O source importa dois SDKs que o download nunca declarou e lê nomes de ambiente do Scrimba, então instale ambos os pacotes e mude todas as quatro leituras antes de iniciar o Vite.

Uma leitura que você perde falha quando a página executa, não quando Vite inicia. O par .env e .gitignore termina o reparo.

JunoPrepare o projeto para o Vite Instalar os SDKs corrige os imports; os nomes de VITE_ são o que coloca os valores no bundle, o que também entrega a chave OpenAI para código do navegador.

Isso é aceitável para uma lição e desqualificante para produção, então mova a chamada OpenAI para trás de um backend antes que usuários reais cheguem a este chatbot.

Execute o projeto

$ npm start

Abra a URL Local impressa pelo Vite e faça ao chatbot uma pergunta coberta pelos dados do curso. Uma resposta útil mostra que a página, a recuperação do Supabase e a requisição OpenAI estão todas funcionando. Reinicie o comando após mudar .env, e pare com Ctrl+C.

JunoExecute o projeto Execute npm start, abra a URL Local, e faça ao chatbot algo que os dados do curso cobrem.

Se você mudar .env, reinicie o comando para que o Vite leia os novos valores. Pressione Ctrl+C quando terminar.

JunoExecute o projeto O Vite iniciando limpo prova que o projeto reparado empacota; uma resposta útil prova o resto.

Uma boa pergunta testa acesso OpenAI e linhas e políticas do Supabase juntas, então trate como seu teste de integração. Reinicie após qualquer mudança de .env.

JunoExecute o projeto Uma página que carrega não é um teste passando. Servidor local, recuperação Supabase, busca de embedding e geração de resposta são checkpoints separados, e cada um pode falhar atrás de uma página normalmente renderizada.

Resolvendo problemas

Failed to resolve import "openai" ou "@supabase/supabase-js": Execute ambos os comandos de instalação mostrados antes nesta página, na pasta que contém package.json.

process is not defined: Uma referência de process.env permanece em config.js. Substitua-a pelo valor correspondente de import.meta.env.VITE_....

Supabase retorna nenhuma linha ou erro de permissões: Confirme a URL do projeto, use uma chave publicável ou anon, e verifique que a tabela do curso e as políticas Row Level Security existem nesse mesmo projeto.

OpenAI rejeita o modelo ou chave: Confirme cobrança e acesso à chave na conta OpenAI. Use um modelo atual disponível para esse projeto.

JunoResolvendo problemas Leia o erro como uma pista: um import ausente significa que os pacotes extras não estão instalados, process is not defined significa que um nome Vite ainda está errado, e respostas vazias geralmente apontam para dados ou permissões Supabase.

Corrija um por vez e execute a página novamente após cada um.

JunoResolvendo problemas Verifique em ordem de dependência: resolução de pacotes, depois todas as quatro substituições de ambiente, depois a URL Supabase e políticas RLS, depois a chave e modelo OpenAI.

Cada camada depende da anterior, então pare na primeira camada quebrada e repare lá.

JunoResolvendo problemas Um chatbot sem resposta útil falha em uma de três camadas: o bundle do navegador, permissões e linhas do Supabase, ou a requisição OpenAI. Verifique-as nessa ordem; uma página que abre prova apenas que o Vite está rodando.