Supabase se consolidou como a principal alternativa open-source ao Firebase, oferecendo PostgreSQL, autenticacao, realtime e storage em uma plataforma unificada. Quando combinado com agentes de IA, o Supabase agentes IA se torna uma ferramenta ainda mais poderosa — Claude Code e Codex podem configurar todo o backend sem servidor, desde as tabelas do banco ate as politicas de seguranca. Este tutorial mostra como construir um backend completo com Supabase usando agentes de IA como seus assistentes.
Setup do projeto Supabase com Claude Code
O setup de um projeto Supabase Claude Code comeca criando o projeto no console do Supabase e configurando o cliente no frontend:
Criacao do projeto Supabase
claude "Crie um projeto Next.js 16 com Supabase. Inicialize com create-next-app. Instale @supabase/supabase-js e @supabase/ssr. Crie o cliente Supabase em src/lib/supabase.ts com: - createClient() usando as envs NEXT_PUBLIC_SUPABASE_URL e NEXT_PUBLIC_SUPABASE_ANON_KEY - Versao para Server Components (createServerClient) - Versao para Client Components (createBrowserClient) - Versao para Server Actions (createRouteHandlerClient)"
Cliente Supabase para Server Components
claude "Crie src/lib/supabase/server.ts com: - createServerClient do @supabase/ssr - Le a URL e a anon key das variaveis de ambiente - Configura os cookies para SSR (getAll e setAll) - Exporta o cliente pronto para uso em Server Components"
Variaveis de ambiente
claude "Crie .env.local com as variaveis do Supabase: NEXT_PUBLIC_SUPABASE_URL=sua-url-do-projeto NEXT_PUBLIC_SUPABASE_ANON_KEY=sua-chave-anonima Adicione .env.local ao .gitignore."
Schema do banco PostgreSQL com Codex
Com o Supabase configurado, o proximo passo e criar as tabelas. Codex e excelente para gerar SQL de schemas:
Tabela de tarefas
opencode "Gere SQL para criar a tabela tasks no Supabase: - id: uuid, primary key, default gen_random_uuid() - user_id: uuid, references auth.users(id), not null - titulo: text, not null - descricao: text, nullable - status: text, check (status IN ('pending', 'in_progress', 'completed')), default 'pending' - prioridade: integer, check (prioridade BETWEEN 1 AND 3), default 2 - criada_em: timestamptz, default now() - concluida_em: timestamptz, nullable - created_at e updated_at triggers Inclua index em user_id e status."
SQL de seed
opencode "Gere SQL de seed com 5 tarefas de exemplo: - Use o ID de um usuario existente (ou auth.users() para pegar o primeiro) - Status variados: 2 pending, 2 in_progress, 1 completed - Titulos realistas como 'Implementar autenticacao', 'Criar dashboard' - Datas distribuidas nos ultimos 7 dias"
O SQL gerado pelo Codex e pronto para executar no SQL Editor do Supabase ou aplicar via migrations.
Autenticacao Supabase com Claude Code
Supabase oferece autenticacao completa (email/senha, magic link, OAuth). Claude Code configura tudo:
Pagina de login
claude "Crie src/app/login/page.tsx com formulario de autenticacao: - Campos: email e password - Botao: 'Entrar' que chama supabase.auth.signInWithPassword() - Link para cadastro: 'Nao tem conta? Cadastre-se' - Tratamento de erros: email invalido, senha incorreta, conta inexistente - Redirect apos login para /dashboard - E um Client Component com 'use client'"
Cadastro de usuario
claude "Crie src/app/register/page.tsx: - Campos: nome, email, password, confirmar password - Validacao: password 8+ caracteres, confirmar password igual - Chama supabase.auth.signUp() com email e password - Apos cadastro, redireciona para /login com mensagem de confirmacao - E um Client Component com feedback visual de carregamento"
Middleware de protecao
claude "Crie src/middleware.ts que protege as rotas: - Usa supabase.createMiddlewareClient() para ler o cookie de sessao - Se usuario nao estiver logado, redireciona para /login - Rotas publicas: /, /login, /register, /blog/* - Rotas protegidas: /dashboard/*, /profile/* - Se usuario estiver logado e tentar acessar /login, redireciona para /dashboard"
Row Level Security com agentes de IA
RLS (Row Level Security) e um dos recursos mais importantes do Supabase — e um dos mais dificeis de configurar corretamente. Claude Code entende as nuances:
Politicas RLS para tasks
claude "Crie politicas RLS para a tabela tasks no Supabase: - Habilitar RLS na tabela: ALTER TABLE tasks ENABLE ROW LEVEL SECURITY; - SELECT: usuarios veem apenas suas proprias tasks (user_id = auth.uid()) - INSERT: usuarios criam tasks com user_id = auth.uid() - UPDATE: usuarios atualizam apenas suas proprias tasks - DELETE: usuarios deletam apenas suas proprias tasks - Admin: (opcional) usuarios com role 'admin' podem ver/editar todas"
Trigger de updated_at
claude "Crie uma funcao e trigger para atualizar updated_at automaticamente: - Funcao: update_updated_at_column() - Trigger: BEFORE UPDATE ON tasks FOR EACH ROW EXECUTE FUNCTION - Aplica para todas as tabelas que tem coluna updated_at"
Claude Code gera o SQL e tambem explica o que cada politica faz — util para revisao de seguranca.
Realtime e subscriptions com Codex
Supabase Realtime permite ouvir mudancas no banco em tempo real. Codex gera as subscriptions:
Hook de subscription
opencode "Crie src/hooks/useRealtimeTasks.ts: - Hook que se inscreve em mudancas na tabela tasks - Filtra por user_id = usuario logado - Tipos de evento: INSERT, UPDATE, DELETE - Atualiza o estado local quando recebe uma mudanca - Limpa a subscription no cleanup do useEffect - Retorna: tasks, isSubscribed, error"
Badge de notificacao em tempo real
opencode "Crie src/components/RealtimeBadge.tsx: - Mostra um badge com o numero de tarefas atualizadas em tempo real - Animacao de pulse quando uma nova tarefa e adicionada - Usa o hook useRealtimeTasks - Props: userId (string), onNewTask (callback opcional)"
Com subscriptions, o app reflete mudancas em tempo real sem polling ou refreshes manuais.
Exemplo pratico: App full-stack com Supabase
Vamos unir tudo em um app de gerenciamento de tarefas com autenticacao e dados em tempo real.
Estrutura completa
claude "Crie a estrutura completa do app com Supabase: - src/app/page.tsx: landing page - src/app/login/page.tsx: login - src/app/register/page.tsx: cadastro - src/app/dashboard/page.tsx: dashboard com lista de tarefas - src/app/dashboard/layout.tsx: layout protegido - src/app/dashboard/tasks/[id]/page.tsx: detalhe da tarefa - src/components/TaskList.tsx: lista com supabase realtime - src/components/CreateTaskForm.tsx: formulario de criacao - src/lib/supabase/*.ts: clientes Supabase - src/middleware.ts: protecao de rotas"
Pagina do dashboard com Server Component
claude "Crie src/app/dashboard/page.tsx (Server Component) que: - Usa o createServerClient para buscar as tarefas do usuario logado - Renderiza a lista de tarefas usando TaskList (Client Component) - Mostra estatisticas: total, pendentes, concluidas - E o entrypoint do dashboard protegido pelo middleware"
Criacao de tarefa com Server Action
claude "Crie src/app/actions/tasks.ts com Server Actions:
- createTask(formData): valida, insere no Supabase, revalida path
- updateTaskStatus(id, status): atualiza status
- deleteTask(id): remove tarefa
- Use createRouteHandlerClient do @supabase/ssr
- Trate erros com try/catch e retorne { success, error }"
Com Claude Code e Codex, voce tem um app full-stack completo com Supabase — autenticacao, banco PostgreSQL, RLS, realtime e Server Actions — tudo gerado em horas, nao dias.
FAQ — Perguntas Frequentes
Supabase e realmente gratuito para comecar?
Sim. O Supabase oferece um tier gratuito generoso: ate 500MB de banco PostgreSQL, 50.000 usuarios ativos mensais, 2GB de Storage e realtime habilitado. Para projetos pessoais e MVPs, o plano gratuito e mais que suficiente.
Preciso configurar um servidor para usar Supabase?
Nao. Supabase e um backend como servico (BaaS). Voce se conecta diretamente do frontend ao Supabase usando a biblioteca @supabase/supabase-js. Nao ha necessidade de configurar ou gerenciar servidores.
Claude Code consegue configurar Row Level Security (RLS) no Supabase?
Sim. Claude Code gera politicas RLS em SQL para o PostgreSQL do Supabase. Ele entende os conceitos de authenticated vs anon, e pode criar politicas para SELECT, INSERT, UPDATE e DELETE baseadas no usuario logado.
Codex e bom para gerar queries Supabase?
Sim. Codex conhece a API do Supabase JavaScript — from(), select(), insert(), update(), delete(), eq(), filter(), e as funcoes de autenticacao como signInWithPassword() e signUp().
O Orquestra funciona com o Supabase local (supabase CLI)?
Sim. O Supabase CLI permite rodar um ambiente local completo (PostgreSQL, GoTrue, Realtime, Storage) via Docker. O Orquestra no Windows 11 pode executar o supabase start em um terminal e os agentes em outro.
Comece com Supabase e agentes hoje
Supabase agentes IA e a combinacao ideal para construir backends modernos sem gerenciar servidores. Com Claude Code para autenticacao, RLS e Server Actions, e Codex para schemas SQL e subscriptions realtime, voce cria aplicacoes full-stack completas com produtividade maxima.
O Orquestra e o ambiente perfeito para esse workflow no Windows 11 — conecte Claude Code e Codex no mesmo canvas, monitore o Supabase Studio e veja as mudancas em tempo real.
Baixe o Orquestra para Windows 11 e comcece seu teste gratis de 7 dias.
Links internos recomendados
- APIs REST com Agentes de IA — alternativa ao Supabase com Express/Prisma
- Banco de Dados com Agentes de IA — modelagem de dados com agentes
- Next.js 16 com Agentes de IA — o frontend ideal para o backend Supabase
Links externos recomendados
- Supabase Documentation — documentacao oficial do Supabase
- Supabase Auth Guide — guia de autenticacao do Supabase
- Supabase Realtime — documentacao do Realtime do Supabase
Pronto para orquestrar seus agentes?
Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Gratis por 7 dias.