Skip to content
TruthVouch Docs

Vercel AI SDK Integration

The TruthVouch Vercel AI SDK integration provides a provider plugin that routes all AI calls through TruthVouch Firewall for governance. Works with React hooks and Next.js streaming.

Status: Coming Soon (Q2 2026)

Installation

Terminal window
npm install @truthvouch/ai-sdk-provider

Requires ai package 3.x+.

Planned Features

  • Vercel AI SDK provider plugin
  • Compatible with useChat() and useCompletion() React hooks
  • Next.js App Router streaming support
  • Full governance pipeline (fact-checking, PII detection)
  • Error boundaries and fallback handling
  • Streaming with governance metadata

Planned Usage

Configure Provider

import { createTruthVouchProvider } from '@truthvouch/ai-sdk-provider';


const truthvouchProvider = createTruthVouchProvider({
  apiKey: process.env.NEXT_PUBLIC_TRUTHVOUCH_API_KEY,
  gatewayUrl: 'https://gateway.truthvouch.com',
});

Use with useChat()

'use client';


import { useChat } from 'ai/react';
import { createTruthVouchProvider } from '@truthvouch/ai-sdk-provider';


const provider = createTruthVouchProvider({
  apiKey: process.env.NEXT_PUBLIC_TRUTHVOUCH_API_KEY,
});


export default function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
    // Governance enforced server-side via TruthVouch provider
  });


  return (
    <div className="flex flex-col gap-4">
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'text-right' : ''}>
          {m.content}
        </div>
      ))}


      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask something..."
          className="flex-1 px-2 py-1 border rounded"
        />
        <button type="submit" className="px-4 py-1 bg-blue-500 text-white rounded">
          Send
        </button>
      </form>
    </div>
  );
}

Server-Side API Route

app/api/chat/route.ts
import { createTruthVouchProvider } from '@truthvouch/ai-sdk-provider';
import { streamText } from 'ai';


const truthvouch = createTruthVouchProvider({
  apiKey: process.env.TRUTHVOUCH_API_KEY,
});


export async function POST(req: Request) {
  const { messages } = await req.json();


  const result = streamText({
    model: truthvouch('gpt-4o'),  // Route through TruthVouch
    messages,
  });


  return result.toDataStreamResponse();
  // Streaming responses are fact-checked and audit-logged
}

With useCompletion()

'use client';


import { useCompletion } from 'ai/react';


export default function CompletionComponent() {
  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
    api: '/api/completion',
  });


  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Start typing..."
        />
        <button type="submit">Generate</button>
      </form>


      {completion && <p>{completion}</p>}
    </div>
  );
}

Error Handling

'use client';


import { useChat } from 'ai/react';
import { useState } from 'react';


export default function ChatWithErrors() {
  const [error, setError] = useState<string>();
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
    onError: (err) => {
      if (err.message.includes('policy_blocked')) {
        setError('Request violated governance policy');
      } else if (err.message.includes('rate_limit')) {
        setError('Rate limited, please try again in a moment');
      } else {
        setError(`Error: ${err.message}`);
      }
    },
  });


  return (
    <div>
      {error && <div className="bg-red-100 p-2 rounded">{error}</div>}
      {/* Chat UI */}
    </div>
  );
}

Timeline

  • Q2 2026: Public beta release
  • Q3 2026: GA release with full feature parity

Next Steps