Skip to content
~/sph.sh

TypeScript AI SDK Comparison: Vercel AI SDK vs OpenAI Agents SDK for Agent Development

A practical comparison of TypeScript AI SDKs for building AI agents - Vercel AI SDK, OpenAI Agents SDK, and AWS Bedrock integration. Includes code examples, decision frameworks, and production patterns.

Abstract

Building AI agents in TypeScript requires choosing between Vercel AI SDK's provider-agnostic approach, OpenAI's Agents SDK with native handoffs, or direct provider SDKs. This comparison examines tool calling patterns, streaming capabilities, and production considerations to help you make informed decisions. The analysis covers real code examples, cost implications, and practical decision frameworks for each approach.

The TypeScript AI SDK Landscape

The agent development ecosystem has matured significantly. Where we once cobbled together custom solutions, three primary approaches now dominate TypeScript agent development:

  1. Vercel AI SDK: Provider-agnostic unified interface with 70+ provider support
  2. OpenAI Agents SDK: Purpose-built for multi-agent systems with native handoffs
  3. Direct Provider SDKs: Maximum control with provider-specific features

Each approach solves different problems. The challenge is matching your requirements to the right tool.

Vercel AI SDK: The Provider-Agnostic Approach

Vercel AI SDK takes a unified interface approach. Write once, deploy to any provider. This flexibility matters when requirements change or when you need fallback providers for reliability.

Core Architecture

The SDK separates concerns cleanly:

  • AI SDK Core: Server-side operations (generateText, streamText, generateObject)
  • AI SDK UI: React hooks for chat interfaces (useChat, useCompletion)
  • AI SDK RSC: React Server Components integration

Tool Definition with Zod

Tools are defined with type-safe Zod schemas. The SDK handles parameter validation automatically:

typescript
import { tool, generateText } from 'ai';import { openai } from '@ai-sdk/openai';import { z } from 'zod';
const weatherTool = tool({  description: 'Get current weather for a city',  parameters: z.object({    city: z.string().describe('City name'),    unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),  }),  execute: async ({ city, unit }) => {    // Your API call here    const response = await fetch(      `https://api.weather.example/v1/current?city=${city}&unit=${unit}`    );    return response.json();  },});
const searchTool = tool({  description: 'Search the web for information',  parameters: z.object({    query: z.string().describe('Search query'),    limit: z.number().optional().default(5),  }),  execute: async ({ query, limit }) => {    // Search implementation    return { results: [`Result for: ${query}`], count: limit };  },});

Agent Loop with maxSteps

For multi-turn tool usage, the maxSteps parameter enables automatic tool execution loops:

typescript
import { streamText } from 'ai';import { openai } from '@ai-sdk/openai';
export async function POST(req: Request) {  const { messages } = await req.json();
  const result = streamText({    model: openai('gpt-4o'),    messages,    system: 'You are a helpful assistant with weather and search capabilities.',    tools: {      weather: weatherTool,      search: searchTool,    },    maxSteps: 5, // Allow up to 5 tool execution rounds  });
  return result.toDataStreamResponse();}

The SDK handles the entire loop: call LLM, detect tool calls, execute tools, append results, repeat until complete or maxSteps reached.

Provider Switching Pattern

The real power of AI SDK shows in provider switching. Same code, different backend:

typescript
import { openai } from '@ai-sdk/openai';import { anthropic } from '@ai-sdk/anthropic';import { google } from '@ai-sdk/google';import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';import { generateText } from 'ai';
// Configure providersconst bedrock = createAmazonBedrock({ region: 'us-east-1' });
// Provider registryconst providers = {  'gpt-4o': openai('gpt-4o'),  'gpt-4o-mini': openai('gpt-4o-mini'),  'claude-sonnet': anthropic('claude-sonnet-4-6-20250217'),  'claude-haiku': anthropic('claude-haiku-4-5-20241022'),  'gemini-flash': google('gemini-2.5-flash'),  'bedrock-claude': bedrock('anthropic.claude-sonnet-4-6-20250217-v1:0'),};
// Same function works with any providerasync function generate(prompt: string, providerId: keyof typeof providers) {  const { text, usage } = await generateText({    model: providers[providerId],    prompt,  });
  return { text, usage };}
// Switching is trivialconst openaiResult = await generate('Explain quantum computing', 'gpt-4o');const claudeResult = await generate('Explain quantum computing', 'claude-sonnet');

Streaming with React Integration

AI SDK UI provides hooks that handle streaming complexity:

typescript
// app/api/chat/route.tsimport { openai } from '@ai-sdk/openai';import { streamText } from 'ai';
export const runtime = 'edge';
export async function POST(req: Request) {  const { messages } = await req.json();
  const result = streamText({    model: openai('gpt-4o'),    messages,    tools: {      calculate: tool({        description: 'Perform arithmetic',        parameters: z.object({ expression: z.string() }),        execute: async ({ expression }) => {          // Use a safe math parser in production          return { result: eval(expression) };        },      }),    },    maxSteps: 3,  });
  return result.toDataStreamResponse();}
typescript
// components/Chat.tsx'use client';
import { useChat } from 'ai/react';
export function Chat() {  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({    api: '/api/chat',  });
  return (    <div className="flex flex-col h-screen">      <div className="flex-1 overflow-y-auto p-4">        {messages.map((m) => (          <div key={m.id} className={`mb-4 ${m.role === 'user' ? 'text-right' : ''}`}>            <span className="font-bold">{m.role}:</span> {m.content}          </div>        ))}      </div>      <form onSubmit={handleSubmit} className="p-4 border-t">        <input          value={input}          onChange={handleInputChange}          disabled={isLoading}          className="w-full p-2 border rounded"          placeholder="Type a message..."        />      </form>    </div>  );}

OpenAI Agents SDK: Multi-Agent Specialist

OpenAI's Agents SDK takes a different approach. Rather than provider abstraction, it focuses on agent orchestration patterns: handoffs between specialized agents, guardrails for validation, and built-in tracing.

Core Primitives

The SDK introduces four key concepts:

  1. Agents: LLMs with instructions, tools, and handoff capability
  2. Handoffs: Specialized tool calls that transfer conversation ownership
  3. Guardrails: Input/output validation running in parallel with agent execution
  4. Tracing: Built-in debugging and monitoring

Multi-Agent with Handoffs

The handoff pattern enables specialist agents that delegate to each other:

typescript
import { Agent, run, tool } from '@openai/agents';import { z } from 'zod';
// Define specialist toolsconst getWeatherTool = tool({  name: 'get_weather',  description: 'Get weather for a city',  parameters: z.object({    city: z.string(),  }),  execute: async ({ city }) => {    return `Weather in ${city}: 22C, sunny`;  },});
const searchDatabaseTool = tool({  name: 'search_database',  description: 'Search internal database',  parameters: z.object({    query: z.string(),  }),  execute: async ({ query }) => {    return `Found 3 results for: ${query}`;  },});
// Create specialist agentsconst weatherAgent = new Agent({  name: 'Weather Specialist',  instructions: 'You are a weather expert. Provide detailed weather information.',  tools: [getWeatherTool],  handoffDescription: 'Specialist for weather-related questions',});
const dataAgent = new Agent({  name: 'Data Specialist',  instructions: 'You are a data expert. Search and analyze database information.',  tools: [searchDatabaseTool],  handoffDescription: 'Specialist for database queries and data analysis',});
// Create triage agent with handoffsconst triageAgent = new Agent({  name: 'Triage Agent',  instructions: `You are a helpful assistant that routes questions to specialists.  - For weather questions, hand off to Weather Specialist  - For data/database questions, hand off to Data Specialist  - For general questions, answer directly`,  handoffs: [weatherAgent, dataAgent],});
// Execute agent workflowasync function handleQuery(userMessage: string) {  const result = await run(triageAgent, userMessage);
  return {    finalOutput: result.finalOutput,    agentPath: result.history      .filter(h => h.type === 'handoff')      .map(h => h.agent),  };}

Agent Loop Execution

The SDK manages a sophisticated execution loop:

Complex Tool Schemas

The SDK handles nested schemas with automatic validation:

typescript
const createOrderTool = tool({  name: 'create_order',  description: 'Create a new customer order',  parameters: z.object({    customerId: z.string().uuid(),    items: z.array(z.object({      productId: z.string(),      quantity: z.number().int().positive(),      price: z.number().positive(),    })),    shippingAddress: z.object({      street: z.string(),      city: z.string(),      country: z.string(),      postalCode: z.string(),    }),    priority: z.enum(['standard', 'express', 'overnight']).default('standard'),  }),  execute: async ({ customerId, items, shippingAddress, priority }) => {    const order = await orderService.create({      customerId,      items,      shippingAddress,      priority,    });
    return {      orderId: order.id,      status: 'created',      estimatedDelivery: order.estimatedDelivery,    };  },});

AWS Bedrock Integration

For teams invested in AWS infrastructure, Bedrock provides access to multiple foundation models with enterprise features like IAM, VPC integration, and compliance controls.

AI SDK with Bedrock Provider

The cleanest approach uses AI SDK's Bedrock provider:

typescript
import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';import { generateText, streamText } from 'ai';
const bedrock = createAmazonBedrock({  region: 'us-east-1',  // Uses AWS credential chain by default});
// Claude via Bedrockconst claudeModel = bedrock('anthropic.claude-sonnet-4-6-20250217-v1:0');
// Llama via Bedrockconst llamaModel = bedrock('meta.llama3-70b-instruct-v1:0');
// Amazon Nova (use cross-region inference ID for multi-region availability)const novaModel = bedrock('amazon.nova-pro-v1:0');// Alternative: bedrock('us.amazon.nova-pro-v1:0') for cross-region inference
async function generateWithBedrock(prompt: string) {  const { text, usage } = await generateText({    model: claudeModel,    prompt,    maxTokens: 1024,  });
  return { text, usage };}

Lambda Integration

Bedrock works naturally with Lambda using IAM role credentials:

typescript
import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';import { fromNodeProviderChain } from '@aws-sdk/credential-providers';import { generateText } from 'ai';import type { APIGatewayProxyEvent, APIGatewayProxyResult } from 'aws-lambda';
const bedrock = createAmazonBedrock({  region: process.env.AWS_REGION || 'us-east-1',  credentialProvider: fromNodeProviderChain(),});
export const handler = async (  event: APIGatewayProxyEvent): Promise<APIGatewayProxyResult> => {  const { prompt } = JSON.parse(event.body || '{}');
  const { text } = await generateText({    model: bedrock('anthropic.claude-sonnet-4-6-20250217-v1:0'),    prompt,  });
  return {    statusCode: 200,    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ response: text }),  };};

Practical Comparison

Feature Matrix

FeatureVercel AI SDKOpenAI Agents SDKDirect SDKs
Multi-Provider70+ providersAdapters neededSingle
Tool CallingFirst-classFirst-classProvider-specific
StreamingBuilt-inBuilt-inProvider-specific
Multi-AgentVia compositionNative handoffsManual
Edge RuntimeFull supportPartialVaries
React IntegrationNative hooksManualManual
Type SafetyFull TypeScriptFull TypeScriptVaries
ObservabilityDevTools + OTELBuilt-in tracingManual

Development Time Comparison

TaskAI SDKOpenAI AgentsDirect SDK
Basic chat~5 min~10 min~15 min
Streaming UI~10 min~30 min~60 min
Tool calling~15 min~10 min~30 min
Multi-agent~60 min~30 min~180 min
Provider switch~5 min~30 minDays

Cost Considerations

All SDKs are free. Costs come from API usage:

ModelProviderInput (per 1M)Output (per 1M)
GPT-4oOpenAI$2.50$10.00
GPT-4o-miniOpenAI$0.15$0.60
Claude Sonnet 4.6Anthropic/Bedrock$3.00$15.00
Claude Haiku 4.5Anthropic/Bedrock$1.00$5.00
Llama 3.3 70BBedrock$0.72$0.72

Decision Framework

Choosing the right SDK depends on your specific requirements:

Choose Vercel AI SDK When

  • Building with Next.js or React
  • Need to support multiple AI providers
  • Want streaming UI out of the box
  • Value type-safe, unified API
  • Need edge runtime compatibility
  • Building products that may switch providers

Choose OpenAI Agents SDK When

  • Building complex multi-agent systems
  • Need native handoff patterns
  • Want built-in guardrails
  • Prefer explicit tracing and debugging
  • Primarily using OpenAI models
  • Coming from Python agent frameworks

Choose Direct SDKs When

  • Need provider-specific features
  • Maximum performance is critical
  • Simple use case with single provider
  • Want minimal dependencies
  • Building SDK or library for others

Choose Bedrock with AI SDK When

  • AWS-native infrastructure
  • Need enterprise security (VPC, IAM)
  • Want Claude without direct Anthropic billing
  • Building for regulated industries
  • Need model diversity in one platform

Production Patterns

Tiered Model Routing

Match model capability to query complexity:

typescript
const modelTiers = {  simple: openai('gpt-4o-mini'),  standard: openai('gpt-4o'),  complex: anthropic('claude-sonnet-4-6-20250217'),};
function classifyComplexity(input: string): keyof typeof modelTiers {  if (input.length < 50 && !input.includes('analyze')) return 'simple';  if (input.includes('compare') || input.includes('design')) return 'complex';  return 'standard';}
async function smartGenerate(input: string) {  const tier = classifyComplexity(input);  return generateText({ model: modelTiers[tier], prompt: input });}

This pattern can reduce costs by 40-60% with minimal quality impact for simple queries.

Fallback Chain

For high availability, chain multiple providers:

typescript
const providerChain = [  openai('gpt-4o'),  anthropic('claude-sonnet-4-6-20250217'),  bedrock('anthropic.claude-sonnet-4-5-20250929-v1:0'),];
async function generateWithFallback(prompt: string) {  for (const model of providerChain) {    try {      return await generateText({ model, prompt });    } catch (error) {      console.log(`Provider failed, trying next: ${error.message}`);      continue;    }  }  throw new Error('All providers failed');}

Observability Setup

Track critical metrics in production:

typescript
import { trace, SpanStatusCode } from '@opentelemetry/api';
const tracer = trace.getTracer('ai-agent');
async function generateWithTracing(prompt: string) {  return tracer.startActiveSpan('ai.generate', async (span) => {    try {      span.setAttributes({        'ai.model': 'gpt-4o',        'ai.prompt.length': prompt.length,      });
      const { text, usage } = await generateText({        model: openai('gpt-4o'),        prompt,      });
      span.setAttributes({        'ai.completion.tokens': usage.completionTokens,        'ai.prompt.tokens': usage.promptTokens,        'ai.total.tokens': usage.totalTokens,      });
      span.setStatus({ code: SpanStatusCode.OK });      return { text, usage };    } catch (error) {      span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });      throw error;    } finally {      span.end();    }  });}

Common Pitfalls

Unbounded Agent Loops

Without step limits, agents can run indefinitely:

typescript
// Problem: No boundariesconst result = streamText({  model: openai('gpt-4'),  tools: myTools,  // No maxSteps - can loop forever});
// Solution: Always set limitsconst result = streamText({  model: openai('gpt-4'),  tools: myTools,  maxSteps: 10, // Explicit boundary});

Blocking Streams

Waiting for complete responses defeats streaming benefits:

typescript
// Problem: Blocks until completeconst result = await streamText({ model, prompt });const fullText = await result.text;return new Response(fullText);
// Solution: Pass through streamconst result = streamText({ model, prompt });return result.toDataStreamResponse();

Ignoring Context Limits

Large conversation histories exceed context windows:

typescript
// Problem: Unbounded contextconst messages = entireConversationHistory;await generateText({ model, messages });
// Solution: Manage context activelyconst maxTokens = 100000;const trimmedMessages = trimToFitContext(messages, maxTokens);await generateText({ model, messages: trimmedMessages });

Key Takeaways

For most TypeScript/Next.js projects, start with Vercel AI SDK. The provider flexibility reduces lock-in risk, streaming and React hooks are production-ready, and the community support is substantial.

For multi-agent systems, OpenAI Agents SDK offers the cleanest patterns. Native handoffs, built-in tracing, and guardrails integration make complex agent orchestration more manageable.

Provider flexibility matters more than you think. Requirements change, providers have outages, and pricing shifts. Building on a unified API pays dividends when you need to adapt.

Start simple, add complexity as needed. Begin with generateText() before building full agent loops. Single provider before multi-provider. Direct calls before agent abstractions.

The AI SDK landscape continues evolving. MCP integration, improved agent abstractions, and edge AI capabilities are actively developing. Building on solid foundations now enables taking advantage of these improvements as they mature.

typescript
ai-tools
serverless
aws
nodejs
architecture
tutorial

Related Posts