feat: tanstack-ai for react

Author: jherr

frameworks/react-cra/examples/tanchat/assets/src/components/example-AIAssistant.tsx

@@ -5,12 +5,18 @@ import { Store } from '@tanstack/store'
 import { Send, X, ChevronRight } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 
-import { useChat } from '@ai-sdk/react'
-import { DefaultChatTransport } from 'ai'
+import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
+import { clientTools } from '@tanstack/ai-client'
+import type { UIMessage } from '@tanstack/ai-react'
 
 import GuitarRecommendation from './example-GuitarRecommendation'
+import { recommendGuitarToolDef } from '@/lib/example.guitar-tools'
 
-import type { UIMessage } from 'ai'
+const recommendGuitarToolClient = recommendGuitarToolDef.client(({ id }) => ({
+  id: +id,
+}))
+
+const tools = clientTools(recommendGuitarToolClient)
 
 export const showAIAssistant = new Store(false)
 
@@ -43,10 +49,10 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
               : 'bg-transparent'
           }`}
         >
-          {parts.map((part) => {
-            if (part.type === 'text') {
+          {parts.map((part, index) => {
+            if (part.type === 'text' && part.content) {
               return (
-                <div className="flex items-start gap-2 px-4">
+                <div key={index} 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
@@ -57,21 +63,19 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
                     </div>
                   )}
                   <div className="flex-1 min-w-0 text-white prose dark:prose-invert max-w-none prose-sm">
-                    <Streamdown>{part.text}</Streamdown>
+                    <Streamdown>{part.content}</Streamdown>
                   </div>
                 </div>
               )
             }
             if (
-              part.type === 'tool-recommendGuitar' &&
-              part.state === 'output-available' &&
-              (part.output as { id: string })?.id
+              part.type === 'tool-call' &&
+              part.name === 'recommendGuitar' &&
+              part.output
             ) {
               return (
-                <div key={id} className="max-w-[80%] mx-auto">
-                  <GuitarRecommendation
-                    id={(part.output as { id: string })?.id}
-                  />
+                <div key={part.id} className="max-w-[80%] mx-auto">
+                  <GuitarRecommendation id={String(part.output?.id)} />
                 </div>
               )
             }
@@ -85,9 +89,8 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
 export default function AIAssistant() {
   const isOpen = useStore(showAIAssistant)
   const { messages, sendMessage } = useChat({
-    transport: new DefaultChatTransport({
-      api: '/demo/api/tanchat',
-    }),
+    connection: fetchServerSentEvents('/demo/api/tanchat'),
+    tools,
   })
   const [input, setInput] = useState('')
 
@@ -124,8 +127,10 @@ export default function AIAssistant() {
             <form
               onSubmit={(e) => {
                 e.preventDefault()
-                sendMessage({ text: input })
-                setInput('')
+                if (input.trim()) {
+                  sendMessage(input)
+                  setInput('')
+                }
               }}
             >
               <div className="relative">
@@ -143,9 +148,9 @@ export default function AIAssistant() {
                       Math.min(target.scrollHeight, 120) + 'px'
                   }}
                   onKeyDown={(e) => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
+                    if (e.key === 'Enter' && !e.shiftKey && input.trim()) {
                       e.preventDefault()
-                      sendMessage({ text: input })
+                      sendMessage(input)
                       setInput('')
                     }
                   }}

frameworks/react-cra/examples/tanchat/assets/src/lib/example.guitar-tools.ts

@@ -0,0 +1,40 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+import guitars from '@/data/example-guitars'
+
+// Tool definition for getting guitars
+export const getGuitarsToolDef = toolDefinition({
+  name: 'getGuitars',
+  description: 'Get all products from the database',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      id: z.number(),
+      name: z.string(),
+      image: z.string(),
+      description: z.string(),
+      shortDescription: z.string(),
+      price: z.number(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getGuitars = getGuitarsToolDef.server(() => guitars)
+
+// Tool definition for guitar recommendation
+export const recommendGuitarToolDef = toolDefinition({
+  name: 'recommendGuitar',
+  description:
+    'REQUIRED tool to display a guitar recommendation to the user. This tool MUST be used whenever recommending a guitar - do NOT write recommendations yourself. This displays the guitar in a special appealing format with a buy button.',
+  inputSchema: z.object({
+    id: z
+      .union([z.string(), z.number()])
+      .describe(
+        'The ID of the guitar to recommend (from the getGuitars results)',
+      ),
+  }),
+  outputSchema: z.object({
+    id: z.number(),
+  }),
+})

frameworks/react-cra/examples/tanchat/assets/src/routes/demo/api.tanchat.ts.ejs

@@ -1,48 +1,63 @@
 import { createFileRoute } from '@tanstack/react-router'
-<% if (addOnEnabled['netlify']) { %>import { createAnthropic } from '@ai-sdk/anthropic'
-<% } else { %>import { anthropic } from '@ai-sdk/anthropic'
-<% } %>import { convertToModelMessages, stepCountIs, streamText } from 'ai'
+import { chat, maxIterations, toStreamResponse } from '@tanstack/ai'
+import { anthropic } from '@tanstack/ai-anthropic'
 
-import getTools from '@/utils/demo.tools'
+import { getGuitars, recommendGuitarToolDef } from '@/lib/example.guitar-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:
+CRITICAL INSTRUCTIONS - YOU MUST FOLLOW THIS EXACT WORKFLOW:
 
-- getGuitars: Get all guitars from the database
-- recommendGuitar: Recommend a guitar to the user
+When a user asks for a guitar recommendation:
+1. FIRST: Use the getGuitars tool (no parameters needed)
+2. SECOND: Use the recommendGuitar tool with the ID of the guitar you want to recommend
+3. NEVER write a recommendation directly - ALWAYS use the recommendGuitar tool
+
+IMPORTANT:
+- The recommendGuitar tool will display the guitar in a special, appealing format
+- You MUST use recommendGuitar for ANY guitar recommendation
+- ONLY recommend guitars from our inventory (use getGuitars first)
+- The recommendGuitar tool has a buy button - this is how customers purchase
+- Do NOT describe the guitar yourself - let the recommendGuitar tool do it
 `
-<% if (addOnEnabled['netlify']) { %>const anthropic = createAnthropic({
-  baseURL: process.env.ANTHROPIC_BASE_URL
-    ? `${process.env.ANTHROPIC_BASE_URL}/v1`
-    : undefined,
-  apiKey: process.env.ANTHROPIC_API_KEY,
-  headers: {
-    'user-agent': 'anthropic/',
-  },
-})
-<% } %>
-export const Route = createFileRoute('/api/demo-chat')({
+
+export const Route = createFileRoute('/demo/api/tanchat')({
   server: {
     handlers: {
       POST: async ({ request }) => {
+        // Capture request signal before reading body (it may be aborted after body is consumed)
+        const requestSignal = request.signal
+
+        // If request is already aborted, return early
+        if (requestSignal.aborted) {
+          return new Response(null, { status: 499 }) // 499 = Client Closed Request
+        }
+
+        const abortController = new AbortController()
+
         try {
           const { messages } = await request.json()
 
-          const tools = await getTools()
-
-          const result = await streamText({
-            model: anthropic('<% if (addOnEnabled['netlify']) { %>claude-sonnet-4-5-20250929<% } else { %>claude-haiku-4-5<% } %>'),
-            messages: convertToModelMessages(messages),
-            temperature: 0.7,
-            stopWhen: stepCountIs(5),
-            system: SYSTEM_PROMPT,
-            tools,
+          const stream = chat({
+            adapter: anthropic(),
+            model: 'claude-haiku-4-5',
+            tools: [
+              getGuitars, // Server tool
+              recommendGuitarToolDef, // No server execute - client will handle
+            ],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
           })
 
-          return result.toUIMessageStreamResponse()
-        } catch (error) {
+          return toStreamResponse(stream, { abortController })
+        } catch (error: any) {
           console.error('Chat API error:', error)
+          // If request was aborted, return early (don't send error response)
+          if (error.name === 'AbortError' || abortController.signal.aborted) {
+            return new Response(null, { status: 499 }) // 499 = Client Closed Request
+          }
           return new Response(
             JSON.stringify({ error: 'Failed to process chat request' }),
             {