fixing client and panel issues

Author: jherr

packages/typescript/ai-client/src/chat-client.ts

@@ -16,9 +16,9 @@ import type { ChatClientEventEmitter } from './events'
 
 export class ChatClient {
   private processor: StreamProcessor
-  private connectionRef: { current: ConnectionAdapter }
+  private connection: ConnectionAdapter
   private uniqueId: string
-  private bodyRef: { current?: Record<string, any> }
+  private body: Record<string, any> = {}
   private isLoading = false
   private error: Error | undefined = undefined
   private abortController: AbortController | null = null
@@ -39,8 +39,8 @@ export class ChatClient {
 
   constructor(options: ChatClientOptions) {
     this.uniqueId = options.id || this.generateUniqueId('chat')
-    this.bodyRef = { current: options.body }
-    this.connectionRef = { current: options.connection }
+    this.body = options.body || {}
+    this.connection = options.connection
     this.events = new DefaultChatClientEventEmitter(this.uniqueId)
 
     // Build client tools map
@@ -235,9 +235,9 @@ export class ChatClient {
       await this.callbacksRef.current.onResponse()
 
       // Connect and stream
-      const stream = this.connectionRef.current.connect(
+      const stream = this.connection.connect(
         modelMessages,
-        this.bodyRef.current,
+        this.body,
         this.abortController.signal,
       )
 
@@ -425,10 +425,10 @@ export class ChatClient {
     onError?: (error: Error) => void
   }): void {
     if (options.connection !== undefined) {
-      this.connectionRef.current = options.connection
+      this.connection = options.connection
     }
     if (options.body !== undefined) {
-      this.bodyRef.current = options.body
+      this.body = options.body
     }
     if (options.tools !== undefined) {
       this.clientToolsRef.current = new Map()

testing/panel/src/lib/guitar-tools.ts

@@ -1,17 +1,29 @@
-import { tool } from '@tanstack/ai'
+import { toolDefinition } from '@tanstack/ai'
 import { z } from 'zod'
 import guitars from '@/data/example-guitars'
 
-export const getGuitarsTool = tool({
+// Tool definition for getting guitars
+export const getGuitarsToolDef = toolDefinition({
   name: 'getGuitars',
   description: 'Get all products from the database',
   inputSchema: z.object({}),
-  execute: async () => {
-    return guitars
-  },
+  outputSchema: z.array(
+    z.object({
+      id: z.number(),
+      name: z.string(),
+      image: z.string(),
+      description: z.string(),
+      shortDescription: z.string(),
+      price: z.number(),
+    }),
+  ),
 })
 
-export const recommendGuitarTool = tool({
+// 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.',
@@ -22,49 +34,51 @@ export const recommendGuitarTool = tool({
         'The ID of the guitar to recommend (from the getGuitars results)',
       ),
   }),
+  outputSchema: z.object({
+    id: z.string(),
+  }),
 })
 
-export const getPersonalGuitarPreferenceTool = tool({
+// Tool definition for personal preference
+export const getPersonalGuitarPreferenceToolDef = toolDefinition({
   name: 'getPersonalGuitarPreference',
   description:
     "Get the user's guitar preference from their local browser storage",
   inputSchema: z.object({}),
-  // No execute = client-side tool
+  outputSchema: z.object({
+    preference: z.string(),
+  }),
 })
 
-export const addToWishListTool = tool({
+// Tool definition for wish list (needs approval)
+export const addToWishListToolDef = toolDefinition({
   name: 'addToWishList',
   description: "Add a guitar to the user's wish list (requires approval)",
   inputSchema: z.object({
     guitarId: z.string(),
   }),
+  outputSchema: z.object({
+    success: z.boolean(),
+    guitarId: z.string(),
+    totalItems: z.number(),
+  }),
   needsApproval: true,
-  // No execute = client-side but needs approval
 })
 
-export const addToCartTool = tool({
+// Tool definition for add to cart (server + client)
+export const addToCartToolDef = toolDefinition({
   name: 'addToCart',
   description: 'Add a guitar to the shopping cart (requires approval)',
   inputSchema: z.object({
     guitarId: z.string(),
     quantity: z.number(),
   }),
+  outputSchema: z.object({
+    success: z.boolean(),
+    cartId: z.string(),
+    guitarId: z.string(),
+    quantity: z.number(),
+    totalItems: z.number(),
+  }),
   needsApproval: true,
-  execute: async (args) => {
-    return {
-      success: true,
-      cartId: 'CART_' + Date.now(),
-      guitarId: args.guitarId,
-      quantity: args.quantity,
-      totalItems: args.quantity,
-    }
-  },
 })
-
-export const allTools = [
-  getGuitarsTool,
-  recommendGuitarTool,
-  getPersonalGuitarPreferenceTool,
-  addToWishListTool,
-  addToCartTool,
-]

testing/panel/src/routes/api.chat.ts

@@ -7,7 +7,13 @@ import { gemini } from '@tanstack/ai-gemini'
 import { openai } from '@tanstack/ai-openai'
 import { ollama } from '@tanstack/ai-ollama'
 import { createEventRecording } from '@/lib/recording'
-import { allTools } from '@/lib/guitar-tools'
+import {
+  addToCartToolDef,
+  addToWishListToolDef,
+  getGuitars,
+  getPersonalGuitarPreferenceToolDef,
+  recommendGuitarToolDef,
+} from '@/lib/guitar-tools'
 
 const SYSTEM_PROMPT = `You are a helpful assistant for a guitar store.
 
@@ -31,6 +37,13 @@ Step 1: Call getGuitars()
 Step 2: Call recommendGuitar(id: "6") 
 Step 3: Done - do NOT add any text after calling recommendGuitar
 `
+const addToCartToolServer = addToCartToolDef.server((args) => ({
+  success: true,
+  cartId: 'CART_' + Date.now(),
+  guitarId: args.guitarId,
+  quantity: args.quantity,
+  totalItems: args.quantity,
+}))
 
 type Provider = 'openai' | 'anthropic' | 'gemini' | 'ollama'
 
@@ -97,9 +110,15 @@ export const Route = createFileRoute('/api/chat')({
 
           // Use the stream abort signal for proper cancellation handling
           const stream = chat({
-            adapter,
-            model: selectedModel as any, // Dynamic model selection
-            tools: allTools,
+            adapter: adapter as any,
+            model: selectedModel as any,
+            tools: [
+              getGuitars, // Server tool
+              recommendGuitarToolDef, // No server execute - client will handle
+              addToCartToolServer,
+              addToWishListToolDef,
+              getPersonalGuitarPreferenceToolDef,
+            ],
             systemPrompts: [SYSTEM_PROMPT],
             agentLoopStrategy: maxIterations(20),
             messages,

testing/panel/src/routes/index.tsx

@@ -7,11 +7,18 @@ import rehypeSanitize from 'rehype-sanitize'
 import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
 import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
+import { clientTools } from '@tanstack/ai-client'
 import { ThinkingPart } from '@tanstack/ai-react-ui'
 
 import type { UIMessage } from '@tanstack/ai-react'
 
 import GuitarRecommendation from '@/components/example-GuitarRecommendation'
+import {
+  addToCartToolDef,
+  addToWishListToolDef,
+  getPersonalGuitarPreferenceToolDef,
+  recommendGuitarToolDef,
+} from '@/lib/guitar-tools'
 import {
   MODEL_OPTIONS,
   getDefaultModelOption,
@@ -20,6 +27,39 @@ import {
 } from '@/lib/model-selection'
 import './tanchat.css'
 
+const getPersonalGuitarPreferenceToolClient =
+  getPersonalGuitarPreferenceToolDef.client(() => ({ preference: 'acoustic' }))
+
+const addToWishListToolClient = addToWishListToolDef.client((args) => {
+  const wishList = JSON.parse(localStorage.getItem('wishList') || '[]')
+  wishList.push(args.guitarId)
+  localStorage.setItem('wishList', JSON.stringify(wishList))
+  return {
+    success: true,
+    guitarId: args.guitarId,
+    totalItems: wishList.length,
+  }
+})
+
+const addToCartToolClient = addToCartToolDef.client((args) => ({
+  success: true,
+  cartId: 'CART_CLIENT_' + Date.now(),
+  guitarId: args.guitarId,
+  quantity: args.quantity,
+  totalItems: args.quantity,
+}))
+
+const recommendGuitarToolClient = recommendGuitarToolDef.client(({ id }) => ({
+  id,
+}))
+
+const tools = clientTools(
+  getPersonalGuitarPreferenceToolClient,
+  addToWishListToolClient,
+  addToCartToolClient,
+  recommendGuitarToolClient,
+)
+
 function ChatInputArea({ children }: { children: React.ReactNode }) {
   return (
     <div className="border-t border-orange-500/10 bg-gray-900/80 backdrop-blur-sm">
@@ -365,37 +405,11 @@ function ChatPage() {
   const { messages, sendMessage, isLoading, addToolApprovalResponse, stop } =
     useChat({
       connection: fetchServerSentEvents('/api/chat'),
+      tools,
       onChunk: (chunk: any) => {
         setChunks((prev) => [...prev, chunk])
       },
       body,
-      onToolCall: async ({ toolName, input }) => {
-        // Handle client-side tool execution
-        switch (toolName) {
-          case 'getPersonalGuitarPreference':
-            // Pure client tool - executes immediately
-            return { preference: 'acoustic' }
-
-          case 'recommendGuitar':
-            // Client tool for UI display
-            return { id: input.id }
-
-          case 'addToWishList':
-            // Hybrid: client execution AFTER approval
-            // Only runs after user approves
-            const wishList = JSON.parse(
-              localStorage.getItem('wishList') || '[]',
-            )
-            wishList.push(input.guitarId)
-            localStorage.setItem('wishList', JSON.stringify(wishList))
-            return {
-              success: true,
-              guitarId: input.guitarId,
-              totalItems: wishList.length,
-            }
-        }
-        return Promise.resolve({ result: 'Unknown client tool' })
-      },
     })
   const [input, setInput] = useState('')