Samenvatting

The graduation subject focuses on research and development of a Page Builder tool with an AI assistant. The core concept is to allow technical and non-technical users to create and edit Spectrum application pages by combining a visual interface with an AI assistant.

Before describing the tool itself, it is important to understand what a page definition (PD) is. In Spectrum, every page is described as a large JSON configuration file called a page definition. This file specifies which UI components are shown on the page, in what order, with what properties etc. These files are then processed by the Spectrum Rendering Engine that ‘injects’ these components into predefined DOM locations with their properties (data, styling, and more). The Rendering Engine is a custom Angular library developed by Syntess.

Currently, developers create and maintain these files manually by editing them in Azure. The Page Builder aims to make this process easier and faster.

The tool supports two workflows for building / editing pages. The first is a drag-and-drop interface, where users select predefined Angular components from a StoryBook library and arrange them. The second is an 1 AI-assisted workflow, where a bounded LLM interprets a user’s prompt (e.g., add a new button in the header) and proposes edits to the current PD. The user always remains in full control, as every AI-generated proposal must be reviewed and approved before it is applied and re-rendered using the Rendering Engine. Once the page is finalized through either workflow, the PD is exported as JSON file and stored in Azure.