Vercel AI SDK

This example uses the Vercel AI SDK (streamText, tool(), toUIMessageStreamResponse()) as the agent backend and OpenUI's <AgentInterface /> as the chat UI. The browser decodes the AI SDK UIMessage stream with vercelAIAdapter().

View source on GitHub →

How it connects

The API route calls streamText through OpenUI Gateway with OpenUI Lang instructions and tools defined with tool(). When the model calls a tool, the AI SDK executes it server-side and continues — up to 5 steps. The response is a UIMessage stream.

The page passes that stream to <AgentInterface />:

import {
  AgentInterface,
  fetchLLM,
  vercelAIAdapter,
  vercelAIMessageFormat,
} from "@openuidev/react-ui";
import { openuiLibrary } from "@openuidev/react-ui/genui-lib";

const llm = fetchLLM({
  url: "/api/chat",
  streamAdapter: vercelAIAdapter(),
  messageFormat: vercelAIMessageFormat,
});

<AgentInterface llm={llm} componentLibrary={openuiLibrary} agentName="OpenUI + Vercel AI SDK" />;

Storage is omitted, so AgentInterface uses its built-in in-memory default (wiped on reload).

Backend

import { cloudInstructions } from "@/lib/cloud-prompt";
import { tools } from "@/lib/tools";
import { createOpenAI } from "@ai-sdk/openai";
import { convertToModelMessages, stepCountIs, streamText } from "ai";

const gateway = createOpenAI({
  baseURL: "https://api.thesys.dev/v1/embed",
  apiKey: process.env.THESYS_API_KEY,
});

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: gateway.chat("google/gemini-3.6-flash-free"),
    system: cloudInstructions(),
    messages: await convertToModelMessages(messages),
    tools,
    stopWhen: stepCountIs(5),
  });
  return result.toUIMessageStreamResponse();
}

Tools live in src/lib/tools.ts (get_weather, get_stock_price, search_web).

Project layout

examples/agent-frameworks/vercel-ai-sdk/
|- src/app/page.tsx           # AgentInterface with the Vercel AI stream adapter
|- src/app/api/chat/route.ts  # streamText() through OpenUI Gateway
|- src/lib/cloud-prompt.ts    # Generated OpenUI Lang instructions
|- src/lib/tools.ts           # Vercel AI SDK tool() definitions
|- src/library.ts             # Component library used to generate the prompt spec

Run the example

Run these commands from examples/agent-frameworks/vercel-ai-sdk.

Install dependencies:

cd examples/agent-frameworks/vercel-ai-sdk
pnpm install

Create a .env.local file with your Gateway key:

THESYS_API_KEY=sk-th-...

Start the dev server:

pnpm dev

Use a different chat UI

This guide renders the agent with Agent Interface. The backend doesn't depend on it: to use another chat UI, keep the backend from this guide, connect the chat UI to the Vercel AI SDK with that chat UI's own integration, then follow its OpenUI guide to render responses and handle actions.

How it connects

Backend

Project layout

Run the example

Use a different chat UI

assistant-ui

CopilotKit

Custom chat UI

On this page