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 tool
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)
Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.