Getting Started

This comprehensive guide will help you get up and running quickly with our AI-powered UI modernization platform.

Prerequisites

Before getting started, ensure you have the following installed:

Node.js & npm

Node.js 18.0 or higher
npm 8.0 or higher
Check: node --version && npm --version

Git (Optional)

For version control integration
Automatic repository initialization
Check: git --version

API Keys

At least one LLM provider API key
OpenAI, Anthropic, AWS, or Google Cloud
See Troubleshooting for help with API issues

Quick Installation

Step 1: Configure AWS CodeArtifact Access

bash

aws codeartifact login --tool npm --repository hai-framework --domain hai-framework --domain-owner 442897025632 --region us-east-1 --namespace "@hai"

Note: Ensure you have the correct AWS profile with appropriate permissions to access the HAI CodeArtifact repository.

Step 2: Install the Package

bash

# Install
npm install @hai/rapidui@latest

# Or use with npx (recommended)
npx @hai/rapidui --help

Step 3: Initialize a New Project

Run the initialization command:

bash

npx @hai/rapidui init

You'll see the HAI RapidUI ASCII art logo and an interactive initialization process:

██╗  ██╗ █████╗ ██╗
██║  ██║██╔══██╗██║
███████║███████║██║
██╔══██║██╔══██║██║
██║  ██║██║  ██║██║
╚═╝  ╚═╝╚═╝  ╚═╝╚═╝

██████╗  █████╗ ██████╗ ██╗██████╗   ██╗   ██╗██╗
██╔══██╗██╔══██╗██╔══██╗██║██╔══██╗  ██║   ██║██║
██████╔╝███████║██████╔╝██║██║  ██║  ██║   ██║██║
██╔══██╗██╔══██║██╔═══╝ ██║██║  ██║  ██║   ██║██║
██║  ██║██║  ██║██║     ██║██████╔╝  ╚██████╔╝██║
╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝╚═════╝    ╚═════╝ ╚═╝

🚀 Initializing HAI RapidUI project...

📁 Copying input content to current directory...
📂 Source: /path/to/node_modules/@hai/rapidui/input
📂 Destination: /your/project/path/input
✅ Input content copied successfully!

The initialization process will guide you through several interactive prompts:

Template Selection:

? Select a template or start with an empty project: (Use arrow keys)
❯ Empty Project 
  React Template 
  Angular Template
  Vue Template
  Next.js Template

Boilerplate Code:

? Do you want to create boilerplate code for the project? Yes (Create boilerplate code for the project)

✅ Template 'React Template' copied to output/your/project/path

UI Framework Selection:

? Select your UI/Styling Framework: (Use arrow keys)
❯ None (Vanilla CSS)
  Tailwind CSS
  Material UI (MUI)
  Angular Material
  Vuetify

UI Generation Mode:

? Choose UI Generation Mode: 
❯ Modernize UI (Create innovative, modern interface) 
  Replicate UI (Create exact copy of legacy interface)

LLM Provider Selection:

? Select LLM Provider: (Use arrow keys)
❯ openai (OPENAI)
  anthropic (ANTHROPIC)
  bedrockanthropic (BEDROCK_ANTHROPIC)
  vertexai (VERTEX_AI)

After completing these steps, you'll see:

🤖 Selected provider: bedrockanthropic
📝 Custom instructions created at: /your/project/path/.hai-rapidui/custom_instruction.md
Git repository already exists in /your/project/path

🎉 Project initialized successfully!

💡 Next steps:
   1. Review the copied input files in input/
   2. Run "@hai/rapidui start" to begin modernization

This command:

Creates the input folder structure in your current directory
Copies the .env.example file for environment configuration
Creates a custom instructions file at .hai-rapidui/custom_instruction.md
Repository is initialized with Git

Replace Sample Wireframes and Screen Interactions

After initialization, you should replace both the sample wireframes in the input/wireframes/ directory and the screen interaction files in the input/screen_interactions/ directory with your own files:

Important Note

When replacing the sample wireframes and screen interaction files with your own, the name of the wireframe and the screen interaction should match respectively. For example, if you have a wireframe named Dashboard.png, you should have a corresponding screen interaction file named Dashboard.md.

Each wireframe file should not exceed 5 MB in size for optimal processing performance.

Custom Instructions

After initialization, you can customize the AI agent's behavior by editing the custom instructions file:

This file allows you to provide specific guidance to the AI agent, such as:

Design preferences and styling guidelines
Accessibility requirements
Code organization preferences
Specific technologies or patterns to use or avoid
Any other special considerations for your project

The custom instructions will be applied during the code generation process, helping to tailor the output to your specific needs.

Asset Configuration

After setting up custom instructions, you should configure your project assets by creating or editing the assets.config.json file in the input directory:

Here's a sample configuration that you can customize for your project:

json

{
  "colors": {
    "primary": "#3b82f6",
    "secondary": "#64748b",
    "accent": "#f59e0b"
  },
  "typography": {
    "fontFamily": "Inter, system-ui, sans-serif",
    "fontSources": {
      "inter": "/fonts/Inter-Variable.woff2"
    }
  },
  "logos": {
    "primary": "/logos/logo.svg",
    "favicon": "/logos/favicon.ico"
  },
  "images": {
    "hero": "/images/hero.jpg"
  }
}

Make sure to place your actual asset files in the corresponding directories:

Font files in input/assets/fonts/
Logo files in input/assets/logos/
Image files in input/assets/images/

The assets.config.json file is essential for consistent theming and branding across your generated UI. For more details on the project structure, see the Project Organization documentation.

Step 4: Environment Configuration

Copy .env.example to .env and configure your API keys:

bash

# Copy the example environment file
cp .env.example .env

Edit the .env file with your API keys:

env

# OpenAI Configuration
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_MODEL=gpt-4o

env

# Anthropic Configuration
ANTHROPIC_API_KEY=your_anthropic_api_key_here
CLAUDE_MODEL=claude-3-5-sonnet-20241022

env

# AWS Bedrock Configuration
AWS_ACCESS_KEY_ID=your_aws_access_key_id_here
AWS_SECRET_ACCESS_KEY=your_aws_secret_access_key_here
AWS_REGION=us-east-1
BEDROCK_CLAUDE_MODEL=anthropic.claude-3-5-sonnet-20241022-v2:0
AWS_SESSION_TOKEN=

env

# Google Cloud Configuration
GOOGLE_APPLICATION_CREDENTIALS=path_to_your_service_account_json
VERTEX_AI_MODEL=gemini-1.5-flash
VERTEX_AI_LOCATION=us-central1
VERTEX_AI_PROJECT_ID=your_project_id_here

env

# Multiple Providers (Advanced)
OPENAI_API_KEY=your_openai_api_key_here
ANTHROPIC_API_KEY=your_anthropic_api_key_here
AWS_ACCESS_KEY_ID=your_aws_access_key_id_here
AWS_SECRET_ACCESS_KEY=your_aws_secret_access_key_here
AWS_REGION=us-east-1
BEDROCK_CLAUDE_MODEL=anthropic.claude-3-5-sonnet-20241022-v2:0
GOOGLE_APPLICATION_CREDENTIALS=path_to_your_service_account_json
VERTEX_AI_MODEL=gemini-1.5-flash
VERTEX_AI_LOCATION=us-central1
VERTEX_AI_PROJECT_ID=your_project_id_here

# LangFuse Configuration (Optional - for observability)
LANGFUSE_PUBLIC_KEY=your_langfuse_public_key_here
LANGFUSE_SECRET_KEY=your_langfuse_secret_key_here
LANGFUSE_BASE_URL=your_langfuse_base_url_here
LANGFUSE_USER_ID=your_langfuse_user_id_here

Step 5: Start the Code Generation Process

bash

# Start HAI RapidUI
npx @hai/rapidui start

You'll see the HAI RapidUI ASCII art logo again and information about your current project:

██╗  ██╗ █████╗ ██╗
██║  ██║██╔══██╗██║
███████║███████║██║
██╔══██║██╔══██║██║
██║  ██║██║  ██║██║
╚═╝  ╚═╝╚═╝  ╚═╝╚═╝

██████╗  █████╗ ██████╗ ██╗██████╗   ██╗   ██╗██╗
██╔══██╗██╔══██╗██╔══██╗██║██╔══██╗  ██║   ██║██║
██████╔╝███████║██████╔╝██║██║  ██║  ██║   ██║██║
██╔══██╗██╔══██║██╔═══╝ ██║██║  ██║  ██║   ██║██║
██║  ██║██║  ██║██║     ██║██████╔╝  ╚██████╔╝██║
╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝╚═════╝    ╚═════╝ ╚═╝

📝 Using existing template: React Template
🎨 Using UI framework: Tailwind CSS

You'll then be prompted to select an action. The available options depend on whether modules have already been created or not.

If no modules have been created yet, you'll see:

? Current project: /your/project/path/input
Select an action: (Use arrow keys)
❯ Convert as Modules 
  Switch Providers (openai, anthropic, bedrockanthropic, vertexai) 
  Exit

If modules have already been created, you'll see:

? Current project: /your/project/path/input
Select an action: (Use arrow keys)
❯ Implement All Modules 
  Implement Specific Module 
  Switch Providers (openai, anthropic, bedrockanthropic, vertexai) 
  Exit

Interactive Workflow

When you run npx @hai/rapidui start, you'll see an interactive menu with options that depend on whether modules have already been created:

Step-by-Step Process

1. Module Creation

If you select "Module Creation" (also called "Convert as Modules"), the system will analyze your wireframes:

? Current project: /your/project/path/input
Select an action: Convert as Modules
Calling preprocessModules...

The system will:

Analyze your input files and create logical groupings
Organize modules in the input/modules/ directory
Place each module's specific wireframes, API specs, and interaction documentation in its respective folder

2. Implement All Modules

If you select "Implement All Modules", you'll see:

? Current project: /your/project/path/input
Select an action: Implement All Modules
💡 Using bedrockanthropic as the LLM provider
💡 Type "/exit" to return to main menu
💡 Type "/provider <name>" to switch providers (openai, anthropic, bedrockanthropic, vertexai)
🚀 Starting UI modernization process...

Available modules: {All available modules will be shown here}
? Enter execution order for module-1 (1-1): 1
Ordered modules: module-1
? 📝 Please provide additional user input (optional) : 
Processing module: module-1
Processing module: module-1, Current State: PENDING
Received event: AGENT_RESPONSE
[HAI]: Processing module: module-1

This workflow:

Shows which LLM provider is being used
Provides helpful commands for navigation and provider switching
Lists available modules
Prompts you to set the execution order for modules
Allows you to provide additional instructions
Shows the processing status of each module

Performance Optimization

Use Module Creation for large projects
Enable Batch Processing for efficiency
Leverage Conversation History for context
Monitor Module State for progress

Getting Help

Use hai-rapidui --help for command-line help
Check the execution logs in .hai-rapidui/execution.log
Review error details in .hai-rapidui/error.log
Check the Features documentation
See our Troubleshooting Guide for detailed solutions

Next Steps

Now that you're set up, explore these advanced features:

Module Creation - Organize complex projects
Code Generation - Understand generation modes
Multi-Provider LLM Support - Switch between AI providers
Troubleshooting Guide - Solutions to common issues

Ready to Build?

You're all set! Start with a simple project and gradually explore more advanced features as you become comfortable with the workflow.

Getting Started ​

Prerequisites ​

Quick Installation ​

Step 1: Configure AWS CodeArtifact Access ​

Step 2: Install the Package ​

Step 3: Initialize a New Project ​

Replace Sample Wireframes and Screen Interactions ​

Custom Instructions ​

Asset Configuration ​

Step 4: Environment Configuration ​

Step 5: Start the Code Generation Process ​

Interactive Workflow ​

Main Menu Navigation ​

Step-by-Step Process ​

1. Module Creation ​

2. Implement All Modules ​

Performance Optimization ​

Getting Help ​

Next Steps ​

Getting Started

Prerequisites

Quick Installation

Step 1: Configure AWS CodeArtifact Access

Step 2: Install the Package

Step 3: Initialize a New Project

Replace Sample Wireframes and Screen Interactions

Custom Instructions

Asset Configuration

Step 4: Environment Configuration

Step 5: Start the Code Generation Process

Interactive Workflow

Main Menu Navigation

Step-by-Step Process

1. Module Creation

2. Implement All Modules

Performance Optimization

Getting Help

Next Steps