docs: add examples tab (#257)

Yonom · Jun 20, 2024 · b33d7f5 · b33d7f5
1 parent c23e9ba
commit b33d7f5
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 8 deletions.
diff --git a/apps/www/components/Home.tsx b/apps/www/components/Home.tsx
@@ -53,7 +53,7 @@ export default function Home() {
 
       <div className="mb-8 flex justify-center gap-2">
         <Button asChild>
-          <Link href="/onboarding">Get Started</Link>
+          <Link href="/docs/getting-started">Get Started</Link>
         </Button>
       </div>
       <div className="mx-auto flex w-full max-w-screen-xl flex-col">

diff --git a/apps/www/pages/_meta.tsx b/apps/www/pages/_meta.tsx
@@ -28,4 +28,11 @@ export default {
       breadcrumb: false,
     },
   },
+  examples: {
+    title: "Examples",
+    type: "page",
+    theme: {
+      breadcrumb: false,
+    },
+  },
 };
diff --git a/apps/www/pages/docs/getting-started.mdx b/apps/www/pages/docs/getting-started.mdx
@@ -12,10 +12,10 @@ import architecture from "../../assets/docs/architecture.png";
 
 <Image src={architecture} height={300} className="dark:invert dark:hue-rotate-180 my-2 mx-auto" />
 
+The Runtime and UI Components each require independent setup and both must be set up.
 
 ## Setup
 
-
 The recommended way to get started is with the following stack:
 
 - NextJS

diff --git a/apps/www/pages/examples.mdx b/apps/www/pages/examples.mdx
@@ -0,0 +1,36 @@
+---
+title: Examples
+---
+
+### RSC Example
+
+This is an example of how to use the Vercel AI SDK RSC Runtime.
+
+- [RSC Example App](https://assistant-ui-rsc-example.vercel.app/)
+- [Code](https://github.com/Yonom/assistant-ui-rsc-example)
+
+### eCommerce Example
+
+This is an example of an eCommerce chatbot that can help users find products. Built with Vercel AI SDK RSC Runtime.
+
+- [Demo](https://x.com/MatthewHeartful/status/1803317502933606698)
+- [Code](https://github.com/Yonom/assistant-ui/tree/main/examples/search-agent-for-e-commerce)
+
+### React Hook Form Example
+
+This is an example of how to use `@assistant-ui/react-hook-form`.
+
+- [React Hook Form Example App](https://assistant-ui-form-demo.vercel.app/)
+- [Code](https://github.com/Yonom/assistant-ui/tree/main/examples/with-react-hook-form)
+
+### Custom REST API Example
+
+This is an example of how to use `@assistant-ui/react` with a custom REST API.
+
+- [Code](https://github.com/Yonom/assistant-ui-custom-api)
+
+### Thread History Persistence example
+
+This is an example of how to restore the thread history using `@assistant-ui/react-ai-sdk` and Vercel AI SDK.
+
+- [Code](https://github.com/Yonom/assistant-ui-assistant-api-history)
diff --git a/apps/www/pages/onboarding.mdx b/apps/www/pages/onboarding.mdx
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
@@ -17,6 +17,6 @@
     "strictNullChecks": true,
     "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "pages/examples.mdx"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/react/src/primitives/composer/ComposerInput.tsx b/packages/react/src/primitives/composer/ComposerInput.tsx
@@ -64,7 +64,7 @@ export const ComposerInput = forwardRef<
     const focus = useCallback(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
-
+      console.log("focus");
       textarea.focus();
       textarea.setSelectionRange(
         textareaRef.current.value.length,
@@ -85,6 +85,7 @@ export const ComposerInput = forwardRef<
         value={value}
         {...rest}
         ref={ref}
+        autoFocus={autoFocus}
         disabled={disabled}
         onChange={composeEventHandlers(onChange, (e) => {
           const composerState = useComposer.getState();