Kick off your book project in 3 hours! Live workshop on Zoom. You’ll leave with a real book project, progress on your first chapter, and a clear plan to keep going. Saturday, June 6, 2026. Learn more…

Leanpub Header

Skip to main content
Go to Leanpub.com

From Frontend to AI Engineering

A Practical Guide to AI Agents, RAG, MCP Servers and LLM Apps in TypeScript

This book is 100% completeLast updated on 2026-06-07
Kristin and Aaron

Build real AI products with TypeScript — no Python required. Learn LLMs, RAG, Agents, MCP, and production AI engineering from a frontend developer's perspective.

Minimum price

$19.00

$39.00

You pay

Author earns

$
PDF
EPUB
WEB
About

About

About the Book

Most AI development content assumes Python. If you're a TypeScript developer who's tried to get started with AI — and kept hitting a wall of Python libraries, Python tutorials, and Python examples — this book is for you.

The core insight behind it: for most real products, AI development is fundamentally about calling APIs. Calling HTTP endpoints, handling async streams, validating structured responses — that's exactly what TypeScript developers already do. The switching cost is nearly zero. TypeScript's type system is actually a genuine advantage: Zod pairs naturally with LLM structured output, and sharing types between frontend and backend removes friction across the full stack.

This book takes you from your first LLM API call to a deployable, production-ready AI workbench — covering agents, RAG, MCP servers, and multimodal AI, all in TypeScript.

What you'll build:

  • A production multi-turn conversation system with context compression and cost tracking
  • A hybrid RAG pipeline (BM25 + vector search + reranking) backed by PostgreSQL and pgvector
  • A multi-tenant knowledge base where each customer's data stays strictly isolated
  • A ReAct agent that reasons over tool results across multiple steps
  • A multi-agent system that decomposes goals, executes subtasks in parallel, and synthesizes results
  • An autonomous coding agent that writes, runs, and self-repairs code in a sandbox
  • An MCP server you can publish to npm and reuse across any MCP-compatible host
  • A complete AI workbench integrating RAG, agents, MCP, and multimodal capabilities — deployable to Vercel and Railway

What's covered:

The book is organized into six parts. It starts with full-stack TypeScript foundations — the server patterns and type-safe API design you'll need before touching any LLM. Then it moves into LLM integration: streaming output, prompt engineering, and reliable structured output with Zod.

The RAG section covers the full pipeline from document ingestion to production retrieval — including hybrid search, hallucination detection, and multi-tenant isolation. The Agents section is the heart of the book: from the ReAct loop through tool calling, browser automation, and multi-agent orchestration.

Part Five covers MCP — Anthropic's Model Context Protocol — from building your first server through publishing a reusable tool package to npm. Part Six covers multimodal AI (vision, speech, documents) and the production concerns you can't skip before going live: observability with LangFuse, rate limiting, prompt injection defense, and cost monitoring.

Who this is for:

TypeScript or JavaScript developers who want to build AI applications. You should be comfortable with async/await and basic Node.js. You don't need Python, and you don't need a machine learning background. This is not a research book — it's an engineering book.

If you've been watching AI development from the sidelines because the ecosystem felt like it belonged to Python developers, this book is your on-ramp.

---

**600+ pages. 24 chapters. All code in TypeScript.**

Share this book

Categories

Artificial IntelligenceTypeScriptSoftware EngineeringWeb Development

Feedback

Email the Author

Author

About the Author

Kristin and Aaron

Kristin is a full-stack engineer with ten years of frontend development experience, currently working as a Senior AI Development Engineer at an AI startup, where she leads AI capability integration and architecture design.

Her career spans Vue, React, and Angular, with hands-on work in micro-frontend architecture, real-time communication, and data visualization across enterprise SaaS platforms and government projects, where she served as frontend lead and architect.

In recent years she has shifted her focus to AI engineering — exploring how to build real, production-grade AI applications using the toolchain TypeScript developers already know. That journey from frontend to full-stack AI is the origin of this book. She knows exactly where the barrier stands that stops so many frontend developers from entering this space, and she found a way through it.

---

Aaron is a full-stack architect and technical consultant with over ten years of engineering experience. He spent a decade at a multinational software company as a principal engineer and engineering manager, leading core module development for international-grade engineering software.

Since then, he has served as technical lead and senior architecture partner at several companies, with a long track record of delivering complex systems to production and taking AI content generation and full-stack products from prototype to real-world deployment.

He brings deep firsthand experience in turning complex technology into products that actually ship and helping clients get results on the ground. That is also the book's core conviction: AI development is not a research problem — it is an engineering problem. And engineering problems can be solved systematically.

Contents

Table of Contents

Preface: A Frontend Developer’s Ticket into the AI Era

  1. The moment it clicked
  2. Agents: from talking to doing
  3. What this book is, and isn’t
  4. Six conceptual leaps
  5. Before you begin

How to Read This Book

  1. Prerequisites
  2. Companion Code
  3. Reading Paths
  4. A Note on the Code Examples
  5. Key Terms at a Glance
  6. Appendices
  7. Part One: Full-Stack Foundation

Chapter 1: The Frontend Developer’s Roadmap to Full-Stack

  1. Chapter Goals
  2. 1.1 Get an AI Endpoint Running — Now
  3. 1.2 Why Full-Stack, Why Now
  4. 1.3 The Full-Stack TypeScript Architecture
  5. 1.4 Node.js vs. the Browser: Same Language, Different World
  6. 1.5 TypeScript on the Server: Best Practices
  7. 1.6 Companion Projects Preview
  8. 1.7 Summary
  9. Exercises
  10. Further Reading

Chapter 2: Setting Up a Full-Stack TypeScript Development Environment

  1. Chapter Goals
  2. 2.1 Why a Monorepo?
  3. 2.2 Initializing the Monorepo
  4. 2.3 Configuring TypeScript
  5. 2.4 The ESM Module System
  6. 2.5 Configuring tsx for Hot Reload
  7. 2.6 Configuring Biome: Unified Code Style
  8. 2.7 Configuring Vitest: Unit Testing
  9. 2.8 Building the shared Package
  10. 2.9 Building the server Package
  11. 2.10 Environment Variable Management
  12. 2.11 Complete Project Structure
  13. 2.12 Summary
  14. Exercises
  15. Further Reading

Chapter 3: Core Server-Side TypeScript Patterns

  1. Chapter Goals
  2. 3.1 The Event Loop: How Node.js Handles Concurrency
  3. 3.2 Streams: The Right Way to Handle Large Data
  4. 3.3 Error Handling: From Ad Hoc to Systematic
  5. 3.4 Type-Safe API Design
  6. 3.5 Summary
  7. Exercises
  8. Further Reading

Chapter 4: Building Your First Full-Stack Application

  1. Chapter Goals
  2. Reading Guide
  3. 4.1 Project Overview
  4. 4.2 Backend Routing vs. Frontend Routing
  5. 4.3 Why a Database, and Which One
  6. 4.4 Drizzle ORM: TypeScript-First Database Access
  7. 4.5 Database Migrations: What They Are and Why They Exist
  8. Extended Path: User Authentication (Optional)
  9. 4.6 User Authentication
  10. 4.7 Implementing Authentication
  11. 4.8 Why zValidator
  12. 4.9 The Main Entry Point
  13. 4.10 Auth Routes
  14. 4.11 Todo Routes
  15. 4.12 Frontend: Hono Client
  16. 4.13 Deployment
  17. 4.14 Summary
  18. Exercises
  19. Further Reading
  20. Part Two: LLM Integration

Chapter 5: How Large Language Models Work

  1. Chapter Goals
  2. 5.1 What LLMs Are and Where They Came From
  3. 5.2 How Deep Is Deep Enough?
  4. 5.3 Transformer: Engineering Intuition
  5. 5.4 Tokens: The Basic Unit of LLMs
  6. 5.5 Sampling Parameters: Controlling Randomness
  7. 5.6 Model Comparison and Selection (2026)
  8. 5.7 Hallucination: The Fundamental Limitation
  9. 5.8 Summary
  10. Exercises
  11. Further Reading

Chapter 6: Connecting to LLM APIs — From Hello World to Production

  1. Chapter Goals
  2. 6.1 The LLM API Model
  3. 6.2 Installation and Initialization
  4. 6.3 Verifying the Client Setup
  5. 6.4 Non-Streaming vs. Streaming
  6. 6.5 Implementing Non-Streaming Calls
  7. 6.6 Implementing Streaming
  8. 6.7 Error Classification and Retry Strategy
  9. 6.8 Cost Control
  10. 6.9 Complete Service Layer
  11. 6.10 Summary
  12. Exercises
  13. Further Reading

Chapter 7: Prompt Engineering and Structured Output

  1. Chapter Goals
  2. 7.1 What Prompt Engineering Is
  3. 7.2 System Prompt Design Principles
  4. 7.3 Few-Shot Examples: Teaching by Example
  5. 7.4 XML Tags: Precise Output Structure Control
  6. 7.5 Structured JSON Output
  7. 7.6 Prompt Version Management
  8. 7.7 Prompt Security: Preventing Injection Attacks
  9. 7.8 Summary
  10. Exercises
  11. Further Reading

Chapter 8: Building a Multi-Turn Conversation System

  1. Chapter Goals
  2. 8.1 Project Architecture
  3. 8.2 Conversation Management Service
  4. 8.3 Context Window Management and History Compression
  5. 8.4 Chatbot Core Service
  6. 8.5 Route Layer
  7. 8.6 Frontend: Complete Chat Interface
  8. 8.7 Multi-Tab Sync with BroadcastChannel
  9. 8.8 Summary
  10. Exercises
  11. Further Reading
  12. Part Three: RAG — Give Your AI a Knowledge Base

Chapter 9: Vector Databases and Embeddings

  1. Chapter Goals
  2. 9.1 From Keyword Search to Semantic Search
  3. 9.2 Embeddings: Compressing Language into Vector Space
  4. 9.3 Cosine Similarity: Measuring Directional Similarity Between Vectors
  5. 9.4 Vector Databases: Storage Designed for High-Dimensional Vectors
  6. 9.5 Implementing the Embedding Service
  7. 9.6 Semantic Search API
  8. 9.7 Engineering Details: Vector Dimensions and Indexes
  9. 9.8 Summary
  10. Exercises
  11. Further Reading

Chapter 10: Document Ingestion Pipeline

  1. Chapter Goals
  2. 10.1 What Is a Document Ingestion Pipeline?
  3. 10.2 Database Schema: Document Management
  4. 10.3 Document Parsing: Extracting Plain Text
  5. 10.4 Text Chunking: Four Strategies
  6. 10.5 Batch Ingestion Pipeline
  7. 10.6 File Upload Route
  8. 10.7 Frontend: Document Upload and Status Tracking
  9. 10.8 Summary
  10. Exercises
  11. Further Reading

Chapter 11: RAG Core Implementation

  1. Chapter Goals
  2. 11.1 How RAG Works
  3. 11.2 Hybrid Search: BM25 + Vector
  4. 11.3 Reranking: Precision at the Top
  5. 11.4 Complete RAG Pipeline
  6. 11.5 Citation Display Component
  7. 11.6 Summary
  8. Exercises
  9. Further Reading

Chapter 12: Production-Grade RAG System

  1. Chapter Goals
  2. 12.1 Project Overview
  3. 12.2 Incremental Document Updates
  4. 12.3 RAG Quality Evaluation (RAGAS)
  5. 12.4 Hallucination Detection
  6. 12.5 Multi-Tenant Knowledge Base Isolation
  7. 12.6 Embedding Cache
  8. 12.7 Three Common Production Pitfalls
  9. 12.8 Pre-Launch Checklist
  10. 12.9 Summary
  11. Exercises
  12. Further Reading
  13. Part Four: Agents — Tool Calling and Autonomous Decision-Making

Chapter 13: AI Agent Architecture Patterns

  1. Chapter Goals
  2. 13.1 What Is an Agent?
  3. 13.2 ReAct: The Mainstream Agent Loop
  4. 13.3 Plan-and-Execute: Plan First, Then Act
  5. 13.4 Agent vs. Chain: When to Use Which
  6. 13.5 Agent Failure Modes and Defenses
  7. 13.6 Agent Observability
  8. 13.7 Factory Functions: Creating Pre-Configured Agents
  9. 13.8 A First Agent: Calculator Assistant
  10. 13.9 Summary
  11. Exercises
  12. Further Reading

Chapter 14: Tool Calling (Function Calling) in Depth

  1. Chapter Goals
  2. 14.1 Tool Schema Design Principles
  3. 14.2 Parallel Tool Execution
  4. 14.3 Tool Result Validation
  5. 14.4 Recursive Call Defense
  6. 14.5 Building a Reusable Tool Library
  7. 14.6 Tool Call Observability
  8. 14.7 Summary
  9. Exercises
  10. Further Reading

Chapter 15: Browser and File System Tools

  1. Chapter Goals
  2. 15.1 Connecting the Agent to the Real World
  3. 15.2 Browser Tools: Playwright Integration
  4. 15.3 File System Tools
  5. 15.4 Command and Code Execution Tools
  6. 15.5 Tool Registry
  7. 15.6 Complete Example: Code Analysis Agent
  8. 15.7 Production Deployment Notes
  9. 15.8 Summary
  10. Exercises
  11. Further Reading

Chapter 16: Multi-Agent Collaboration Systems

  1. Chapter Goals
  2. 16.1 Why Multiple Agents
  3. 16.2 Orchestrator/Subagent Pattern
  4. 16.3 Pipeline Pattern: Sequential Agent Chains
  5. 16.4 Message Passing and Shared State
  6. 16.5 Timeout and Interrupt Handling
  7. 16.6 Error Path Handling: Timeouts, Conflicting Results, and Loop Detection
  8. 16.7 Multi-Agent Routing
  9. 16.8 Frontend: Multi-Agent Task Panel
  10. 16.9 Summary
  11. Exercises
  12. Further Reading

Chapter 17: Building an Autonomous Coding Agent

  1. Chapter Goals
  2. 17.1 Project Goal
  3. 17.2 Code Operation Toolset
  4. 17.3 Code Review Agent Core
  5. 17.4 Test-Driven Auto-Fix
  6. 17.5 Code Review Route and SSE
  7. 17.6 Frontend: Code Review Interface
  8. 17.7 Summary
  9. Exercises
  10. Further Reading
  11. Part Five: MCP — Standardized Tool Ecosystem

Chapter 18: MCP Protocol Specification and Design Philosophy

  1. Chapter Goals
  2. 18.1 Why MCP
  3. 18.2 JSON-RPC 2.0: MCP’s Protocol Foundation
  4. 18.3 MCP Lifecycle
  5. 18.4 The Three Primitives in Detail
  6. 18.5 MCP vs. Function Calling: Which to Use
  7. 18.6 Transport Layer: Three Connection Methods
  8. 18.7 MCP Ecosystem Status (2026)
  9. 18.8 Summary
  10. Exercises
  11. Further Reading

Chapter 19: Building Your First MCP Server

  1. Chapter Goals
  2. 19.1 Project Setup
  3. 19.2 MCP SDK Basics
  4. 19.3 Implementing Tools
  5. 19.4 Implementing Resources
  6. 19.5 Implementing Prompts
  7. 19.6 Assembling the Complete MCP Server
  8. 19.7 Debugging the MCP Server
  9. 19.8 Streamable HTTP Transport: Remote Access
  10. 19.9 Summary
  11. Exercises
  12. Further Reading

Chapter 20: MCP Client Integration

  1. Chapter Goals
  2. 20.1 The MCP Client’s Responsibilities
  3. 20.2 Single MCP Client Implementation
  4. 20.3 Multi-Server Manager
  5. 20.4 Permission Model and User Authorization
  6. 20.5 Integrating with the Agent: Permission-Gated Tool Calls
  7. 20.6 Version Compatibility Strategy
  8. 20.7 MCP Route: Exposing MCP Capabilities to the Application Layer
  9. 20.8 Loading MCP Servers at Application Startup
  10. 20.9 Frontend: MCP Tool Panel
  11. 20.10 Summary
  12. Exercises
  13. Further Reading

Chapter 21: Developing and Publishing Reusable MCP Servers

  1. Chapter Goals
  2. 21.1 Project Goal
  3. 21.2 Notion MCP Server
  4. 21.3 Database Query MCP Server
  5. 21.4 Packaging and Publishing to npm
  6. 21.5 MCP Server Testing Strategy
  7. 21.6 Summary
  8. Exercises
  9. Further Reading
  10. Part Six: Multimodal and Production Deployment

Chapter 22: Multimodal AI Development

  1. Chapter Goals
  2. 22.1 What Is Multimodal
  3. 22.2 Image Understanding (Vision)
  4. 22.3 Speech-to-Text (Whisper)
  5. 22.4 Text-to-Speech (TTS)
  6. 22.5 Mixed-Content PDF Parsing
  7. 22.6 Frontend: Multimodal Upload Component
  8. 22.7 Summary
  9. Exercises
  10. Further Reading

Chapter 23: Productionizing AI Applications

  1. Chapter Goals
  2. 23.1 The Core Challenges of Production
  3. 23.2 LangFuse: Full-Chain LLM Call Tracing
  4. 23.3 Rate Limiting and Quotas
  5. 23.4 Prompt Injection Defense
  6. 23.5 Prompt A/B Testing
  7. 23.6 Cost Monitoring and Alerts
  8. 23.7 Agent Evaluation System (Evals)
  9. 23.8 Production Deployment Checklist
  10. 23.9 Summary
  11. Exercises
  12. Further Reading

Chapter 24: Capstone Project — AI Fullstack Workbench

  1. Chapter Goals
  2. 24.1 Project Overview
  3. 24.2 Architecture
  4. 24.3 Backend: Unified AI Gateway
  5. 24.4 Frontend: AI Workbench Main Interface
  6. 24.5 Real-Time Collaboration: Multi-User Agent
  7. 24.6 Deployment: Vercel + Railway
  8. 24.7 Monitoring and Maintenance
  9. 24.8 Book Knowledge Review
  10. 24.9 What Comes Next: Beyond This Book
  11. 24.10 Summary
  12. 24.11 Closing
  13. Exercises
  14. Further Reading
  15. Appendices

Appendix A: TypeScript Server-Side Development Quick Reference

  1. A.1 Infer Types from Libraries (Don’t Write Them Manually!)
  2. A.2 Common Utility Types
  3. A.3 Conditional Types
  4. A.4 Frontend to Backend: Common Type Errors and Fixes
  5. A.5 Type Patterns Used Throughout This Book
  6. A.6 tsconfig.json Key Settings Quick Reference
  7. Further Reading

Appendix B: AI Application Common Error Troubleshooting Guide

  1. B.1 LLM API Errors
  2. B.2 Database Errors
  3. B.3 RAG Retrieval Issues
  4. B.4 Agent Execution Issues
  5. B.5 MCP Connection Issues
  6. B.6 ESM Module Errors
  7. B.7 Setup and Environment Issues

Appendix C: Recommended Resources and Further Reading

  1. C.1 Official Documentation (Consult Regularly)
  2. C.2 Books
  3. C.3 Papers (Engineering Perspective)
  4. C.4 Blogs and Newsletters
  5. C.5 Video Courses
  6. C.6 Open-Source Projects (Worth Reading the Source)
  7. C.7 Community and Events
  8. C.8 Sustainable Learning Suggestions
  9. C.9 Book Reference Index

Appendix D: AI Engineering Glossary

  1. 1. Model Architecture
  2. 2. Training
  3. 3. Tokens and Context
  4. 4. Sampling Parameters
  5. 5. Prompting and Output Control
  6. 6. RAG — Retrieval-Augmented Generation
  7. 7. Agent Architecture
  8. 8. MCP and the Protocol Ecosystem
  9. 9. Engineering Frameworks and Evaluation

Appendix E: Core AI Engineering Concepts

  1. E.1 The Evolution of Three Engineering Layers
  2. E.2 Prompt Engineering: The Best-Known Layer
  3. E.3 Context Engineering: One Order of Magnitude Larger Than Prompt
  4. E.4 Harness Engineering: Reliability Engineering
  5. E.5 Evals: AI System Testing
  6. E.6 swyx’s IMPACT Framework
  7. E.7 Harness Debt: A New Form of Technical Debt
  8. E.8 Summary: Three Layers of Engineering Practice
  9. Further Reading

Appendix F: Emerging AI Engineering Trends (2025–2026)

  1. F.1 OpenClaw: The Viral Rise of Personal Agents
  2. F.2 The Expansion of the MCP Protocol Stack
  3. F.3 MoE: The Architecture Revolution Reshaping Model Selection
  4. F.4 Relationship to Content Already in This Book
  5. F.5 Recommendations for Readers
  6. Further Reading

About the Authors

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $15 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub