Build AI-Enhanced Web Apps How to get reliable results with React, Next.js, and Vercel (Theo Despoudis) (z-library.sk, 1lib.sk, z-lib.sk)

📄 File Format: PDF

💾 File Size: 36.2 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

M A N N I N G Theo Despoudis How to get reliable results with React, Next.js, and Vercel

📄 Page 2

Using key technologies to create generative AI web applications User React (UI components) Next.js (frontend and backend) Vercel AI SDK (connects UI to AI providers) LangChain.js (LLM app framework, RAG, agents) LLMs and AI models (e.g., OpenAI, Google Gemini–Default) External AI providers Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 3

Build AI-Enhanced Web Apps Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 4

Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 5

MANN I NG Shelter ISland Theo Despoudis Build AI-Enhanced Web Apps How to get reliable results with React, Next.js, and Vercel Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 6

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com © 2026 Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid- free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. ∞ Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 ISBN 9781633436084 Printed in the United States of America The author and publisher have made every effort to ensure that the information in this book was correct at press time. The author and publisher do not assume and hereby disclaim any liability to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from negligence, accident, or any other cause, or from any usage of the information herein. Development editor: Frances Lefkowitz Technical editor: Anirudh Vijay Prabhu Review editor: Kishor Rit Production editor: Keri Hales Copy editor: Kari Lucke Proofreader: Katie Tennant Technical proofreader: Doug Warren Typesetter: Tamara ŠveliÊ SabljiÊ Cover designer: Marija Tudor Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 7

v brief contents Part 1 Building basic generative AI web apps .....................1 1 ■ Using generative AI in web apps 3 2 ■ Building your first generative AI web application 19 3 ■ Connecting AI models with the Vercel AI SDK 54 4 ■ Managing conversation and state in your application 88 Part 2 Advanced generative AI techniques and deployment .............................................................. 127 5 ■ Prompt engineering in web applications 129 6 ■ Building AI workflows with LangChain.js 166 7 ■ Document summarization and RAG with LangChain.js 197 8 ■ Testing and debugging techniques 232 9 ■ Deployment and security 268 Part 3 Hands-on projects ................................................... 303 10 ■ Building an AI interview assistant: Project walk-through 305 11 ■ Building an AI RAG agent: Project walk-through 317 Part 4 Advanced integrations and the future of AI ...... 329 12 ■ Integrating web apps with the Model Context Protocol 331 appendix ■ Running the examples 353 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 8

vi contents preface xiii acknowledgments xiv about this book xvi about the author xix about the cover illustration xx Part 1 Building basic generative AI web apps ......1 1 Using generative AI in web apps 3 1.1 What generative AI can do for web applications 4 Generative AI capabilities 4  ■  Real-world uses of generative AI 5 1.2 How a generative AI web app works 6 Core components 6  ■  The flow of user interactions 8 1.3 AI tools and the ecosystem 9 1.4 Choosing the right model 12 Model types 12  ■  Pretrained vs. self-hosted 13 Performance considerations 13 1.5 Generative vs. traditional AI 13 1.6 Handling the concerns and implications of generative AI 15 What are the limitations of generative AI? 15  ■  Will developers lose jobs because of AI? 16  ■  Are generative AI outputs reliable? 16 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 9

viicontents 2 Building your first generative AI web application 19 2.1 Introducing Astra 20 2.2 Project goal and requirements 21 Goal: Build a simple interactive AI chat interface 21 Project and technology requirements 22  ■  Setting up 23 Running the project 24 2.3 Under the hood: The generative AI lifecycle 26 2.4 Designing for a better user experience 26 2.5 Building the major components 28 Frontend 28  ■  Autoscroll 29vChatPage 32  ■  ChatList 32 The backend: Handling API communication 37  ■  Tests 41 Common challenges and solutions 42 2.6 Assessing the app’s first iteration 42 2.7 Migrating the app to Next.js 43 Setting up 44  ■  Running the project 44 2.8 Routing and configuration on Next.js 45 File-based routing 45  ■  Configuration 46 Environment variables in Next.js 47  ■  Route groups 47  ■  Layout components 48  ■  Route API handlers 50  ■  Going deeper with Next.js 51 3 Connecting AI models with the Vercel AI SDK 54 3.1 Introducing the Vercel AI SDK 55 Key features and benefits 55  ■  A strategic approach to integration 56  ■  Practical integration: The Vercel AI SDK with Astra AI 58 3.2 Handling streaming responses with the Vercel AI SDK 61 Challenges and how the SDK solves streaming in web applications 62  ■  Implementing streaming with the Vercel AI SDK 65  ■  Integrating streaming into Astra AI 69 3.3 Working with multiple AI providers 72 Handling different AI providers and models 72  ■  Using the Vercel AI SDK’s interoperability 73  ■  Astra AI project: Integrating multiple AI providers and models 76 3.4 Enhancing conversational UIs with multimedia content 79 Introducing OpenAI’s vision capabilities 80  ■  Astra AI project: Integrating Gemini vision queries 83 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 10

viii contents 4 Managing conversation and state in your application 88 4.1 AI SDK React server components 90 Overview of RSCs 90  ■  Using server actions for AI-powered RSCs 92  ■  Updating the UI to use server actions 96 Techniques for generating and streaming UI components 98 Creating streamable UI components from LLM providers with streamUI 99  ■  Streaming React components with createStreamableUI 101 4.2 Managing UI state in AI-powered applications 103 Separating AI and UI state in React/Next.js applications 103 Key components for UI state management 105 Implementing UI state management patterns 108 4.3 Structured data generation using the Vercel AI SDK 113 How structured data generation works 113  ■  Techniques for generating structured data from AI responses 114 Tools for implementing type-safe AI-generated content 115 Integrating structured data generation into our web application 117 4.4 Tool and function calling with AI models 121 Understanding tool calling and function calling in AI models 121 Implementing custom tools and functions with the Vercel AI SDK 123 Part 2 Advanced generative AI techniques and deployment ........................................ 127 5 Prompt engineering in web applications 129 5.1 Introducing prompt engineering 131 What exactly are prompts? 132  ■  Prompt types 137 Organizing your prompts: Versioning, testing, and optimization 139 5.2 Few-shot learning 146 Examples of few-shot learning 147  ■  General methodology for creating few-shot learning prompts 150 5.3 Chain-of-thought prompting: A deeper dive into reasoning 151 Example of chain-of-thought prompting 151  ■  General methodology for creating chain-of-thought prompts 152 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 11

ixcontents 5.4 Embeddings: Giving AI a sense of meaning 154 The restaurant menu analogy: A taste of embeddings 154 Using embeddings in practice: The Vercel AI SDK 158 Use case: IT support knowledge base 161 5.5 Going deeper into LLM techniques 164 Tree of thoughts 164  ■  Self-refine 164  ■  LLM-as-a-judge 164 6 Building AI workflows with LangChain.js 166 6.1 Introducing LangChain 167 Chaining calls with LangChain 168  ■  Integration with the Vercel AI SDK 173 6.2 Preparing and storing documents for retrieval using LangChain 178 Document ingestion using text splitters 180  ■  Introducing vector stores 181  ■  Document retrieval 182  ■  Full example of preparing and storing documents with LangChain 184 6.3 Using memory components in LangChain to remember conversation history 185 6.4 Utilizing agents in LangChain.js 188 How LangChain agents work 189  ■  Creating an agent using LangChain.js 190  ■  Agent integration with the Vercel AI SDK 192  ■  Overview of LangChain.js modules 194 6.5 Going deeper with LangChain.js 194 LangChain Expression Language 194  ■  LangGraph 195 7 Document summarization and RAG with LangChain.js 197 7.1 Building a document summarization web application with LangChain.js 198 Summarization app project requirements 198  ■  Architecture and workflow 198  ■  Building the document summarization web application 202  ■  Caveats and limitations of document summarization 205  ■  Demonstrating the app 208 Additional considerations for summarizing documents 212 7.2 Building a RAG web application with LangChain.js 216 RAG app project requirements 216  ■  Key architectural components of RAG 217  ■  Technical architecture overview 218 RAG system components 219  ■  Web app demonstration 223 Adding grounding support 225 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 12

x contents 8 Testing and debugging techniques 232 8.1 Debugging Next.js AI applications 233 Debugging common Next.js rendering Issues 233  ■  Debugging client–server problems 237  ■  Handling state management 238 Performance monitoring 239 8.2 Vercel AI SDK troubleshooting 241 Handling error states in AI-generated content 242 Managing token limits and rate limiting 246 8.3 Troubleshooting LangChain.js 250 Chain execution errors 251  ■  Troubleshooting model integration problems 254 8.4 Testing strategies for AI applications 256 Unit and integration testing in React and Next.js 256 Mocking LLM responses 258  ■  Testing Vercel AI SDK responses 260  ■  Testing LangChain.js 264 9 Deployment and security 268 9.1 Building a secure foundation with input validation, rate limits, and middleware 269 Input validation 270  ■  Security middleware layer 273 9.2 Building a core security and data protection pipeline 275 9.3 Setting up authentication and authorization 275 Simple authentication with Clerk.js and Next.js 277 Practical security control: Rate limiting 280 9.4 API key and secrets management 285 Understanding Next.js environment variables 285 Application-level API keys 286  ■  User-provided API keys 286 9.5 Data protection and compliance 288 Example: Adding anonymization to our chat messages 288 9.6 Deployment considerations for AI web applications 291 Deployment options 291  ■  Production deployment checklist 292 Example deployment to Vercel 294  ■  Alternative deployments: Netlify 299  ■  Alternative deployments: Hugging Face Spaces 300  ■  Next steps 300 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 13

xicontents Part 3 Hands-on projects .................................... 303 10 Building an AI interview assistant: Project walk-through 305 10.1 Overview of the application 306 Key features 306  ■  Technical implementation 311 Technology stack overview 311 10.2 Security measures implemented 313 10.3 Challenges during development 313 State management considerations 313  ■  Text-to-speech integration 314  ■  Generating feedback 314 10.4 Additional considerations and improvements 315 11 Building an AI RAG agent: Project walk-through 317 11.1 Overview of the application 318 Key features 318  ■  Technical implementation 322 Technology stack overview 322 11.2 Challenges during development 325 Shared vs. dedicated user data in vector stores 325 Security considerations around document management and heavy workloads 325  ■  API design and URL structure to minimize information exposure 326 11.3 Additional thoughts on AI and the future of web development 327 Part 4 Advanced integrations and the future of AI ............................................... 329 12 Integrating web apps with the Model Context Protocol 331 12.1 Why the MCP matters for AI integration 332 12.2 MCP architecture 333 12.3 Connecting Next.js and the Vercel AI SDK with the MCP 334 Architecture overview 335  ■  Building an end-to-end integration with the MCP in Next.js 336  ■  Benefits of using the MCP for web applications with LLMs 340 12.4 Inside an MCP server: Extending web applications 341 MCP server structure 342  ■  Additional considerations for MCP servers 345 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 14

xii contents 12.5 Integrating MCP servers with LangChain.js 345 Architecture overview 346  ■  Building an end-to-end integration with LangChain.js 347 12.6 The future of the MCP: Gateways, directories, and MCP-as-a- service 349 MCP gateways 349  ■  MCP-as-a-service 350 MCP directories and registries 351 12.7 Your next steps with MCP servers 352 appendix Running the examples 353 index 361 Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 15

xiii preface Machine learning, AI, large language models (LLMs), and generative AI are technol- ogies that have fundamentally reshaped our digital landscape, opening up new ave- nues for innovation. Their primary appeal lies in their ability to facilitate multimodal interactions—combining text, images, and videos—between humans and machines in a remarkably natural way. It’s as simple and intuitive as asking a friend or colleague for help. These applications are no longer confined to science fiction; they’re gaining new practical uses every day as technological advancements make them increasingly accu- rate and lifelike. As a seasoned software engineer deeply involved in building AI-powered products and supporting headless WordPress solutions on Next.js and React, I’ve had a front-row seat to this transformation. The imminent access to a plethora of open source tools and initiatives, coupled with the sheer accessibility of LLMs and related AI services, sparked an idea: to bridge the gap for web developers eager to harness this technology without needing a deep dive into machine learning theory or Python. This book was born from a clear vision: AI and its applications are powerful new tools that every developer must be able to use to deliver exceptional value to their users and customers. It’s designed primarily as a practical guide, but I’ve also placed a strong emphasis on explaining the core concepts behind building full-stack generative web applications. I’ve specifically chosen JavaScript, Next.js, Vercel, and LangChain.js because they form a powerful, accessible, and incredibly relevant stack for creating generative AI experiences today. My hope is that this book will become your essential companion, making your journey into building AI-driven web applications both enjoyable and pro- foundly educational. Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 16

xiv acknowledgments Writing a book is a serious undertaking, demanding a significant investment of per- sonal time and effort. Yet, it’s a journey we embark on for a greater good, embodying the spirit that “sharing is caring.” This endeavor wouldn’t be possible without a strong support network, countless late nights, and an unwavering willingness to persevere. I am immensely grateful to the team at Manning Publications. I thank Andy Waldron, my acquisitions editor, and Brian Sawyer, my former acquisitions editor, for believing in this book’s concept from the very beginning and for their invaluable guidance, and Frances Lefkowitz, my development editor, for her insightful feedback and relentless commitment to shaping this manuscript. My thanks also go to Ana Romac and Aira Dučić for their support in marketing efforts. And to the entire production team, includ- ing the copy editors, proofreaders, and all those behind the scenes who polished this book into its final form: your meticulous work is truly appreciated. Thanks also go to my technical editor, Anirudh Prabhu, and technical proofreader, Doug Warren, who painstakingly read through the drafts, providing invaluable feed- back that significantly enhanced the accuracy and clarity of this book. Their expertise was critical in refining the content and ensuring its practical relevance. A special thank you goes to Ivan Martinović and all the other technical reviewers: Aayush Bhutani, Aditi Choudhary, Akshatha Anantharamu, An Nad, Andreas Berg- gren, Anujkumarsinh Donvir, Anurag Lahon, Arpankumar Patel, Asaad Saad, Ayisha Tabbassum, Bruno Ricardo Santos, Bruno Sonnino, Charlie Gaines, Christopher G. Fry, David Tarvin, Dhruv Kumar Seth, Dinesh Besiahgari, Foster Haines, Gavin Baumanis, Giovanni Costagliola, Giuseppe De Marco, Gustavo Meza De Lama, Guy Batton, Han- iel Lopez, Heather Weaver, Ian Lovell, Iman L Hakim, Isabel Rapando, Iyabo Sindiku, James Liu, Jared Duncan, Jeff Martinez, Jereme Allen, John Bortins, Kalyanasundharam Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 17

xvacknowledgments Ramachandran, Karl-Gustav Kallasmaa, Karthikeyarajan Rajendran, Kaushik Dutt, Lei Zhao, Madhu Chavva, Manas Talukdar, Max Sadrieh, Maytham Fahmi, Mian Shah, Mohit Menghnani, Naga Rishyendar Panguluri, Naga Santhosh Reddy Vootukuri, Naveen Achyuta, Nicolas Bievre, Olena Sokol, Onofrei George, Panagiotis Matsin- opoulos, Pradeep Kumar Saraswathi, Prasann Pradeep Patil, Prashanth Lakshmi Narayana Chaitanya Josyula, Rashan Smith, Robert Diana, Rod Weis, Ruben Gonzalez- Rubio, Sathya Narayanan Annamalai Geetha, Saurabh Aggarwal, Serhii Onishchenko, Sharmila Devi Chandariah, Simon Verhoeven, Sonu Kapoor, Sophia Willows, Sridhar Rao Muthineni, Swati Tyagi, Thomas Forys, Victor Jones, Vinod Veeramachaneni, and Zeeshan Chawdhary. Your comments helped make this a better book. Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 18

xvi about this book The primary goal of this book is to empower web developers to build dynamic and intelligent websites and applications that use the full potential of large language mod- els and other generative AI capabilities. I aim to equip you with the practical tools and techniques necessary to integrate sophisticated AI features—such as retrieval- augmented generation (RAG), document summarization, and interactive chatbots— directly into your web-based projects, all within the familiar JavaScript ecosystem. You’ll also get a tutorial on interacting with the Model Context Protocol to seamlessly extend capabilities beyond what we build ourselves. Who should read this book This book is tailored for frontend developers and full-stack web developers who are comfortable with React and Next.js. If you have a basic proficiency in these technolo- gies and are looking to incorporate cutting-edge AI functionalities into your web appli- cations, this book is for you. No prior experience with Python or machine learning is required; we focus entirely on JavaScript and other tools common to web develop- ers. A basic awareness of generative AI concepts and prior experience using tools like ChatGPT or similar interfaces will be beneficial, but the foundational chapters will get you up to speed. How this book is organized: A road map This book is divided into 4 parts spanning 12 chapters, designed to progressively build your expertise in full-stack generative AI application development. ¡ Part 1: Building basic generative AI web apps (chapters 1–4) lays the essential groundwork. I begin by defining what generative AI web applications are, their Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 19

xviiabout this book key components, and recent developments. I then guide you through getting started with React and Next.js for AI applications, followed by a deep dive into the Vercel AI SDK for handling streaming responses, working with multiple AI providers, and managing state with React server components. ¡ Part 2: Advanced generative AI techniques and deployment (chapters 5–9) moves into more sophisticated methods and crucial deployment considera- tions. You’ll master prompt engineering techniques; learn to use LangChain.js for complex AI workflows and agents; and understand the intricacies of testing, debugging, and securing your generative AI applications for production. ¡ Part 3: Hands-on projects (chapters 10–11) puts everything into perspective through comprehensive project explorations. I provide full codebases for an AI interview assistant and an AI RAG agent and then dissect their features, architec- tural decisions, and critical development considerations. ¡ Part 4: Advanced integrations and the future of AI (chapter 12) moves beyond current best practices to look at what’s next. This part is dedicated to the Model Context Protocol, an emerging standard designed to create more seamless, secure, and interoperable connections between your applications and various AI models. While the book is structured for a linear read to build knowledge sequentially, experi- enced developers might choose to focus on specific chapters within parts 2 and 3 that align with their immediate interests after completing part 1. The projects in part 3 serve as excellent consolidation exercises and practical references. About the code This book contains many examples of source code both in numbered listings and in line with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes code is also in bold to highlight code that has changed from previous steps in the chapter, such as when a new feature adds to an existing line of code. In many cases, the original source code has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In some cases, even this was not enough, and listings include line-continuation markers (➥). Additionally, comments in the source code have often been removed from the list- ings when the code is described in the text. Code annotations accompany many of the listings, highlighting important concepts. You can get executable snippets of code from the liveBook (online) version of this book at https://livebook.manning.com/book/build-ai-enhanced-web-apps. The com- plete code for the examples in the book is available for download from the Manning website at https://www.manning.com/books/build-ai-enhanced-web-apps, and from GitHub at https://github.com/Generative-AI-Web-Apps/Code. Full details for running the examples are in the appendix. To run the code examples and projects in this book, you will need Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>

📄 Page 20

xviii about this book ¡ Node.js—Version 18 or higher. ¡ npm or Yarn—For managing project dependencies. ¡ Text editor—Such as VS code. ¡ Web browser—Latest versions of Chrome, Firefox, Safari, or Edge. ¡ API keys—For various AI providers (e.g., OpenAI, Google Gemini), as demon- strated in the examples. Some examples may require paid API access for full functionality. liveBook discussion forum Purchase of Build AI-Enhanced Web Apps includes free access to liveBook, Manning’s online reading platform. Using liveBook’s exclusive discussion features, you can attach comments to the book globally or to specific sections or paragraphs. It’s a snap to make notes for yourself, ask and answer technical questions, and receive help from the author and other users. To access the forum, go to https://livebook.manning.com/ book/build-ai-enhanced-web-apps/discussion. Manning’s commitment to our readers is to provide a venue where a meaningful dia- logue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray! The forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print. Licensed to Ibrahim Mohammed Mohammed <ibrahim@dotnetebusiness.com>