Spring AI RAG Application with Angular

This project is a Full Stack implementation of a Retrieval-Augmented Generation (RAG) application using Spring AI for the backend and Angular 21 for the frontend.

It demonstrates how to build a chatbot that can answer questions based on your own documents (PDF/Text) using a local vector store and a Large Language Model (Google Gemini).

Features

• Spring AI Backend:

  • Uses PGVector (PostgreSQL) as the Vector Store.
  • Uses Local ONNX Embeddings (all-MiniLM-L6-v2) via spring-ai-transformers (No external embedding API cost).
  • Uses Google Gemini (via Vertex AI/GenAI) for the chat completion model.
  • Optimized for macOS (includes fixes for DJL native library compatibility).
  • Robust document ingestion (sanitizes null bytes).
  • configured for 384-dimensional embeddings to match the local model.

• Angular Frontend:

  • Built with Angular 21.
  • Uses Signals for state management.
  • Material Design UI (@angular/material).
  • Markdown rendering for chat responses.
  • File upload with progress tracking.

Prerequisites

• Java 25 (or compatible JDK for Spring Boot 3.5+)
• Node.js (v18 or higher) & npm
• Docker & Docker Compose (for PostgreSQL/PGVector)
• Google Cloud API Key (for Gemini)

Getting Started

1. Database Setup (PGVector)

The application uses a specific Docker image (pgvector/pgvector:pg16) to enable vector similarity search.

cd spring-rag
docker-compose up -d

This starts PostgreSQL on port 5432 with the vector extension enabled.

2. Backend Setup (spring-rag)

1. Configure API Keys: Open spring-rag/src/main/resources/application.properties and set your Google GenAI credentials. Alternatively, use environment variables:

   spring.ai.google.genai.api-key=${GENAI_API_KEY}
   spring.ai.google.genai.project-id=${GENAI_PROJECT_ID}

2. Run the Application:

   cd spring-rag
   ./mvnw spring-boot:run

   Note: On the first run, the application will download the ONNX embedding model (approx. 50-100MB). This is normal.

3. Frontend Setup (angular-rag)

1. Install Dependencies:

   cd angular-rag
   npm install

2. Start the Development Server:

   ng serve

3. Access the UI: Open your browser to http://localhost:4200.

Usage

1. Upload a Document:

   • Navigate to the Upload tab.
   • Select a text file (.txt) containing the information you want the AI to know.
   • Click Upload. The content will be chunked, embedded locally, and stored in Postgres.

2. Chat:

   • Navigate to the Chat tab.
   • Ask a question related to the uploaded document.
   • The backend will perform a similarity search in PGVector, retrieve the context, and prompt Gemini to answer your question.

Project Structure

• spring-rag/: Spring Boot application.
  • RagService.java: Handles ingestion (chunking/embedding) and retrieval (RAG).
  • RagConfiguration.java: Custom configuration for 384-dimension VectorStore and Local EmbeddingModel.
  • DocumentController.java: REST endpoints.
• angular-rag/: Angular application.
  • chat/: Chat component (Signals-based).
  • upload/: File upload component.

Troubleshooting

• Unexpected flavor: cpu (macOS): This project explicitly pins DJL dependencies to 0.28.0 in pom.xml to avoid a known issue with 0.32.0 on macOS.
• expected 768 dimensions, not 384: If you see this error, it means the database table was created with the wrong dimensions. Drop the vector_store table in the database, and the app will recreate it correctly with 384 dimensions on the next restart.
• Database Connection: Ensure Docker is running and port 5432 is available.