docs: begin work on docs for the runtime API (#259)

apps/www/components/docs/ParametersTable.tsx

@@ -4,7 +4,7 @@ type ParameterDef = {
   name: string;
   type: string;
   description: string;
-  isOptional?: boolean;
+  required?: boolean;
   children?: Array<{
     type: string;
     parameters: Array<ParameterDef>;
@@ -24,12 +24,12 @@ const Parameter: FC<ParameterProps> = ({ parameter, isLast }) => {
       <div className="relative flex gap-2">
         <h3 className="font-mono font-semibold text-sm">
           {parameter.name}
-          {parameter.isOptional && "?"}:
+          {!parameter.required && "?"}:
         </h3>
         <div className="no-scrollbar w-full overflow-x-scroll text-nowrap pr-12 font-mono text-foreground/70 text-sm">
           {parameter.type}
         </div>
-        <div className="pointer-events-none absolute top-0 right-0 h-5 w-12 bg-gradient-to-r from-white/0 to-white/100" />
+        <div className="pointer-events-none absolute top-0 right-0 h-5 w-12 bg-gradient-to-r from-white/0 to-background/100" />
       </div>
       <div>
         <p className="text-foreground/70 text-sm">{parameter.description}</p>

apps/www/pages/reference/_meta.tsx

@@ -1,4 +1,5 @@
 export default {
+  runtime: "Runtime API",
   "-- integrations": {
     title: "Integrations",
     type: "separator",

apps/www/pages/reference/integrations/react-hook-form.mdx

@@ -28,6 +28,7 @@ Drop-in replacement hook for `useForm` that adds support for `@assistant-ui/reac
     {
       name: "assistant",
       type: 'object',
+      optional: true,
       description: "Configuration for useAssistantForm",
       children: [
         {

apps/www/pages/reference/runtime.mdx

@@ -0,0 +1,98 @@
+---
+title: Runtime API
+description: A React Hook Form integration for @assistant-ui.
+--- 
+
+import { ParametersTable } from "@/components/docs";
+
+### `AssistantRuntimeProvider`
+
+The `AssistantRuntimeProvider` is a React component that wraps your entire app and provides the `Runtime` to the rest of your app.
+
+```tsx {1, 8, 10}
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+
+const MyApp = () => {
+  const chat = useChat();
+  const runtime = useVercelUseChatRuntime(chat);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {/* your app */}
+    </AssistantRuntimeProvider>
+  );
+};
+```
+
+### Properties
+
+<ParametersTable
+  parameters={[
+    {
+      name: "runtime",
+      type: 'AssistantRuntime',
+      required: true,
+      description: "The runtime to provide to the rest of your app.",
+      children: [
+        {
+          parameters: [
+            {
+              name: "messages",
+              type: 'readonly ThreadMessage[]',
+              required: true,
+              description: "The messages in the thread.",
+            },
+            {
+              name: "isRunning",
+              type: 'boolean',
+              required: true,
+              description: "Whether the thread is running.",
+            },
+            {
+              name: "getBranches",
+              type: '(messageId: string) => readonly string[]',
+              required: true,
+              description: "A function to get the branches for a message.",
+            },
+            {
+              name: "switchToBranch",
+              type: '(branchId: string) => void',
+              required: true,
+              description: "A function to switch to a branch.", 
+            },
+            {
+              name: "append",
+              type: '(message: AppendMessage) => void',
+              required: true,
+              description: "A function to append a message to the thread.",
+            },
+            {
+              name: "startRun",
+              type: '(parentId: string | null) => void',
+              required: true,
+              description: "A function to start a run.",
+            },
+            {
+              name: "cancelRun",
+              type: '() => void',
+              required: true,
+              description: "A function to cancel a run.",
+            },
+            {
+              name: "subscribe",
+              type: '(callback: () => void) => Unsubscribe',
+              required: true,
+              description: "A function to subscribe to updates.",
+            },
+            {
+              name: "registerModelConfigProvider",
+              type: '(provider: ModelConfigProvider) => Unsubscribe',
+              required: true,
+              description: "A function to register a model config provider.",
+            },
+          ],
+        },
+      ],
+    },
+  ]}
+/>

apps/www/pages/styles.css

@@ -36,7 +36,7 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 0 0% 7%;
     --foreground: 0 0% 98%;
 
     --card: 240 10% 3.9%;