Chat History for AI SDK

Overview

With the help of assistant-cloud, you can add thread management and thread history capabilities to assistant-ui.
This guide will walk you through the process of integrating assistant-cloud with the AI SDK by Vercel.

Prerequisites

You need an assistant-cloud account to follow this guide.
You can sign up for the waitlist here: https://accounts.assistant-ui.com/waitlist

Setting up an assistant-cloud project

To get started, follow the steps below:

• Create a new project on the assistant-cloud dashboard.
• Navigate to the "Settings" tab and copy the Frontend API URL.
• Add this URL to your .env file

NEXT_PUBLIC_ASSISTANT_BASE_URL=https://<your-frontend-api-url>

Setting up authorization

This guide will use Clerk for authorization. For other options, refer to the authorization guide.

First, go to the Clerk dashboard and under "Configure" tab, "JWT Templates" section, create a new template. Choose a blank template and name it "assistant-ui".

As the "Claims" field, enter the following:

{
  "aud": "assistant-ui"
}

You can leave everything else as default. Take note of the "Issuer" and "JWKS Endpoint" fields.

Then, In the assistant-cloud dashboard, navigate to the "Auth Rules" tab and create a new rule. Choose "Clerk" and enter the Issuer and JWKS Endpoint from the previous step. As the "Audience" field, enter "assistant-ui".

Connecting the runtime provider

Now that we have everything set up, let's write the code for the runtime provider.

The code below is a simple AI SDK runtime provider that uses the assistant-cloud API to create and manage threads.

import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
 
export const maxDuration = 30;
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = streamText({
    model: openai("gpt-4o"),
    messages,
  });
 
  return result.toDataStreamResponse();
}

export function MyRuntimeProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const { getToken } = useAuth();
 
  const cloud = useMemo(
    () =>
      new AssistantCloud({
        baseUrl: process.env["NEXT_PUBLIC_ASSISTANT_BASE_URL"]!,
        authToken: async () => getToken({ template: "assistant-ui" }),
      }),
    [getToken],
  );
 
  const runtime = useChatRuntime({
    cloud,
    api: "/api/chat",
  });
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}

Displaying a ThreadList component

Now, you can add a ThreadList component to your application. This component will display a list of threads and allow users to switch between them.

<div className="grid grid-cols-[250px_1fr]">
  <ThreadList />
  <Thread />
</div>

Customization of this ThreadList component is possible, refer to the Decomposition guide here.