From a7ea246a3aa877b147ffe6c1264894535513042f Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Mon, 24 Jun 2024 21:50:03 -0700
Subject: [PATCH] docs: Vercel AI SDK reference (#306)

---
 apps/www/components/docs/ParametersTable.tsx  |  10 +-
 .../pages/reference/integrations/_meta.tsx    |   1 +
 .../reference/integrations/vercel-ai-sdk.mdx  | 144 ++++++++++++++++++
 .../pages/reference/primitives/Composer.mdx   |   1 -
 .../www/pages/reference/primitives/Thread.mdx |   2 -
 5 files changed, 148 insertions(+), 10 deletions(-)
 create mode 100644 apps/www/pages/reference/integrations/vercel-ai-sdk.mdx

diff --git a/apps/www/components/docs/ParametersTable.tsx b/apps/www/components/docs/ParametersTable.tsx
index c4e6168ce..439b6d30c 100644
--- a/apps/www/components/docs/ParametersTable.tsx
+++ b/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>
   );
 };
diff --git a/apps/www/pages/reference/integrations/_meta.tsx b/apps/www/pages/reference/integrations/_meta.tsx
index 2c4378241..10850e085 100644
--- a/apps/www/pages/reference/integrations/_meta.tsx
+++ b/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",
 };
 
diff --git a/apps/www/pages/reference/integrations/vercel-ai-sdk.mdx b/apps/www/pages/reference/integrations/vercel-ai-sdk.mdx
new file mode 100644
index 000000000..c81d52788
--- /dev/null
+++ b/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.",
+            }
+          ],
+        },
+      ]
+    },
+  ]}
+/>
\ No newline at end of file
diff --git a/apps/www/pages/reference/primitives/Composer.mdx b/apps/www/pages/reference/primitives/Composer.mdx
index 490fa97bf..2548c518b 100644
--- a/apps/www/pages/reference/primitives/Composer.mdx
+++ b/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.",
     },
   ]}
diff --git a/apps/www/pages/reference/primitives/Thread.mdx b/apps/www/pages/reference/primitives/Thread.mdx
index db1c5b461..97d090844 100644
--- a/apps/www/pages/reference/primitives/Thread.mdx
+++ b/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.",
     },
   ]}