Function Calling from Angular — Structured JSON from LLMs (2026)

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

Source code: munonye-ai-chat-spring-angular on GitHub

Estimated reading time: 12–15 minutes · Last updated: July 1, 2026

This tutorial shows Angular function calling against a Spring AI backend with @Tool methods — part of AI Developer Tutorials.

Spring Boot tools

@Component
public class ProductTools {
  @Tool(description = "Look up product price by SKU")
  public ProductPrice getPrice(String sku) {
    return catalog.find(sku).map(p -> new ProductPrice(p.sku(), p.name(), p.price()))
        .orElse(new ProductPrice(sku, "Unknown", 0));
  }
}

public record ProductPrice(String sku, String name, double price) {}

Register tools when building ChatClient:

this.chatClient = builder
    .defaultTools(productTools)
    .build();

Angular display

interface ProductPrice {
  sku: string;
  name: string;
  price: number;
}

// In component after chat response:
parseProduct(json: string): ProductPrice | null {
  try { return JSON.parse(json); } catch { return null; }
}

Use @if blocks in the template to render a price card when the assistant returns JSON.

Related: Reactive forms validation for input validation before sending prompts.

Related:
AI Developer Tutorials hub ·
Angular CRUD Part 1 ·
Spring AI overview