AI SDK + Chat Persistence

Live Demo

assistant-ui

New Thread

Toggle navigation menuShare

Hello there!

How can I help you today?

What's the weatherin San Francisco?

Explain React hookslike useState and useEffect

Scroll to bottom

Add AttachmentSend message

Overview

The AI SDK example demonstrates how to integrate assistant-ui with the Vercel AI SDK for chat persistence and state management. This example shows a complete chat interface with thread management, message history, and persistent storage.

Features

• Chat Persistence: Messages are automatically saved and restored between sessions
• Thread Management: Create, switch between, and manage multiple conversation threads
• AI SDK Integration: Seamless integration with Vercel's AI SDK for streaming responses
• Real-time Updates: Live message streaming with proper loading states
• Thread List Sidebar: Easy navigation between different conversations

Usage

To implement chat persistence with AI SDK:

1. Install Dependencies: Add @assistant-ui/react-ai-sdk and ai packages
2. Configure Runtime: Use useChatRuntime hook with your API endpoint
3. Add Persistence: Configure your preferred storage solution (localStorage, database, etc.)
4. Thread Management: Implement thread creation, switching, and deletion

Code

This example uses the useChatRuntime hook which provides:

• Automatic message persistence
• Thread state management
• Streaming response handling
• Error handling and retry logic

Key implementation details:

• Thread list with create/delete functionality
• Message history restoration
• Real-time streaming updates
• Proper error boundaries