AI-Powered Development

Author: Tom Cranstoun
Summarises the key points from a recent presentation and explores how AI is revolutionising the development process.

An introspection on a recent presentation

AI-Powered Development in Edge Delivery Services: A Game-Changer for Web Development

In September 2024, Tom Cranstoun, an AEM Consultant, presented a web development approach using AI-powered Edge Delivery Services (EDS) tools.

This blog post summarises the key points from his presentation and explores how AI is revolutionising the development process.

The Challenge and Solution

EDS web development can be complex, but AI-assisted rapid development offers a promising solution. The goals are clear: faster prototyping, consistent code, and reduced manual effort. To achieve this, Cranstoun introduced an AI-powered stack centred around two main components:

  1. Claude: An advanced AI model by Anthropic
  2. Cursor.ai: An AI-powered IDE

Training Claude for EDS

Creating an AI assistant that truly understands EDS took a lot of work. The process involved several steps:

  1. Initial Training: Started with AEM.live documentation, developer guides, and existing repositories.
  2. Website Scraping: Developed a tool to scrape websites, analyse SEO and extract rendered content from the DOM.
  3. Iterative Improvement: Fed scraped content from aem-live.com to Claude, which improved its understanding but still had gaps.
  4. Personal Blog Integration: Added content from Cranstoun's blog about EDS development, including examples and introductory text.
  5. Boilerplate Repository: Incorporated samples like "Hello World," "Back to Top," and "Index" from the AEM boilerplate GitHub repository.

The final training data consisted of three primary sources: LIVE (from aem-live.com), BLOG (Cranstoun's blog), and REPO (the boilerplate repository). These were combined into a "super context file, " significantly enhancing Claude's understanding of EDS.

Demonstrating AI-Powered Development

With the improved AI model, Cranstoun showcased two demos:

  1. A basic demonstration of Claude's understanding of EDS
  2. A more complex set of web developments Leveraging Cursor.ai

To push the boundaries further, Tom introduced Cursor.ai, demonstrating its capabilities in creating components complete with documentation, samples, and tests. Two impressive demos were presented:

  1. Image Cycler Block
  2. Style Guide presentation

Best Practices for AI-Assisted Development

Cranstoun shared some critical guidelines for effective AI-powered development:

Looking Ahead

The presentation concluded with an open discussion on the future of AI in web development, encouraging participants to share their thoughts and ideas.

Conclusion

AI-powered development in Edge Delivery Services represents a significant leap forward in web development practices. By leveraging advanced AI models and tools, developers can streamline their workflow, produce more consistent code, and tackle complex projects more efficiently. As this technology continues to evolve, it promises to reshape the landscape of web development in exciting ways.

For those interested in exploring this topic further, check out Tom Cranstoun's blog series on developer guides and AI-generated code at AllAbout.Network.

This blog post is based on a presentation by Tom Cranstoun, AEM Consultant, delivered in September 2024.

Detailed Code available at https://allabout.network/blogs/ddt/ai-generated-code

Thanks for reading.

Digital Domain Technologies provides expert Adobe Experience Manager (AEM) consultancy. We have collaborated with some of the world’s leading brands across various AEM platforms, including AEM Cloud, on-premise solutions, Adobe Managed Services, and Edge Delivery Services. Our portfolio includes partnerships with prominent companies such as Twitter (now X), EE, Nissan/Renault Alliance Ford, Jaguar Land Rover, McLaren Sports Cars, Hyundai Genesis, and many others.

/fragments/ddt/proposition
style
bg-dark
Back to Top