liveBookmanning.com

What you will learn in Build AI-Enhanced Web Apps

How to get reliable results with React, Next.js, and Vercel

by Theo Despoudis

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• Vercel AI SDKVercel AI SDK is a software development library that provides utilities and components for integrating AI capabilities into web applications.
• similarity searchRetrieval is the process of locating and obtaining relevant information from a stored collection or data source.
• pipelineA workflow is an ordered set of connected tasks or operations that accomplishes a broader process.
• LangChainLangChain is a software framework, including its JavaScript implementation, for composing applications that use language models, tools, retrieval, and multi-step chains.
• language modelA large language model is a machine-learning model trained on large amounts of text to understand and generate natural-language content.
• streamingStreaming behavior is the incremental delivery or processing of output as portions become available.
• embeddingA vector is an ordered collection of numerical values representing a point, direction, or feature set in a mathematical space.
• promptA basic text prompt is a single string containing instructions or questions for an AI model.
• Next.jsNext.js is a React-based framework for building production web applications with features such as routing, rendering, and server-side capabilities.
• rate limitThrottling is the deliberate reduction or control of request processing or resource consumption to prevent overload.
• retrieval-augmented generationRetrieval-augmented grounding is a grounding technique that retrieves relevant external information and incorporates it into response generation.
• natural language interfaceA conversational interface is a user interface that enables interaction through natural-language dialogue.
• MCP serverAn MCP server is a server-side program that implements the Model Context Protocol and exposes tools, prompts, and resources to clients or AI applications.
• mockingMocking is the replacement of a real dependency or external response with a controlled test double.
• testTesting is the systematic evaluation of software behavior to detect defects and verify that it meets its intended requirements.
• validationValidation is the checking of input against permitted formats, values, or constraints before it is accepted or processed.
• token limitA max token limit is the maximum number of input and output tokens that a language model can process in one interaction.
• generative modelingGenerative AI is an artificial-intelligence paradigm that generates new content from learned patterns rather than only classifying inputs or following predefined rules.
• securityProtection of generative AI capabilities, application resources, and their outputs against unauthorized access, malicious misuse, and harmful exploitation.
• templateA prompt template is a reusable specification for constructing prompts by inserting variable inputs and, optionally, example instructions.
• summarizationText summarization is the generation of a shorter representation that preserves the important information in source text.
• Clerk.jsClerk is an identity platform and JavaScript integration service that provides user authentication, onboarding, account management, and identity data for applications.
• authenticationThe process of verifying the identity of a user, application, or other requesting entity.
• monitoringLogging is the recording of runtime events and values to support software observation, diagnosis, and debugging.
• MCPA standardized protocol for connecting AI applications and agents with externally provided tools, prompts, resources, and data sources.
• toolA tool is an externally invocable software capability that an AI workflow can call to perform an operation or obtain information.
• endpointA network-accessible interface address through which an application receives requests for a particular operation or resource.
• AI agentAn AI agent is a software agent that uses artificial intelligence to perceive inputs, make decisions, and produce actions toward a task.
• vectorizationVectorization is the transformation of content or features into numerical vector representations for computational processing.
• deploymentDeployment is the process of making an application or service available to run in an operational environment.
• text chunkChunking is the division of a document or text stream into smaller units for processing or analysis.
• React Server ComponentsA React server component is a component that renders on the server and can provide its rendered result to the client without requiring all component logic to run in the browser.
• dialogueAn ordered record of messages exchanged during a conversation with a user or conversational system.
• createAIcreateAI is a Vercel AI SDK function that creates an application-wide context for coordinating AI state, UI state, and server actions.
• stateMutable information representing the current conditions and accumulated information of an application or workflow.
• conversational aiAI technology that supports interactive, dialogue-based communication with users.
• AI providerA service provider that exposes artificial-intelligence models or capabilities through an API or related interface.
• state managementState management is the organization, storage, and updating of application state over time.
• environment variableA named configuration value supplied to a process through its execution environment rather than hard-coded application source.
• ReActReAct is an agentic reasoning technique in which a language model interleaves reasoning about a task with actions that gather information or affect an environment.
• server actionA server action is a framework-supported operation that invokes server-side code directly from an application without requiring an explicit API endpoint.
• vector databaseA vector store is a database or storage abstraction that indexes high-dimensional vectors for efficient similarity-based retrieval.
• ai stateApplication state representing information available to or maintained for an AI system, including conversational context and model-related data.
• cosine similarityCosine similarity is a metric that measures the cosine of the angle between two vectors, with larger values indicating greater directional similarity.
• few-shot learningFew-shot learning is a technique in which a model performs or adapts to a task by inferring the desired behavior from a small number of examples.
• streamTextstreamText is a Vercel AI SDK function that generates text from a model and makes the result available incrementally as a stream.
• cachingThe technique of storing computed or retrieved data temporarily so that later requests can return it without repeating the original work.
• language model specificationA language model specification is a standardized interface specification for interacting with language models across different providers.
• useChatuseChat is a Vercel AI SDK React hook that manages conversational messages, input state, submissions, and streamed responses.
• mcp clientA client that implements the Model Context Protocol to discover and invoke capabilities exposed by an MCP server on behalf of an application or agent.
• authorizationAuthorization is the process of determining which authenticated users or principals are permitted to access resources or perform actions.
• streamUIstreamUI is a Vercel AI SDK function that generates and incrementally streams user-interface components from language-model responses.
• createStreamableUIcreateStreamableUI is a Vercel AI SDK helper function that creates a streamable user-interface value whose contents can be updated incrementally.
• deployment pipelineAn automated software delivery workflow that integrates code changes and continuously builds, tests, and deploys them.
• ZodA Zod schema is a declarative specification of the structure and constraints that data must satisfy, represented using the Zod library.
• prompt versionPrompt versioning is the practice of maintaining identifiable revisions of prompts so their changes and behavior can be tracked.
• prompt managementPrompt management is the organized storage, updating, versioning, and governance of prompts used by an AI application.
• scalabilityScalability is the ability of a system to maintain acceptable operation as workload, data volume, or user demand increases.
• token countToken usage is the quantity of input and output tokens consumed by a language-model interaction.
• Runnable interfaceA runnable is a composable LangChain unit of work that accepts input, performs processing, and produces output, with support for invocation, batching, and streaming.
• client componentA React component whose logic is executed in the browser and can respond directly to client-side interaction.
• streamable UI componentA streamable UI is a React UI representation whose content can be incrementally replaced, appended, completed, or replaced with an error state.
• chain-of-thought promptingA prompting technique that guides a language model through a single sequential reasoning path.
• integration testIntegration testing evaluates interactions and data exchange among multiple software components, application boundaries, or external services.
• Upstash RedisUpstash Redis is a hosted Redis-compatible data store provided as a low-latency serverless service.
• privacyData privacy is the protection and proper governance of information about identifiable people, including how it is collected, stored, processed, and deleted.
• structured dataStructured data is data organized according to an explicit schema or predictable structure that enables machine processing.
• web applicationA web application is software that runs through web technologies and is accessed via a web browser or web-based interface.
• groundingGrounding is the technique of checking generated information against a reliable external corpus to improve factual accuracy.
• getMutableAIStategetMutableAIState is a Vercel AI SDK server-side function that retrieves and updates the mutable AI state associated with a request or conversation.
• useActionsA Vercel AI SDK hook that provides access to server actions from client-side components within a createAI context.
• useAIStateuseAIState is a Vercel AI SDK React hook that provides access to AI state defined in an AI context.
• useUIStateA Vercel AI SDK React hook that provides access to and updates UI state associated with an AI state provider.
• API keyA user-provided API key is an API credential supplied by an individual user for requests made on that user's behalf.
• VercelA cloud platform for deploying and operating web applications, especially applications built with modern JavaScript frameworks.
• knowledge baseA knowledge base is an organized collection of information representing questions, answers, facts, or other domain knowledge.
• generateTextgenerateText is a Vercel AI SDK function that returns a complete generated-text response rather than an incremental stream.
• prompt engineeringPrompt engineering is the design and refinement of instructions and contextual information supplied to an AI model to guide its outputs.
• tool usageTool calling is a technique in which an AI model emits a structured request for an external tool or function, receives the execution result, and incorporates it into its response.
• context windowA context window is the maximum amount of tokenized input and generated content a language model can process in one interaction.
• web application firewallA security system that filters and controls HTTP traffic to protect web applications from malicious requests.
• retryRetrying failed requests is a technique that resubmits a request after a temporary failure, subject to a configured attempt limit.
• structured data generationThe generation of machine-readable values organized according to a defined structure or schema rather than returned as unstructured text.
• MapReduceMapReduce is a multistage processing technique that independently transforms partitions of input and then combines the intermediate results.
• tokenizationTokenization is the conversion of text or other input into a sequence of tokens or numerical token identifiers.
• anonymizationAnonymization is the irreversible alteration or removal of identifying information so that individuals cannot reasonably be identified from the resulting data.
• generationThe production of natural-language text by a computational model from an input or context.
• parsingDocument parsing is the extraction and structural interpretation of content from files such as PDFs or DOCX documents.
• special tokenA control token is a reserved token that marks boundaries or conveys instructions about the structure, behavior, or formatting of a language-model sequence.
• generateObjectgenerateObject is a Vercel AI SDK function that generates a validated, typed object from an AI model according to a schema.
• loadSummarizationChainloadSummarizationChain is a LangChain.js factory function that creates a document-summarization chain from a language model and configuration options.
• indexingDocument indexing is the organization of document content into searchable structures for efficient information retrieval.
• user experienceUser experience is the overall quality of a person's interaction with a product, including its usability, clarity, responsiveness, and satisfaction.
• continuous improvementSelf-refine is a technique in which a language model generates an output, critiques it with self-provided feedback, and iteratively revises it without additional training.
• tokenA token is a discrete unit of text, such as a word, subword, or character, processed by a language model.
• automatic scrollingA user-interface behavior that automatically moves a scrollable view to display newly added or selected content.
• Upstash VectorUpstash Vector is a serverless vector database for storing and searching numerical vector representations such as text embeddings.
• analytics and monitoringThe collection and analysis of incoming requests, visits, and usage patterns for a deployed application.
• Vercel CLIA command-line interface for configuring, deploying, and managing projects on Vercel.
• RunnableLambdaRunnableLambda is a LangChain runnable abstraction that wraps a function so it can participate in an executable chain.
• middlewareMiddleware is software that intercepts and processes requests between a client and an application handler.
• separation of concernsSeparation of concerns is a software design principle that divides a system into parts with distinct responsibilities.
• stdio transportStdio transport is an interprocess communication method that exchanges data through standard input and standard output streams.
• confidenceA confidence score is a numerical estimate of how strongly a model or evaluation process supports the reliability of a response.
• log probabilityA log probability is the logarithm of the probability assigned to an event, such as a language-model token.
• log probability groundingLog probability grounding is a grounding technique that evaluates token-level log probabilities to estimate the reliability of a model response.
• handlerEvent handling is the processing of user or system events by executing associated application logic.
• encryptionEncryption is the transformation of readable data into an encoded form that requires a corresponding key or process to recover.
• model fallbackA model fallback is a mechanism that reroutes requests to an alternative AI model or provider when the primary one is unavailable or fails.
• rolling conversation contextRolling conversation context is a technique that retains only a bounded portion of prior conversation messages for subsequent model requests.
• DocumentA Document is a structured LangChain object representing retrieved content and associated document information.
• HNSWLibHNSWLib vector store is a portable vector-storage implementation that persists indexes in a filesystem and supports similarity search.
• attentionA neural-network mechanism that weights relationships between different parts of an input when computing representations or predictions.
• transformer architectureA transformer model is a neural-network architecture that uses attention mechanisms to model contextual relationships in sequence data.
• memoryA software component or mechanism that retains information from prior interactions so an AI application can use ongoing context.
• RecursiveCharacterTextSplitterRecursiveCharacterTextSplitter is a LangChain text-splitting component that recursively divides text into size-bounded chunks while retaining configured overlap.
• RetrieverA retriever is a component that obtains relevant information from an indexed or external data source in response to a query.
• useCompletionuseCompletion is a Vercel AI SDK React hook that manages text-completion requests and their streamed results.
• latent spaceAn embedding space is a continuous mathematical space in which embeddings are positioned so that distances or relationships represent properties of the underlying data.
• chain.streamchain.stream is a LangChain operation that executes a runnable chain and emits its results incrementally.
• K-means clusteringK-means clustering is an unsupervised clustering algorithm that assigns data points to a chosen number of groups according to their distances from cluster centers.
• pseudonymizationPseudonymization is the replacement of identifying information with pseudonyms while retaining the possibility of reidentification using separately held additional information.
• ai componentAn AI component is a React context provider that makes AI state, UI state, and associated actions available to descendant components.
• RunnableSequenceRunnableSequence is a LangChain runnable that executes a sequence of runnable components, passing each output to the next component as input.
• ChatPromptTemplateChatPromptTemplate is a LangChain class that constructs chat prompts from a reusable template and supplied values.
• FewShotPromptTemplateFewShotPromptTemplate is a LangChain prompt-template class that constructs prompts from example inputs and outputs together with a task template.
• LangChain agentA software agent built with LangChain that iteratively decides which tools to invoke, processes their results, and produces a final response.
• computer visionComputer vision is the field concerned with enabling computers to interpret and reason about visual data.
• server validationServer validation is input checking performed on a server after client-submitted data arrives and before the data is processed.
• threat modelA threat model is a structured process for identifying potential vulnerabilities and assessing which application components are most at risk.
• use server directiveA Next.js directive that marks a file or function for server-only execution.
• async iterableAn async iterable is an object that asynchronously produces values for consumption through asynchronous iteration.
• textStreamtextStream is a streamText response field that exposes generated text parts as an async iterable.
• asRetrieverasRetriever is a LangChain method that converts a vector store into an object capable of searching for relevant documents.
• custom toolA custom tool is an application-defined operation that an AI model can invoke with specified parameters to obtain structured results.
• LCELLangChain Expression Language (LCEL) is a declarative syntax for composing LangChain functions into executable chains and workflows.
• try-catch statementA try-catch block is a JavaScript control-flow construct that executes protected code and handles exceptions raised during its execution.
• custom hookA reusable React function that composes built-in hooks to encapsulate stateful behavior and related logic.
• image uploadImage upload is the transfer of an image selected by a user into an application for subsequent processing.
• multimedia promptA multimedia prompt is an instruction to a generative AI system that combines text with one or more media inputs such as images.
• document clusteringDocument clustering is the organization of documents or document chunks into groups according to similarity in their represented content.
• file-system based routingA routing approach in which an application's file and folder structure determines its routes and rendered components.
• route segmentA portion of an application's route hierarchy associated with a folder and its rendered content.
• MockLanguageModelV1A Vercel AI SDK mock provider class that simulates language-model behavior with developer-defined responses during tests.
• simulateReadableStreamA Vercel AI SDK testing helper that produces a controlled readable stream containing simulated response chunks.
• createStreamableValueA Vercel AI SDK function that creates a value whose updates can be delivered incrementally through a stream.
• .env fileA .env file is a configuration file containing environment-variable assignments, commonly used to provide local application settings and credentials.
• MCP resourceAn MCP resource is a uniquely identified piece of data or content that an MCP server exposes for clients to retrieve and interact with.
• api integrationThe connection of an application to external application programming interfaces to access their functionality or data.
• DocxLoaderDocxLoader is a LangChain.js document loader that parses DOCX files into document objects.
• PDFLoaderPDFLoader is a document-loading component that extracts content from PDF files for application processing.
• fallbackA user-facing fallback is an alternative interface response or recovery option presented when the intended operation fails.
• complianceConformance of a system and its data practices with applicable legal, regulatory, contractual, or organizational requirements.
• client-side validationClient validation is the checking of user-supplied data in a client application before it is sent to a server.
• asynchronous programmingAn asynchronous operation is a computation whose completion occurs independently of the execution flow that initiated it.
• error trackingError tracking is the collection and analysis of application failures to support diagnosis and resolution.
• uptimeHigh availability is the capability of a system to remain operational with minimal interruption despite component failures.
• interview feedbackInterview feedback is an evaluative assessment of an interview participant's performance that identifies strengths and areas for improvement.
• horizontal scalingHorizontal scaling is the addition or removal of application instances to change processing capacity.
• error boundaryA React component pattern that catches rendering errors in descendant components and renders fallback content.
• error overlayA development interface that displays rendering errors and diagnostic information over a web page.
• route segment configurationA Next.js configuration that controls the rendering and runtime behavior of an individual route segment.
• unstable_noStoreA Next.js cache-control function that opts a component out of caching so it fetches fresh data.
• callFunction calling is a technique in which an AI model requests execution of specified functions to obtain information or perform actions and then uses the results in its response.
• abstract factory design patternA creational design pattern that provides an interface for creating families of related objects without specifying their concrete classes.
• DockerA software platform for building, packaging, distributing, and running applications in containers.
• retention policyA retention policy specifies how long stored backups or other records are preserved before deletion.
• security middlewareSecurity middleware is an intermediate request-processing layer that evaluates incoming requests and permits, flags, or blocks them before application logic runs.
• containerA software container created and run using Docker to isolate an application and its dependencies.
• document normalizationDocument normalization is the transformation of document content into a cleaner and more consistent representation for subsequent processing.
• token tracking systemToken usage tracking is the collection of token-consumption measurements from language-model calls.
• AI-generated contentAn AI-generated response is content produced by an artificial-intelligence system in response to an input or instruction.
• multimodalAI technology that processes and generates content across multiple input or output modalities, such as text, images, and audio.
• natural language processingNatural language processing is the computational processing and understanding of human language in text or speech.
• pretrained modelA pretrained model is a machine-learning model whose parameters have already been learned from training data before being adapted or used for an application.
• GeminiA Google Gemini model is a multimodal generative AI model in Google's Gemini model family that can provide embedding or generation capabilities.
• model capability mismatchA condition in which an application requests a capability that the selected AI model, account tier, or region does not support.
• provider compatibility problemA failure caused by differences between an AI provider's documented behavior, advertised capabilities, and actual API implementation.
• bufferingData buffering temporarily stores incoming data chunks so they can be processed and delivered smoothly.
• chunked transfer encodingChunked transfer encoding is an HTTP transfer method that sends a response as separately sized data chunks rather than as one predetermined-length body.
• connection managementConnection management is the monitoring, maintenance, interruption handling, and reconnection of network connections.
• debuggingDebugging is the systematic process of identifying, analyzing, and correcting defects or unexpected behavior in software.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.