fix: tanchat ai fixups

Author: jherr

src/create-app.ts

@@ -725,6 +725,6 @@ Use the following commands to start your app:
 % cd ${options.projectName}
 % ${startCommand}
 
-Please read README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
+Please read the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
   }
 }

templates/react/example/tanchat/assets/src/utils/demo.ai.ts

@@ -10,9 +10,15 @@ export interface Message {
   content: string
 }
 
-const SYSTEM_PROMPT = `You are TanStack Chat, an AI assistant using Markdown for clear and structured responses.`
+const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
 
-export const genAIResponse = createServerFn({ method: 'GET', response: 'raw' })
+You can use the following tools to help the user:
+
+- getGuitars: Get all guitars from the database
+- recommendGuitar: Recommend a guitar to the user
+`
+
+export const genAIResponse = createServerFn({ method: 'POST', response: 'raw' })
   .validator(
     (d: {
       messages: Array<Message>

templates/react/example/tanchat/assets/src/utils/demo.tools.ts

@@ -1,24 +1,28 @@
 import { experimental_createMCPClient, tool } from 'ai'
+//import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { z } from 'zod'
 import guitars from '../data/example-guitars'
 
-// Example of using an MCP server to get tools
-// const mcpCient = await experimental_createMCPClient({
+// Example of using an SSE MCP server
+// const mcpClient = await experimental_createMCPClient({
 //   transport: {
-//     type: 'stdio',
+//     type: "sse",
+//     url: "http://localhost:8081/sse",
+//   },
+//   name: "Demo Service",
+// });
+
+// Example of using an STDIO MCP server
+// const mcpClient = await experimental_createMCPClient({
+//   transport: new StdioClientTransport({
+//     command: "node",
 //     args: [
-//       '--directory',
-//       '~/mcp/servers/src/sqlite',
-//       'run',
-//       'mcp-server-sqlite',
-//       '--db-path',
-//       '~/sqlite-example/orders.db',
+//       "stdio-server.js",
 //     ],
-//     command: 'uv',
-//   },
-// })
+//   }),
+// });
 
-const getProducts = tool({
+const getGuitars = tool({
   description: 'Get all products from the database',
   parameters: z.object({}),
   execute: async () => {
@@ -37,7 +41,7 @@ export default async function getTools() {
   // const mcpTools = await mcpCient.tools()
   return {
     // ...mcpTools,
-    getProducts,
+    getGuitars,
     recommendGuitar,
   }
 }

templates/react/example/tanchat/package.json

@@ -2,13 +2,14 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^1.1.17",
     "@ai-sdk/react": "^1.1.23",
-    "ai": "^4.1.61",
+    "ai": "^4.1.65",
     "highlight.js": "^11.11.1",
     "react-markdown": "^9.0.1",
     "rehype-highlight": "^7.0.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "lucide-react": "^0.475.0"
+    "lucide-react": "^0.475.0",
+    "zod": "^3.24.2"
   }
 }