franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(cli): upgrade to ai sdk v5 (#487)

Browse Source
This commit is contained in:
Aman Varshney
2025-08-10 20:19:55 +05:30
committed by GitHub
parent ea908ddc86
commit f412d8f0c7
18 changed files with 439 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/cli/templates/examples/ai/web/react/next/src/app/ai/page.tsx → apps/cli/templates/examples/ai/web/react/next/src/app/ai/page.tsx.hbs
View File

@@ -1,15 +1,18 @@
"use client"
"use client";
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 } from "react";
import { useRef, useEffect, useState } from "react";
export default function AIPage() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${process.env.NEXT_PUBLIC_SERVER_URL}/ai`,
const [input, setInput] = useState("");
const { messages, sendMessage } = useChat({
transport: new DefaultChatTransport({
api: `${process.env.NEXT_PUBLIC_SERVER_URL}/ai`,
}),
});
const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -18,6 +21,14 @@ export default function AIPage() {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const text = input.trim();
if (!text) return;
sendMessage({ text });
setInput("");
};
return (
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
<div className="overflow-y-auto space-y-4 pb-4">
@@ -38,7 +49,16 @@ export default function AIPage() {
<p className="text-sm font-semibold mb-1">
{message.role === "user" ? "You" : "AI Assistant"}
</p>
<div className="whitespace-pre-wrap">{message.content}</div>
{message.parts?.map((part, index) => {
if (part.type === "text") {
return (
<div key={index} className="whitespace-pre-wrap">
{part.text}
</div>
);
}
return null;
})}
</div>
))
)}
@@ -52,7 +72,7 @@ export default function AIPage() {
<Input
name="prompt"
value={input}
onChange={handleInputChange}
onChange={(e) => setInput(e.target.value)}
placeholder="Type your message..."
className="flex-1"
autoComplete="off"
@@ -64,4 +84,4 @@ export default function AIPage() {
</form>
</div>
);
}
}

37
apps/cli/templates/examples/ai/web/react/react-router/src/routes/ai.tsx → apps/cli/templates/examples/ai/web/react/react-router/src/routes/ai.tsx.hbs
View File

@@ -1,12 +1,16 @@
import React, { useRef, useEffect, useState } from "react";
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 } from "react";
export default function AI() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
const AI: React.FC = () => {
const [input, setInput] = useState("");
const { messages, sendMessage } = useChat({
transport: new DefaultChatTransport({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
}),
});
const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -15,6 +19,14 @@ export default function AI() {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const text = input.trim();
if (!text) return;
sendMessage({ text });
setInput("");
};
return (
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
<div className="overflow-y-auto space-y-4 pb-4">
@@ -35,7 +47,16 @@ export default function AI() {
<p className="text-sm font-semibold mb-1">
{message.role === "user" ? "You" : "AI Assistant"}
</p>
<div className="whitespace-pre-wrap">{message.content}</div>
{message.parts?.map((part, index) => {
if (part.type === "text") {
return (
<div key={index} className="whitespace-pre-wrap">
{part.text}
</div>
);
}
return null;
})}
</div>
))
)}
@@ -49,7 +70,7 @@ export default function AI() {
<Input
name="prompt"
value={input}
onChange={handleInputChange}
onChange={(e) => setInput(e.target.value)}
placeholder="Type your message..."
className="flex-1"
autoComplete="off"
@@ -61,4 +82,6 @@ export default function AI() {
</form>
</div>
);
}
};
export default AI;

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

@@ -1,17 +1,21 @@
import { createFileRoute } from "@tanstack/react-router";
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 } from "react";
import { useRef, useEffect, useState } from "react";
export const Route = createFileRoute("/ai")({
component: RouteComponent,
});
function RouteComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
const [input, setInput] = useState("");
const { messages, sendMessage } = useChat({
transport: new DefaultChatTransport({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
}),
});
const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -20,6 +24,14 @@ function RouteComponent() {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const text = input.trim();
if (!text) return;
sendMessage({ text });
setInput("");
};
return (
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
<div className="overflow-y-auto space-y-4 pb-4">
@@ -40,7 +52,16 @@ function RouteComponent() {
<p className="text-sm font-semibold mb-1">
{message.role === "user" ? "You" : "AI Assistant"}
</p>
<div className="whitespace-pre-wrap">{message.content}</div>
{message.parts?.map((part, index) => {
if (part.type === "text") {
return (
<div key={index} className="whitespace-pre-wrap">
{part.text}
</div>
);
}
return null;
})}
</div>
))
)}
@@ -54,7 +75,7 @@ function RouteComponent() {
<Input
name="prompt"
value={input}
onChange={handleInputChange}
onChange={(e) => setInput(e.target.value)}
placeholder="Type your message..."
className="flex-1"
autoComplete="off"

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

@@ -1,17 +1,21 @@
import { createFileRoute } from "@tanstack/react-router";
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 } from "react";
import { useRef, useEffect, useState } from "react";
export const Route = createFileRoute("/ai")({
component: RouteComponent,
});
function RouteComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
const [input, setInput] = useState("");
const { messages, sendMessage } = useChat({
transport: new DefaultChatTransport({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
}),
});
const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -20,6 +24,14 @@ function RouteComponent() {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const text = input.trim();
if (!text) return;
sendMessage({ text });
setInput("");
};
return (
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
<div className="overflow-y-auto space-y-4 pb-4">
@@ -40,7 +52,16 @@ function RouteComponent() {
<p className="text-sm font-semibold mb-1">
{message.role === "user" ? "You" : "AI Assistant"}
</p>
<div className="whitespace-pre-wrap">{message.content}</div>
{message.parts?.map((part, index) => {
if (part.type === "text") {
return (
<div key={index} className="whitespace-pre-wrap">
{part.text}
</div>
);
}
return null;
})}
</div>
))
)}
@@ -54,7 +75,7 @@ function RouteComponent() {
<Input
name="prompt"
value={input}
onChange={handleInputChange}
onChange={(e) => setInput(e.target.value)}
placeholder="Type your message..."
className="flex-1"
autoComplete="off"
@@ -66,4 +87,4 @@ function RouteComponent() {
</form>
</div>
);
}
}