How to Build an AI Agent That Asks Permission First (Nuxt + AI SDK 7)

2026年8月18日2 次浏览来源:Dev.to阅读原文

Introduction I did something stupid.

I built a superhero-themed Nuxt app, connected it to an Anthropic model through Amazon Bedrock, and gave it a tool that deletes files from my computer.

In fact, if I wasn't careful, it could delete all my files!

The first time I tried it, I didn't use any sort of approval mechanism.

And as you expected it just deleted things.

Then I looked into how my coding agent works, and I learned about tool approvals.

I learned that AI SDK 7 has a tool approval at the model-call level.

It works by pausing for an approval, showing an approval window, and then deleting it.

I then put Kiro CLI behind the same interface using Agent Client Protocol (ACP).

Watch the full video on YouTube.

Prerequisites You need: Node.js 22 or later.

AI SDK 7 requires Node.js 22 and uses ECMAScript modules (ESM). npm 11 or another package manager that works with Nuxt

4.

AWS credentials available through the standard provider chain.

Access to an Amazon Bedrock model in your AWS Region.

The AWS CLI if you want to list the inference profiles available to your account.

An authenticated Kiro CLI installation for the optional ACP section.

Step 1: Create the Nuxt app Create the project and install the versions used in the recorded demo: Register Nuxt UI and expose the Amazon Bedrock settings through server-side runtime config: Add the two Nuxt UI imports: You can compare your setup with the complete companion project.

Step 2: Keep the file tool inside a fixture directory The video uses two fixture files, and .

Create them before adding the tools: The agent can list or remove files in that directory, but it should not accept a path such as .

Approval decides whether a tool runs.

It does not decide what the tool can reach after it starts.

The boundary belongs inside the tool: The second containment check happens after .

That catches a path that looked local before resolution but points outside the fixture directory through a symbolic link.

Step 3: Connect the route to Amazon Bedrock Create the provider in : uses the AWS credentials already available to your process, including AWS IAM Identity Center sessions, named profiles, environment variables, and instance roles.

You do not need to put a long-lived access key in the Nuxt project.

Do not copy a model ID from this post.

Available IDs vary by account and AWS Region.

List the active Amazon Bedrock inference profiles for your account: Set one of the returned profile IDs before starting Nuxt: Now add an unguarded chat route.

Starting without approval makes the failure visible: matters.

AI SDK 7 stops after one step by default.

The model can call , receive the result, and then stop before it tells the user what happened.

Five steps leave room to list, delete, and summarize while keeping the loop bounded.

At this point, removes the file as soon as the model selects the tool.

That is what happened in the first minute of the video.

Step 4: Add approval to the delete tool Add one option to the call: The policy lives on , not inside the tool definition.

The same tool might run unattended in a maintenance job and require a person in a customer-facing chat.

The product decides which policy applies.

AI SDK 7 supports more than a yes-or-no policy.

A policy function can approve a call, deny it without asking, or send it to the user.

This example uses the direct status because every delete should stop.

Try the prompt again.

The file stays in place, but the page appears frozen.

The run is waiting for an answer that the UI has not rendered yet.

Step 5: Render the approval request in Nuxt Nuxt UI's chat documentation follows the same AI SDK message-part model.

The recorded app uses from and the helper from Nuxt UI: resumes the interrupted turn after the user answers.

Without it, the approval state changes in the browser but the agent does not continue on its own.

Render tool parts and attach the two decisions while approval is pending: Show the arguments.

An approval button is not useful when the pers

分享