create-supyagent-app 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-supyagent-app",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Create a supyagent-powered chatbot app",
   "type": "module",
   "bin": {

package/templates/api-route/route.ts.tmpl

@@ -17,7 +17,7 @@ export async function POST(req: Request) {
 
   const result = streamText({
     model: {{aiModel}},
-    system: 'You are a helpful assistant. Use your tools when asked to interact with connected services. You can also run bash commands to help with tasks.',
+    system: 'You are a helpful assistant. Use your tools when asked to interact with connected services. You can also run bash commands to help with tasks. When a tool execution is not approved by the user, do not retry it — explain what you were trying to do and ask how to proceed.',
     messages: await convertToModelMessages(messages),
     tools,
     stopWhen: stepCountIs(5),

package/templates/base/src/components/chat-message.tsx

@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 
 interface ChatMessageProps {
   message: UIMessage;
+  addToolApprovalResponse?: (opts: { id: string; approved: boolean }) => void;
 }
 
 function MarkdownContent({ text }: { text: string }) {
@@ -42,7 +43,7 @@ function CopyButton({ text }: { text: string }) {
   );
 }
 
-export function ChatMessage({ message }: ChatMessageProps) {
+export function ChatMessage({ message, addToolApprovalResponse }: ChatMessageProps) {
   const isUser = message.role === "user";
   const textContent = message.parts
     .filter((part) => part.type === "text")
@@ -72,7 +73,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
           }
 
           if (isToolUIPart(part)) {
-            return <ToolMessage key={i} part={part} />;
+            return <ToolMessage key={i} part={part} addToolApprovalResponse={addToolApprovalResponse} />;
           }
 
           return null;

package/templates/base/src/components/chat.tsx

@@ -23,7 +23,7 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
     [chatId]
   );
 
-  const { messages, sendMessage, status, stop } = useChat({
+  const { messages, sendMessage, status, stop, addToolApprovalResponse } = useChat({
     id: chatId,
     transport,
     messages: initialMessages,
@@ -102,7 +102,7 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
               </div>
             )}
             {messages.map((message) => (
-              <ChatMessage key={message.id} message={message} />
+              <ChatMessage key={message.id} message={message} addToolApprovalResponse={addToolApprovalResponse} />
             ))}
             <div ref={bottomRef} />
           </div>

package/templates/base/src/components/supyagent/tool-message.tsx

@@ -26,9 +26,10 @@ import { getToolRenderer } from "./tool-renderers";
 
 interface ToolMessageProps {
   part: any; // ToolInvocationUIPart from AI SDK
+  addToolApprovalResponse?: (opts: { id: string; approved: boolean }) => void;
 }
 
-export function ToolMessage({ part }: ToolMessageProps) {
+export function ToolMessage({ part, addToolApprovalResponse }: ToolMessageProps) {
   const toolName = extractToolName(part);
   const state = extractState(part);
   const args = extractArgs(part);
@@ -36,6 +37,8 @@ export function ToolMessage({ part }: ToolMessageProps) {
   const toolState = resolveState(state);
   const isDone = toolState === "output-available";
   const isError = toolState === "output-error";
+  const isApprovalRequested = toolState === "approval-requested";
+  const isDenied = toolState === "output-denied";
 
   // Extract and format result data
   let renderedOutput: ReactNode = null;
@@ -57,7 +60,7 @@ export function ToolMessage({ part }: ToolMessageProps) {
   const provider = getProviderFromToolName(toolName);
 
   return (
-    <Tool defaultOpen={isDone}>
+    <Tool defaultOpen={isDone || isApprovalRequested}>
       <ToolHeader
         state={toolState}
         title={`${getProviderLabel(provider)} · ${humanizeToolName(toolName)}${summary ? ` — ${summary}` : ""}`}
@@ -72,6 +75,43 @@ export function ToolMessage({ part }: ToolMessageProps) {
             <ToolInput args={args} />
           </div>
         )}
+
+        {/* Approval UI */}
+        {isApprovalRequested && addToolApprovalResponse && part.approval && (
+          <div className="flex items-center gap-2 rounded-md border border-yellow-500/20 bg-yellow-500/5 p-3">
+            <p className="flex-1 text-sm text-muted-foreground">
+              This tool requires your approval to execute.
+            </p>
+            <button
+              type="button"
+              onClick={() => addToolApprovalResponse({
+                id: part.approval.id,
+                approved: false,
+              })}
+              className="rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted transition-colors"
+            >
+              Deny
+            </button>
+            <button
+              type="button"
+              onClick={() => addToolApprovalResponse({
+                id: part.approval.id,
+                approved: true,
+              })}
+              className="rounded-md bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground/90 transition-colors"
+            >
+              Approve
+            </button>
+          </div>
+        )}
+
+        {/* Denied message */}
+        {isDenied && (
+          <p className="text-sm text-muted-foreground italic">
+            Execution was denied by user.
+          </p>
+        )}
+
         {renderedOutput && (
           <ToolOutput output={renderedOutput} isError={isError} />
         )}
@@ -88,6 +128,12 @@ function resolveState(state?: string): ToolState {
     case "error":
     case "output-error":
       return "output-error";
+    case "approval-requested":
+      return "approval-requested";
+    case "approval-responded":
+      return "approval-responded";
+    case "output-denied":
+      return "output-denied";
     case "call":
     case "partial-call":
     case "input-streaming":

package/templates/package-json/package.json.tmpl

@@ -17,7 +17,7 @@
     "{{aiProviderPackage}}": "{{aiProviderVersion}}",
     "@prisma/client": "^6.2.0",
     "@radix-ui/react-collapsible": "^1.1.0",
-    "@supyagent/sdk": "^0.1.15",
+    "@supyagent/sdk": "^0.1.16",
     "class-variance-authority": "^0.7.0",
     "ai": "^6.0.0",
     "clsx": "^2.1.0",