iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To make a consequential tool call wait for user permission in a Nuxt app, put an approval rule on the server-side streamText invocation, then show the resulting approval request in the Vue interface and send the user’s decision with addToolApprovalResponse. In current AI SDK documentation, the rule is toolApproval; the older tool-level needsApproval property is deprecated.
How the approval flow works
Approval is a policy for a tool invocation, not a substitute for the tool’s server-side implementation. For example, a file-deletion tool should still validate its input and perform the deletion on the server. The approval gate determines whether that tool is allowed to run before the operation occurs.
The AI SDK documentation puts it this way: “Tool execution approval lets you require user confirmation before a server-side tool runs.” (AI SDK Chatbot Tool Usage.) The flow is:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →- The model requests a call to a tool such as
deleteFile. - The server-side AI SDK policy pauses the call and sends an approval-requested tool part to the UI.
- The UI presents the proposed action and relevant arguments to the user.
- The UI sends an approve or deny response. The run continues according to that decision and any configured continuation behavior.
Wire approval into a Nuxt chat route
The official Nuxt quickstart uses server/api/chat.ts as the server handler. It reads the incoming UI messages, converts them to model messages, invokes streamText, and returns a UI message stream. The current approval setting belongs on that streamText invocation. For a tool named deleteFile, the documented configuration shape is:
#1 Best Overall
toolApproval: { deleteFile: 'user-approval' }Apply the option to the actual server invocation that handles the agent run, alongside the tools available to that run. The SDK then requests approval before executing the configured server-side tool. Consult the tool-usage documentation for the current call shape and types for the AI SDK version installed in your app.
Keep the tool responsible for the operation
The approval rule does not make an unsafe tool safe by itself. A deletion tool must independently validate the requested path, restrict access to the intended files, and handle filesystem errors. A tutorial search result for the exact title reports a fixture-directory restriction with a path-boundary check, but the tutorial page was not accessible to verify its implementation. Treat that as a reported demo detail, not as validated code to copy.
Show the request and collect the user’s decision
On the Vue side, the official Nuxt pattern uses @ai-sdk/vue‘s useChat for chat state and submission. In the message rendering logic, inspect tool parts and render an approval interface when a part’s state is approval-requested. Show the proposed action and the arguments the user needs to assess it; for a deletion, that normally means identifying the target clearly rather than presenting an opaque tool name alone.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
When the user chooses, call addToolApprovalResponse with the approval decision for that request. The AI SDK documentation also provides lastAssistantMessageIsCompleteWithApprovalResponses to automatically continue once the approval responses for the last assistant message are complete. Use the documented helper and response shape for the installed SDK version rather than assuming an older example’s state model still applies.
Rank #3
Choose an approval policy that fits the risk
| Approach | What it does | When it fits |
|---|---|---|
| User-required approval for a named tool | Pauses the named tool call until the user approves or denies it, configured with toolApproval on streamText. |
Consequential actions such as deleting a file, where a person should review each proposed operation. |
| Policy function | Can route calls to user approval or make an automatic approve-or-deny decision according to policy. AI SDK 7 release notes describe typed policy functions at call or agent level. | Applications with risk rules that vary by call, where some requests can proceed automatically and others need review. |
| Delayed-approval safeguards | AI SDK 7 release notes describe revalidating tool inputs and policies before continuation, as well as opt-in HMAC-signed approvals that bind confirmation to the original tool inputs. Vercel describes WorkflowAgent as durable execution support. | Runs where approval may arrive after a delay or the agent may need to resume after a restart. |
These are documented capabilities, not safeguards that every example enables automatically. Configure and verify the behavior you need. In particular, a confirmation should not silently authorize changed tool inputs: use the documented revalidation and signing options where the risk and workflow call for them.
Keep provider choice separate from approval
Approval is part of how the application governs tool execution; it does not require a particular model provider. The official AI SDK Nuxt quickstart demonstrates Vercel AI Gateway and explains that AI SDK also supports first-party, OpenAI-compatible, and community provider packages. Select and configure a provider separately from the approval rule.
The exact-title tutorial search result describes a Claude example through Amazon Bedrock, but its page could not be verified. That provider choice should not be read as a requirement for implementing approval in Nuxt.
Check your SDK version before adapting examples
Current AI SDK tool-usage documentation marks the older tool-level needsApproval property as deprecated. Prefer the current toolApproval configuration on streamText and check the API documentation that matches the version in your project; examples written for a prior API may use different properties or UI states.
Best Value
The tutorial search result reports these package pins for its recorded demo: Nuxt 4.5.2, Vue 3.5.41, ai 7.0.66, @ai-sdk/vue 4.0.66, @ai-sdk/amazon-bedrock 5.0.57, @aws-sdk/credential-providers 3.1111.0, @nuxt/ui 4.10.0, and Zod 4.4.3. These are demo-reported versions, not a claim that they are current releases or that those package versions remain compatible. Check package compatibility and the current SDK documentation before using them as a dependency set.
Quick Recap
Implementation checklist
- Define the sensitive tool on the server and validate its inputs and permitted targets there.
- Set
toolApprovalfor the tool on the server’sstreamTextinvocation. - Render the
approval-requestedtool part with enough context for an informed decision. - Submit approval or denial through
addToolApprovalResponseand configure continuation as appropriate. - For delayed or resumable runs, assess input and policy revalidation, optional HMAC-signed approvals, and durable execution separately.
- Verify API names and behavior against the documentation for the SDK version actually installed.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
