@tanstack/cta-framework-react-cra 0.17.4 → 0.17.5

package/add-ons/db/assets/src/components/demo.chat-area.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { useChat, useMessages } from '@/hooks/demo.useChat'
 
 import Messages from './demo.messages'
 
 export default function ChatArea() {
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-
   const { sendMessage } = useChat()
 
   const messages = useMessages()
@@ -14,10 +12,6 @@ export default function ChatArea() {
   const [message, setMessage] = useState('')
   const [user, setUser] = useState('Alice')
 
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
-
   const postMessage = () => {
     if (message.trim().length) {
       sendMessage(message, user)
@@ -35,7 +29,6 @@ export default function ChatArea() {
     <>
       <div className="px-4 py-6 space-y-4">
         <Messages messages={messages} user={user} />
-        <div ref={messagesEndRef} />
       </div>
 
       <div className="bg-white border-t border-gray-200 px-4 py-4">

package/examples/tanchat/assets/src/components/example-AIAssistant.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useStore } from '@tanstack/react-store'
 import { Send, X } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
@@ -7,7 +7,7 @@ import rehypeSanitize from 'rehype-sanitize'
 import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
 import { useChat } from '@ai-sdk/react'
-import { genAIResponse } from '../utils/demo.ai'
+import { DefaultChatTransport } from 'ai'
 
 import { showAIAssistant } from '../store/example-assistant'
 import GuitarRecommendation from './example-GuitarRecommendation'
@@ -34,7 +34,7 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
 
   return (
     <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
-      {messages.map(({ id, role, content, parts }) => (
+      {messages.map(({ id, role, parts }) => (
         <div
           key={id}
           className={`py-3 ${
@@ -43,45 +43,49 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
               : 'bg-transparent'
           }`}
         >
-          {content.length > 0 && (
-            <div className="flex items-start gap-2 px-4">
-              {role === 'assistant' ? (
-                <div className="w-6 h-6 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
-                  AI
+          {parts.map((part) => {
+            if (part.type === 'text') {
+              return (
+                <div className="flex items-start gap-2 px-4">
+                  {role === 'assistant' ? (
+                    <div className="w-6 h-6 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      AI
+                    </div>
+                  ) : (
+                    <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      Y
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <ReactMarkdown
+                      className="prose dark:prose-invert max-w-none prose-sm"
+                      rehypePlugins={[
+                        rehypeRaw,
+                        rehypeSanitize,
+                        rehypeHighlight,
+                        remarkGfm,
+                      ]}
+                    >
+                      {part.text}
+                    </ReactMarkdown>
+                  </div>
                 </div>
-              ) : (
-                <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
-                  Y
+              )
+            }
+            if (
+              part.type === 'tool-recommendGuitar' &&
+              part.state === 'output-available' &&
+              (part.output as { id: string })?.id
+            ) {
+              return (
+                <div key={id} className="max-w-[80%] mx-auto">
+                  <GuitarRecommendation
+                    id={(part.output as { id: string })?.id}
+                  />
                 </div>
-              )}
-              <div className="flex-1 min-w-0">
-                <ReactMarkdown
-                  className="prose dark:prose-invert max-w-none prose-sm"
-                  rehypePlugins={[
-                    rehypeRaw,
-                    rehypeSanitize,
-                    rehypeHighlight,
-                    remarkGfm,
-                  ]}
-                >
-                  {content}
-                </ReactMarkdown>
-              </div>
-            </div>
-          )}
-          {parts
-            .filter((part) => part.type === 'tool-invocation')
-            .filter(
-              (part) => part.toolInvocation.toolName === 'recommendGuitar',
-            )
-            .map((toolCall) => (
-              <div
-                key={toolCall.toolInvocation.toolName}
-                className="max-w-[80%] mx-auto"
-              >
-                <GuitarRecommendation id={toolCall.toolInvocation.args.id} />
-              </div>
-            ))}
+              )
+            }
+          })}
         </div>
       ))}
     </div>
@@ -90,22 +94,12 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
 
 export default function AIAssistant() {
   const isOpen = useStore(showAIAssistant)
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
-    initialMessages: [],
-    fetch: (_url, options) => {
-      const { messages } = JSON.parse(options!.body! as string)
-      return genAIResponse({
-        data: {
-          messages,
-        },
-      })
-    },
-    onToolCall: (call) => {
-      if (call.toolCall.toolName === 'recommendGuitar') {
-        return 'Handled by the UI'
-      }
-    },
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
+      api: '/api/demo-chat',
+    }),
   })
+  const [input, setInput] = useState('')
 
   return (
     <div className="relative z-50">
@@ -134,11 +128,17 @@ export default function AIAssistant() {
           <Messages messages={messages} />
 
           <div className="p-3 border-t border-orange-500/20">
-            <form onSubmit={handleSubmit}>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                sendMessage({ text: input })
+                setInput('')
+              }}
+            >
               <div className="relative">
                 <textarea
                   value={input}
-                  onChange={handleInputChange}
+                  onChange={(e) => setInput(e.target.value)}
                   placeholder="Type your message..."
                   className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden"
                   rows={1}
@@ -152,7 +152,8 @@ export default function AIAssistant() {
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' && !e.shiftKey) {
                       e.preventDefault()
-                      handleSubmit(e)
+                      sendMessage({ text: input })
+                      setInput('')
                     }
                   }}
                 />

package/examples/tanchat/assets/src/routes/api.demo-chat.ts

@@ -0,0 +1,43 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+import { anthropic } from '@ai-sdk/anthropic'
+import { convertToModelMessages, stepCountIs, streamText } from 'ai'
+
+import getTools from '@/utils/demo.tools'
+
+const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
+
+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 ServerRoute = createServerFileRoute('/api/demo-chat').methods({
+  POST: async ({ request }) => {
+    try {
+      const { messages } = await request.json()
+
+      const tools = await getTools()
+
+      const result = await streamText({
+        model: anthropic('claude-3-5-sonnet-latest'),
+        messages: convertToModelMessages(messages),
+        temperature: 0.7,
+        stopWhen: stepCountIs(5),
+        system: SYSTEM_PROMPT,
+        tools,
+      })
+
+      return result.toUIMessageStreamResponse()
+    } catch (error) {
+      console.error('Chat API error:', error)
+      return new Response(
+        JSON.stringify({ error: 'Failed to process chat request' }),
+        {
+          status: 500,
+          headers: { 'Content-Type': 'application/json' },
+        },
+      )
+    }
+  },
+})

package/examples/tanchat/assets/src/routes/example.chat.tsx

@@ -1,5 +1,5 @@
+import { useEffect, useRef, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { useEffect, useRef } from 'react'
 import { Send } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
@@ -7,11 +7,12 @@ import rehypeSanitize from 'rehype-sanitize'
 import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
 import { useChat } from '@ai-sdk/react'
-
-import { genAIResponse } from '../utils/demo.ai'
+import { DefaultChatTransport } from 'ai'
 
 import type { UIMessage } from 'ai'
 
+import GuitarRecommendation from '@/components/example-GuitarRecommendation'
+
 import '../demo.index.css'
 
 function InitalLayout({ children }: { children: React.ReactNode }) {
@@ -56,10 +57,10 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
   return (
     <div ref={messagesContainerRef} className="flex-1 overflow-y-auto pb-24">
       <div className="max-w-3xl mx-auto w-full px-4">
-        {messages.map(({ id, role, content }) => (
+        {messages.map(({ id, role, parts }) => (
           <div
             key={id}
-            className={`py-6 ${
+            className={`p-4 ${
               role === 'assistant'
                 ? 'bg-gradient-to-r from-orange-500/5 to-red-600/5'
                 : 'bg-transparent'
@@ -75,18 +76,39 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
                   Y
                 </div>
               )}
-              <div className="flex-1 min-w-0">
-                <ReactMarkdown
-                  className="prose dark:prose-invert max-w-none"
-                  rehypePlugins={[
-                    rehypeRaw,
-                    rehypeSanitize,
-                    rehypeHighlight,
-                    remarkGfm,
-                  ]}
-                >
-                  {content}
-                </ReactMarkdown>
+              <div className="flex-1">
+                {parts.map((part, index) => {
+                  if (part.type === 'text') {
+                    return (
+                      <div className="flex-1 min-w-0" key={index}>
+                        <ReactMarkdown
+                          className="prose dark:prose-invert max-w-none"
+                          rehypePlugins={[
+                            rehypeRaw,
+                            rehypeSanitize,
+                            rehypeHighlight,
+                            remarkGfm,
+                          ]}
+                        >
+                          {part.text}
+                        </ReactMarkdown>
+                      </div>
+                    )
+                  }
+                  if (
+                    part.type === 'tool-recommendGuitar' &&
+                    part.state === 'output-available' &&
+                    (part.output as { id: string })?.id
+                  ) {
+                    return (
+                      <div key={index} className="max-w-[80%] mx-auto">
+                        <GuitarRecommendation
+                          id={(part.output as { id: string })?.id}
+                        />
+                      </div>
+                    )
+                  }
+                })}
               </div>
             </div>
           </div>
@@ -97,17 +119,12 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
 }
 
 function ChatPage() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
-    initialMessages: [],
-    fetch: (_url, options) => {
-      const { messages } = JSON.parse(options!.body! as string)
-      return genAIResponse({
-        data: {
-          messages,
-        },
-      })
-    },
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
+      api: '/api/demo-chat',
+    }),
   })
+  const [input, setInput] = useState('')
 
   const Layout = messages.length ? ChattingLayout : InitalLayout
 
@@ -117,11 +134,17 @@ function ChatPage() {
         <Messages messages={messages} />
 
         <Layout>
-          <form onSubmit={handleSubmit}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              sendMessage({ text: input })
+              setInput('')
+            }}
+          >
             <div className="relative max-w-xl mx-auto">
               <textarea
                 value={input}
-                onChange={handleInputChange}
+                onChange={(e) => setInput(e.target.value)}
                 placeholder="Type something clever (or don't, we won't judge)..."
                 className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden shadow-lg"
                 rows={1}
@@ -135,7 +158,8 @@ function ChatPage() {
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && !e.shiftKey) {
                     e.preventDefault()
-                    handleSubmit(e)
+                    sendMessage({ text: input })
+                    setInput('')
                   }
                 }}
               />

package/examples/tanchat/assets/src/utils/demo.tools.ts

@@ -1,6 +1,7 @@
 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 SSE MCP server
@@ -24,7 +25,7 @@ import guitars from '../data/example-guitars'
 
 const getGuitars = tool({
   description: 'Get all products from the database',
-  parameters: z.object({}),
+  inputSchema: z.object({}),
   execute: async () => {
     return Promise.resolve(guitars)
   },
@@ -32,9 +33,14 @@ const getGuitars = tool({
 
 const recommendGuitar = tool({
   description: 'Use this tool to recommend a guitar to the user',
-  parameters: z.object({
+  inputSchema: z.object({
     id: z.string().describe('The id of the guitar to recommend'),
   }),
+  execute: async ({ id }) => {
+    return {
+      id,
+    }
+  },
 })
 
 export default async function getTools() {

package/examples/tanchat/package.json

@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "@ai-sdk/anthropic": "^1.1.17",
-    "@ai-sdk/react": "^1.1.23",
+    "@ai-sdk/anthropic": "^2.0.1",
+    "@ai-sdk/react": "^2.0.8",
     "@modelcontextprotocol/sdk": "^1.8.0",
-    "ai": "^4.1.65",
+    "ai": "^5.0.8",
     "highlight.js": "^11.11.1",
     "react-markdown": "^9.0.1",
     "rehype-highlight": "^7.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-framework-react-cra",
-  "version": "0.17.4",
+  "version": "0.17.5",
   "description": "CTA Framework for React (Create React App)",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "author": "Jack Herrington <jherr@pobox.com>",
   "license": "MIT",
   "dependencies": {
-    "@tanstack/cta-engine": "0.17.4"
+    "@tanstack/cta-engine": "0.17.5"
   },
   "devDependencies": {
     "@types/node": "^22.13.4",

package/examples/tanchat/assets/src/utils/demo.ai.ts

@@ -1,62 +0,0 @@
-import { createServerFn } from '@tanstack/react-start'
-import { anthropic } from '@ai-sdk/anthropic'
-import { streamText } from 'ai'
-
-import getTools from './demo.tools'
-
-export interface Message {
-  id: string
-  role: 'user' | 'assistant'
-  content: string
-}
-
-const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
-
-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>
-      systemPrompt?: { value: string; enabled: boolean }
-    }) => d,
-  )
-  .handler(async ({ data }) => {
-    const messages = data.messages
-      .filter(
-        (msg) =>
-          msg.content.trim() !== '' &&
-          !msg.content.startsWith('Sorry, I encountered an error'),
-      )
-      .map((msg) => ({
-        role: msg.role,
-        content: msg.content.trim(),
-      }))
-
-    const tools = await getTools()
-
-    try {
-      const result = streamText({
-        model: anthropic('claude-3-5-sonnet-latest'),
-        messages,
-        system: SYSTEM_PROMPT,
-        maxSteps: 10,
-        tools,
-      })
-
-      return result.toDataStreamResponse()
-    } catch (error) {
-      console.error('Error in genAIResponse:', error)
-      if (error instanceof Error && error.message.includes('rate limit')) {
-        return { error: 'Rate limit exceeded. Please try again in a moment.' }
-      }
-      return {
-        error:
-          error instanceof Error ? error.message : 'Failed to get AI response',
-      }
-    }
-  })