Migrate from React-Markdown to Streamdown

Author: haydenbleasel

packages/ai/components/message.tsx

@@ -1,11 +1,11 @@
 import type { Message as MessageType } from "ai";
 import type { ComponentProps } from "react";
-import Markdown from "react-markdown";
+import { Streamdown } from "streamdown";
 import { twMerge } from "tailwind-merge";
 
 type MessageProps = {
   data: MessageType;
-  markdown?: ComponentProps<typeof Markdown>;
+  markdown?: ComponentProps<typeof Streamdown>;
 };
 
 export const Message = ({ data, markdown }: MessageProps) => (
@@ -17,6 +17,6 @@ export const Message = ({ data, markdown }: MessageProps) => (
         : "self-start bg-muted"
     )}
   >
-    <Markdown {...markdown}>{data.content}</Markdown>
+    <Streamdown {...markdown}>{data.content}</Streamdown>
   </div>
 );

packages/ai/package.json

@@ -11,7 +11,7 @@
     "@t3-oss/env-nextjs": "^0.13.8",
     "ai": "^5.0.80",
     "react": "19.2.0",
-    "react-markdown": "^10.1.0",
+    "streamdown": "^1.6.4",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.12"
   },