Docs: How to generate title for chat?

[bestickley]

Description

A common use case is to want to generate a short title for a chat based on the first message and name the chat based on that. I'd like the docs to include this.

AI SDK Version

• ai: 5.X

Code of Conduct

• I agree to follow this project's Code of Conduct

[vercel-ai-sdk]

👋 Thanks for opening this issue! I was unable to automatically detect which AI provider this issue relates to. A maintainer will review and apply the appropriate provider/* labels manually.

[gr2m]

Would you like a specific docs page to be updated with that information?

[bestickley]

@gr2m, I'm not sure. Wherever the AI SDK team thinks it makes the most sense to be. I'm open to just seeing this in an example too.

[bestickley]

Here is what I came up with that can be used for inspiration:

// generate-title.ts

interface GenerateTitleProps {
  chatId: string;
  firstMessage: ModelMessage;
  writer: UIMessageStreamWriter<CensusUIMessage>;
}

export async function generateTitle(props: GenerateTitleProps) {
  const { chatId, firstMessage, writer } = props;

  let title = "New Chat";

  try {
    const { text } = await generateText({
      model: registry.languageModel("nova:micro"),
      providerOptions: {
        loggingMiddleware: { debugId },
      },
      messages: [firstMessage],
      system: `Generate a concise, descriptive title (3-8 words) for this chat based on the user's first message. Focus on the main topic or question being asked.`,
    });

    // remove leading and trailing quotes
    title = text.replace(/^["']|["']$/g, "");
    title = title.length > 50 ? title.substring(0, 47) + "..." : title;
  } catch (error) {
    console.error("Failed to generate title:", error);
  }

  writer.write({
    type: "data-generate-title",
    data: { text: title },
    transient: true,
  });
  await dbWrite
    .update(chatTable)
    .set({ name: title })
    .where(eq(chatTable.id, chatId));
}

// chats-context.ts
"use client";
import type { ChatTableSelect } from "@census/data-core/db/schema";
import {
  createContext,
  useContext,
  useState,
  type Dispatch,
  type PropsWithChildren,
  type SetStateAction,
} from "react";

interface ChatsContextValue {
  chats: ChatTableSelect[];
  setChats: Dispatch<SetStateAction<ChatTableSelect[]>>;
}

const chatsContext = createContext<ChatsContextValue | null>(null);

export function ChatsContext({ children }: PropsWithChildren) {
  const [chats, setChats] = useState<ChatTableSelect[]>([]);
  return (
    <chatsContext.Provider value={{ chats, setChats }}>
      {children}
    </chatsContext.Provider>
  );
}

export function useChats() {
  const context = useContext(chatsContext);
  if (!context) {
    throw new Error("useChats must be used within a ChatsContext");
  }
  return context;
}

// chat-client.tsx
export function ChatClient(props: ChatClientProps) {
  const { initialMessages, chatId } = props;
  const [input, setInput] = useState("");
  const { setChats } = useChats();
  const { error, messages, regenerate, sendMessage, status, stop } = useChat({
    messages: initialMessages,
    id: chatId,
    transport: new DefaultChatTransport({
      api: "/api/chat",
      prepareSendMessagesRequest({ id, messages, trigger }) {
        // send only last message
        // https://ai-sdk.dev/docs/ai-sdk-ui/chatbot-message-persistence#sending-only-the-last-message
        return { body: { message: messages.at(-1), id, trigger } };
      },
    }),
    onData(dataPart) {
      if (dataPart.type === "data-generate-title") {
        setChats((oldChats) => {
          const newChats: typeof oldChats = [];
          for (const oldChat of oldChats) {
            if (chatId === oldChat.id) {
              newChats.push({ ...oldChat, name: dataPart.data.text });
            } else {
              newChats.push(oldChat);
            }
          }
          return newChats;
        });
      }
    },
  });
...
}