ai-sdk

AI SDK Skill

Expert at building AI-powered applications with Vercel's AI SDK.

Overview

AI SDK is the TypeScript toolkit for building AI applications:

• Unified API for OpenAI, Anthropic, Google, Cohere, and more
• Core functions: generateText, streamText, generateObject, streamObject
• UI hooks: useChat, useCompletion, useObject
• Tool calling and function execution
• Agent framework with ToolLoopAgent
• Works with React, Next.js, Vue, Svelte, Node.js

Quick Start

npm install ai @ai-sdk/openai

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'What is the weather in San Francisco?',
});

Core Concepts

Core Functions

• generateText - Non-interactive text generation
• streamText - Real-time streaming for chat
• generateObject - Typed structured data with Zod schemas
• streamObject - Stream structured objects

UI Hooks

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

function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  // Real-time streaming chat UI
}

Tool Calling

const result = await generateText({
  model: openai('gpt-4o'),
  tools: {
    weather: tool({
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => getWeather(city),
    }),
  },
  prompt: 'What is the weather in Tokyo?',
});

Documentation

For detailed information, see the reference documentation:

• Getting Started - Installation and setup
• Core Overview - generateText, streamText, etc.
• UI Overview - React hooks and components
• Tools - Tool calling and function execution
• Agents - ToolLoopAgent and agent patterns
• Providers - OpenAI, Anthropic, Google, etc.
• Upstream README - Full documentation

Common Workflows

Streaming Chat with React

'use client';
import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleSubmit, handleInputChange } = useChat();
  return (
    <div>
      {messages.map(m => <div key={m.id}>{m.content}</div>)}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

Switch Providers

import { anthropic } from '@ai-sdk/anthropic';
const { text } = await generateText({
  model: anthropic('claude-3-5-sonnet-20241022'),
  prompt: 'Hello!',
});

Upstream Sources

• Repository: https://github.com/vercel/ai
• Documentation: https://ai-sdk.dev/

Sync & Update

When user runs sync: fetch latest from upstream sources, update docs/ files. When user runs diff: compare current vs upstream, report changes.