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

How it connects

Backend

Project layout

Run the example

On this page