AI-Powered Development

An introspection on a recent presentation

A Developer's Guide to AI-Assisted Block Creation for Adobe's Edge Delivery Services

Introduction

Welcome to my blog series, "A Developer's Guide to Developing with Document Authoring for Adobe's Edge Delivery Service." I'm Tom Cranstoun, and this post is aimed at Developers, Technical Content Authors, and PMs. Today, we'll explore how to use AI tools like Cursor and Claude to create blocks for Edge Delivery Services (formerly known as Franklin or Helix).

The Importance of Prompts in AI Work

Before we dive into the demonstration, I want to emphasize the crucial role of prompts in AI work. Think of prompts as programs written in English. Creating, saving, and managing them within your GitHub repository is essential for effective AI-assisted development.

Demonstration: Creating an Image Cycler Block

Let's walk through the process of using AI to create an image cycler (carousel) block for Edge Delivery Services.

Step 1: Preparing the Prompt

I start by using a pre-written prompt saved in my prompts folder. This prompt contains detailed instructions for creating the image cycler block.

Step 2: Using Cursor AI

1. Summon Cursor AI using the command shortcut.
2. Load the prompt file (in this case, image_cycler.md).
3. Execute the prompt, which instructs Cursor to create the necessary files (JavaScript, CSS, example, demo, and README).

Step 3: Reviewing and Accepting the Output

Cursor AI generates the files based on the prompt. Review the output and accept the changes, which will be written to your local repository.

Step 4: Pushing to GitHub

Commit the changes and push them to your GitHub repository.

Step 5: Examining the Generated Artifacts

The AI has created several files:

• image_cycler.js: The main JavaScript file for the block
• example.md: A markdown file with example usage
• demo.md: A fully featured demo page
• README.md: Documentation for developers and content authors
• image_cycler.css: Styles for the image cycler

Step 6: Implementing in Edge Delivery Services

1. Copy the content from demo.md.
2. Paste it into a new Google Doc (which serves as a Franklin document).
3. The sidekick in Edge Delivery Services will recognize the markdown and format it appropriately.

Step 7: Previewing the Result

Preview the page to see the image cycler in action. It should display a set of randomly chosen images that rotate every 5 seconds, with hover and keyboard controls as specified.

Iterating and Improving with AI

We can continue to improve our block using AI:

1. Add navigation arrows to the image cycler.
2. Adjust the positioning of the arrows.
3. Change the background color.

Each of these improvements can be accomplished by giving new instructions to the AI, which will update the necessary files.

The Future of Development with AI

As we embrace AI in software development, it's important to understand that while coding as we know it may change, the essence of development remains. Here's how the role of developers will evolve:

1. Architecting solutions by listening to users and generating requirements
2. Designing frameworks and rules for AI
3. Crafting precise prompts
4. Reviewing AI-generated code
5. Conducting thorough testing
6. Iterating on the presentation
7. Documenting, presenting, releasing, and maintaining

The modern developer workflow becomes: plan, prompt, consult, verify, synchronize, document, test, and iterate.

Tips for Effective AI Prompts

1. Be specific and detailed in your prompts.
2. Cover all essential aspects: initialization, user interface, functionality, control mechanisms, etc.
3. Use sections to organize your prompts.
4. Consider performance, accessibility, error handling, and responsiveness.
5. Request documentation and examples from the AI.
6. Store your prompts in your repository for future use and iteration.

Conclusion

AI-assisted development, when used effectively, can significantly boost productivity. By mastering the art of prompt crafting and understanding the new workflow, developers can harness the power of AI to create more efficient, robust, and user-friendly solutions.

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 Cranston 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 Helas 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.

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.