Merge pull request #79 from sidclawhq/feat/ai-sdk-v7-migration

feat: migrate demo-atlas + vercel-ai example to AI SDK v7

Author: VladUZH

apps/demo/package.json

@@ -12,17 +12,18 @@
     "test": "echo 'no tests yet'"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^1.2.0",
+    "@ai-sdk/anthropic": "^4.0.23",
+    "@ai-sdk/react": "^4.0.44",
     "@sidclaw/sdk": "*",
     "@sidclaw/shared": "*",
-    "ai": "^4.3.0",
+    "ai": "^7.0.41",
     "lucide-react": "^1.27.0",
     "next": "15.5.20",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-markdown": "^10.1.0",
     "sonner": "^2.0.7",
-    "zod": "^3.25.67"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.6",

apps/demo/src/app/api/chat/route.ts

@@ -1,4 +1,4 @@
-import { streamText } from 'ai';
+import { streamText, convertToModelMessages, stepCountIs, type UIMessage } from 'ai';
 import { anthropic } from '@ai-sdk/anthropic';
 import { AgentIdentityClient } from '@sidclaw/sdk';
 import { getOrCreateDemoSession } from '@/lib/demo-session';
@@ -34,7 +34,7 @@ export async function POST(request: Request) {
   const tools = {
     search_knowledge_base: {
       description: 'Search the Atlas Financial internal knowledge base for policy documents, FAQs, and guides. Use this for general questions about refunds, transfers, fees, security.',
-      parameters: z.object({
+      inputSchema: z.object({
         query: z.string().describe('The search query'),
       }),
       execute: async ({ query }: { query: string }) => {
@@ -61,7 +61,7 @@ export async function POST(request: Request) {
 
     lookup_account: {
       description: 'Look up a customer account by account ID. Returns account details including name, balance, type, and support tier.',
-      parameters: z.object({
+      inputSchema: z.object({
         account_id: z.string().describe('The account ID (e.g., A-1234)'),
       }),
       execute: async ({ account_id }: { account_id: string }) => {
@@ -88,7 +88,7 @@ export async function POST(request: Request) {
 
     send_email: {
       description: 'Send an email to a customer. Use this for follow-ups, notifications, or responses. Requires human approval before sending.',
-      parameters: z.object({
+      inputSchema: z.object({
         to: z.string().describe('Customer email address'),
         subject: z.string().describe('Email subject line'),
         body: z.string().describe('Email body content'),
@@ -117,7 +117,7 @@ export async function POST(request: Request) {
 
     update_case: {
       description: 'Update a support case with new notes or status changes. Requires human approval for modifications.',
-      parameters: z.object({
+      inputSchema: z.object({
         case_id: z.string().describe('The case ID (e.g., C-5678)'),
         notes: z.string().describe('Notes to add to the case'),
       }),
@@ -145,7 +145,7 @@ export async function POST(request: Request) {
 
     export_customer_data: {
       description: 'Export customer data to a file. This is typically blocked by policy.',
-      parameters: z.object({
+      inputSchema: z.object({
         format: z.string().describe('Export format (csv, json)'),
         scope: z.string().describe('What data to export'),
       }),
@@ -169,7 +169,7 @@ export async function POST(request: Request) {
 
     close_account: {
       description: 'Close a customer account. This is a high-risk action typically blocked by policy.',
-      parameters: z.object({
+      inputSchema: z.object({
         account_id: z.string().describe('The account ID to close'),
         reason: z.string().describe('Reason for closure'),
       }),
@@ -214,10 +214,10 @@ CRITICAL RULES:
 - For case references, use C-5678 as the default.
 
 You are demonstrating SidClaw's governance platform. The governance decisions you encounter (allow, approval_required, deny) are being made in real-time by the SidClaw policy engine based on actual policy rules configured for Atlas Financial. It is essential that every action goes through the tools so the governance trace appears on the right panel.`,
-    messages,
+    messages: await convertToModelMessages(messages as UIMessage[]),
     tools,
-    maxSteps: 5,
+    stopWhen: stepCountIs(5),
   });
 
-  return result.toDataStreamResponse();
+  return result.toUIMessageStreamResponse();
 }

apps/demo/src/components/ChatInterface.tsx

@@ -1,12 +1,21 @@
 'use client';
 
-import { useChat } from 'ai/react';
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport, type UIMessage } from 'ai';
 import { ChatMessage } from './ChatMessage';
 import { ChatInput } from './ChatInput';
 import { SuggestedPrompts } from './SuggestedPrompts';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import type { ApprovalNotification } from '@/app/page';
 
+/** Concatenate the text parts of a UIMessage (AI SDK v5+ message shape). */
+function messageText(message: UIMessage): string {
+  return message.parts
+    .filter((part): part is Extract<typeof part, { type: 'text' }> => part.type === 'text')
+    .map((part) => part.text)
+    .join('');
+}
+
 interface ChatInterfaceProps {
   sessionId: string;
   agentId: string;
@@ -22,10 +31,23 @@ const OP_LABELS: Record<string, string> = {
 };
 
 export function ChatInterface({ sessionId, agentId, apiKey, notifications = [] }: ChatInterfaceProps) {
-  const { messages, input, handleInputChange, handleSubmit, isLoading, append } = useChat({
-    api: '/api/chat',
-    body: { sessionId, agentId, apiKey },
-  });
+  // v5+ useChat no longer manages input state or accepts api/body directly —
+  // extra request fields travel via the transport, input state is ours.
+  const transport = useMemo(
+    () => new DefaultChatTransport({ api: '/api/chat', body: { sessionId, agentId, apiKey } }),
+    [sessionId, agentId, apiKey],
+  );
+  const { messages, sendMessage, status } = useChat({ transport });
+  const [input, setInput] = useState('');
+  const isLoading = status === 'submitted' || status === 'streaming';
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text || isLoading) return;
+    sendMessage({ text });
+    setInput('');
+  };
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -34,7 +56,7 @@ export function ChatInterface({ sessionId, agentId, apiKey, notifications = [] }
   }, [messages, notifications]);
 
   const handleSuggestedPrompt = (prompt: string) => {
-    append({ role: 'user', content: prompt });
+    sendMessage({ text: prompt });
   };
 
   return (
@@ -57,7 +79,7 @@ export function ChatInterface({ sessionId, agentId, apiKey, notifications = [] }
           </div>
         )}
         {messages.map((message) => (
-          <ChatMessage key={message.id} message={message} />
+          <ChatMessage key={message.id} message={{ role: message.role, content: messageText(message) }} />
         ))}
         {isLoading && (
           <div className="flex items-center gap-2 text-base text-[#71717A]">
@@ -108,7 +130,7 @@ export function ChatInterface({ sessionId, agentId, apiKey, notifications = [] }
       {/* Input */}
       <ChatInput
         input={input}
-        onChange={handleInputChange}
+        onChange={(e) => setInput(e.target.value)}
         onSubmit={handleSubmit}
         isLoading={isLoading}
       />

examples/vercel-ai-assistant/app/api/chat/route.ts

@@ -1,4 +1,4 @@
-import { streamText } from 'ai';
+import { streamText, convertToModelMessages, stepCountIs, type UIMessage } from 'ai';
 import { openai } from '@ai-sdk/openai';
 import { z } from 'zod';
 import { AgentIdentityClient } from '@sidclaw/sdk';
@@ -17,7 +17,7 @@ const client = new AgentIdentityClient({
 const tools = {
   check_inventory: {
     description: 'Check product inventory levels',
-    parameters: z.object({
+    inputSchema: z.object({
       product: z.string().describe('Product name to check'),
     }),
     execute: async ({ product }: { product: string }) => {
@@ -35,7 +35,7 @@ const tools = {
   },
   send_notification: {
     description: 'Send a notification email to a customer',
-    parameters: z.object({
+    inputSchema: z.object({
       to: z.string().describe('Recipient email address'),
       message: z.string().describe('Notification message'),
     }),
@@ -46,7 +46,7 @@ const tools = {
   },
   delete_records: {
     description: 'Delete all records for a customer (destructive operation)',
-    parameters: z.object({
+    inputSchema: z.object({
       customerId: z.string().describe('Customer ID whose records to delete'),
     }),
     execute: async ({ customerId }: { customerId: string }) => {
@@ -70,10 +70,10 @@ export async function POST(req: Request) {
     system: `You are a helpful assistant with access to governed tools.
 Some tools may be blocked by governance policies — if a tool call fails with a policy denial,
 explain to the user that the action was blocked and why. Be concise.`,
-    messages,
+    messages: await convertToModelMessages(messages as UIMessage[]),
     tools: governedTools,
-    maxSteps: 3,
+    stopWhen: stepCountIs(3),
   });
 
-  return result.toDataStreamResponse();
+  return result.toUIMessageStreamResponse();
 }

examples/vercel-ai-assistant/app/page.tsx

@@ -1,11 +1,19 @@
 'use client';
 
-import { useChat } from 'ai/react';
+import { useChat } from '@ai-sdk/react';
+import { useState } from 'react';
 
 export default function ChatPage() {
-  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
-    api: '/api/chat',
-  });
+  const { messages, sendMessage, status } = useChat();
+  const [input, setInput] = useState('');
+  const isLoading = status === 'submitted' || status === 'streaming';
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text || isLoading) return;
+    sendMessage({ text });
+    setInput('');
+  };
 
   return (
     <div className="mx-auto flex h-screen max-w-2xl flex-col p-4">
@@ -65,19 +73,30 @@ export default function ChatPage() {
                   : 'bg-zinc-900 text-zinc-300 border border-zinc-800'
               }`}
             >
-              <pre className="whitespace-pre-wrap font-sans">{message.content}</pre>
-              {message.toolInvocations?.map((invocation, i) => (
-                <div key={i} className="mt-2 rounded border border-zinc-700 bg-zinc-950 p-2 text-xs">
-                  <span className="font-mono text-zinc-500">tool: {invocation.toolName}</span>
-                  {'result' in invocation && (
-                    <pre className="mt-1 text-zinc-400 whitespace-pre-wrap">
-                      {typeof invocation.result === 'string'
-                        ? invocation.result
-                        : JSON.stringify(invocation.result, null, 2)}
-                    </pre>
-                  )}
-                </div>
-              ))}
+              {message.parts.map((part, i) => {
+                if (part.type === 'text') {
+                  return (
+                    <pre key={i} className="whitespace-pre-wrap font-sans">{part.text}</pre>
+                  );
+                }
+                if (part.type.startsWith('tool-') || part.type === 'dynamic-tool') {
+                  const toolName = part.type === 'dynamic-tool'
+                    ? (part as { toolName: string }).toolName
+                    : part.type.slice('tool-'.length);
+                  const output = (part as { output?: unknown }).output;
+                  return (
+                    <div key={i} className="mt-2 rounded border border-zinc-700 bg-zinc-950 p-2 text-xs">
+                      <span className="font-mono text-zinc-500">tool: {toolName}</span>
+                      {output !== undefined && (
+                        <pre className="mt-1 text-zinc-400 whitespace-pre-wrap">
+                          {typeof output === 'string' ? output : JSON.stringify(output, null, 2)}
+                        </pre>
+                      )}
+                    </div>
+                  );
+                }
+                return null;
+              })}
             </div>
           </div>
         ))}
@@ -95,7 +114,7 @@ export default function ChatPage() {
       <form onSubmit={handleSubmit} className="flex gap-2 border-t border-zinc-800 pt-4">
         <input
           value={input}
-          onChange={handleInputChange}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="Ask something..."
           className="flex-1 rounded border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm text-zinc-100 placeholder-zinc-600 outline-none focus:border-zinc-500"
           disabled={isLoading}

examples/vercel-ai-assistant/package.json

@@ -9,20 +9,21 @@
     "start": "next start --port 3001"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^4.0.23",
+    "@ai-sdk/react": "^4.0.44",
     "@sidclaw/sdk": "*",
-    "ai": "^4.0.0",
-    "@ai-sdk/openai": "^1.0.0",
+    "ai": "^7.0.41",
     "next": "^15.0.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "zod": "^3.23.0"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.0",
-    "@tailwindcss/postcss": "^4.3.3",
     "postcss": "^8.5.24",
+    "tailwindcss": "^4.0.0",
     "tsx": "^4.23.1",
     "typescript": "^5.9.0"
   }