Developer Guide to Document Authoring with Edge Delivery Services. Part 10

Using AI to provide Coding, Review, Documentation, tests and Debugging of Edge Delivery Services blocks

This time:

Training AI to deliver the code you want

Training AI to provide Coding, Review, Documentation, Tests and Debugging of Edge Delivery Services blocks

Previously

My last article was Part 9 -Comprehensive Guide to AEM Edge Delivery Services Development

Beware the article below is huge, it's not called allabout.network for nothing!!

If you want the short version, also with video; switch to here: Short version

Introduction

First a demo

![][image1] AI Powered Development

AI - Not just a buzzword.

Artificial intelligence (AI) is not just a buzzword—it's becoming an indispensable tool for innovation and efficiency in software development. This blog post dives deep into AI-assisted document authoring with Edge Delivery Services (EDS), exploring how we can harness the power of AI to accelerate development, ensure code consistency, reduce manual effort, and even automate documentation and testing processes.

The Challenge

Traditional development processes, not just those for Document Authoring with EDS, while effective, often involve repetitive tasks, time-consuming debugging, and the potential for inconsistencies across different developers or projects. As projects grow in complexity and scale, these challenges can lead to increased development time, higher costs, and potential quality issues.

Goals

I set out to achieve several key objectives:

Accelerate prototyping and development cycles
Ensure consistent code quality across projects
Reduce manual effort in repetitive tasks
Automate documentation generation
Enhance testing processes through AI-assisted content test creation

By leveraging AI in these areas, we aim to not only improve efficiency but also free up developers to focus on higher-level problem-solving and innovation.

The AI-Powered Development Stack

At the core of our AI-powered development approach lies a powerful combination of two key components:

Claude: An advanced AI model developed by Anthropic, which we've custom-trained using AEM.live documentation, developer guides, and existing repositories. Claude serves as our intelligent assistant, capable of understanding complex development concepts and generating code based on our prompts.

Cursor.ai: An innovative AI-powered Integrated Development Environment (IDE) that takes code assistance to the next level. Cursor.ai integrates seamlessly into the development workflow, offering context-aware suggestions and automating repetitive tasks.

These tools form the foundation of our AI-powered development stack, enabling us to push the boundaries of what's possible in web development and document authoring.

Deep Dive: Claude's Capabilities

Claude, as an AI language model, brings several unique capabilities to our development process:

Natural Language Understanding: Claude can interpret complex instructions and queries in natural language, making it easier for developers to communicate their intentions.
Contextual Awareness: Through our custom training, Claude has developed a deep understanding of EDS and AEM concepts, allowing it to generate appropriate code and suggestions.
Code Generation: From simple functions to complex components, Claude can generate code snippets, blocks, multiple blocks and full-on applications based on specified requirements.
Problem-Solving: When faced with development challenges, Claude can offer multiple solution approaches, complete with explanations of their pros and cons.
Documentation Assistance: Claude can generate initial documentation, code descriptions, and even user guides based on the code and context provided.

Cursor.ai: The AI-Enhanced IDE, out of the box

Cursor.ai takes the concept of an Integrated Development Environment to the next level by incorporating AI assistance directly into the coding interface. Key features include:

Intelligent Code Completion: Beyond simple syntax completion, Cursor.ai can suggest entire code blocks or functions based on the current context and project history.
Real-Time Code Analysis: As you type, Cursor.ai analyses your code, offering suggestions for improvements, identifying potential bugs, and even proposing optimizations, it's like copilot on steroids.
Natural Language Queries: Developers can ask questions or request features in natural language, and Cursor.ai will generate appropriate code snippets or provide relevant documentation.
AI-Powered Refactoring: Cursor.ai can suggest and even implement code refactoring to improve readability, performance, and maintainability.
Context-Aware Search: When you need to find specific code or functionality within your project, Cursor.ai's search function understands the context of your query, making it easier to locate relevant code.

Training Claude

Our path to leveraging AI effectively for Edge Delivery Services development was not without its challenges. Initially, Claude struggled to grasp the nuances of EDS, often producing incorrect or irrelevant code. This led us on a fascinating journey of AI training and refinement.

The Three-Part Context Structure

First of all understand the nature and contents of the training files

When working with AI, it's essential to structure your context to provide comprehensive information to the AI. This structure typically consists of Context files, Cursor Rules and The Prompt.

1. Top Level: The Context File

At the highest level, we have the context file. This file is the foundation, providing a broad overview of your project's technical landscape. It typically includes:

The framework you're using

Details about the development environment
Any specific tools, libraries, or techniques that are crucial to the project

This file gives AI a general understanding of the technological ecosystem within which it works.

2. Second Level: .cursorrules (in Cursor, your IDE may vary)

The rules file (.cursorrules file in cursor) bridges the general context and specific tasks. It outlines:

Project-specific requirements
Coding standards and best practices
Any constraints or guidelines that need to be followed

This file helps ensure the AI's output aligns with your project's specific needs and standards.

3. Bottom Level: Prompt for the AI

At the most granular level, we have the prompt sent to the AI. This is where you specify:

The exact task you want the AI to perform
Any specific details or parameters for the task
Desired output format or style

This prompt is tailored to each coding task, allowing you to leverage the AI's capabilities for various development needs.

Step 1: Website Scraping and Content Extraction

We began by developing a sophisticated tool to scrape websites and extract relevant content. This tool was designed with EDS's Eager-Lazy-Delayed loading mechanism in mind, allowing for a three-second delay to ensure the page settled before extracting the rendered content from the DOM.

Technical Deep Dive: The Scraping Tool

The scraping tool was built using NodeJs, and puppeteer.
Key features of the tool include:

Intelligent Waiting: The tool implements a smart waiting mechanism that accounts for EDS's loading stages, ensuring all dynamic content is fully rendered before extraction.
Caching System: To minimise server load and improve efficiency, we implemented a file system-based caching system. This allows us to store and quickly retrieve previously scraped content.
Content Amalgamation: The tool doesn't just scrape individual pages; it intelligently combines content from multiple related pages into comprehensive, contextual documents. Whilst ignoring navigation, sidebars and a has a block-list to ensure it only accepts the correct URLs
Metadata Extraction: Beyond just content, the tool extracts and preserves important metadata such as page structure, component relationships, and content hierarchy.

This advanced scraping approach allowed us to build a rich, contextual dataset that formed the foundation of Claude's understanding of EDS.

Example of the tool is in https://allabout.network/blogs/ddt/developer-guide-to-document-authoring-with-edge-delivery-services-part-8

Step 2: Integrating AEM-Live Knowledge

Our next step was to feed Claude with information extracted from aem-live.com. This process involved:

Content Curation: We carefully selected the most relevant and up-to-date documentation from AEM-live, ensuring Claude had access to the latest best practices and features.
Structured Learning: The content was organised into a structured curriculum, starting with basic concepts and progressively moving to more advanced topics.
Interactive Training: We developed a series of test cases and scenarios based on AEM-live content, allowing us to assess and refine Claude's understanding through interactive problem-solving sessions. While this significantly improved Claude's understanding of AEM concepts, it revealed gaps in knowledge, particularly around how blocks are triggered in EDS. This realisation led us to our next step.

Step 3: Incorporating Blog Content

To bridge these knowledge gaps, we integrated content from a personal blog about developing for Document Authoring with EDS. This blog contained practical examples and introductory text, analysing both delivered and rendered HTML to explain the inner workings of EDS.

The "Hello World" Epiphany

During this process, we had a new realisation: if the AI struggled to comprehend the blog content, human readers might face similar challenges. This insight led to the creation of a 'Hello World' introduction (Part 0) to aid both AI and human understanding.

This "Hello World" guide broke down the EDS concepts into their most fundamental components, explaining:

The basic structure of an EDS project
How blocks are defined and triggered
The relationship between HTML, CSS, and JavaScript in the EDS context
Step-by-step guide to creating and deploying a simple EDS component

By simplifying these concepts, we not only improved Claude's understanding but also created a valuable resource for newcomers to EDS development.

Step 4: Leveraging the Boilerplate Repository

To further enhance Claude's capabilities, we consolidated and improved JavaScript and CSS from the AEM Boilerplate GitHub repository. We incorporated our own blocks, including comprehensive README.md files, into the project.

Enhancing the Boilerplate

Our enhancements to the boilerplate repository included:

Modular Block Structure: We reorganised the blocks into a more modular structure, making it easier for both AI and human developers to understand and reuse components.
Comprehensive Documentation: Each block was accompanied by detailed documentation explaining its purpose, usage, and customization options.
Performance Optimizations: We implemented and documented best practices for performance, including lazy loading techniques and efficient CSS strategies.
Accessibility Enhancements: We integrated accessibility features into the boilerplate, ensuring that generated components would meet WCAG guidelines by default.

The Result: A "Super Context File"

The culmination of our training efforts was the creation of a "super context file." This file combined information from:

Curated content from AEM-live documentation
Practical examples and explanations from blog content
Enhanced boilerplate repository with modular blocks and comprehensive documentation

The super context file was structured with clear headers and footers, organised into logical sections that covered:

EDS fundamentals and architecture
Component development best practices
Performance optimization techniques
Accessibility guidelines
Common patterns and their implementations
Troubleshooting and debugging strategies

This comprehensive knowledge base significantly improved Claude's understanding of Edge Delivery Services, enabling it to generate more accurate, relevant, and optimised code.

I tested the super context file on claude web interface, the super context file is the Domain Knowledge file telling the AI

Creating the rules file

I created a rules file, the standard operating procedure for EDS Projects, this file explicitly tells cursor/claude the parameters I want to apply to the AI in this project, in particular I focus on

Core EDS Concepts
Block Development Guidelines
File Structure
JavaScript (`blockname.js`)
CSS (`blockname.css`)
Table Structure for Blocks
Example File Guidelines
Demo File Guidelines
Metadata Example
JSON File Structure Guidelines
CSV File Structure
Best Practices for EDS Development
Advanced Features
EDS-Specific Features
Assisting Developers
Creating README.md
README.md Structure Guidelines
Multiple Block Creation Guidelines
Image Resources

This covers the main sections of the rules file, highlighting the key areas of focus for the AI developing with Adobe Edge Delivery Services.

Cursor.ai: Elevating AI-Assisted Development

While our work with Claude marked a significant leap forward, the introduction of Cursor.ai to our development stack took our AI-powered approach to new heights. Cursor.ai integrates AI assistance directly into the development environment, The YouYube video at the top of this blog post showed Claude and Cursor working together , to create, refine and debug an EDS component.

The Modern Developer Workflow: Embracing AI

With the integration of AI tools like Claude and Cursor.ai, the role of developers is evolving. Here's an in-depth look at the modern AI-assisted developer workflow:

Plan: Define the task at hand and outline the approach. This involves understanding the domain knowledge and establishing Standard Operating Procedures (SOPs) for the project.
Prompt: Formulate clear, detailed instructions or queries for the AI. The quality of your prompts directly influences the quality of AI-generated code.
Consult AI: Leverage AI assistance for guidance or code generation. This could involve asking Claude for high-level advice or using Cursor.ai for specific code implementations
Verify: Critically review and validate the AI-generated output. While AI can produce impressive results, human oversight remains crucial for ensuring quality and appropriateness.
Synchronise: Update the project repository on GitHub. This step ensures that all team members have access to the latest AI-assisted developments and Edge Delivery Services can see the repo. You can continue to use branching and local development tools
Document: Push demo or documentation updates. AI can assist in generating initial documentation, human refinement is often necessary for clarity and completeness.
Test: Perform necessary tests to ensure functionality. While AI can generate test content, human judgement is key in determining test coverage and interpreting results.
Iterate: Repeat the process until the task is completed to satisfaction. AI-assisted development often involves multiple rounds of refinement and improvement.

This AI-assisted approach allows for rapid development of complex components, with the AI handling much of the boilerplate code and routine tasks, freeing the developer to focus on the unique challenges of the project.

Crafting Effective Prompts: The Key to AI-Powered Success

AI-assisted development heavily relies on the quality of prompts provided to the AI. Here's a guide to crafting effective prompts, keep in mind that prompts are ‘Programming, but in English’:

Define the Objective: Clearly state the goal of the task or feature you're working on.
Provide Context: Include relevant developer information, prompt version, and any copyright details. This helps the AI understand the broader scope of the project.
Detail Functional Requirements: Specify how content should be processed, displayed, and interacted with. Include any styling requirements.
Specify Technical Aspects: Address performance considerations, accessibility requirements, and responsive design needs.
Include Additional Features: Mention any extra functionalities, such as filtering systems or customization options.
Address Error Handling: Provide instructions for handling missing or invalid data to ensure robust code generation.
Request Examples: Specify requirements for demo content to test the implementation.
Structure Your Prompt: Organise your prompt logically, making it easier for the AI to understand and implement each task.
Consider Performance and Accessibility: Ensure your prompt encourages the AI to generate code that is not only functional but also performant and accessible.
Review and Refine: Before submitting your prompt, review it for clarity and completeness. Refined prompts lead to better AI outputs.

Prompt Engineering: An Emerging Skill

As AI becomes more integral to the development process, the ability to craft effective prompts is emerging as a crucial skill for developers. Good prompt engineering involves:

Understanding AI Capabilities: Knowing what the AI can and cannot do helps in framing requests effectively.
Clear Communication: Using precise language and avoiding ambiguity.
Iterative Refinement: Being prepared to refine prompts based on initial AI outputs.
Balancing Specificity and Flexibility: Providing enough detail to guide the AI while allowing room for creative solutions.
Contextual Awareness: Incorporating relevant project-specific information and constraints into the prompt.

Example: Crafting a Prompt for an EDS Component

Let's walk through the process of crafting an effective prompt for developing an EDS component:

Initial Prompt:

"Create an EDS component for a product carousel."

-- this is too simple.

Refined Prompt:

"Develop an Edge Delivery Services component for a product carousel with the following specifications, Responsive design supporting desktop, tablet, and mobile views
Lazy loading of product images for improved performance
Touch-enabled swipe functionality for mobile devices
Accessibility features including keyboard navigation and ARIA labels
Integration with a sample JSON data source for product information
Customizable styling options for easy theming 
Please provide the HTML structure, CSS, and JavaScript code, along with comments explaining key functionality. Also, create documentation in README.md covering usage instructions and customization options. Provide showcase markdown file in demo.md"

This refined prompt provides clear objectives, technical requirements, and expectations for the output, giving the AI a comprehensive framework to generate the component.

Overcoming Challenges in AI-Powered Development

While AI-powered development offers numerous benefits, it also comes with its own set of challenges. Here are some common issues we've encountered and strategies to address them:

1. Over-Reliance on AI

Challenge: Developers may become too dependent on AI suggestions, potentially stifling creativity or leading to suboptimal solutions.

Solution:

Encourage critical thinking and manual code review.
Use AI as a starting point, not the final product.
Regularly challenge AI-generated solutions and explore alternatives.

2. Handling Edge Cases

Challenge: AI models may struggle with unusual or project-specific edge cases not covered in their training data.

Solution:

Maintain a repository of edge cases and their solutions.
Use these edge cases to further train or fine-tune the AI models.
Develop a process for human intervention in complex scenarios.

3. Maintaining Code Quality

Challenge: Ensuring that AI-generated code meets the same quality standards as manually written code.

Solution:

Implement rigorous code review processes.
Use automated testing and quality assurance tools.
Establish clear coding standards and ensure the AI is trained on these standards.

4. Keeping Up with EDS Updates

Challenge: As EDS evolves, ensuring that the AI's knowledge remains current.

Solution

Regularly update the AI's training data with the latest EDS documentation and best practices.
Implement a system for flagging outdated AI suggestions.
Encourage developers to stay informed about EDS updates and cross-reference AI suggestions with current documentation.

5. Balancing AI Assistance with Human Expertise

Challenge: Finding the right balance between leveraging AI capabilities and applying human expertise and creativity.

Solution:

Clearly define roles where AI excels (e.g., boilerplate code, documentation) and where human input is crucial (e.g., architectural decisions, user experience design).
Encourage developers to use AI as a collaborative tool rather than a replacement for their skills.
Regularly assess the impact of AI on development processes and adjust usage as needed.

Measuring the Impact of AI-Powered Development

Here's a subtle sales pitch rewrite of that text:

Imagine a development process that's not just efficient, but revolutionary. By integrating AI, we're not just keeping up with the times - we're setting the pace. The real magic happens once the AI is trained and seamlessly woven into your workflow.

But here's the key: this isn't a plug-and-play solution. It requires a deep dive into your unique processes, rules, and domains. We take the time to truly understand your ecosystem, including your existing repositories. This meticulous approach ensures that when the AI is deployed, it doesn't just work - it excels.

The result? A tailored AI solution that doesn't just meet your needs, but anticipates them. It's not about replacing your team - it's about amplifying their capabilities. And the best part? The benefits compound over time, leading to unprecedented levels of productivity and innovation.

Here are some key metrics we've been tracking:

1. Development Speed

Metric: Time to complete standard tasks (e.g., creating a new component, implementing a feature)

Result: On average, we've seen a 70% reduction in development time for common tasks.

2. Code Quality

Metric: Number of bugs found in code review and testing phases

Result: 80% reduction in bugs found during review, indicating improved initial code quality.

3. Developer Productivity

Metric: Number of features or components delivered per sprint

Result: 50% increase in output per developer.

4. Learning Curve for New Developers

Metric: Time for new team members to become productive in EDS development

Result: 50% reduction in onboarding time for new developers.

5. Documentation Quality

Metric: Completeness and accuracy of auto-generated documentation

Result: 90% of AI-generated documentation requiring only minor human edits.

These metrics demonstrate the significant positive impact AI has had on our development process. However, it's important to note that these results are achieved through a careful balance of AI assistance and human expertise.

Looking Ahead: The Future of AI-Powered Development

As we continue to refine our AI-powered development techniques, we're setting our sights on broader horizons. Our future directions include:

Expanding to AEMaaCS Crosswalk: Adapting our AI-assisted approach to enhance the development process for AEMaaCS Crosswalk, streamlining the creation of cross-platform experiences.
Universal Editor AI Integration: Exploring ways to leverage AI in the Universal Editor, potentially revolutionising content creation and management workflows.
OSGI Environment Optimization: Extending AI assistance to the OSGI environment, aiming to simplify complex configurations and enhance modularity.
Workflow and Translation Automation: Harnessing AI to automate workflows and translation processes, significantly reducing manual effort in multilingual and multi-site operations.
Edge Delivery Services Enhancement: Optimising the content delivery pipeline within EDS using AI-driven insights and automation.
Partnerships and Integrations: Exploring potential partnerships, such as with Kajoo.ai, to further enhance our AI-powered development capabilities. Kajoo.ai's ability to convert Figma designs to modernised CMS components could be a game-changer for AEM development.

Emerging Trends to Watch

As we look to the future, several emerging trends in AI and development are likely to shape our approach:

Generative AI for Design: AI models capable of generating UI/UX designs based on requirements, potentially streamlining the design-to-development pipeline.
AI-Driven Performance Optimization: Advanced AI systems that can analyse entire projects and suggest architectural improvements for better performance.
Natural Language Programming: The potential for developers to describe complex functionality in natural language and have AI translate it into optimised code.
AI-Assisted Code Refactoring: Intelligent systems that can suggest and implement large-scale refactoring to improve code maintainability and performance.
Predictive Development: AI models that can anticipate future development needs based on project trends and proactively suggest new features or optimizations.

Ethical Considerations in AI-Powered Development

As we embrace AI in our development processes, we need to address the ethical implications:

Transparency: Ensuring that the use of AI in development is transparent to all stakeholders, including clients and end-users.

Bias Mitigation: Regularly auditing AI-generated code and suggestions for potential biases and working to mitigate them.
Job Impact: Addressing concerns about AI's impact on development jobs by focusing on how AI augments rather than replaces human developers.
Data Privacy: Ensuring that the training and use of AI models comply with data privacy regulations and best practices.
Accountability: Establishing clear lines of responsibility for AI-assisted development outcomes.

Conclusion: Embracing the AI-Powered Future of Web Development

As we stand at the front of this AI revolution in web development, it's clear that our industry is changing rapidly. AI-powered development is not just a trend; it's becoming an essential approach to meeting the ever-increasing demands for faster, more efficient, and more innovative web solutions.

Remember that AI is a tool to augment human creativity and expertise, not replace it. The role of developers is evolving, but their importance is not diminishing. In fact, the ability to effectively leverage AI tools, craft precise prompts, and critically evaluate AI-generated outputs is becoming a vital skill set for modern developers, we must strike a balance between embracing the efficiency and capabilities of AI and maintaining the human touch that brings empathy, creativity, and ethical considerations to our work.

The future of web development is undoubtedly AI-powered, but it will be shaped by those who can masterfully blend artificial intelligence with human insight.

By continually refining our approaches, staying curious, and being open to new possibilities, we can harness the full potential of AI-powered development to create web experiences that are not only technologically advanced but also deeply resonant with human needs and experiences.

The journey into AI-powered development is just beginning, and the possibilities are limitless. Are you ready to be part of this exciting future?

For more information, resources, and updates on AI-powered development, visit https://allabout.network/blogs/ddt/

<hr>

Interested in AI consultancy, tailor-made AI training files, mentoring, or audits? Contact us to explore how we can help you leverage AI in your development processes.

Thank you for joining me in this exploration of AI-assisted block creation for Adobe's Edge Delivery Services. Stay tuned for more insights and demonstrations in future posts!

About the Author: Tom Cranstoun is a seasoned AEM expert with over 12 years of experience, including roles as a Global Architecture Director and solution architect for major projects like Nissan and Renault's Helios initiative. Now running his own consultancy, Tom continues to work with top brands and agencies, bringing his expertise in AEM and emerging technologies to the forefront of digital experiences.

Sample Training documents are available at my original experiment:

https://allabout.network/blogs/ddt/ai-generated-code

Ready to see what AI can do for your development process? Let's explore the possibilities together. Get in touch: tom@digitaldomaintechnologies.com

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