> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cascadeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel AI SDK

> TypeScript middleware integration for Vercel AI SDK with cascade routing, multi-turn chat, and tool execution.

cascadeflow integrates with the Vercel AI SDK as middleware, providing cascade routing for server-side AI applications with streaming support. The goal is still runtime intelligence inside the application loop: maintain streaming UX, keep tool execution server-side, and avoid a proxy hop on every model step.

## Install

```bash theme={null}
npm install @cascadeflow/vercel-ai
```

## Quick Start

```typescript theme={null}
import { createChatHandler } from '@cascadeflow/vercel-ai';
import { CascadeAgent } from '@cascadeflow/core';

const agent = new CascadeAgent({
  models: [
    { name: 'gpt-4o-mini', provider: 'openai', cost: 0.000375 },
    { name: 'gpt-4o', provider: 'openai', cost: 0.00625 },
  ],
});

const handler = createChatHandler(agent, {
  protocol: 'data',           // AI SDK v4 data stream
  tools,                       // Tool definitions
  toolHandlers,                // Server-side tool execution
  maxSteps: 5,                 // Multi-step tool loops
});

// Use in Next.js API route, Express, or any Node.js server
export const POST = handler;
```

## Features

* **AI SDK v4 `data` stream** and **AI SDK v5/v6 UI streams**
* **`useChat` multi-turn support** — conversation history preserved
* **`parts` message format** (AI SDK v6)
* **Tool call streaming visibility** — see tool calls as they happen
* **Server-side tool execution** via `toolExecutor` or `toolHandlers`
* **Multi-step controls**: `maxSteps`, `forceDirect`
* **Cascade decision stream parts** — optional metadata in the stream
* **Request-level overrides** with allowlist + shared-secret guard

## Why This Integration Matters

* Preserves fast real-time UX while adding runtime control
* Keeps governance logic close to tool loops and streaming responses
* Avoids the compounded latency cost of external proxy mediation

## Multi-Turn Chat

```typescript theme={null}
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleSubmit, handleInputChange } = useChat({
    api: '/api/chat',
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>{m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}
```

## Request Overrides

Override cascade behavior per request (protected by shared secret):

```typescript theme={null}
const handler = createChatHandler(agent, {
  protocol: 'data',
  allowOverrides: ['forceDirect', 'maxSteps'],
  overrideSecret: process.env.OVERRIDE_SECRET,
});
```

## Result

40-85% cost savings for Vercel AI SDK applications with streaming support and zero client-side changes.

<Tip>
  **Examples on GitHub:** [packages/core/examples/nodejs/vercel-edge.ts](https://github.com/lemony-ai/cascadeflow/blob/main/packages/core/examples/nodejs/vercel-edge.ts) | [vercel-ai-nextjs/](https://github.com/lemony-ai/cascadeflow/tree/main/examples/vercel-ai-nextjs)
</Tip>