Cloudflare Images provides a streamlined way to host and serve images efficiently, but I found its content management page lacking a crucial element: visual previews. Instead of simply listing image names, I wanted a more intuitive interface where I could quickly see what each image looked like.
The Idea: A Simple, Visual Web App
Rather than waiting for Cloudflare to enhance its interface, I decided to build my own solution. The plan was simple:
- Leverage the Cloudflare Images API to create a better UI.
- Ensure the tool provided quick image previews and essential management features.
- Experiment with AI-driven development by having Cursor AI write all the code while I took on the role of Product Designer, Tester, and Technical Lead.
AI-Powered Development with Cursor
With this approach, I wanted to test how well AI could handle coding while I focused on high-level design and functionality. The result? In just about 30 minutes, we had a functional web application. We then refined it and shipped it as an open-source project here: https://github.com/adkinn/cf-img-admin.
Here are some interesting moments from development, showcasing how Cursor AI tackled different challenges.
Prompt 1: Adding a Delete Button
"Add a delete button to the Image Details page. When clicked, a confirmation dialog should pop up. After confirmation:
1. The image should be deleted using the API: Cloudflare API - Images Delete
2. Navigate back to the gallery.
3. Refresh the image cache."
Multi-step prompts provided clarity, and Cursor was able to look up Cloudflare’s API documentation to generate TypeScript interfaces and response handling for both success and errors. The resulting implementation worked without any manual adjustment.
Prompt 2: Fixing Variant ID Mismatch
"There is a mismatch between the strings stored as variants in the image and the IDs used by the List Variants method. The strings use a full URL (
https://imagedelivery.net/.../public), but the IDs only use the last segment (public)."
Initially, the variant content wasn't displaying correctly. While Cursor AI correctly implemented API calls, it didn't recognize the mismatch in ID formats. It couldn't detemrine the issue directly so it added a few console.log methods and asked me to review the output 🙂 It was pretty quick for me to identify the ID mismatch looking at the API Results. Once I shared this insight, it quickly updated the logic to match the correct IDs.
Prompt 3: Preparing for Open Source Release
"I'm preparing to share this code as open source. Do you have a checklist of tasks I should do?"
Cursor AI generated a decent draft for the README and Contribution Guide. It was impressive to see it understand not just coding, but also related concepts like open-source contributions.
Final Thoughts
This project was a fun experiment in AI-assisted development. The application was low-risk as its intended to be shared just for internal use and the funtioncality is pretty straight forward. Cursor AI proved to be a highly capable coding assistant, handling structured requests efficiently while still needing some human oversight for nuanced issues. The result is a simple but effective Cloudflare Images Manager that is now available for the community to use and improve upon.
If you're looking for a way to manage Cloudflare Images visually, check out the project: https://github.com/adkinn/cf-img-admin.