Framework-for-generating-UI

Overview

An experimental framework that leverages Generative AI to automatically generate Design System-coherent, personalized user interfaces for an enterprise cybersecurity platform. The system creates customized dashboards tailored to user roles, organizational contexts, and real-time security situations while maintaining visual consistency and design standards.

Key Features

• AI-Powered Personalization: Automatically generates dashboards based on user role, preferences, and behavior patterns
• Design System Compliance: Ensures all generated interfaces adhere to predefined design guidelines
• Real-Time Adaptation: Dynamically adjusts UI based on current security posture and incident data
• Multi-Framework Support: Available implementations for both Vuetify and Quasar frameworks
• Fallback Mechanisms: Seamlessly switches to static dashboards if AI services are unavailable
• User Feedback Loop: Collects user interactions to continuously improve dashboard generation

---

Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• AWS Bedrock access credentials (for AI generation features)

---

Installation & Setup

All commands should be executed from the src\root directory.

Option 1: Vuetify Implementation

1. Install Dependencies

cd apps\Renderer_beta
npm install

2. Run Development Server

npm run dev

The application will be available at: http://localhost:5173/

---

Option 2: Quasar Implementation

1. Install Dependencies

cd demo\'Toolbox demo quasar'\'toolbox app'\
npm install

2. Run Development Server

npm run dev

The application will be available at: http://localhost:9000/#/

---

AWS Bedrock Configuration

To enable AI-powered layout generation, you must configure the AWS Bedrock client.

1. Create Environment File

Create a .env file in the src\root\bedrock-client\ directory with the proper variables:

AWS_ACCESS_KEY_ID=[YOUR_AWS_ACCESS_KEY_ID]
AWS_SECRET_ACCESS_KEY=[YOUR_AWS_SECRET_ACCESS_KEY]
AWS_REGION=[YOUR_AWS_REGION]
KNOWLEDGE_BASE_ID=[YOUR_KNOWLEDGE_BASE_ID]
DATA_SOURCE_ID=[YOUR_DATA_SOURCE_ID]
MODEL_ID=[YOUR_MODEL_ID]
BUCKET_ID=[YOUR_BUCKET_ID]

CRITICAL SECURITY NOTICE: Currently used credentials are for development/demo purposes only. DO NOT share or commit these credentials to version control. In production environments, use proper secrets management solutions.

2. Start the Orchestrator Server

In a separate terminal window:

cd src\root\services\orchestrator
node server.mjs

The orchestrator server must be running for AI layout generation to function.

---

Demo Features

Quasar Implementation

Interactive Dashboard Configuration

• Use the configuration form to select desired dashboard components
• Customize widget placement and data sources
• Real-time preview of generated layouts

AI-Powered Generation from User Context

Load user behavior and description files to automatically generate personalized dashboards:

Sample files location:

• User Behavior: src/root/demo/Toolbox demo quasar/toolbox app/src/userBehavior/userBehavior1.json
• User Description: src/root/demo/Toolbox demo quasar/toolbox app/src/userDescriptions/userDescription.json

The system analyzes user patterns (e.g., economics student profile) and generates appropriate dashboard layouts.

---

Vuetify Implementation

Standard File Upload

Upload user behavior JSON files to generate personalized dashboards.

Dynamic Chart Generation Demo

To demonstrate and test dynamic chart type selection and adaptation:

Step 1: Update LLM Plan

# Copy demo chart configuration
cp public/DemoChartsPlan.json public/llm-plan.json

Step 2: Update Widget Registry

# Copy chart demo registry
cp src/core/widget-registryChartDemo.ts src/core/widget-registry.ts

This configuration showcases the system's ability to:

• Dynamically select appropriate chart types
• Adapt visualizations based on data characteristics
• Maintain design system consistency across different chart types

---

Architecture Overview

src/
├── apps/
│   └── Renderer_beta/          # Vuetify implementation
├── demo/
│   └── Toolbox demo quasar/    # Quasar implementation
├── services/
│   └── orchestrator/           # AI orchestration server
└── bedrock-client/             # AWS Bedrock integration

Core Components

• Renderer: Front-end application that displays generated dashboards
• Orchestrator: Backend service coordinating AI requests and dashboard generation
• Bedrock Client: Integration layer with AWS AI services
• Widget Registry: Catalog of available UI components and their configurations

---

User Guide

Switching Between Dynamic and Static Dashboards

Users can generate AI-generated dashboard view:

1. Locate the dashboard generating button in the interface
2. Select "DGenerate" for AI-powered personalization

Understanding Ignored Incidents

The system respects previously ignored security incidents:

• Ignored incidents are automatically excluded from AI-generated dashboards
• Users maintain clean, focused views on relevant security events
• Ignore preferences persist across sessions
• groups the incidents

---

Contributing and Forking

Project Status

This project was completed as an academic-industry collaboration (2025-2026). The original development team is no longer actively maintaining this repository.

This is now a community-maintained project. We welcome and encourage:

• Bug reports and fixes
• Feature suggestions and implementations
• Documentation improvements
• Forks for specialized use cases
• New maintainers

How to Contribute

Please read our Contributing Guidelines for details on:

• Reporting issues
• Submitting pull requests
• Code standards and testing requirements
• Development setup

Forking This Project

You are welcome to fork this project for your own use. If you fork:

1. Maintain Attribution - Keep the MIT license and credit original authors
2. Share Improvements - Consider contributing valuable changes back
3. Rename if Heavily Modified - Avoid confusion with the original project

See Contributing Guidelines for detailed forking guidelines.

Looking for Maintainers

We are looking for active maintainers. If you are interested in helping maintain this project, please open an issue expressing your interest and outlining your vision for the project.

Community Support

Since the original team has moved on, community support is crucial:

• Help answer questions in Issues
• Review pull requests
• Share your knowledge and experiences
• Consider becoming a maintainer

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

Academic Attribution

Developed by students at Poznań University of Technology as a part of a bachelor project (2025-2026).

Bachelor Students:

• Agnieszka Maleszka
• Paweł Mazurkiewicz
• Kacper Paluch
• Maciej Szukało

---

Acknowledgments

• Developed within the Software Development Studio course, part of the Master's degree program at Poznań University of Technology.

  Master Students:

  • Szymon Haj
  • Katarzyna Piechowiak
  • Marcin Stecewicz

• Academic supervision by Sylwia Kopczyńska, PhD

• Conducted in collaboration with an external industry project partner

---

Future Roadmap

• Enhanced AI model training capabilities
• Expanded design system support
• Multi-language interface support
• Advanced analytics and reporting
• Community contribution guidelines for open-source release