A2UI support for EOxElements (web components for geospatial UIs)

[silvester-pari]

What are EOxElements?

EOxElements are a set of reusable, modular and highly configurable components for building geospatial applications, built by EOX. The elements' goal is to reduce code duplication during development, and offer ready-made solutions for quick bootstrapping and increased long-term stabilty. They have some years of production use history and are used within implementations for the European Space Agency (ESA), public agencies, but also commercial dashboards & other interfaces.

EOxElements and generative UI

After introducing a MCP server last year, the next step was now to add support for generative UI and after some evaluation we opted for A2UI as the syntax. It works quite well since the EOxElements are also written as web components with Lit.
The first use cases are dynamic creations of dashboards and storytelling.

Architecture

We added a generic wrapper around all the Elements called <eox-a2ui-element> which extends a Lit element and simply passes through all attributes & properties into the wrapped EOxElement and also bubbles up each event from the wrapped EOxElement. This allows it to be used in a Lit-based A2UI renderer.

Additionally, we added a convenience element called <eox-a2ui-wrapper> which in principle is a mini-renderer, so one can simply load this from CDN and pass an A2UI JSON stream to this element, making it possible to render the stream inside its surface. No need to install from a package.json etc.

It currently supports v0.9 of the spec and includes both the basic catalog as well as our custom EOxElements catalog.

Additionally, we added the concept of "virtual child components", as we have elements e.g. <eox-storytelling> that have a sophisticated markdown syntax that needs to be passed as attribute/prop in order to render the story sections, story tour, tour steps etc.; with this "virtual components" we are able to offer child components in the custom catalog that actually don't exist (yet) as dedicated web components; instead the JSON is "transformed" into the required property on the fly, allowing the wrapper to close the gap between the JSON and the actual required data format, e.g. markdown with special syntax - see merged PR.

For the source code see a2ui folder of the repo.

Demo Videos

This video uses an actual agentic backend streaming A2UI-conform JSON (powered by A2UI — Agent-to-UI for ADK) based on user prompts. In the videos you can see how the story is streamed and built in the EOxStorytelling component, and when the user makes adjustments/follow-ups, the changes are streamed without re-rendering the entire eox-storytelling element but just changing the requested parts.

Screencast_Storytelling_01.mp4

This video shows a simulation of a JSON stream to build a geospatial dashboard. Work for this is ongoing and we will soon be able to present something connected to a live backend.

Screencast_Storytelling_02.mp4

https://eox-a.github.io/EOxElements/?path=/story/demo--a-2-ui-showcase

What's planned?

We're aiming to refine this approach and offer a nice set of functionalities in order to generate versatile and customized geospatial UIs on the fly. Planned activities will be easy-to-use story creation tools, custom-tailored geospatial data analysis dashboards, onboarding flows for geospatial (meta)data, and more. If you find this interesting, we would be happy about any feedback!