A "Full-Stack" News Reader Widget

This time, to push it further, we asked the Widget Genie to build a complete news aggregator: a backend endpoint acting as a proxy for an RSS feed (complete with a caching system) and a reactive frontend widget to display the news on the dashboard.

Act 1: The Backend (Infrastructure and API)

The first rule of building a good widget that fetches external data is to avoid overloading the source on every page load. We needed a backend to download the XML, transform it into JSON, and keep it cached.

Instead of writing lines of C# code to parse System.Xml, we simply opened the Widget Genie chat and sent this prompt:

"Create an automation program that exposes an API EndPoint (Custom.News/Adnkronos/Get) returning the latest news fetched from the Adnkronos RSS feed ...

The Result: In a matter of seconds, the Widget Genie generated the program code, compiled it without issues, and set it to run in the background.

Act 2: The Frontend (Visual Magic)

With the API ready to serve clean JSON, it was time to create the interface. Without changing windows, we turned to the Widget Genie with a prompt of pure "intent":

"Perfect. Now create a UI widget to consume and display the data from the program 1019. 1. The view should display the news elegantly..."

The Magic of Deep Knowledge: Notice how we didn't have to explain to the Widget Genie what the API was called or what shape the JSON had. By simply providing the reference to the newly created program 1019, the AI read the system context. It autonomously wrote the JavaScript controller using the native method this.apiCall('Custom.News/Adnkronos/Get'), mapped the state data, and generated the HTML and CSS.

The "Pair Coding" Experience (Handling Mistakes)

When the new reader widget was created, no data appeared at the first try. Instead of panicking, we investigated by looking at the generated controller's code.

We quickly spotted the issue: the this.apiCall(...) method in HomeGenie returns a {code, response} object, while the AI assumed it would return the data array directly at the root. (Note: This specific "mistake" will be fixed in the Widget Genie system prompt instructions of the v2.0.16 release of HG!)

The Learning Opportunity: We could have simply iterated on the chat and asked the AI to try to figure it out and fix it (and it would have probably done it perfectly), but we chose to fix it manually in the editor. This workflow makes developing feel like a true pair-coding job: the AI does the heavy lifting, and you act as the reviewer.

Tuning Up

With the feed fixed, there were still a couple of visual issues regarding the navigation controls and the height of the image, which prevented the text from fully showing.

Once again, a simple conversational prompt to the Widget Genie ("Can you reduce the height of the picture because the title is not showing?") resulted in an immediate, targeted CSS patch applied directly to the editor.

Vibe Coding in Action

This example demonstrates a radical paradigm shift, especially in software development for the Smart Home.
There is no more need for:

• Any local development environment setup (and no more Node.js, Webpack, or complex configurations).
• Server Restarting.
• Manual copy-pasting between files.

The generated code is Production-Grade, dynamically handles loading states, and integrates perfectly into the aesthetics of the HomeGenie dashboard.

Extend and Explore

Need to read finance news instead of general headlines? Or maybe you want Widget Genie to read the headlines aloud when you walk into the kitchen in the morning?

With HomeGenie's solid microservices architecture and AI agent orchestration, the only limit is your imagination. Your home automation hub has just become the most versatile development platform you've ever owned.

📥 Download Resources

• Adnkronos News Service ⚙️
  (Import into Program Editor)
• News Reader Widget 📦
  (Import into Widget Editor)
• Chat History 💬
  (Import into Widget Genie to continue the development)