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

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

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.

---

Full tutorial: Function Calling from Angular — Structured JSON from LLMs (2026)

Kindson Munonye — GitHub · LinkedIn · About