imagine.showcase.title

Neste exemplo, usaremos o Craft para manter um diario de sonhos pessoal. Vamos criar um pequeno aplicativo web para registrar nossos sonhos e depois pedir ao ChatGPT ou ao Claude para fornecer uma interpretacao de cada sonho.

imagine.step — Crie seu documento

O documento do nosso diario de sonhos e super simples: basta adicionar cada novo sonho no topo, com a data como titulo e algumas informacoes adicionais abaixo.

Use o modelo para criar um novo documento para o seu diario de sonhos:

Diario de sonhos

Visualizar Template Usar este Template

imagine.step — Ativar acesso à API

Ative o acesso a API do seu documento para obter uma URL unica que pode ser usada para ler e adicionar conteudo ao documento, por exemplo, por meio do aplicativo web que criaremos a seguir.

imagine.step

Abra a aba “Imagine”

imagine.step

Clique em “Add Your First API Connection”

imagine.step

Configure sua conexão de API com um nome. Para este projeto, a API só precisa gravar em seu documento. Defina as permissões da API como somente “Write”.

imagine.step

imagine.showcase.enableAPISection.document.steps.step4DescriptionWithName

imagine.step

A URL da API que será usada para interagir com seu documento agora é exibida na parte superior

imagine.step

Clique no botão “Download AI Bundle”. Isso irá baixar uma pasta contendo a documentação da API e o conteúdo do seu documento.

imagine.step — Criar com o Lovable

Agora vamos continuar e construir o site real do nosso painel no Lovable. Para o site de exemplo mostrado acima, usamos o seguinte prompt:

Estou criando um diario de sonhos para registrar e analisar meus sonhos.

As informacoes estao armazenadas no Craft. Por favor, verifique o arquivo anexo que inclui um exemplo do estado atual do meu documento Dream Journal no Craft, bem como informacoes sobre a API que voce deve usar para salvar meus sonhos.

Eu quero que voce crie um site exibindo um formulario para registrar meus sonhos e a qualidade do sono.

O site deve exibir no centro um formulario com um controle deslizante para a qualidade do sono (de muito ruim a excelente). Acima do controle deslizante deve haver um emoji para cada nivel de qualidade, que se atualiza conforme o controle e movido. Abaixo deve haver um campo de texto para o proprio sonho.

O design deve ser calmo e suave. Use cores em tons sombrios e formas arredondadas, com um gradiente suave para o fundo.

imagine.showcase.dreamJournal.buildIt.step3.description2

O Lovable comeca a trabalhar, analisando o conteudo do bundle para entender a estrutura do documento e como usar a API. Em seguida, comeca a construir nosso site com base no prompt.

Agora temos um site bonito que podemos usar para adicionar sonhos ao nosso diario de sonhos! Se quiser, voce pode salvar este aplicativo web na tela inicial para acessar facilmente todas as manhas.

imagine.step — Ativar acesso ao MCP

Ative o acesso MCP do seu documento para obter uma URL unica que pode ser usada por clientes de IA para ler e adicionar conteudo ao seu documento:

imagine.step

Abra a aba “Imagine”

imagine.step

Clique em “Create Your First MCP Connection”

imagine.step

Configure sua conexão MCP com um nome.

imagine.step

imagine.showcase.enableMCPSection.document.steps.step4DescriptionWithName

imagine.step

A URL do MCP que será usada para interagir com seu documento agora é exibida na parte superior

imagine.step — Configurar a conexão MCP

Agora vamos usar a URL do MCP para conectar ao documento a partir de um cliente:

Uma assinatura Claude Pro ou Max é necessária para adicionar conectores personalizados.

imagine.step

Acesse as Configurações

imagine.step

Selecione a seção “Connectors” e clique no botão “Add custom connector”

imagine.step

Dê ao conector um nome significativo e cole a URL do MCP do Craft. Defina as configurações avançadas para usar "Streamable HTTP" como tipo de transporte.