Add AI to Your Angular + Spring Boot CRUD App in One Weekend (2026)

#springboot #angular #ai #tutorial

Canonical URL: Republished from munonye.com. Full code on GitHub.

🎯 Weekend project — You already built a Friends CRUD app with Angular and Spring Boot. This guide shows how to add AI to your Angular CRUD app in one weekend: natural-language search, summaries, and guided actions — without throwing away your existing code.

The fastest way to ship AI in 2026 is not a greenfield chatbot — it is extending software you already run. If you completed our Angular CRUD tutorial series or the complete CRUD guide, you have FriendsAPI (Spring Boot) and FriendsUI (Angular). We will add an AI assistant that understands your domain.

Part of the AI Developer Tutorials hub. Builds on Spring AI agents with tool calling.

Time: one weekend (~6–8 hours) · Prerequisites: CRUD app running locally, OpenAI API key

Before you start
Architecture: CRUD + AI layer
Saturday AM — Backend tools
Saturday PM — Agent endpoint
Sunday AM — Angular chat panel
Sunday PM — Wire up and test
Before production

Before you start {#before-you-start}

Confirm your stack matches the CRUD series:

App	Port	Tech
FriendsAPI	9001	Spring Boot, JPA, `/api/friends`
FriendsUI	9002	Angular 19, HttpClient, standalone components

Refresh Angular 19 patterns in Part 1 setup if needed. For forms in the AI panel, reuse patterns from reactive forms validation (M6).

💡 Why this beats a standalone chat app: Your AI tools call the same FriendService as your REST controllers — one source of truth, no duplicate business logic.

Architecture: CRUD + AI layer {#architecture}

FriendsUI (Angular)
├── Existing CRUD screens (unchanged)
└── NEW: AiAssistantPanel → POST /api/agent

FriendsAPI (Spring Boot)
├── Existing FriendController (/api/friends)
└── NEW: AgentController + FriendTools (@Tool)
         └── FriendService (shared)

This mirrors the agent pattern from our Spring AI agents tutorial but grounded in your CRUD domain.

Saturday AM — Backend tools {#backend}

Add Spring AI to FriendsAPI pom.xml:

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

Expose CRUD operations as tools — reuse your service:




---

**Read the full tutorial with all code on munonye.com →**

---

**Full tutorial:** [Add AI to Your Angular + Spring Boot CRUD App in One Weekend (2026)](https://www.munonye.com/add-ai-to-angular-spring-boot-crud-app-weekend-2026/)

**Kindson Munonye** — [GitHub](https://github.com/KindsonTheGenius) · [LinkedIn](https://www.linkedin.com/in/kindson) · [About](https://www.munonye.com/about/)