Criar e publicar um site com IA

Anteriormente, em Migrar páginas estáticas com IA, vimos como mover uma página estática já existente para um serviço baseado em conteúdo gerenciado pelo WEEGLOO. Desta vez, abordamos um fluxo mais amplo, que inclui também a etapa de criar a página do zero.

Neste guia, usamos um agente LLM e o WEEGLOO MCP para partir de uma folha em branco e realizar cinco tarefas em sequência. Primeiro, concluímos o design e a implementação da página com uma ferramenta de design baseada em IA. Em seguida, analisamos a página gerada para definir automaticamente os Content Type e, depois, carregamos os dados escritos na página como Content. Na sequência, ajustamos o código para que a página busque os dados pelo CDA e, por fim, publicamos a página externamente com o Web Hosting do WEEGLOO.

Ao percorrer esse processo, você conclui todo o trajeto, do design à gestão de conteúdo e à publicação, apenas com um agente LLM e o WEEGLOO, sem precisar montar nenhuma infraestrutura própria.

Pré-requisitos

Antes de começar, três coisas precisam estar preparadas.

Primeiro, é necessário ter um novo Space vazio criado no WEEGLOO. Todos os Content Type e Content que você criar daqui em diante serão gerenciados dentro desse Space. Os detalhes sobre Organization e Space são abordados em Acesso e permissões.

Segundo, o agente LLM precisa estar conectado ao MCP do WEEGLOO. Este guia segue o Cursor IDE como referência, mas você pode usar o mesmo fluxo em qualquer ambiente que suporte MCP, como o Claude Desktop. O método de instalação é abordado em MCP.

Terceiro, você precisa de uma ferramenta de IA que crie automaticamente o design e a implementação da página. Por conveniência, este guia usa o Vercel v0, mas serve qualquer ferramenta que crie design e código a partir de uma simples solicitação em linguagem natural, como o Lovable ou o Bolt.new. Se você se sente mais à vontade escrevendo o código diretamente, também pode pedir o design e a implementação juntos a um agente LLM que você já usa, como o Cursor IDE.

Design e implementação da página

A primeira tarefa é concluir o design e a implementação da página. Nesta etapa, você organiza em linguagem natural que tipo de página deseja criar e passa essa descrição diretamente para a ferramenta de IA.

Neste guia, usamos como exemplo uma página de documentação de API para um serviço fictício de API de análise. Muitas equipes de desenvolvimento adotam ferramentas de documentação separadas ou modelos externos para manter a documentação de API, mas, nesse formato, a forma e o conteúdo da documentação ficam fortemente acoplados, o que muitas vezes dificulta mudanças livres de estrutura ou uma operação ajustada ao fluxo da equipe. Desta vez, vamos montar todo o trajeto, do design à gestão de conteúdo, por conta própria, em um formato que possa ser operado livremente conforme a necessidade.

A página inclui informações sobre a própria API (nome, slogan, breve introdução), além de informações sobre cada endpoint (método HTTP, caminho, resumo, descrição). A forma concreta da página e o número de endpoints abordados podem ser definidos livremente conforme a API que você opera, e podem ser ampliados a qualquer momento ao longo da operação. Esses requisitos são descritos em linguagem natural e passados para a ferramenta de IA da seguinte forma.

Hey, I want to build a docs site for an analytics API called Pulse.
Standard API reference layout — an overview area with the API's name,
tagline, and a short intro, plus an endpoint reference section showing
the HTTP method, path, summary, and description for each. Clean,
dev-friendly, not too colorful — think Stripe-style readable.

Ao receber a solicitação, a ferramenta de IA cria uma proposta de design e, junto com ela, escreve a marcação e os estilos correspondentes. Nesse momento, o sistema de gestão de conteúdo ainda não está conectado, então todos os dados exibidos na página estão escritos diretamente no código.

Você baixa o código da página assim criada e o traz para um ambiente de agente LLM como o Cursor IDE. Todo o trabalho a seguir é feito com base nesse código e segue as mesmas etapas vistas no fluxo de Migrar páginas estáticas com IA.

Modelagem de conteúdo

Nesta etapa, você define a estrutura de dados da página gerada anteriormente como Content Type. O Content Type é como a planta dos dados: ele determina de antemão quais Field terão os dados que o WEEGLOO vai gerenciar.

Ao olhar o código da página, vê-se que ele contém tanto informações sobre a própria API quanto informações sobre cada endpoint, e os dois tipos de dados formam uma relação de um-para-muitos. Por isso, essa página se divide naturalmente em dois Content Type: um que guarda as informações da API e outro que guarda as informações dos endpoints.

Essa análise e a criação dos Content Type acontecem automaticamente apenas com a seguinte solicitação ao agente LLM.

Hey, I just dropped the page from v0 into the project.
The data's all hardcoded for now (the API info up top, the endpoints down
below).
 
I want to migrate it over to Weegloo so the page can pull its content from
a CMS instead of having it all baked in. Let's take it step by step rather
than doing the whole thing in one go.
 
To kick things off, could you take a look and figure out
what content types would make sense for it, then go ahead and create them
in Weegloo? We'll deal with the actual content and the API wiring in the
following steps.

Ao receber a solicitação, o agente LLM examina a estrutura do código para inferir os tipos e as relações dos dados, define o tipo adequado para cada Field e, então, cria os Content Type pelo WEEGLOO MCP.

Concluído o trabalho, ao abrir a página de Content Type no estúdio de conteúdo do WEEGLOO, você vê que foram criados dois novos Content Type: um que representa a API e outro que representa os endpoints. O Content Type da API tem Field como nome, slogan e introdução, enquanto o Content Type dos endpoints tem método HTTP, caminho, resumo e descrição, além de um Field de referência (Reference) que indica a qual API ele pertence.

Definidos os Content Type dessa forma, a preparação para carregar os dados reais com base nessa estrutura está concluída. Os detalhes sobre Content Type são abordados em Modelagem de Content.

Criação de conteúdo

O Content Type apenas define o formato dos dados; ele próprio não contém dados. Nesta etapa, com base nos Content Type definidos anteriormente, você move os dados reais que estavam escritos no código da página para Content.

Com a seguinte solicitação ao agente LLM, ele analisa os dados do código, cria Content compatíveis com os Content Type e cuida também da publicação.

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through project again, pull out the actual content
that's hardcoded in there, and create entries in Weegloo using the content
types we just made? Once everything's in, go ahead and publish them too
so they're ready to be served.

Ao receber a solicitação, o agente LLM analisa o código novamente, separa os dados por item e, então, registra as informações da API e de cada endpoint, uma a uma, pelo WEEGLOO MCP. Os Content registrados são publicados ao mesmo tempo para que possam ser consultados externamente.

Concluído o trabalho, ao abrir a lista de Content no estúdio de conteúdo do WEEGLOO, você vê que tanto as informações da API quanto as dos endpoints estão registradas e publicadas. A partir daqui, você pode alterar os dados livremente pelo estúdio de conteúdo ou pelo agente LLM, sem precisar mexer diretamente no código da página.

Os detalhes sobre a escrita e a publicação de Content são abordados em Escrita e publicação de Content.

Integração com o CDA

Com os dados também preparados, agora você ajusta o código para que a página busque os dados pelo CDA do WEEGLOO, em vez de usar os dados escritos diretamente no código. O CDA é uma API somente leitura disponibilizada para que serviços externos consultem os Content publicados, permitindo que páginas web ou apps móveis busquem e usem diretamente os dados do WEEGLOO.

Esse trabalho também acontece automaticamente com a seguinte solicitação ao agente LLM.

Okay, almost there. The content's all in Weegloo and published, so now
let's hook the page up to actually use it.
 
Could you update project so that instead of having all that data
hardcoded in the markup, it fetches from Weegloo's CDA on load and
renders the page from the response? Basically the same page as before,
just pulling from the API now.

Ao receber a solicitação, o agente LLM remove os dados estáticos embutidos no código e preenche esse espaço com chamadas ao CDA e com o código que reflete os dados da resposta na tela. No lugar onde estavam as informações dos endpoints, entra uma chamada ao CDA que consulta a lista de Content de endpoints; no lugar onde estavam as informações da API, entra uma chamada que consulta o Content da API como um item único.

Ao executar a página ajustada localmente e abrir a aba Network das ferramentas de desenvolvedor do navegador, você pode confirmar que, durante o carregamento da página, requisições reais são enviadas ao CDA do WEEGLOO e as respostas chegam. Os detalhes sobre o CDA são abordados em Content Delivery API.

Web Hosting

A última etapa é publicar externamente a página que você criou até aqui. O WEEGLOO oferece o recurso Web Hosting para hospedar a página diretamente. Com isso, você pode tornar a página concluída acessível a qualquer pessoa sem precisar montar uma infraestrutura de hospedagem própria.

Faça a seguinte solicitação ao agente LLM.

Last thing — let's get this live.
 
Could you set up a WebHosting in Weegloo for this project and deploy the
page to it?

Ao receber a solicitação, o agente LLM envia o artefato de build da página para o Web Hosting e implanta a página de modo que ela fique acessível externamente por meio de um subdomínio emitido automaticamente.

Concluída a implantação, você pode acessar a página de qualquer lugar pelo endereço de subdomínio emitido. A partir daqui, basta alterar os Content no estúdio de conteúdo do WEEGLOO para que o conteúdo modificado seja refletido imediatamente no site ao vivo, sem precisar fazer build ou implantar novamente. Tarefas frequentes na operação de uma documentação de API, como adicionar um novo endpoint ou alterar a descrição de um endpoint existente, também podem ser feitas sem modificar o código.

Se mais adiante, na fase de operação, você quiser usar um domínio próprio, pode conectar um Custom Domain no estúdio de conteúdo do WEEGLOO. Os detalhes sobre Web Hosting e Custom Domain são abordados em Publicação de sites.

Até aqui, partimos de uma folha em branco e concluímos todo o trajeto, do design e da implementação à gestão de conteúdo e à publicação, apenas com um agente LLM e o WEEGLOO. O mesmo fluxo pode ser aplicado da mesma forma a sites mais complexos, e tarefas como adicionar novos Content Type ou aumentar a quantidade de Content ao longo da operação também podem ser conduzidas naturalmente da mesma maneira.