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

O Vercel pega seu código do GitHub e publica como um site ao vivo. Sempre que você envia uma atualização para o GitHub, o Vercel faz a reimplantação automaticamente. Não é necessário fazer nada manualmente após a configuração inicial.

Definição

Seu código está no GitHub. Este capítulo coloca ele online com uma URL real que você pode compartilhar com qualquer pessoa.

### Os passos

Acesse [vercel.com](https://vercel.com) e faça o cadastro. Conecte sua conta do GitHub quando solicitado. Isso permite que o Vercel visualize seus repositórios.

1. Criar uma conta Vercel

Quando estiver no painel do Vercel, clique em **Add New** e selecione **Project**. Você deve ver seu repositório do GitHub listado. Clique em **Import**.

2. Importar seu projeto

Este é o passo mais importante. Sua chave de API não está no GitHub porque foi excluída pelo `.gitignore`. Isso significa que o Vercel também não a possui. Você precisa fornecê-la diretamente ao Vercel.

Na página de configuração do projeto, abra a seção **Environment Variables**. É necessário adicionar sua chave de API aqui antes de implantar.

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

Você também pode clicar em **Import .env** e selecionar diretamente seu arquivo `.env.local`. O Vercel irá ler a chave e o valor automaticamente. Esta é a opção mais fácil.

3. Adicionar suas variáveis de ambiente

Depois de adicionar a variável de ambiente, clique em **Deploy**. O Vercel irá buscar todos os arquivos do seu código no GitHub e publicá-los. Isso leva de dois a cinco minutos.

4. Clique em Deploy

Quando aparecer a tela de parabéns, seu app estará online! O Vercel fornece uma URL que pode ser aberta em qualquer navegador e compartilhada com qualquer pessoa.

5. Pronto

### Por que a etapa da variável de ambiente é importante

Seu aplicativo será construído e parecerá funcionar sem a chave da API. Mas, no momento em que alguém enviar uma ideia, ele falhará porque o aplicativo não terá como chamar a IA. Adicionar a chave ao Vercel é o que faz o recurso principal realmente funcionar em produção.

O arquivo local `.env.local` permanece no seu computador. As variáveis de ambiente do Vercel são o seu `.env.local` para a versão web ao vivo.


Nota

O que você deve fazer para garantir que seu aplicativo implantado possa acessar a API de IA?

Construa e lance um aplicativo real em apenas um final de semana utilizando ferramentas modernas de IA e um fluxo de trabalho simples e prático, utilizando Claude Code para planejar, gerar e refinar seu código, gerenciando seu projeto com o GitHub e implantando seu aplicativo finalizado online com o Vercel. Você começará com uma ideia e rapidamente a transformará em um plano de projeto claro, avançando passo a passo para construir uma aplicação funcional, com foco em funcionalidades essenciais, arquitetura simples e iteração rápida em vez de complexidade desnecessária, enquanto aprende a trabalhar de forma eficaz com IA ao escrever prompts melhores, corrigir erros e aprimorar funcionalidades, finalizando com um aplicativo ao vivo, um projeto GitHub organizado e um sistema repetível para transformar ideias futuras em produtos reais de forma mais rápida.

Compreender os fundamentos do desenvolvimento assistido por IA, configurar o ambiente e familiarizar-se com o Claude Code antes de iniciar o primeiro aplicativo.

Transforme sua ideia em um plano claro e simples e defina a menor versão do seu aplicativo que ofereça valor real.

Vá do zero até um aplicativo em funcionamento gerando código com IA, configurando o projeto e compreendendo o que foi criado.

Aprimoramento do seu aplicativo por meio da adição de funcionalidades, refinamento do design e aprendizado de técnicas eficazes para resolução de problemas.

Publique seu projeto, torne-o acessível online e garanta que tudo funcione utilizando GitHub e Vercel.

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

Implantando com Vercel

Os passos

Por que a etapa da variável de ambiente é importante