@tanstack/cta-framework-react-cra 0.40.0 → 0.41.0

package/add-ons/shadcn/README.md

@@ -3,5 +3,5 @@
 Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
 
 ```bash
-pnpx shadcn@latest add button
+pnpm dlx shadcn@latest add button
 ```

package/add-ons/shadcn/assets/_dot_cursorrules.append

@@ -3,5 +3,5 @@
 Use the latest version of Shadcn to install new components, like this command to add a button component:
 
 ```bash
-pnpx shadcn@latest add button
+pnpm dlx shadcn@latest add button
 ```

package/add-ons/strapi/README.md

@@ -5,7 +5,7 @@ The current setup shows an example of how to use Strapi with an articles collect
 - Create a local running copy of the strapi admin
 
 ```bash
-pnpx create-strapi@latest my-strapi-project
+pnpm dlx create-strapi@latest my-strapi-project
 cd my-strapi-project
 pnpm dev
 ```

package/dist/checksum.js

@@ -1,3 +1,3 @@
 // This file is auto-generated. Do not edit manually.
 // Generated from add-ons, examples, hosts, project, and toolchains directories
-export const contentChecksum = 'feb5810163b26e8f14f145eedea21242641ec1d266639a75873acc3eb7b04faa';
+export const contentChecksum = 'd7d41081b1bcca2817f39f2d535d21ebd80c3dd2ec04560d0cd3a0663eb04058';

package/dist/types/checksum.d.ts

@@ -1 +1 @@
-export declare const contentChecksum = "feb5810163b26e8f14f145eedea21242641ec1d266639a75873acc3eb7b04faa";
+export declare const contentChecksum = "d7d41081b1bcca2817f39f2d535d21ebd80c3dd2ec04560d0cd3a0663eb04058";

package/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('')
                     }
                   }}

package/examples/tanchat/assets/src/data/example-guitars.ts

@@ -10,6 +10,16 @@ export interface Guitar {
 const guitars: Array<Guitar> = [
   {
     id: 1,
+    name: 'TanStack Ukelele',
+    image: '/example-ukelele-tanstack.jpg',
+    description:
+      "Introducing the TanStack Signature Ukulele—a beautifully handcrafted concert ukulele that combines exceptional sound quality with distinctive style. Featuring a warm, resonant koa-wood body with natural grain patterns, this instrument delivers the rich, mellow tones Hawaii is famous for. The exclusive TanStack palm tree inlay on the soundhole adds a unique touch of island flair, while the matching branded headstock makes this a true collector's piece for developers and musicians alike. Whether you're a beginner looking for a quality starter instrument or an experienced player wanting something special, the TanStack Ukulele brings together craftsmanship, character, and that unmistakable tropical spirit.",
+    shortDescription:
+      'Premium koa-wood ukulele featuring exclusive TanStack branding, perfect for beach vibes and island-inspired melodies.',
+    price: 299,
+  },
+  {
+    id: 2,
     name: 'Video Game Guitar',
     image: '/example-guitar-video-games.jpg',
     description:
@@ -19,7 +29,7 @@ const guitars: Array<Guitar> = [
     price: 699,
   },
   {
-    id: 2,
+    id: 3,
     name: 'Superhero Guitar',
     image: '/example-guitar-superhero.jpg',
     description:
@@ -29,7 +39,7 @@ const guitars: Array<Guitar> = [
     price: 699,
   },
   {
-    id: 3,
+    id: 4,
     name: 'Motherboard Guitar',
     image: '/example-guitar-motherboard.jpg',
     description:
@@ -39,7 +49,7 @@ const guitars: Array<Guitar> = [
     price: 649,
   },
   {
-    id: 4,
+    id: 5,
     name: 'Racing Guitar',
     image: '/example-guitar-racing.jpg',
     description:
@@ -49,7 +59,7 @@ const guitars: Array<Guitar> = [
     price: 679,
   },
   {
-    id: 5,
+    id: 6,
     name: 'Steamer Trunk Guitar',
     image: '/example-guitar-steamer-trunk.jpg',
     description:
@@ -59,7 +69,7 @@ const guitars: Array<Guitar> = [
     price: 629,
   },
   {
-    id: 6,
+    id: 7,
     name: "Travelin' Man Guitar",
     image: '/example-guitar-traveling.jpg',
     description:
@@ -69,7 +79,7 @@ const guitars: Array<Guitar> = [
     price: 499,
   },
   {
-    id: 7,
+    id: 8,
     name: 'Flowerly Love Guitar',
     image: '/example-guitar-flowers.jpg',
     description:

package/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(),
+  }),
+})

package/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' }),
             {

package/examples/tanchat/assets/src/routes/demo/tanchat.tsx

@@ -1,16 +1,22 @@
 import { useEffect, useRef, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { Send } from 'lucide-react'
+import { Send, Square } from 'lucide-react'
 import { Streamdown } from 'streamdown'
-import { useChat } from '@ai-sdk/react'
-import { DefaultChatTransport } from 'ai'
-
-import type { UIMessage } 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 '@/components/example-GuitarRecommendation'
+import { recommendGuitarToolDef } from '@/lib/example.guitar-tools'
 
 import './tanchat.css'
 
+const recommendGuitarToolClient = recommendGuitarToolDef.client(({ id }) => ({
+  id: +id,
+}))
+
+const tools = clientTools(recommendGuitarToolClient)
+
 function InitalLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex-1 flex items-center justify-center px-4">
@@ -56,17 +62,17 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
       className="flex-1 overflow-y-auto pb-4 min-h-0"
     >
       <div className="max-w-3xl mx-auto w-full px-4">
-        {messages.map(({ id, role, parts }) => (
+        {messages.map((message) => (
           <div
-            key={id}
+            key={message.id}
             className={`p-4 ${
-              role === 'assistant'
+              message.role === 'assistant'
                 ? 'bg-gradient-to-r from-orange-500/5 to-red-600/5'
                 : 'bg-transparent'
             }`}
           >
             <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
-              {role === 'assistant' ? (
+              {message.role === 'assistant' ? (
                 <div className="w-8 h-8 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
                   AI
                 </div>
@@ -75,31 +81,31 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
                   Y
                 </div>
               )}
-              <div className="flex-1">
-                {parts.map((part, index) => {
-                  if (part.type === 'text') {
+              <div className="flex-1 min-w-0">
+                {message.parts.map((part, index) => {
+                  if (part.type === 'text' && part.content) {
                     return (
                       <div
                         className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
                         key={index}
                       >
-                        <Streamdown>{part.text}</Streamdown>
+                        <Streamdown>{part.content}</Streamdown>
                       </div>
                     )
                   }
+                  // Guitar recommendation card
                   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={index} 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>
                     )
                   }
+                  return null
                 })}
               </div>
             </div>
@@ -111,10 +117,9 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
 }
 
 function ChatPage() {
-  const { messages, sendMessage } = useChat({
-    transport: new DefaultChatTransport({
-      api: '/demo/api/tanchat',
-    }),
+  const { messages, sendMessage, isLoading, stop } = useChat({
+    connection: fetchServerSentEvents('/demo/api/tanchat'),
+    tools,
   })
   const [input, setInput] = useState('')
 
@@ -126,44 +131,60 @@ function ChatPage() {
         <Messages messages={messages} />
 
         <Layout>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              sendMessage({ text: input })
-              setInput('')
-            }}
-          >
-            <div className="relative max-w-xl mx-auto">
-              <textarea
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                placeholder="Type something clever..."
-                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}
-                style={{ minHeight: '44px', maxHeight: '200px' }}
-                onInput={(e) => {
-                  const target = e.target as HTMLTextAreaElement
-                  target.style.height = 'auto'
-                  target.style.height =
-                    Math.min(target.scrollHeight, 200) + 'px'
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault()
-                    sendMessage({ text: input })
-                    setInput('')
-                  }
-                }}
-              />
-              <button
-                type="submit"
-                disabled={!input.trim()}
-                className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
-              >
-                <Send className="w-4 h-4" />
-              </button>
-            </div>
-          </form>
+          <div className="space-y-3">
+            {isLoading && (
+              <div className="flex items-center justify-center">
+                <button
+                  onClick={stop}
+                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+                >
+                  <Square className="w-4 h-4 fill-current" />
+                  Stop
+                </button>
+              </div>
+            )}
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                if (input.trim()) {
+                  sendMessage(input)
+                  setInput('')
+                }
+              }}
+            >
+              <div className="relative max-w-xl mx-auto">
+                <textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Type something clever..."
+                  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}
+                  style={{ minHeight: '44px', maxHeight: '200px' }}
+                  disabled={isLoading}
+                  onInput={(e) => {
+                    const target = e.target as HTMLTextAreaElement
+                    target.style.height = 'auto'
+                    target.style.height =
+                      Math.min(target.scrollHeight, 200) + 'px'
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey && input.trim()) {
+                      e.preventDefault()
+                      sendMessage(input)
+                      setInput('')
+                    }
+                  }}
+                />
+                <button
+                  type="submit"
+                  disabled={!input.trim() || isLoading}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </div>
+            </form>
+          </div>
         </Layout>
       </div>
     </div>

package/examples/tanchat/package.json

@@ -1,10 +1,9 @@
 {
   "dependencies": {
-    "@ai-sdk/anthropic": "^2.0.1",
-    "@ai-sdk/mcp": "^0.0.5",
-    "@ai-sdk/react": "^2.0.8",
-    "@modelcontextprotocol/sdk": "^1.8.0",
-    "ai": "^5.0.8",
+    "@tanstack/ai": "^0.0.1",
+    "@tanstack/ai-anthropic": "^0.0.1",
+    "@tanstack/ai-client": "^0.0.1",
+    "@tanstack/ai-react": "^0.0.1",
     "highlight.js": "^11.11.1",
     "streamdown": "^1.6.5",
     "lucide-react": "^0.544.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-framework-react-cra",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "CTA Framework for React (Create React App)",
   "type": "module",
   "main": "./dist/index.js",

package/src/checksum.ts

@@ -1,3 +1,3 @@
 // This file is auto-generated. Do not edit manually.
 // Generated from add-ons, examples, hosts, project, and toolchains directories
-export const contentChecksum = 'feb5810163b26e8f14f145eedea21242641ec1d266639a75873acc3eb7b04faa'
+export const contentChecksum = 'd7d41081b1bcca2817f39f2d535d21ebd80c3dd2ec04560d0cd3a0663eb04058'

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

@@ -1,54 +0,0 @@
-import { tool } from 'ai'
-// import { experimental_createMCPClient } from '@ai-sdk/mcp'
-// 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
-// const mcpClient = await experimental_createMCPClient({
-//   transport: {
-//     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: [
-//       "stdio-server.js",
-//     ],
-//   }),
-// });
-
-const getGuitars = tool({
-  description: 'Get all products from the database',
-  inputSchema: z.object({}),
-  execute: async () => {
-    return Promise.resolve(guitars)
-  },
-})
-
-const recommendGuitar = tool({
-  description: 'Use this tool to recommend a guitar to the user',
-  inputSchema: z.object({
-    id: z.string().describe('The id of the guitar to recommend'),
-  }),
-  execute: async ({ id }) => {
-    return {
-      id,
-    }
-  },
-})
-
-export default async function getTools() {
-  // const mcpTools = await mcpClient.tools()
-  return {
-    // ...mcpTools,
-    getGuitars,
-    recommendGuitar,
-  }
-}