Spring AI + Angular 19: Build an AI Chat Feature (2026 Hot Topic Guide)

📚 Tutorial hubs:
Spring Boot ·
Angular ·
CRUD + REST guide

Estimated reading time: 12 minutes · Last updated: June 29, 2026

Spring AI is the hottest topic for Java developers in 2026 — add LLM-powered chat, tool calling, and RAG to your existing Spring Boot apps without leaving the JVM. This tutorial shows you how to build an AI chat feature with Spring AI on the backend and Angular 19 on the frontend.

Why Spring AI matters in 2026

Until recently, generative AI meant Python, LangChain, and separate microservices. Spring AI changes that:

• Official Spring project — fits your existing Spring Boot architecture
• ChatClient API for OpenAI, Azure OpenAI, Ollama (local models)
• @Tool annotation for function calling (database lookups, APIs)
• RAG with vector stores (PGVector, Redis) for grounded answers
• Same deployment, security, and observability patterns you already use

If you’ve built REST APIs with our Angular CRUD + Spring Boot series, you’re ready for this.

Architecture overview

Angular 19 UI (chat component)
        │  POST /api/chat
        ▼
Spring Boot 3 + Spring AI
        │  ChatClient → OpenAI / Ollama
        ▼
Optional: @Tool methods (weather, orders, docs RAG)

Prerequisites

• Java 17+, Spring Boot 3.2+, Maven or Gradle
• Node.js 18+, Angular CLI 19
• OpenAI API key or Ollama running locally (free)
• Basic REST API knowledge — see Spring Boot tutorials

Step 1 — Add Spring AI to Spring Boot

<dependency>
  <groupId>org.springframework.ai</groupId>
  <artifactId>spring-ai-openai-spring-boot-starter</artifactId>
</dependency>

# application.properties
spring.ai.openai.api-key=${OPENAI_API_KEY}
spring.ai.openai.chat.options.model=gpt-4o-mini

For local development with Ollama, use spring-ai-ollama-spring-boot-starter instead — no API costs.

Step 2 — Chat REST endpoint

@RestController
@RequestMapping("/api/chat")
public class ChatController {
  private final ChatClient chatClient;

  public ChatController(ChatClient.Builder builder) {
    this.chatClient = builder.build();
  }

  @PostMapping
  public ChatResponse chat(@RequestBody ChatRequest req) {
    String reply = chatClient.prompt()
      .user(req.message())
      .call()
      .content();
    return new ChatResponse(reply);
  }
}

public record ChatRequest(String message) {}
public record ChatResponse(String reply) {}

Step 3 — Add tool calling (optional but powerful)

Let the LLM call your Java methods — e.g. look up order status from your database:

@Component
public class OrderTools {
  @Tool(description = "Get order status by order ID")
  public String getOrderStatus(String orderId) {
    return orderRepository.findById(orderId)
      .map(o -> "Order " + orderId + ": " + o.getStatus())
      .orElse("Order not found");
  }
}

// Register tools on ChatClient
chatClient.prompt().user(message).tools(orderTools).call().content();

This is the foundation of AI agents in Spring Boot — multi-step workflows that reason and act.

Step 4 — Angular 19 chat UI

// chat.service.ts — standalone, inject HttpClient
@Injectable({ providedIn: 'root' })
export class ChatService {
  private http = inject(HttpClient);
  private api = 'http://localhost:8080/api/chat';

  send(message: string) {
    return this.http.post<{reply: string}>(this.api, { message });
  }
}

// chat.component.ts
@Component({
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <div class="chat-box">
      <div *ngFor="let m of messages">{'{'}m{'}'}</div>
      <input [formControl]="input" (keyup.enter)="send()" placeholder="Ask anything...">
    </div>
  `
})
export class ChatComponent {
  input = new FormControl('');
  messages: string[] = [];
  private chat = inject(ChatService);

  send() {
    const msg = this.input.value?.trim();
    if (!msg) return;
    this.messages.push('You: ' + msg);
    this.chat.send(msg).subscribe(r => this.messages.push('AI: ' + r.reply));
    this.input.reset();
  }
}

Enable CORS on Spring Boot for http://localhost:4200 during development.

Step 5 — RAG for your own docs (next level)

Ground answers in your tutorial content using Retrieval-Augmented Generation:

1. Chunk your docs / PDFs
2. Embed with Spring AI EmbeddingModel
3. Store in PGVector or Redis vector store
4. Retrieve relevant chunks before each chat prompt

Perfect for a “ask our documentation” widget on munonye.com or your product docs.

Production checklist

• Never expose API keys in Angular — keep them server-side only
• Rate-limit /api/chat (Bucket4j or Spring Security)
• Log prompts/responses with Micrometer for observability
• Sanitize user input before sending to the LLM
• Set token limits and timeout on ChatClient

Related tutorials

• Angular CRUD + Spring Boot REST API — Complete Guide
• Spring Boot tutorials hub
• Angular tutorials hub
• Axon CQRS tutorial — event-driven architecture complement

FAQ

Is Spring AI production-ready? Yes — it’s backed by the Spring team and used in enterprise deployments with OpenAI and Azure.

Can I use free local models? Yes — Ollama + spring-ai-ollama-starter runs Llama, Mistral, etc. locally.

Do I need Python? No — the entire stack is Java + TypeScript/Angular.