docs: Vercel AI SDK reference (#306)

apps/www/components/docs/ParametersTable.tsx

@@ -99,7 +99,7 @@ const ParametersBox: FC<ParametersTableProps> = ({ type, parameters }) => {
 };
 
 export type ParametersTableProps = {
-  type?: string;
+  type?: string | undefined;
   parameters: Array<ParameterDef>;
 };
 
@@ -108,12 +108,8 @@ export const ParametersTable: FC<ParametersTableProps> = ({
   parameters,
 }) => {
   return (
-    <div className={cn("-mx-2", type && "mt-6")}>
-      {type ? (
-        <ParametersBox type={type} parameters={parameters} />
-      ) : (
-        <ParametersList parameters={parameters} />
-      )}
+    <div className={cn("-mx-2 mt-4", type && "mt-6")}>
+      <ParametersBox type={type} parameters={parameters} />
     </div>
   );
 };

apps/www/pages/reference/integrations/_meta.tsx

@@ -1,4 +1,5 @@
 const meta = {
+  "vercel-ai-sdk": "Vercel AI SDK",
   "react-hook-form": "React Hook Form",
 };
 

apps/www/pages/reference/integrations/vercel-ai-sdk.mdx

@@ -0,0 +1,144 @@
+---
+title: "@assistant-ui/react-ai-sdk"
+description: Vercel AI SDK integration for assistant-ui.
+---
+
+import { ParametersTable } from "@/components/docs";
+
+## API Reference
+
+### `useVercelUseChatRuntime`
+
+Convert Vercel AI SDK chat helpers into a `AssistantRuntime`.
+
+```tsx
+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>
+  );
+};
+```
+
+<ParametersTable
+  parameters={[
+    {
+      name: "chat",
+      type: "ReturnType<typeof useChat>",
+      description: "The UseChatHelpers from @ai-sdk/react.",
+    }
+  ]}
+/>
+
+
+### `useVercelUseAssistantRuntime`
+
+Convert Vercel AI SDK assistant helpers into a `AssistantRuntime`.
+
+```tsx
+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>
+  );
+};
+```
+
+<ParametersTable
+  parameters={[
+    {
+      name: "assistant",
+      type: "ReturnType<typeof useAssistant>",
+      description: "The UseAssistantHelpers from @ai-sdk/react.",
+    }
+  ]}
+/>
+
+### `useVercelRSCRuntime`
+
+Convert Vercel RSC runtime into a `AssistantRuntime`.
+
+```tsx
+import { useVercelRSCRuntime } from "@assistant-ui/react-ai-sdk";
+
+const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [messages, setMessages] = useUIState<typeof AI>();
+
+  const append = 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, append });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};  
+```
+
+<ParametersTable
+  parameters={[
+    {
+      name: "adapter",
+      type: "VercelRSCAdapter<TMessage>",
+      description: "The Vercel RSC adapter to use.",
+      children: [
+        {
+          type: "VercelRSCAdapter<TMessage>",
+          parameters: [
+            {
+              name: "messages",
+              type: "readonly ThreadMessage[]",
+              description: "The messages in the thread.",
+            },
+            {
+              name: "append",
+              type: "(message: AppendMessage) => Promise<void>",
+              description: "A function to append a message to the thread.",
+            },
+            {
+              name: "edit",
+              type: "(message: AppendMessage) => Promise<void>",
+              description: "A function to edit a message.",
+            },
+            {
+              name: "reload",
+              type: "(parentId: string | null) => Promise<void>",
+              description: "A function to reload a message.",
+            },
+            {
+              name: "convertMessage",
+              type: "(message: TMessage) => VercelRSCMessage",
+              description: "A function to convert messages to the VercelRSCMessage format. Only required if your message objects are not already compatible with Vercel RSC.",
+            }
+          ],
+        },
+      ]
+    },
+  ]}
+/>

apps/www/pages/reference/primitives/Composer.mdx

@@ -163,7 +163,6 @@ Renders children if a condition is met.
       name: "editing",
       required: false,
       type: "boolean | undefined",
-      default: "undefined",
       description: "Render children if the message is being edited.",
     },
   ]}

apps/www/pages/reference/primitives/Thread.mdx

@@ -159,13 +159,11 @@ Renders children if a condition is met.
     {
       name: "empty",
       type: "boolean | undefined",
-      default: "undefined",
       description: "Render children if the thread is empty.",
     },
     {
       name: "running",
       type: "boolean | undefined",
-      default: "undefined",
       description: "Render children if the thread is running.",
     },
   ]}