sai-uc-ui

Underwriter Copilot UI Library - A reusable Angular 17+ component library for credit underwriting workflows.

This library provides a complete set of UI components, services, and utilities for building AI-powered underwriter copilot applications.

Features

• 📦 Angular 17+ Standalone Components - Modern, tree-shakable components
• 🎨 Angular Material 17.3.x - Consistent Material Design styling
• ⚙️ Configurable API Endpoints - No hardcoded URLs
• 🔄 Workflow Orchestration - Built-in state management for multi-step workflows
• 📊 Complete Loan Summary UI - All sections for credit assessment
• 🤖 AI Integration - Components for AI-powered summary generation
• 📄 PDF Export - Built-in PDF generation with html2pdf.js

Installation

npm install sai-uc-ui

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install @angular/material@^17.3.0 @angular/cdk@^17.3.0 ngx-markdown@^17.0.0 html2pdf.js@^0.10.1

Quick Start

1. Import Global Styles

In your styles.scss:

@import 'sai-uc-ui/src/lib/styles/uc-ui-global';

Note: Global styles include Material theme, fonts, and CSS variables. This is required for proper theming.

2. Configure the Library

In your app.config.ts:

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideMarkdown } from 'ngx-markdown';
import { provideUcUi } from 'sai-uc-ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter([]),
    provideHttpClient(),
    provideAnimationsAsync(),
    provideMarkdown(),
    provideUcUi({
      apiBaseUrl: '/api', // Your API base URL
      endpoints: {
        aiInference: '/v1/generate-summary',
        multiModelInference: '/v1/generate-multiple-summary',
        quickSummary: '/v1/generate-quick-summary',
        profiling: '/v1/profiling',
      },
      defaultModel: 'gemma4:latest',
      ragSettings: {
        top_k: 15,
        chunk_size: 1000,
        search_type: 'hybrid',
      },
    }),
  ],
};

3. Use Components

import { Component } from '@angular/core';
import { AiSummaryButtonComponent, Proposal } from 'sai-uc-ui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AiSummaryButtonComponent],
  template: `
    <uc-ai-summary-button
      [proposal]="proposal"
      (summaryOpened)="onSummaryOpened($event)">
    </uc-ai-summary-button>
  `,
})
export class AppComponent {
  proposal: Proposal = {
    id: 'PROP-001',
    applicationId: 'APP-2026-001234',
    borrowerName: 'Acme Industries Pvt. Ltd.',
    loanType: 'Working Capital',
    amountRequested: 5000000,
    status: 'pending',
    submittedDate: new Date().toISOString(),
  };

  onSummaryOpened(proposal: Proposal) {
    console.log('AI Summary opened for:', proposal.borrowerName);
  }
}

Configuration

UcUiConfig Interface

interface UcUiConfig {
  /** Base URL for all API endpoints */
  apiBaseUrl: string;

  /** Custom endpoint paths (optional) */
  endpoints?: {
    aiInference?: string;
    multiModelInference?: string;
    quickSummary?: string;
    profiling?: string;
    packageTest?: string;
  };

  /** Default AI model (optional) */
  defaultModel?: string;

  /** RAG settings (optional) */
  ragSettings?: {
    top_k?: number;
    chunk_size?: number;
    chunk_overlap?: number;
    embedding_model?: string;
    search_type?: "similarity" | "mmr" | "hybrid";
    storage_type?: "pgvector" | "inmemory";
  };

  /** Auth config (optional) */
  auth?: {
    authApiUrl?: string;
    loginEndpoint?: string;
  };
}

Components

Shared Components

| Component | Selector | Description | | -------------------------- | ---------------------- | ------------------------------------------ | | AiSummaryButtonComponent | uc-ai-summary-button | Button that opens AI summary dialog | | SummaryLoadingComponent | uc-summary-loading | Loading indicator with animations and tips |

Section Components

| Component | Selector | Description | | --------------------------- | ---------------------- | ------------------------------ | | GoNoGoDecisionComponent | uc-go-nogo-decision | Go/No-Go decision display | | BorrowerInfoComponent | uc-borrower-info | Borrower information section | | RiskRatingComponent | uc-risk-rating | Risk rating analysis | | DirectorInfoComponent | uc-director-info | Director information table | | LoanFacilityComponent | uc-loan-facility | Loan facility details | | CreditBureauComponent | uc-credit-bureau | Credit bureau information | | CreditAssessmentComponent | uc-credit-assessment | Credit assessment section | | GstSummaryComponent | uc-gst-summary | GST summary with charts | | BalanceSheetComponent | uc-balance-sheet | Balance sheet summary | | RiskAssessmentComponent | uc-risk-assessment | Risk assessment rating | | EwsDashboardComponent | uc-ews-dashboard | Early warning system dashboard |

Feature Components

| Component | Selector | Description | | -------------------------- | ---------------------- | ------------------------------- | | LoanSummaryComponent | uc-loan-summary | Main loan summary orchestration | | AiSummaryDialogComponent | uc-ai-summary-dialog | Full AI summary dialog | | ProposalInboxComponent | uc-proposal-inbox | Proposal list/inbox |

Services

LoanSummaryService

Main service for loan data and AI inference.

import { Component, inject } from '@angular/core';
import { LoanSummaryService } from 'sai-uc-ui';

@Component({...})
export class MyComponent {
  private loanService = inject(LoanSummaryService);

  generateSummary() {
    this.loanService.callMultiModelInference(
      { gst: 'Analyze GST data', bureau: 'Analyze bureau data' },
      'gemma4:latest',
      'PROPOSAL-001'
    ).subscribe(response => {
      console.log(response);
    });
  }
}

WorkflowOrchestrationService

Manages workflow state and component communication.

import { Component, inject, OnInit } from '@angular/core';
import { WorkflowOrchestrationService } from 'sai-uc-ui';

@Component({...})
export class MyComponent implements OnInit {
  private workflow = inject(WorkflowOrchestrationService);

  ngOnInit() {
    // Register component
    this.workflow.registerComponent('my-component', { state: 'idle' });

    // Listen to workflow changes
    this.workflow.stepChanged$.subscribe(step => {
      console.log('Current step:', step);
    });
  }

  onAction() {
    this.workflow.transitionTo('processing');
  }
}

Models

All TypeScript interfaces are exported from the library:

import {
  Proposal,
  LoanSummaryDetails,
  GoNoGoDecision,
  BorrowerInformation,
  DirectorInformation,
  CreditBureauDetails,
  GstSummary,
  BalanceSheetSummary,
  RiskRating,
  SummaryService,
  UcUiConfig,
  // ... and more
} from 'sai-uc-ui';

Peer Dependencies

This library requires the following peer dependencies:

| Package | Version | | -------------------- | --------- | | @angular/common | ^17.3.0 | | @angular/core | ^17.3.0 | | @angular/forms | ^17.3.0 | | @angular/router | ^17.3.0 | | @angular/cdk | ^17.3.0 | | @angular/material | ^17.3.0 | | rxjs | ^7.8.0 | | ngx-markdown | ^17.0.0 | | html2pdf.js | ^0.10.1 |

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © 2026

Links

• npm Package
• GitHub Repository