diff --git a/apps/docs/components/docs-chat/DocsChat.tsx b/apps/docs/components/docs-chat/DocsChat.tsx
index d114c14be..17227f361 100644
--- a/apps/docs/components/docs-chat/DocsChat.tsx
+++ b/apps/docs/components/docs-chat/DocsChat.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { FC } from "react";
 import {
   AssistantModal,
   ChatModelAdapter,
@@ -9,6 +10,7 @@ import { makeMarkdownText } from "@assistant-ui/react-markdown";
 import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
 import { coldarkDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import remarkGfm from "remark-gfm";
+import { Thread, type ThreadConfig } from "@assistant-ui/react";
 
 function asAsyncIterable<T>(source: ReadableStream<T>): AsyncIterable<T> {
   return {
@@ -75,7 +77,7 @@ export const DocsChat = () => {
   const runtime = useLocalRuntime(MyCustomAdapter);
 
   return (
-    <AssistantModal
+    <MyAssistantModal
       runtime={runtime}
       welcome={{
         message: "Ask me anything about the docs!",
@@ -84,3 +86,14 @@ export const DocsChat = () => {
     />
   );
 };
+
+const MyAssistantModal: FC<ThreadConfig> = (config) => {
+  return (
+    <AssistantModal.Root config={config}>
+      <AssistantModal.Trigger />
+      <AssistantModal.Content className="h-[800px] w-[600px]">
+        <Thread />
+      </AssistantModal.Content>
+    </AssistantModal.Root>
+  );
+};