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>
  );
}