chapter four

4 Managing conversation and state in your application

 

This chapter covers

  • Introducing AI SDK React server components
  • Managing UI state in AI-powered applications
  • Structured data generation using the Vercel AI SDK
  • Tool and function calling with AI models

As we navigate the evolving landscape of AI-powered web applications, we encounter increasingly complex challenges that test the limits of reliability, performance, and scalability. What begins as a straightforward implementation often grows into a sophisticated system with complex interdependencies.

Consider, for example, how to perform state management in AI applications. The seemingly simple task of maintaining conversation history becomes a complex problem between client-side accessibility and server-side security. While storing messages on the client enables quick review, we can’t implicitly trust client-provided data. This requires a dual-state approach, demanding meticulous synchronization between client and server to ensure data integrity and security.

4.1 AI SDK React server components

4.1.1 Overview of RSCs

4.1.2 Using server actions for AI-powered RSCs

4.1.3 Updating the UI to use server actions

4.1.4 Techniques for generating and streaming UI components

4.1.5 Creating streamable UI components from LLM providers with streamUI

4.1.6 Streaming React components with createStreamableUI

4.2 Managing UI state in AI-powered applications

4.2.1 Separating AI and UI state in React/Next.js applications

4.2.2 Key components for UI state management

4.2.3 Implementing UI state management patterns

4.3 Structured data generation using the Vercel AI SDK

4.3.1 How structured data generation works

4.3.2 Techniques for generating structured data from AI responses

4.3.3 Tools for implementing type-safe AI-generated content

4.3.4 Integrating structured data generation into our web application

4.4 Tool and function calling with AI models

4.4.1 Understanding tool calling and function calling in AI models

Summary