llm-api-client

A modern Angular application that serves as the user interface for a multi-service LLM system. It enables users to interact with AI-powered chat, manage conversation history, and navigate sessions seamlessly.

---

Overview

The llm-api-client is the frontend layer of a distributed system designed to:

• Send prompts to the backend service
• Display AI-generated responses
• Manage chat sessions and history
• Provide a responsive and intuitive user experience

This application communicates with the Spring Boot backend (llm-api-server), which in turn interacts with the LLM gateway.

---

System Architecture

Angular (llm-api-client) → Spring Boot (llm-api-server) → Django (llm-api-gateway) → Groq API

Responsibilities:

• User interaction (chat input/output)
• Session navigation and selection
• State management for chat and history
• API communication with backend
• UI rendering and responsiveness

---

Tech Stack

• Angular (Standalone Components)
• RxJS
• Angular Signals
• TypeScript
• CSS (custom styling)

---

Key Features

1. Chat Interface

• Send prompts and receive real-time responses
• Maintains session context
• Clean and responsive UI

---

2. Session Management

• Create new chat sessions
• Resume previous conversations
• Delete individual or all sessions

---

3. History System

• Sidebar and dedicated history page
• Search conversations
• Group sessions by:
  • Today
  • Yesterday
  • This week
  • Older

---

4. Modern Angular Architecture

• Standalone components (no NgModules)
• Lazy-loaded feature routes
• Signal-based state management (signal, computed)
• OnPush change detection for performance

---

5. State Management

Custom lightweight store pattern using Angular signals:

• ChatStore → manages active chat session
• HistoryStore → manages session list and state

---

6. API Integration

• LlmService → handles prompt requests
• HistoryService → manages session/history endpoints
• Configurable API base URL via DI token

---

Environment Configuration

export const environment = {
  production: false,
  apiUrl: "http://localhost:8080/api",
};

---

Running Locally

1. Install dependencies

npm install

2. Start development server

ng serve

Open:

http://localhost:4200/

---

Backend Requirement

This frontend requires the backend service to be running:

• llm-api-server (Spring Boot)
• llm-api-gateway (Django)

Ensure API URL is correctly configured.

---

Design Decisions

Why Signals over NgRx?

• Simpler and lightweight state management
• Less boilerplate
• Sufficient for application complexity

---

Why Standalone Components?

• Modern Angular approach
• Improved modularity
• Reduced complexity compared to NgModules

---

Why Feature-Based Structure?

• Clear separation of concerns
• Scalable for future features
• Easier maintainability

---

Future Improvements

• Authentication and user accounts
• Dark/light theme toggle
• Streaming responses (real-time tokens)
• Message editing and retry
• Pagination for large histories

---

Related Services

• llm-api-server → Spring Boot backend
• llm-api-gateway → Django LLM gateway