Añadir base de datos a tu proyecto con Supabase

Tu web tiene un problema: no recuerda nada

Has creado una web profesional con Claude Code. Tiene formulario de contacto, calculadora de precios y hasta la has publicado en internet con Vercel. Pero cada vez que alguien rellena el formulario, los datos desaparecen. Nadie te envía nada. La información se pierde cuando el usuario cierra la página.

Tu web no tiene memoria. Y un producto sin memoria es un producto incompleto.

Supabase es la herramienta que le da memoria a tu proyecto. Con ella, todo lo que tus visitantes escriban, seleccionen o envíen queda guardado de forma permanente. Y conectarla con Claude Code no requiere saber nada de bases de datos.

Qué es una base de datos (sin complicaciones)

Piensa en una hoja de cálculo gigante que vive en la nube. Cada tabla es una pestaña. Cada fila es un registro (un usuario, un mensaje, un pedido). Cada columna es un dato (nombre, correo, fecha).

Supabase es exactamente eso: una hoja de cálculo en la nube que tu web puede leer y escribir automáticamente. La diferencia con una hoja de cálculo real es que Supabase está diseñada para manejar miles de registros simultáneos sin despeinarse, y tiene un sistema de seguridad integrado para proteger los datos.

La buena noticia: no necesitas aprender el lenguaje técnico de bases de datos (llamado SQL). Claude Code se encarga de escribir las consultas por ti. Tú solo describes qué datos quieres guardar y cómo quieres usarlos.

Paso 1: crear tu cuenta y proyecto en Supabase

Ve a supabase.com y crea una cuenta gratuita. Puedes registrarte con tu correo o con tu cuenta de GitHub.

Una vez dentro, haz clic en "New Project" y rellena tres campos:

• Nombre del proyecto: El nombre de tu web o aplicación
• Contraseña de la base de datos: Inventa una contraseña segura (la necesitarás una sola vez)
• Región: Elige la más cercana a tus usuarios (para España, "West EU" funciona bien)

Espera un minuto mientras Supabase crea todo. Cuando termine, tendrás tu base de datos lista.

Paso 2: obtener las claves de conexión

Para que tu web pueda comunicarse con Supabase, necesitas dos datos que funcionan como las llaves de tu base de datos:

1. En el panel de Supabase, ve a Configuración del proyecto (el icono de engranaje)
2. Busca la sección Claves de la interfaz de programación (API)
3. Copia dos valores: la dirección del proyecto (empieza por https://) y la clave anónima (una cadena larga de letras y números)

No te preocupes si no entiendes qué significan estos valores. Solo necesitas copiarlos y pegarlos en el siguiente paso.

Paso 3: conectar Supabase a tu proyecto

Abre Claude Code en la carpeta de tu proyecto y dile:

Necesito conectar Supabase a mi proyecto. La dirección del proyecto es [pega la URL] y la clave anónima es [pega la clave]. Configura las variables de entorno y la conexión.

Claude hará tres cosas automáticamente:

1. Creará un archivo .env con tus claves (este archivo es privado y nunca se comparte)
2. Instalará la biblioteca de Supabase en tu proyecto
3. Configurará la conexión para que tu web pueda leer y escribir datos

Paso 4: guardar datos de un formulario

Ahora viene la parte práctica. Supongamos que tienes un formulario de contacto en tu web. Pídele a Claude:

Quiero que cuando alguien rellene el formulario de contacto, sus datos se guarden en Supabase. Guarda el nombre, correo y mensaje con la fecha.

Claude creará la tabla en Supabase (la "pestaña" de tu hoja de cálculo) y modificará el formulario para que los datos se envíen automáticamente a la base de datos.

Pruébalo: rellena el formulario en tu web y haz clic en enviar.

Paso 5: verificar en el panel de Supabase

Vuelve al panel de Supabase y haz clic en Editor de tablas (el icono de tabla en el menú lateral). Verás tu nueva tabla con el registro que acabas de enviar: nombre, correo, mensaje y fecha. Todo guardado.

Cada vez que alguien use el formulario, aparecerá una nueva fila. Puedes ordenar, filtrar y exportar los datos directamente desde el panel, igual que harías en una hoja de cálculo.

Qué más puedes hacer con Supabase

Una vez que tu proyecto tiene base de datos, las posibilidades se multiplican:

• Lista de espera: Recoge correos de personas interesadas en tu producto antes de lanzarlo
• Sistema de reservas: Guarda citas con fecha, hora y datos del cliente
• Catálogo de productos: Almacena productos con precio, descripción e imagen para mostrarlos dinámicamente en tu web
• Panel de administración: Crea una vista privada donde solo tú puedes ver y gestionar todos los datos recibidos
• Autenticación de usuarios: Permite que las personas creen cuenta e inicien sesión en tu web (Supabase incluye esto de serie)

En cada caso, la instrucción a Claude sigue el mismo patrón: describes qué datos quieres guardar y cómo quieres usarlos. Claude se encarga de crear las tablas, escribir las consultas y conectar todo con tu interfaz.

De web estática a producto con datos reales

La base de datos es lo que transforma tu web de un folleto digital en una herramienta de negocio real. Con ella puedes recoger información de clientes, analizar patrones y tomar decisiones basadas en datos concretos.

Y el proceso completo, desde crear la cuenta en Supabase hasta ver el primer registro guardado, no lleva más de 10 minutos con Claude Code.

Si quieres ver el proceso completo desde la creación hasta la publicación, revisa cómo crear tu web sin programar y cómo publicarla con Vercel. Para conectar tu proyecto con servicios externos como hojas de cálculo o herramientas de mensajería, el siguiente paso son los MCPs.

Siguiente lectura: Instalar tu primer MCP en Claude Code | Ver la guía completa