Chat History for AI SDK

Overview

assistant-cloud provides thread management and persistent chat history for applications built with the AI SDK by Vercel. This guide shows you how to integrate cloud persistence into your AI SDK application.

Prerequisites

You need an assistant-cloud account to follow this guide. Sign up here to get started.

Setup Guide

Create a Cloud Project

Create a new project in the assistant-cloud dashboard and from the settings page, copy:

Frontend API URL: https://proj-[ID].assistant-api.com
Assistant Cloud API Key: sk_aui_proj_*

Configure Environment Variables

Add the following environment variables to your project:

.env.local

# Frontend API URL from your cloud project settings
NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com

# API key for server-side operations
ASSISTANT_API_KEY=your-api-key-here

Install Dependencies

Install the required packages:

npm install @assistant-ui/react @assistant-ui/react-ai-sdk

Set Up the Cloud Runtime

Create a client-side AssistantCloud instance and integrate it with your AI SDK runtime:

app/chat/page.tsx

"use client";

import { AssistantCloud, AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { ThreadList } from "@/components/assistant-ui/thread-list";
import { Thread } from "@/components/assistant-ui/thread";

export default function ChatPage() {
  const cloud = new AssistantCloud({
    baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
    anonymous: true, // Creates browser-session based user ID
  });

  const runtime = useChatRuntime({
    api: "/api/chat", // Your AI SDK endpoint
    cloud,
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
        <ThreadList />
        <Thread />
      </div>
    </AssistantRuntimeProvider>
  );
}

Authentication

The example above uses anonymous: true which creates a browser session-based user ID. This is suitable for public demos or prototypes.

For production apps with user accounts, see the Cloud Authorization guide to persist threads per user or workspace.

Next Steps

Learn about user authentication for multi-user applications
Explore runtime hooks and integration options
Check out the complete example on GitHub

Chat History for AI SDK

On this page