add UI example for tool approval response with options

Author: felixarntz

examples/ai-e2e-next/app/api/chat/tool-approval-options/route.ts

@@ -0,0 +1,45 @@
+import { anthropic } from '@ai-sdk/anthropic';
+import { ToolLoopAgent, dynamicTool, createAgentUIStreamResponse } from 'ai';
+import { z } from 'zod';
+
+function randomWeather() {
+  const weatherOptions = ['sunny', 'cloudy', 'rainy', 'windy'];
+  return weatherOptions[Math.floor(Math.random() * weatherOptions.length)];
+}
+
+const weatherTool = dynamicTool({
+  description: 'Get the weather in a location',
+  inputSchema: z.object({ city: z.string() }),
+  needsApproval: true,
+  async *execute() {
+    yield { state: 'loading' as const };
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    yield {
+      state: 'ready' as const,
+      temperature: 72,
+      weather: randomWeather(),
+    };
+  },
+});
+
+const defaultInstructions =
+  'You are a helpful weather assistant. ' +
+  'When a tool execution is not approved by the user, do not retry it. ' +
+  'Just say that the tool execution was not approved.';
+
+export async function POST(request: Request) {
+  const body = await request.json();
+
+  const systemInstruction: string | undefined = body.systemInstruction;
+
+  const agent = new ToolLoopAgent({
+    model: anthropic('claude-sonnet-4-6'),
+    instructions: systemInstruction ?? defaultInstructions,
+    tools: { weather: weatherTool },
+  });
+
+  return createAgentUIStreamResponse({
+    agent,
+    uiMessages: body.messages,
+  });
+}

examples/ai-e2e-next/app/chat/test-tool-approval-options/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import ChatInput from '@/components/chat-input';
+import DynamicToolWithApprovalView from '@/components/tool/dynamic-tool-with-approval-view';
+import { useChat } from '@ai-sdk/react';
+import {
+  ChatRequestOptions,
+  DefaultChatTransport,
+  lastAssistantMessageIsCompleteWithApprovalResponses,
+} from 'ai';
+import { useState } from 'react';
+
+export default function TestToolApprovalOptions() {
+  const [systemInstruction, setSystemInstruction] = useState('');
+
+  const requestOptions: ChatRequestOptions = {
+    body: { systemInstruction: systemInstruction || undefined },
+  };
+
+  const { status, sendMessage, messages, addToolApprovalResponse } = useChat({
+    transport: new DefaultChatTransport({
+      api: '/api/chat/tool-approval-options',
+    }),
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
+  });
+
+  return (
+    <div className="flex flex-col py-24 mx-auto w-full max-w-md stretch">
+      <h1 className="mb-4 text-xl font-bold">
+        Tool Approval with Options Test
+      </h1>
+
+      <label className="mb-4">
+        <span className="block mb-1 text-sm font-medium">
+          System Instruction (optional):
+        </span>
+        <input
+          className="w-full p-2 border border-gray-300 rounded"
+          placeholder="e.g. Always respond in French."
+          value={systemInstruction}
+          onChange={e => setSystemInstruction(e.target.value)}
+        />
+      </label>
+
+      {messages.map(message => (
+        <div key={message.id} className="whitespace-pre-wrap">
+          {message.role === 'user' ? 'User: ' : 'AI: '}
+          {message.parts.map((part, index) => {
+            switch (part.type) {
+              case 'text':
+                return <div key={index}>{part.text}</div>;
+              case 'dynamic-tool':
+                return (
+                  <DynamicToolWithApprovalView
+                    key={index}
+                    invocation={part}
+                    addToolApprovalResponse={addToolApprovalResponse}
+                    requestOptions={requestOptions}
+                  />
+                );
+            }
+          })}
+        </div>
+      ))}
+
+      <ChatInput
+        status={status}
+        onSubmit={text => sendMessage({ text }, requestOptions)}
+      />
+    </div>
+  );
+}

examples/ai-e2e-next/components/tool/dynamic-tool-with-approval-view.tsx

@@ -1,11 +1,17 @@
-import type { ChatAddToolApproveResponseFunction, DynamicToolUIPart } from 'ai';
+import type {
+  ChatAddToolApproveResponseFunction,
+  ChatRequestOptions,
+  DynamicToolUIPart,
+} from 'ai';
 
 export default function WeatherWithApprovalView({
   invocation,
   addToolApprovalResponse,
+  requestOptions,
 }: {
   invocation: DynamicToolUIPart;
   addToolApprovalResponse: ChatAddToolApproveResponseFunction;
+  requestOptions?: ChatRequestOptions;
 }) {
   switch (invocation.state) {
     case 'approval-requested':
@@ -26,6 +32,7 @@ export default function WeatherWithApprovalView({
                 addToolApprovalResponse({
                   id: invocation.approval.id,
                   approved: true,
+                  options: requestOptions,
                 })
               }
             >
@@ -37,6 +44,7 @@ export default function WeatherWithApprovalView({
                 addToolApprovalResponse({
                   id: invocation.approval.id,
                   approved: false,
+                  options: requestOptions,
                 })
               }
             >