book

Build AI-Enhanced Web Apps

Name: Build AI-Enhanced Web Apps
Author: Theo Despoudis
ISBN: 9781633436084

by Theo Despoudis

February 2026

Intermediate to advanced

392 pages

11h 40m

English

Manning Publications

Read now

Unlock full access

Build AI-Enhanced Web Apps
copyright
contents
preface
acknowledgments
about this book
about the author
about the cover illustration
Part 1 Building basic generative AI web apps
1 Using generative AI in web apps
1.1 What generative AI can do for web applications1.1.1 Generative AI capabilities1.1.2 Real-world uses of generative AI1.2 How a generative AI web app works1.2.1 Core components1.2.2 The flow of user interactions1.3 AI tools and the ecosystem1.4 Choosing the right model1.4.1 Model types1.4.2 Pretrained vs. self-hosted1.4.3 Performance considerations1.5 Generative vs. traditional AI1.6 Handling the concerns and implications of generative AI1.6.1 What are the limitations of generative AI?1.6.2 Will developers lose jobs because of AI?1.6.3 Are generative AI outputs reliable?

2 Building your first generative AI web application
2.1 Introducing Astra2.2 Project goal and requirements2.2.1 Goal: Build a simple interactive AI chat interface2.2.2 Project and technology requirements2.2.3 Setting up2.2.4 Running the project2.3 Under the hood: The generative AI lifecycle2.4 Designing for a better user experience2.5 Building the major components2.5.1 Frontend2.5.2 Autoscroll2.5.3 ChatPage2.5.4 ChatList2.5.5 The backend: Handling API communication2.5.6 Tests2.5.7 Common challenges and solutions2.6 Assessing the app’s first iteration2.7 Migrating the app to Next.js2.7.1 Setting up2.7.2 Running the project2.8 Routing and configuration on Next.js2.8.1 File-based routing2.8.2 Configuration2.8.3 Environment variables in Next.js2.8.4 Route groups2.8.5 Layout components2.8.6 Route API handlers2.8.7 Going deeper with Next.js
3 Connecting AI models with the Vercel AI SDK
3.1 Introducing the Vercel AI SDK3.1.1 Key features and benefits3.1.2 A strategic approach to integration3.1.3 Practical integration: The Vercel AI SDK with Astra AI3.2 Handling streaming responses with the Vercel AI SDK3.2.1 Challenges and how the SDK solves streaming in web applications3.2.2 Implementing streaming with the Vercel AI SDK3.2.3 Integrating streaming into Astra AI3.3 Working with multiple AI providers3.3.1 Handling different AI providers and models3.3.2 Using the Vercel AI SDK’s interoperability3.3.3 Astra AI project: Integrating multiple AI providers and models3.4 Enhancing conversational UIs with multimedia content3.4.1 Introducing OpenAI’s vision capabilities3.4.2 Astra AI project: Integrating Gemini vision queries
4 Managing conversation and state in your application
4.1 AI SDK React server components4.1.1 Overview of RSCs4.1.2 Using server actions for AI-powered RSCs4.1.3 Updating the UI to use server actions4.1.4 Techniques for generating and streaming UI components4.1.5 Creating streamable UI components from LLM providers with streamUI4.1.6 Streaming React components with createStreamableUI4.2 Managing UI state in AI-powered applications4.2.1 Separating AI and UI state in React/Next.js applications4.2.2 Key components for UI state management4.2.3 Implementing UI state management patterns4.3 Structured data generation using the Vercel AI SDK4.3.1 How structured data generation works4.3.2 Techniques for generating structured data from AI responses4.3.3 Tools for implementing type-safe AI-generated content4.3.4 Integrating structured data generation into our web application4.4 Tool and function calling with AI models4.4.1 Understanding tool calling and function calling in AI models4.4.2 Implementing custom tools and functions with the Vercel AI SDK
Part 2 Advanced generative AI techniques and deployment
5 Prompt engineering in web applications
5.1 Introducing prompt engineering5.1.1 What exactly are prompts?5.1.2 Prompt types5.1.3 Organizing your prompts: Versioning, testing, and optimization5.2 Few-shot learning5.2.1 Examples of few-shot learning5.2.2 General methodology for creating few-shot learning prompts5.3 Chain-of-thought prompting: A deeper dive into reasoning5.3.1 Example of chain-of-thought prompting5.3.2 General methodology for creating chain-of-thought prompts5.4 Embeddings: Giving AI a sense of meaning5.4.1 The restaurant menu analogy: A taste of embeddings5.4.2 Using embeddings in practice: The Vercel AI SDK5.4.3 Use case: IT support knowledge base5.5 Going deeper into LLM techniques5.5.1 Tree of thoughts5.5.2 Self-refine5.5.3 LLM-as-a-judge
6 Building AI workflows with LangChain.js
6.1 Introducing LangChain6.1.1 Chaining calls with LangChain6.1.2 Integration with the Vercel AI SDK6.2 Preparing and storing documents for retrieval using LangChain6.2.1 Document ingestion using text splitters6.2.2 Introducing vector stores6.2.3 Document retrieval6.2.4 Full example of preparing and storing documents with LangChain6.3 Using memory components in LangChain to remember conversation history6.4 Utilizing agents in LangChain.js6.4.1 How LangChain agents work6.4.2 Creating an agent using LangChain.js6.4.3 Agent integration with the Vercel AI SDK6.4.4 Overview of LangChain.js modules6.5 Going deeper with LangChain.js6.5.1 LangChain Expression Language6.5.2 LangGraph
7 Document summarization and RAG with LangChain.js
7.1 Building a document summarization web application with LangChain.js7.1.1 Summarization app project requirements7.1.2 Architecture and workflow7.1.3 Building the document summarization web application7.1.4 Caveats and limitations of document summarization7.1.5 Demonstrating the app7.1.6 Additional considerations for summarizing documents7.2 Building a RAG web application with LangChain.js7.2.1 RAG app project requirements7.2.2 Key architectural components of RAG7.2.3 Technical architecture overview7.2.4 RAG system components7.2.5 Web app demonstration7.2.6 Adding grounding support
8 Testing and debugging techniques
8.1 Debugging Next.js AI applications8.1.1 Debugging common Next.js rendering Issues8.1.2 Debugging client–server problems8.1.3 Handling state management8.1.4 Performance monitoring8.2 Vercel AI SDK troubleshooting8.2.1 Handling error states in AI-generated content8.2.2 Managing token limits and rate limiting8.3 Troubleshooting LangChain.js8.3.1 Chain execution errors8.3.2 Troubleshooting model integration problems8.4 Testing strategies for AI applications8.4.1 Unit and integration testing in React and Next.js8.4.2 Mocking LLM responses8.4.3 Testing Vercel AI SDK responses8.4.4 Testing LangChain.js
9 Deployment and security
9.1 Building a secure foundation with input validation, rate limits, and middleware9.1.1 Input validation9.1.2 Security middleware layer9.2 Building a core security and data protection pipeline9.3 Setting up authentication and authorization9.3.1 Simple authentication with Clerk.js and Next.js9.3.2 Practical security control: Rate limiting9.4 API key and secrets management9.4.1 Understanding Next.js environment variables9.4.2 Application-level API keys9.4.3 User-provided API keys9.5 Data protection and compliance9.5.1 Example: Adding anonymization to our chat messages9.6 Deployment considerations for AI web applications9.6.1 Deployment options9.6.2 Production deployment checklist9.6.3 Example deployment to Vercel9.6.4 Alternative deployments: Netlify9.6.5 Alternative deployments: Hugging Face Spaces9.6.6 Next steps
Part 3 Hands-on projects
10 Building an AI interview assistant: Project walk-through
10.1 Overview of the application10.1.1 Key features10.1.2 Technical implementation10.1.3 Technology stack overview10.2 Security measures implemented10.3 Challenges during development10.3.1 State management considerations10.3.2 Text-to-speech integration10.3.3 Generating feedback10.4 Additional considerations and improvements
11 Building an AI RAG agent: Project walk-through
11.1 Overview of the application11.1.1 Key features11.1.2 Technical implementation11.1.3 Technology stack overview11.2 Challenges during development11.2.1 Shared vs. dedicated user data in vector stores11.2.2 Security considerations around document management and heavy workloads11.2.3 API design and URL structure to minimize information exposure11.3 Additional thoughts on AI and the future of web development
Part 4 Advanced integrations and the future of AI
12 Integrating web apps with the Model Context Protocol
12.1 Why the MCP matters for AI integration12.2 MCP architecture12.3 Connecting Next.js and the Vercel AI SDK with the MCP12.3.1 Architecture overview12.3.2 Building an end-to-end integration with the MCP in Next.js12.3.3 Benefits of using the MCP for web applications with LLMs12.4 Inside an MCP server: Extending web applications12.4.1 MCP server structure12.4.2 Additional considerations for MCP servers12.5 Integrating MCP servers with LangChain.js12.5.1 Architecture overview12.5.2 Building an end-to-end integration with LangChain.js12.6 The future of the MCP: Gateways, directories, and MCP-as-a-service12.6.1 MCP gateways12.6.2 MCP-as-a-service12.6.3 MCP directories and registries12.7 Your next steps with MCP servers
Appendix. Running the examples
A.1 Running examplesA.2 Accessing OpenAI APIsA.3 Accessing Google AI APIsA.4 Accessing the Upstash Redis databaseA.5 Integrating Clerk.js authentication

Content preview from Build AI-Enhanced Web Apps

8 Testing and debugging techniques

This chapter covers

Debugging methods for identifying problems in Next.js applications
Troubleshooting the Vercel AI SDK
Debugging techniques in LangChain.js
Mocking frameworks that allow for controlled testing environments
Best practices for integrating testing and testing strategies for AI web applications

Writing reliable software is a tricky business. There are a lot of intricacies to consider, and it is especially easy to make mistakes if you are not familiar with the technologies you are using. Take the technologies we have discussed in this book: each one of them is a potential candidate for error. With Next.js, for example, the use of server components requires developers to change some of their ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

RESTful Web API Patterns and Practices Cookbook

Publisher Resources

ISBN: 9781633436084Publisher Support Other Publisher Website Purchase Link

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Build AI-Enhanced Web Apps

by Theo Despoudis