I wanted to challenge myself to see if I could build a chat-style “UI editor” into Magento’s admin panel so that I could have fun making content again (and hopefully make the content-editing experience a little better for other people too). It turns out that this challenge became a little bigger (both in difficulty and scope) than I initially predicted. It was a fun challenge none-the-less.

I had a few goals when building the editor:

- Generate a schema definition that could be used to render frontend apps.

- Allow users to ONLY edit text content of the rendered app (I wanted to be stupidly simple to use).

- Allow jumping to different versions of the schema at different points in time in the chat history.

- Allow users to generate UI using their existing Angular components. I wanted to enable end-users to use existing assets. I felt like things like Lovable are too "open-ended" to be as useful.

Here's a demo of what I built: https://www.youtube.com/watch?v=LcudrwsT_gk Editor Code: https://github.com/graycoreio/daffodil/tree/develop/libs/con...

I open sourced all of the code that I wrote (MIT License) and it comes in two pieces:

## Angular Editor / Renderer

A pair of Angular components (and associated types/supporting infrastructure) called the `DaffAiEditorComponent` and `DaffContentSchemaRenderer` that allow you to drop in page schema and edit/visualize it. It can take a schema and produce a full page. This can be used as the foundation for building AI-driven content schema editors for any platform. Currently, the editor can only be imported if you build the @daffodil/content package locally (I’m working on releasing this shortly!).

You can find the editor code here: https://github.com/graycoreio/daffodil/tree/develop/libs/con...

You can find the frontend render here: https://github.com/graycoreio/daffodil/tree/develop/libs/con...

## Magento CMS Plugin

A Magento/MageOS module that embeds the editor in the CMS, calls OpenAI for prompt-based schema generation, and exposes the resulting schema via GraphQL so Daffodil storefronts (or any headless frontend) can render it.

If you have a Magento store, you can install it with:

``` composer require graycore/magento2-cms-ai-builder ```

Repo: https://github.com/graycoreio/daffodil/tree/develop/plugins/...

I think the thing I’m most proud of is the way that I came to the conclusion of patch generation. My early attempts at driving the model to target a full schema on each prompt became woefully slow within just a few conversation loops. Reducing the output tokens here was a big win for UX and latency. In addition to performance, the model would subtly change schema in various parts of the page at random which is less than stellar.

There’s still a ton to do (I need to document all of the things and I need to make examples of rendering frontend apps with the admin content), but this was a huge milestone for me.

I plan to add streaming support to the Magento plugin along with the editor. I also want to spend some time making the extension points of "adding your own components" much simpler to do, it's a bit clunky today.