Angular frontend for company-recommender-frontend

FastAPI backend for recommending the type of company registration in India using an LLM. Now you want a web frontend that can talk to your backend (/recommend and /chat).

I’ll give you a simple Angular (latest) frontend with a form to collect inputs and a chat interface.

---

Steps to Build Frontend

1. Create Angular Project

npm install -g @angular/cli
ng new company-recommender-frontend
cd company-recommender-frontend
ng serve

---

2. Generate Components & Service

ng g c components/recommendation-form
ng g c components/chat
ng g s services/api

---

3. Angular Service (src/app/services/api.service.ts)

This will handle HTTP calls to your FastAPI backend.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = 'http://127.0.0.1:8000'; // Change to https://immai.acintia.com in production

  constructor(private http: HttpClient) {}

  getRecommendation(payload: any): Observable<any> {
    return this.http.post(`${this.baseUrl}/recommend`, payload);
  }

  chat(payload: any): Observable<any> {
    return this.http.post(`${this.baseUrl}/chat`, payload);
  }
}

---

4. Recommendation Form Component (src/app/components/recommendation-form/recommendation-form.component.ts)

import { Component } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { v4 as uuidv4 } from 'uuid';

@Component({
  selector: 'app-recommendation-form',
  templateUrl: './recommendation-form.component.html'
})
export class RecommendationFormComponent {
  business_type = '';
  investment_amount: number | null = null;
  number_of_partners = 1;
  is_foreign_citizen = false;
  session_id = uuidv4(); // generate unique session

  recommendation: string | null = null;

  constructor(private api: ApiService) {}

  submitForm() {
    const payload = {
      business_type: this.business_type,
      investment_amount: this.investment_amount,
      number_of_partners: this.number_of_partners,
      is_foreign_citizen: this.is_foreign_citizen,
      session_id: this.session_id
    };

    this.api.getRecommendation(payload).subscribe({
      next: (res) => {
        this.recommendation = res.response;
      },
      error: (err) => {
        console.error(err);
      }
    });
  }
}

HTML (recommendation-form.component.html)

<div class="p-4 max-w-lg mx-auto">
  <h2 class="text-xl font-bold mb-2">Company Recommender Form</h2>

  <form (ngSubmit)="submitForm()">
    <label>Business Type:</label>
    <input [(ngModel)]="business_type" name="business_type" class="border p-2 w-full mb-2" required />

    <label>Investment Amount (INR):</label>
    <input type="number" [(ngModel)]="investment_amount" name="investment_amount" class="border p-2 w-full mb-2" />

    <label>Number of Partners:</label>
    <input type="number" [(ngModel)]="number_of_partners" name="number_of_partners" class="border p-2 w-full mb-2" />

    <label>
      <input type="checkbox" [(ngModel)]="is_foreign_citizen" name="is_foreign_citizen" />
      Foreign Citizen Involved
    </label>

    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded mt-3">Get Recommendation</button>
  </form>

  <div *ngIf="recommendation" class="mt-4 p-3 bg-gray-100 rounded">
    <h3 class="font-bold">Recommendation:</h3>
    <p>{{ recommendation }}</p>
  </div>
</div>

---

5. Chat Component (src/app/components/chat/chat.component.ts)

import { Component, Input } from '@angular/core';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html'
})
export class ChatComponent {
  @Input() session_id!: string;
  userInput = '';
  messages: { sender: string, text: string }[] = [];

  constructor(private api: ApiService) {}

  sendMessage() {
    if (!this.userInput.trim()) return;

    this.messages.push({ sender: 'You', text: this.userInput });
    const payload = {
      user_input: this.userInput,
      session_id: this.session_id
    };

    this.api.chat(payload).subscribe({
      next: (res) => {
        this.messages.push({ sender: 'AI', text: res.response });
      },
      error: (err) => console.error(err)
    });

    this.userInput = '';
  }
}

HTML (chat.component.html)

<div class="p-4 max-w-lg mx-auto mt-6 border rounded">
  <h2 class="text-xl font-bold mb-2">Chat with AI</h2>

  <div class="h-60 overflow-y-auto bg-gray-100 p-2 mb-2 rounded">
    <div *ngFor="let msg of messages">
      <p [ngClass]="{'font-bold text-blue-700': msg.sender==='AI'}">
        {{ msg.sender }}: {{ msg.text }}
      </p>
    </div>
  </div>

  <div class="flex">
    <input [(ngModel)]="userInput" name="chatInput" class="flex-1 border p-2" placeholder="Ask something..." />
    <button (click)="sendMessage()" class="bg-green-500 text-white px-4 ml-2 rounded">Send</button>
  </div>
</div>

---

6. App Component (src/app/app.component.html)

<app-recommendation-form></app-recommendation-form>
<app-chat [session_id]="session_id"></app-chat>

---

7. Install Dependencies

npm install uuid

---

✅ Now you have a working Angular frontend for your FastAPI backend:

• Fill form → /recommend

• Chat with AI → /chat

---

Do you want me to also dockerize this Angular frontend and add it to your existing docker-compose.yml (with backend + nginx reverse proxy + HTTPS)?

-------------------