Documentation / vercel-ai
Framework GuideNext.js
Vercel AI SDK
Secure your React-based AI applications with tool-level middleware and streaming security headers.
1. Installation
bash
npm install suprawall ai zod
2. Middleware Setup
Use the wrapTools helper to inject SupraWall governance directly into your Vercel AI SDK tool definitions.
typescript
import { Client, secure_tools } from "suprawall";
import { generateText } from "ai";
// 1. Initialize SupraWall with Deny-by-default
const sw = new Client({
apiKey: process.env.SUPRAWALL_API_KEY,
defaultPolicy: "DENY"
});
// 2. Secure your tools
const tools = {
weather: {
description: "Get current weather",
parameters: z.object({ city: z.string() }),
execute: async ({ city }) => { ... }
}
};
const securedTools = secure_tools(tools, { client: sw });
// 3. Pass to your generateText call
const { text } = await generateText({
model: openai("gpt-4o"),
tools: securedTools,
prompt: "What is the weather in London?",
});Client-Side Hooks
SupraWall also provides a React utility to listen for tool execution states and display approval prompts to the user.
tsx
"use client";
import { useSupraWall } from "suprawall/react";
export function ChatComponent() {
const { status, approve } = useSupraWall();
return (
<div>
{status === "PENDING_APPROVAL" && (
<button onClick={approve}>Approve Action</button>
)}
</div>
);
}