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

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/add-ons/store/assets/src/lib/demo-store-devtools.tsx

@@ -0,0 +1,64 @@
+import { EventClient } from '@tanstack/devtools-event-client'
+import { useState, useEffect } from 'react'
+
+import { store, fullName } from './demo-store'
+
+type EventMap = {
+  'store-devtools:state': {
+    firstName: string
+    lastName: string
+    fullName: string
+  }
+}
+
+class StoreDevtoolsEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'store-devtools',
+    })
+  }
+}
+
+const sdec = new StoreDevtoolsEventClient()
+
+store.subscribe(() => {
+  sdec.emit('state', {
+    firstName: store.state.firstName,
+    lastName: store.state.lastName,
+    fullName: fullName.state,
+  })
+})
+
+function DevtoolPanel() {
+  const [state, setState] = useState<EventMap['store-devtools:state']>(() => ({
+    firstName: store.state.firstName,
+    lastName: store.state.lastName,
+    fullName: fullName.state,
+  }))
+
+  useEffect(() => {
+    return sdec.on('state', (e) => setState(e.payload))
+  }, [])
+
+  return (
+    <div className="p-4 grid gap-4 grid-cols-[1fr_10fr]">
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        First Name
+      </div>
+      <div className="text-sm">{state?.firstName}</div>
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        Last Name
+      </div>
+      <div className="text-sm">{state?.lastName}</div>
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        Full Name
+      </div>
+      <div className="text-sm">{state?.fullName}</div>
+    </div>
+  )
+}
+
+export default {
+  name: 'TanStack Store',
+  render: <DevtoolPanel />,
+}

package/add-ons/store/info.json

@@ -12,5 +12,12 @@
       "path": "src/routes/demo.store.tsx",
       "jsName": "StoreDemo"
     }
+  ],
+  "integrations": [
+    {
+      "type": "devtools",
+      "path": "src/lib/demo-store-devtools.tsx",
+      "jsName": "StoreDevtools"
+    }
   ]
 }

package/add-ons/store/package.json

@@ -2,5 +2,8 @@
   "dependencies": {
     "@tanstack/store": "^0.7.0",
     "@tanstack/react-store": "^0.7.0"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-event-client": "^0.2.1"
   }
 }

package/add-ons/tanstack-query/assets/src/integrations/tanstack-query/devtools.tsx

@@ -0,0 +1,6 @@
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+
+export default {
+  name: 'Tanstack Query',
+  render: <ReactQueryDevtoolsPanel />,
+}

package/add-ons/tanstack-query/info.json

@@ -20,9 +20,9 @@
       "jsName": "TanStackQueryProvider"
     },
     {
-      "type": "layout",
-      "path": "src/integrations/tanstack-query/layout.tsx",
-      "jsName": "TanStackQueryLayout"
+      "type": "devtools",
+      "path": "src/integrations/tanstack-query/devtools.tsx",
+      "jsName": "TanStackQueryDevtools"
     }
   ]
 }

package/add-ons/tanstack-query/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@tanstack/react-query": "^5.66.5",
-    "@tanstack/react-query-devtools": "^5.66.5"
+    "@tanstack/react-query-devtools": "^5.84.2"
   }
 }

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.19.0",
   "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.19.0"
   },
   "devDependencies": {
     "@types/node": "^22.13.4",

package/project/base/package.json

@@ -10,8 +10,9 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.2.2",
     "@tanstack/react-router": "^1.130.2",
-    "@tanstack/react-router-devtools": "^1.130.2",
+    "@tanstack/react-router-devtools": "^1.131.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/project/base/src/routes/__root.tsx.ejs

@@ -1,10 +1,11 @@
 <% if (!fileRouter) { ignoreFile() } %>import { <% if (addOnEnabled.start) { %>
   HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import { TanstackDevtools } from '@tanstack/react-devtools'
 <% if (addOns.length) { %>
 import Header from '../components/Header'
-<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
-import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
+<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
+import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
 <% } %>
 <% if (addOnEnabled.start) { %>
 import appCss from '../styles.css?url'
@@ -53,7 +54,18 @@ export const Route = <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteW
   <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
   <% } %><% if (addOns.length) { %><Header />  
   <% } %><Outlet />
-      <TanStackRouterDevtools />
+        <TanstackDevtools
+        config={{
+          position: 'bottom-left',
+        }}
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel />,
+          },
+          <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+        ]}
+      />
       <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
       <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
     <% } %>
@@ -72,7 +84,18 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
         <% } %><% if (addOns.length) { %><Header />  
         <% } %>{children}
-          <TanStackRouterDevtools />
+          <TanstackDevtools
+            config={{
+              position: 'bottom-left',
+            }}
+            plugins={[
+              {
+                name: 'Tanstack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              },
+              <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+            ]}
+          />
           <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
           <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
         <% } %><Scripts />