Migrar uma página estática com IA

Aqui você vai acompanhar o processo de migrar uma página escrita em HTML estático para um serviço baseado em conteúdo gerenciado pela WEEGLOO.

Neste guia usamos como exemplo uma página de divulgação de um show único (download). Essa página contém informações sobre o próprio show junto com os dados de três artistas que se apresentam, e todos os dados estão escritos diretamente dentro do arquivo HTML. Essa estrutura não dá trabalho no momento de criar a página pela primeira vez, mas tem uma limitação: toda vez que o elenco muda ou as informações do show são alteradas, é preciso editar o arquivo HTML manualmente.

Nesta etapa, usamos um agente LLM junto com o MCP da WEEGLOO para realizar três tarefas em sequência. Primeiro analisamos a página HTML estática para criar automaticamente os Content Type adequados, em seguida extraímos os dados que estavam escritos na página e os carregamos como Content e, por fim, alteramos o código para que a página passe a buscar os dados pelo CDA.

Passando por esse processo, você consegue migrar uma página estática existente para um serviço de conteúdo baseado na WEEGLOO sem precisar criar você mesmo um backend separado (o sistema de bastidores que armazena e processa os dados).

Pré-requisitos

Antes de começar, duas coisas precisam estar prontas.

Primeiro, é preciso ter um novo Space vazio criado na WEEGLOO. Todos os Content Type e Content que você vai criar a seguir são gerenciados dentro desse Space, e começar do zero ajuda a acompanhar o fluxo com mais clareza. Os detalhes sobre Organization e Space são tratados em Acesso e permissões.

Segundo, o agente LLM precisa estar conectado ao MCP da WEEGLOO. Este guia segue o Cursor IDE como base, mas em ambientes que oferecem suporte ao MCP, como Claude Desktop, você pode seguir o mesmo fluxo. O método de instalação é tratado em MCP.

Concluída a instalação, o agente LLM passa a poder chamar diretamente as ferramentas definidas na CMA (Content Management API) da WEEGLOO. Ou seja, tarefas que uma pessoa fazia no estúdio de conteúdo, como criar Content Type e registrar e publicar Content, passam a ser realizadas pelo agente LLM apenas com solicitações em linguagem natural.

Modelagem de conteúdo

A primeira coisa a fazer é definir a estrutura dos dados contidos na página como um Content Type. O Content Type é como a planta dos dados: ele determina de antemão quais Field terão os dados que a WEEGLOO vai gerenciar.

Olhando a página de exemplo, ela contém tanto informações sobre o próprio show (título, data e hora, local, preço, etc.) quanto informações sobre os artistas (nome, papel, horário de apresentação, descrição), 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 para guardar as informações do show e outro para guardar as informações dos artistas.

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

Hey, so there's an HTML file in the project — nightshift-2026.html. It's a
landing page for a one-night concert and right now everything's hardcoded
straight into the markup (the show details, the lineup, set times, all of it).
 
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 at nightshift-2026.html 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 arquivo HTML para inferir os tipos de dados e suas relações, define o tipo adequado para cada Field e cria os Content Type pelo MCP da WEEGLOO.

Concluída a tarefa, ao abrir a página de Content Type no estúdio de conteúdo da WEEGLOO, você vê que foram criados dois novos Content Type: um que representa o show e outro que representa os artistas. O Content Type do show contém Field como título, data e hora, local e preço; o Content Type dos artistas contém nome, papel, horário de apresentação e descrição, junto com um Field de referência (Reference) que indica a qual show ele pertence.

Definidos os Content Type dessa forma, está tudo pronto para carregar os dados reais com base nessa estrutura. Os detalhes sobre Content Type são tratados em Modelagem de Content.

Criação de conteúdo

O Content Type apenas define o formato dos dados; ele mesmo não contém dados. Nesta etapa, com base nos Content Type definidos anteriormente, transferimos para Content os dados reais que estavam escritos na página.

Ao solicitar ao agente LLM o seguinte, ele analisa os dados da página, cria os Content adequados aos Content Type e também cuida da publicação.

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through nightshift-2026.html 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 HTML novamente, separa os dados item a item e, pelo MCP da WEEGLOO, registra uma entrada com as informações do show e três entradas com as informações dos artistas. Os Content registrados são publicados ao mesmo tempo para que possam ser consultados externamente.

Concluída a tarefa, ao abrir a lista de Content no estúdio de conteúdo da WEEGLOO, você vê que tanto a entrada do show quanto as três dos artistas estão registradas e publicadas. A partir daí, sem precisar alterar o código da página diretamente, você pode mudar os dados livremente pelo estúdio de conteúdo ou pelo agente LLM.

Os detalhes sobre a criação e a publicação de Content são tratados em Criação e publicação de Content.

Integração com a CDA

Com os dados prontos, na última etapa alteramos o código para que a página busque os dados pela CDA da WEEGLOO, em vez de tê-los escritos estaticamente no HTML. A CDA é uma API somente leitura oferecida para consultar Content publicados a partir de serviços externos, permitindo que páginas web ou aplicativos móveis busquem e usem diretamente os dados da WEEGLOO.

Essa tarefa também acontece automaticamente ao solicitar ao agente LLM o seguinte.

Okay, last step. The content's all in Weegloo and published, so now let's
hook the page up to actually use it.
 
Could you update nightshift-2026.html 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 que estavam incrustados na página e, no lugar, preenche o código que faz a chamada à CDA e reflete na tela os dados da resposta. No lugar onde ficavam as informações dos artistas entra uma chamada à CDA que consulta a lista de Content dos artistas; no lugar onde ficavam as informações do show entra uma chamada que consulta o Content do show como item único.

Depois de atualizar a página alterada, ao abrir a aba Network das ferramentas de desenvolvedor do navegador, você pode confirmar que, quando a página carrega, uma requisição real é enviada à CDA da WEEGLOO e a resposta chega.

Agora, ao mudar o horário de apresentação de um artista ou adicionar um novo artista no estúdio de conteúdo da WEEGLOO e atualizar a página, o conteúdo alterado é refletido imediatamente, sem precisar fazer build ou deploy à parte. Os detalhes sobre a CDA são tratados em Content Delivery API.

Até aqui você migrou uma única página HTML escrita de forma estática para um serviço baseado em conteúdo gerenciado pela WEEGLOO. O mesmo fluxo pode ser aplicado da mesma maneira a páginas mais complexas. Apenas aumentam a quantidade de Content Type e o volume de Content; todo o processo, da modelagem ao carregamento e à integração com a CDA, segue exatamente igual.