Build an Angular AI app with the Claude API: chat, streaming, caching, PDFs, tool use and prompts. Each lesson has a task and a downloadable solution.
Intermediate · 12 lessons
Getting started with Claude
What Is Anthropic and Claude? - Learn what Claude and the Claude API are, how to pick a model, and build the first screen of your Angular AI Lab with a Node server.
Set Up the Claude API in Node.js - Create an API key, keep it safe, install the SDK and send your first request to Claude from an Angular app through a Node server.
The Messages API Explained - Learn system prompts, user and assistant messages and multi-turn chat, then build a chat page with memory in Angular.
Streaming Claude Responses to the Browser - Show Claude's answer word by word using streaming, with Server-Sent Events in Node and a fetch reader in Angular, including a Stop button.
Error Handling, Retries and Timeouts - Make your Claude integration reliable: understand API errors, retry with exponential backoff, set timeouts and show friendly messages in Angular.
Advanced API features
Prompt Caching and Batch Processing - Cut cost and delay for repeated prompts with prompt caching, learn when to use the batch API, and add a cache dashboard to your Angular AI Lab.
Images, PDFs and Documents with Claude - Send PDFs and images to Claude, extract structured data from a resume file, handle uploads safely in Node and build an upload page in Angular.
Tool use
Claude Tool Use: How It Works - Learn how Claude calls your functions: tool definitions, the request and result loop, and build an Angular page that shows every tool call Claude makes.
Designing Safe Tools and Permission Checks - Make Claude's tools safe: validate inputs with zod, check ownership, ask for human approval and resist prompt injection, with an Angular approval screen.
Project: Resume and Job Matching with Claude - Build a real feature: compare a resume with a job post using a forced tool, zod validation, rate limiting and an Angular results screen.