diff --git a/src/components/thread/messages/ai.tsx b/src/components/thread/messages/ai.tsx
index 7680460..70579d4 100644
--- a/src/components/thread/messages/ai.tsx
+++ b/src/components/thread/messages/ai.tsx
@@ -17,7 +17,7 @@ function CustomComponent({
   const meta = thread.getMessagesMetadata(message);
   const seenState = meta?.firstSeenState;
   const customComponent = seenState?.values.ui
-    .slice()
+    ?.slice()
     .reverse()
     .find(
       ({ additional_kwargs }) =>
diff --git a/src/providers/Stream.tsx b/src/providers/Stream.tsx
index eac16b5..7b5093d 100644
--- a/src/providers/Stream.tsx
+++ b/src/providers/Stream.tsx
@@ -14,7 +14,7 @@ import { ArrowRight } from "lucide-react";
 import { PasswordInput } from "@/components/ui/password-input";
 
 const useTypedStream = useStream<
-  { messages: Message[]; ui: UIMessage[] },
+  { messages: Message[]; ui?: UIMessage[] },
   {
     UpdateType: {
       messages?: Message[] | Message | string;