Criar conteúdo de teste sem sair do IDE
Use o Servidor MCP do AEM de um IDE alimentado por IA, como o IDE de Cursor, para trabalhar com páginas do AEM, fragmentos de conteúdo e ativos em linguagem natural, sem código de API de baixo nível ou navegação de interface do usuário.
Neste tutorial, você revisa detalhes do fragmento de conteúdo Adventure, atualiza um fragmento (por exemplo, o preço de uma aventura) e verifica a alteração no aplicativo WKND Adventures React de seu IDE em um ambiente AEM inferior (RDE ou Desenvolvimento) sem sair do fluxo do MCP.
Adicionar o servidor MCP do AEM
Este tutorial usa o IDE de Cursor como um IDE de exemplo agêntrico; o mesmo registro do AEM MCP Server funciona em qualquer IDE ou aplicativo de chat compatível com MCP.
O servidor MCP do AEM pode ser adicionado ao cliente de IA para uma integração perfeita com várias ferramentas e plataformas de IA. Escolha seu cliente abaixo.
Registre o seguinte URL em qualquer aplicativo de bate-papo ou IDE compatível com MCP:
| code language-none |
|---|
|
Veja como configurá-lo no Cursor, usando a URL de registro manual de Outros clientes MCP:
-
Abra o cursor em sua máquina.
-
Vá para Configurações > Configurações do Cursor no menu Cursor para abrir a janela de configurações.
{modal="regular"}
-
Na barra lateral esquerda, clique em Ferramentas & MCP para abrir esse painel.
{modal="regular"}
-
Clique em Adicionar MCP personalizado ou Novo servidor MCP para abrir o
mcp.jsone cole nesta configuração:code language-json { "mcpServers": { "AEM": { "url": "https://mcp.adobeaemcloud.com/adobe/mcp/aem" } } }note NOTE O acesso pelo servidor MCP do AEM segue as permissões do usuário conectado do AEM: você só pode fazer o que já está autorizado a fazer no AEM. Se sua organização precisar de um escopo mais rigoroso em nível de organização (por exemplo, restringindo a somente leitura), entre em contato com a Adobe em aemcs-mcp-feedback@adobe.com. {modal="regular"}
-
Na janela Configurações do cursor, clique em Conectar para iniciar o processo de autenticação. Ele usa o fluxo PKCE do OAuth 2.0 para obter o Token de Acesso Específico do Usuário para acessar o Servidor MCP do AEM.
{modal="regular"}
-
Faça logon com a Adobe ID e volte para a janela Configurações do cursor.
{modal="regular"}
-
Confirme se o AEM aparece como conectado. Você pode expandir o servidor para ver suas ferramentas.
{modal="regular"}
Instale o aplicativo Web de amostra do AEM
Em seguida, configure o Aplicativo WKND Adventures React no IDE.
-
Clonar estes dois repositórios no computador:
code language-bash ## WKND GraphQL repo, the `react-app` folder is the WKND Adventures app $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git ## WKND Site repo, you deploy this to RDE so the app can use its content fragments data via GraphQL $ git clone git@github.com:adobe/aem-guides-wknd.git -
Implante o projeto WKND Site no RDE. Para obter etapas detalhadas, consulte Como usar o Ambiente de Desenvolvimento Rápido.
-
Abra a pasta
react-appno IDE. -
Editar
.env.developmente definir:REACT_APP_HOST_URI: sua URL de Autor RDEREACT_APP_AUTH_METHOD: serbasicREACT_APP_BASIC_AUTH_USEReREACT_APP_AEM_AUTH_PASSWORD: seraem-headless(criar este usuário no RDE e adicioná-lo ao grupoadministrators)
-
No terminal IDE, execute:
code language-bash $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start -
Em seu navegador, vá para http://localhost:3000 para exibir o aplicativo WKND Adventures.
{modal="regular"}
Revisar e atualizar conteúdo
Suponha que você precise mostrar um banner de HOT DEAL em cartões Adventure quando uma regra simples é atendida. A abordagem habitual seria:
- Observe o código do componente Cartões de aventura
- Adicionar a lógica de quando mostrar o banner
- Verifique o modelo de fragmento de conteúdo do Adventure no AEM
- Altere uma ou mais propriedades do fragmento Aventura para testar a regra
Para simplificar as coisas, vamos mostrar o banner HOT DEAL quando o preço da aventura estiver abaixo de US$ 100.
Como o aplicativo React obtém os dados do ambiente RDE, é necessário conhecer o modelo de fragmento de conteúdo Adventure e atualizar as propriedades do fragmento correto. Isso é exatamente o que o servidor MCP do AEM pode ajudar. Veja como.
-
No bate-papo do IDE, digite:
code language-text I want to review my Content Fragment Models from AEM RDE, can you list the Adventure Content Fragment details. {modal="regular"}
Antes de chamar o Servidor MCP do AEM, ele solicita a confirmação para continuar. Dessa forma, você permanece no controle das operações de conteúdo.
A IA usa o servidor MCP do AEM para buscar os dados e, em seguida, os apresenta de forma clara e estruturada. Inclui detalhes do modelo do fragmento de conteúdo, o número de fragmentos e informações de resumo.
-
Para acionar o banner OFERTA DIRETA, atualize o preço de uma aventura. No mesmo bate-papo, tente:
code language-text Can you update adventure Beervana in Portland's price to 99.99 {modal="regular"}
Da mesma forma, a IA solicita a confirmação para continuar antes de atualizar o conteúdo. Ele também resume a operação do conteúdo antes e depois da atualização.
-
No aplicativo React, confirme se o cartão Beervana agora mostra o banner HOT DEAL.
{modal="regular"}
Prompts adicionais
Experimente esses prompts focados em conteúdo no IDE (com o servidor MCP do AEM conectado) para explorar mais fluxos de trabalho e recursos.
-
Descobrir conteúdo:
code language-text List all content fragments in the WKND Adventures folder List all WKND Site pages from US English site Can you give me page metadata for Tahoe Skiing English page? List assets of Bali Surf camp What Content Fragment models are available in this environment? -
Pesquisar conteúdo:
code language-text Search for content fragments that mention 'cycling' Do we have a magazine page in US English site with "Camping" in it -
Atualizar conteúdo:
code language-text In WKND US English create a copy of Downhill Skiing Wyoming as "Test Downhill Skiing Wyoming" In newly created "Test Downhill Skiing Wyoming" please change title to "Duplicated Page" -
Publicar ou desfazer a publicação:
code language-text Can you publish the page at /us/en/adventures/test-downhill-skiing-wyoming and give me publish page URL Can you unpublish the test-downhill-skiing-wyoming page
Parabéns!
Você configura o servidor MCP do AEM em um IDE agêntico (Cursor, neste exemplo) e o conecta ao seu ambiente RDE (ou Desenvolvimento). Em seguida, você usou o aplicativo WKND Adventures React e conversou em linguagem natural para analisar os detalhes do fragmento de conteúdo do Adventure. Você também atualizou o preço de um fragmento com a IA, solicitando sua confirmação antes de cada operação de conteúdo. Você verificou a alteração no aplicativo em execução. Você pode usar o mesmo fluxo centrado no ser humano do IDE para revisar, atualizar e criar conteúdo do AEM sem alternar para a interface do usuário do AEM ou gravar código de API de baixo nível.