Claude + Vercel AI SDK

Overview

The Vercel AI SDK’s Anthropic provider is the recommended way to use Claude in React and Next.js applications. It wraps the Anthropic API with a higher-level interface that handles streaming, React state management, and UI updates automatically.

The useChat hook creates a complete chat interface with minimal code: it manages message history, handles streaming responses, and provides callbacks for customization. The generateText and streamText functions provide server-side text generation with Claude, including structured output via Zod schemas and tool calling.

This combination provides the fastest path to building production-quality AI features in React applications with Claude.

When to Use

Use Claude + Vercel AI SDK when building chat interfaces, AI-powered features, or streaming text generation in React/Next.js applications. It is the standard approach for Claude-powered frontend experiences.

Getting Started

npm install ai @ai-sdk/anthropic

// app/api/chat/route.ts
import { anthropic } from '@ai-sdk/anthropic'
import { streamText } from 'ai'

export async function POST(req: Request) {
  const { messages } = await req.json()
  const result = streamText({
    model: anthropic('claude-sonnet-4-5-20250929'),
    messages
  })
  return result.toDataStreamResponse()
}

// app/page.tsx
'use client'
import { useChat } from 'ai/react'

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