logoassistant-ui
ReferenceIntegrations

@assistant-ui/react-ai-sdk

Vercel AI SDK integration for assistant-ui.

API Reference

useVercelUseChatRuntime

Convert Vercel AI SDK chat helpers into a AssistantRuntime.

import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
 
const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
  const chat = useChat();
  const runtime = useVercelUseChatRuntime(chat);
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
};

chat?:

ReturnType<typeof useChat>

The UseChatHelpers from ai/react.

useVercelUseAssistantRuntime

Convert Vercel AI SDK assistant helpers into a AssistantRuntime.

import { useVercelUseAssistantRuntime } from "@assistant-ui/react-ai-sdk";
 
const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
  const assistant = useAssistant();
  const runtime = useVercelUseAssistantRuntime(assistant);
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
};

assistant?:

ReturnType<typeof useAssistant>

The UseAssistantHelpers from ai/react.

useVercelRSCRuntime

Convert Vercel RSC runtime into a AssistantRuntime.

import { useVercelRSCRuntime } from "@assistant-ui/react-ai-sdk";
 
const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
  const [messages, setMessages] = useUIState<typeof AI>();
 
  const onNew = async (m: AppendMessage) => {
    if (m.content[0]?.type !== "text")
      throw new Error("Only text messages are supported");
 
    const input = m.content[0].text;
    setMessages((currentConversation) => [
      ...currentConversation,
      { id: nanoid(), role: "user", display: input },
    ]);
 
    const message = await continueConversation(input);
 
    setMessages((currentConversation) => [...currentConversation, message]);
  };
 
  const runtime = useVercelRSCRuntime({ messages, onNew });
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
};

adapter?:

VercelRSCAdapter<TMessage>

The Vercel RSC adapter to use.

VercelRSCAdapter<TMessage>

messages?:

readonly ThreadMessage[]

The messages in the thread.

onNew?:

(message: AppendMessage) => Promise<void>

A function to append a message to the thread.

onEdit?:

(message: AppendMessage) => Promise<void>

A function to edit a message.

onReload?:

(parentId: string | null) => Promise<void>

A function to reload a message.

convertMessage?:

(message: TMessage) => VercelRSCMessage

A function to convert messages to the VercelRSCMessage format. Only required if your message objects are not already compatible with Vercel RSC.

Previous

Runtime API

Next

@assistant-ui/react-hook-form

On this page

Edit on Github