fix(cli): update ai sdk example for nextjs

Author: AmanVarshney01

apps/cli/src/constants.ts

@@ -113,7 +113,8 @@ export const dependencyVersionMap = {
 	"@ai-sdk/vue": "^2.0.39",
 	"@ai-sdk/svelte": "^3.0.39",
 	"@ai-sdk/react": "^2.0.39",
-	streamdown: "^1.2.0",
+	streamdown: "^1.3.0",
+	shiki: "^3.12.2",
 
 	"@orpc/server": "^1.8.6",
 	"@orpc/client": "^1.8.6",
@@ -151,7 +152,7 @@ export const dependencyVersionMap = {
 	"@sveltejs/adapter-cloudflare": "^7.2.1",
 	"@cloudflare/workers-types": "^4.20250822.0",
 
-	alchemy: "^0.65.1",
+	alchemy: "^0.67.0",
 	// temporary workaround for alchemy + tanstack start
 	nitropack: "^2.12.4",
 

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

@@ -32,6 +32,7 @@ export async function setupExamples(config: ProjectConfig) {
 			frontend.includes("tanstack-router") ||
 			frontend.includes("next") ||
 			frontend.includes("tanstack-start");
+		const hasNext = frontend.includes("next");
 		const hasReactNative =
 			frontend.includes("native-nativewind") ||
 			frontend.includes("native-unistyles");
@@ -45,6 +46,11 @@ export async function setupExamples(config: ProjectConfig) {
 			} else if (hasReactWeb) {
 				dependencies.push("@ai-sdk/react", "streamdown");
 			}
+
+			if (hasNext) {
+				dependencies.push("shiki");
+			}
+
 			await addPackageDependency({
 				dependencies,
 				projectDir: webClientDir,

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

@@ -3,11 +3,16 @@
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import { Send } from "lucide-react";
+{{#if (or (eq webDeploy "wrangler") (eq webDeploy "alchemy"))}}
 import dynamic from "next/dynamic";
+{{else}}
+import { Response } from "@/components/response";
+{{/if}}
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
+{{#if (or (eq webDeploy "wrangler") (eq webDeploy "alchemy"))}}
 const Response = dynamic(
   () =>
     import("@/components/response").then((mod) => ({ default: mod.Response })),
@@ -20,6 +25,7 @@ const Response = dynamic(
     ssr: false,
   }
 );
+{{/if}}
 
 export default function AIPage() {
   const [input, setInput] = useState("");
@@ -94,4 +100,4 @@ export default function AIPage() {
       </form>
     </div>
   );
-}
+}

apps/cli/templates/frontend/react/next/next.config.ts.hbs

@@ -5,10 +5,13 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
 	typedRoutes: true,
+	{{#if (includes examples "ai")}}
+    transpilePackages: ["shiki"],
+    {{/if}}
 };
 
 export default nextConfig;
 
 {{#if (or (eq webDeploy "alchemy") (eq webDeploy "wrangler"))}}
 initOpenNextCloudflareForDev();
-{{/if}}
+{{/if}}