Summary  
This chapter shows how to import a code repository into a deployment service, configure environment variables for secure API key management, and trigger an automated build-and-publish process.

General domain of usage  
Web application hosting

Vercel toma tu código de GitHub y lo publica como un sitio web en vivo. Cada vez que envías una actualización a GitHub, Vercel la vuelve a desplegar automáticamente. No necesitas hacer nada manualmente después de la configuración inicial.

Definición

Tu código está en GitHub. Este capítulo lo pone en línea con una URL real que puedes compartir con cualquier persona.

### Los pasos

Ve a [vercel.com](https://vercel.com) y regístrate. Conecta tu cuenta de GitHub cuando se te solicite. Esto es lo que permite que Vercel vea tus repositorios.

1. Crear una cuenta en Vercel

Una vez en el panel de Vercel, haz clic en **Add New** y selecciona **Project**. Deberías ver tu repositorio de GitHub listado. Haz clic en **Import**.

2. Importar tu proyecto

Este es el paso más importante. Tu clave API no está en GitHub porque fue excluida por `.gitignore`. Eso significa que Vercel tampoco la tiene. Debes proporcionársela directamente a Vercel.

En la página de configuración del proyecto, abre la sección **Environment Variables**. Debes agregar tu clave API aquí antes de desplegar.

| Field | What to enter |
|-------|--------------|
| Key   | `ANTHROPIC_API_KEY` |
| Value | Your actual API key from `.env.local` |

También puedes hacer clic en **Import .env** y seleccionar directamente tu archivo `.env.local`. Vercel leerá la clave y el valor automáticamente. Esta es la opción más sencilla.

3. Agregar tus variables de entorno

Una vez agregada la variable de entorno, haz clic en **Deploy**. Vercel extraerá todos tus archivos de código desde GitHub y los publicará. Esto toma entre dos y cinco minutos.

4. Hacer clic en Deploy

Cuando veas la pantalla de felicitaciones, ¡tu aplicación estará en línea! Vercel te proporciona una URL que puedes abrir en cualquier navegador y compartir con quien quieras.

5. Listo

### Por qué es importante el paso de la variable de entorno

Tu aplicación se compilará y parecerá funcionar sin la clave de API. Pero en el momento en que alguien envíe una idea, fallará porque la aplicación no tiene forma de llamar a la IA. Agregar la clave en Vercel es lo que permite que la función principal realmente funcione en producción.

El archivo local `.env.local` permanece en tu computadora. Las variables de entorno de Vercel son tu `.env.local` para la versión web en vivo.


Nota

¿Qué debes hacer para asegurarte de que tu aplicación desplegada pueda acceder a la API de IA?

Construye y lanza una aplicación real en solo un fin de semana utilizando herramientas modernas de IA y un flujo de trabajo simple y práctico, empleando Claude Code para planificar, generar y perfeccionar tu código, gestionando tu proyecto con GitHub y desplegando tu aplicación terminada en línea con Vercel. Comenzarás con una idea y rápidamente la convertirás en un plan de proyecto claro, luego avanzarás paso a paso en la construcción de una aplicación funcional, enfocándote en las características principales, una arquitectura sencilla y una iteración rápida en lugar de complejidad innecesaria, mientras aprendes a trabajar eficazmente con IA escribiendo mejores prompts, corrigiendo errores y mejorando funcionalidades, finalizando con una aplicación en línea, un proyecto limpio en GitHub y un sistema repetible para convertir futuras ideas en productos reales más rápido.

Comprender los conceptos básicos del desarrollo asistido por IA, configurar el entorno y familiarizarse con Claude Code antes de comenzar la primera aplicación.

Convierte tu idea en un plan claro y sencillo y define la versión más pequeña de tu aplicación que aporte valor real.

Pasa de cero a una aplicación en funcionamiento generando código con IA, configurando el proyecto y comprendiendo lo que se ha creado.

Mejora tu aplicación añadiendo funciones, refinando el diseño y aprendiendo a solucionar problemas de manera eficaz.

Publica tu proyecto, hazlo accesible en línea y asegúrate de que todo funcione utilizando GitHub y Vercel.

Field	What to enter
Key	`ANTHROPIC_API_KEY`
Value	Your actual API key from `.env.local`

Implementación con Vercel

Los pasos

Por qué es importante el paso de la variable de entorno