feat(cli): add streamdown in ai example of all react web templates (#554)

Author: AmanVarshney01

apps/cli/src/constants.ts

@@ -108,6 +108,7 @@ export const dependencyVersionMap = {
 	"@ai-sdk/vue": "^2.0.9",
 	"@ai-sdk/svelte": "^3.0.9",
 	"@ai-sdk/react": "^2.0.9",
+	streamdown: "^1.1.6",
 
 	"@orpc/server": "^1.8.4",
 	"@orpc/client": "^1.8.4",

apps/cli/src/helpers/addons/examples-setup.ts

@@ -43,7 +43,7 @@ export async function setupExamples(config: ProjectConfig) {
 			} else if (hasSvelte) {
 				dependencies.push("@ai-sdk/svelte");
 			} else if (hasReactWeb) {
-				dependencies.push("@ai-sdk/react");
+				dependencies.push("@ai-sdk/react", "streamdown");
 			}
 			await addPackageDependency({
 				dependencies,

apps/cli/src/helpers/core/template-manager.ts

@@ -740,6 +740,19 @@ export async function setupExamplesTemplate(
 			if (hasReactWeb) {
 				const exampleWebSrc = path.join(exampleBaseDir, "web/react");
 				if (await fs.pathExists(exampleWebSrc)) {
+					if (example === "ai") {
+						const exampleWebBaseSrc = path.join(exampleWebSrc, "base");
+						if (await fs.pathExists(exampleWebBaseSrc)) {
+							await processAndCopyFiles(
+								"**/*",
+								exampleWebBaseSrc,
+								webAppDir,
+								context,
+								false,
+							);
+						}
+					}
+
 					const reactFramework = context.frontend.find((f) =>
 						[
 							"next",

apps/cli/templates/examples/ai/web/react/base/src/components/response.tsx.hbs

@@ -0,0 +1,22 @@
+"use client";
+
+import { type ComponentProps, memo } from "react";
+import { Streamdown } from "streamdown";
+import { cn } from "@/lib/utils";
+
+type ResponseProps = ComponentProps<typeof Streamdown>;
+
+export const Response = memo(
+	({ className, ...props }: ResponseProps) => (
+		<Streamdown
+			className={cn(
+				"size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+				className,
+			)}
+			{...props}
+		/>
+	),
+	(prevProps, nextProps) => prevProps.children === nextProps.children,
+);
+
+Response.displayName = "Response";

apps/cli/templates/examples/ai/web/react/next/src/app/ai/page.tsx.hbs

@@ -2,10 +2,11 @@
 
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
-import { useRef, useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Response } from "@/components/response";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 export default function AIPage() {
   const [input, setInput] = useState("");
@@ -51,11 +52,7 @@ export default function AIPage() {
               </p>
               {message.parts?.map((part, index) => {
                 if (part.type === "text") {
-                  return (
-                    <div key={index} className="whitespace-pre-wrap">
-                      {part.text}
-                    </div>
-                  );
+                  return <Response key={index}>{part.text}</Response>;
                 }
                 return null;
               })}

apps/cli/templates/examples/ai/web/react/react-router/src/routes/ai.tsx.hbs

@@ -4,6 +4,7 @@ import { DefaultChatTransport } from "ai";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
+import { Response } from "@/components/response";
 
 const AI: React.FC = () => {
   const [input, setInput] = useState("");
@@ -49,11 +50,7 @@ const AI: React.FC = () => {
               </p>
               {message.parts?.map((part, index) => {
                 if (part.type === "text") {
-                  return (
-                    <div key={index} className="whitespace-pre-wrap">
-                      {part.text}
-                    </div>
-                  );
+                  return <Response key={index}>{part.text}</Response>;
                 }
                 return null;
               })}

apps/cli/templates/examples/ai/web/react/tanstack-router/src/routes/ai.tsx.hbs

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
 import { useRef, useEffect, useState } from "react";
+import { Response } from "@/components/response";
 
 export const Route = createFileRoute("/ai")({
   component: RouteComponent,
@@ -54,11 +55,7 @@ function RouteComponent() {
               </p>
               {message.parts?.map((part, index) => {
                 if (part.type === "text") {
-                  return (
-                    <div key={index} className="whitespace-pre-wrap">
-                      {part.text}
-                    </div>
-                  );
+                  return <Response key={index}>{part.text}</Response>;
                 }
                 return null;
               })}

apps/cli/templates/examples/ai/web/react/tanstack-start/src/routes/ai.tsx.hbs

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
 import { useRef, useEffect, useState } from "react";
+import { Response } from "@/components/response";
 
 export const Route = createFileRoute("/ai")({
   component: RouteComponent,
@@ -54,11 +55,7 @@ function RouteComponent() {
               </p>
               {message.parts?.map((part, index) => {
                 if (part.type === "text") {
-                  return (
-                    <div key={index} className="whitespace-pre-wrap">
-                      {part.text}
-                    </div>
-                  );
+                  return <Response key={index}>{part.text}</Response>;
                 }
                 return null;
               })}

apps/cli/templates/frontend/react/web-base/src/index.css renamed to apps/cli/templates/frontend/react/web-base/src/index.css.hbs

@@ -1,5 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+{{#if (includes examples "ai")}}
+@source "../node_modules/streamdown/dist/index.js";
+{{/if}}
 
 @custom-variant dark (&:where(.dark, .dark *));