ABB UI Builder

AI-powered Visual UI Builder for Angular & React frameworks. Powered by Digital Innovation Team.

Features

Visual UI Builder

• Selectable Components: Click ABB UI components from the palette to add them onto your canvas
• Real-time Preview: See your UI come to life in the built-in preview pane
• Properties Editor: Configure component properties with a visual editor
• Component Tree: Navigate and reorganize your component hierarchy

AI-Powered Features

• Natural Language Customization: Describe changes in plain English (e.g., "Make this button red with a warning icon")
• AI UI Generation: Describe the UI you want and let AI build it for you
• OpenAI-Compatible: Works with OpenAI, Azure OpenAI, Anthropic, Ollama, and custom endpoints

Project Scaffolding

• Framework Selection: Choose between Angular (17/18/19) or React
• Starter Templates:
  • Blank - Empty project with ABB UI components configured
  • Dashboard - Header, sidebar, cards layout
  • Data Table - Grid with filtering and pagination
  • Form - Form with validation
  • Admin Panel - Complete admin interface

Code Generation

• Framework-specific Code: Generates proper React/TSX or Angular components
• Best Practices: Follows ABB coding standards and accessibility guidelines
• Export Options: Save to file or copy to clipboard

Installation

Prerequisites

• VS Code 1.85.0 or higher
• Node.js 18+
• npm or pnpm

Install Extension

1. Open VS Code
2. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac)
3. Search for "ABB UI UI Builder"
4. Click Install

Configure AI (Optional but Recommended)

1. Open VS Code Settings (Ctrl+,)
2. Search for "ABB UI UI Builder"
3. Set your AI provider and API key:

   {
     "ABB UI-ui-builder.ai.provider": "openai",
     "ABB UI-ui-builder.ai.apiKey": "your-api-key",
     "ABB UI-ui-builder.ai.model": "gpt-4o"
   }
   

Getting Started

Ctrl + Shift - Specific Div Element Alt + Click - Normal click click - Specific element detailed view

License

Proprietary - ABB Ltd. All rights reserved. ABB Internal Use Only.

Support

• Internal: ABB Service Desk