Anthropic Adapter | TanStack AI Docs

The Anthropic adapter provides access to Claude models, including Claude 3.5 Sonnet, Claude 3 Opus, and more.

Installation

bash

npm install @tanstack/ai-anthropic

npm install @tanstack/ai-anthropic

Basic Usage

typescript

import { chat } from "@tanstack/ai";
import { anthropic } from "@tanstack/ai-anthropic";

const adapter = anthropic();

const stream = chat({
  adapter,
  messages: [{ role: "user", content: "Hello!" }],
  model: "claude-3-5-sonnet-20241022",
});

import { chat } from "@tanstack/ai";
import { anthropic } from "@tanstack/ai-anthropic";

const adapter = anthropic();

const stream = chat({
  adapter,
  messages: [{ role: "user", content: "Hello!" }],
  model: "claude-3-5-sonnet-20241022",
});

Basic Usage - Custom API Key

typescript

import { chat } from "@tanstack/ai";
import { createAnthropic } from "@tanstack/ai-anthropic";

const adapter = createAnthropic(process.env.ANTHROPIC_API_KEY, {
  // ... your config options
 });

const stream = chat({
  adapter,
  messages: [{ role: "user", content: "Hello!" }],
  model: "claude-3-5-sonnet-20241022",
});

import { chat } from "@tanstack/ai";
import { createAnthropic } from "@tanstack/ai-anthropic";

const adapter = createAnthropic(process.env.ANTHROPIC_API_KEY, {
  // ... your config options
 });

const stream = chat({
  adapter,
  messages: [{ role: "user", content: "Hello!" }],
  model: "claude-3-5-sonnet-20241022",
});

Configuration

typescript

import { anthropic, type AnthropicConfig } from "@tanstack/ai-anthropic";

const config: AnthropicConfig = {
  // ... your config options
};

const adapter = anthropic(config);

import { anthropic, type AnthropicConfig } from "@tanstack/ai-anthropic";

const config: AnthropicConfig = {
  // ... your config options
};

const adapter = anthropic(config);

Example: Chat Completion

typescript

import { chat, toStreamResponse } from "@tanstack/ai";
import { anthropic } from "@tanstack/ai-anthropic";

const adapter = anthropic();

export async function POST(request: Request) {
  const { messages } = await request.json();

  const stream = chat({
    adapter,
    messages,
    model: "claude-3-5-sonnet-20241022",
  });

  return toStreamResponse(stream);
}

import { chat, toStreamResponse } from "@tanstack/ai";
import { anthropic } from "@tanstack/ai-anthropic";

const adapter = anthropic();

export async function POST(request: Request) {
  const { messages } = await request.json();

  const stream = chat({
    adapter,
    messages,
    model: "claude-3-5-sonnet-20241022",
  });

  return toStreamResponse(stream);
}

Example: With Tools

typescript

import { chat, toolDefinition } from "@tanstack/ai";
import { anthropic } from "@tanstack/ai-anthropic";
import { z } from "zod";

const adapter = anthropic();

const searchDatabaseDef = toolDefinition({
  name: "search_database",
  description: "Search the database",
  inputSchema: z.object({
    query: z.string(),
  }),
});

const searchDatabase = searchDatabaseDef.server(async ({ query }) => {
  // Search database
  return { results: [...] };
});

const stream = chat({
  adapter,
  messages,
  model: "claude-3-5-sonnet-20241022",
  tools: [searchDatabase],
});

import { chat, toolDefinition } from "@tanstack/ai";
import { anthropic } from "@tanstack/ai-anthropic";
import { z } from "zod";

const adapter = anthropic();

const searchDatabaseDef = toolDefinition({
  name: "search_database",
  description: "Search the database",
  inputSchema: z.object({
    query: z.string(),
  }),
});

const searchDatabase = searchDatabaseDef.server(async ({ query }) => {
  // Search database
  return { results: [...] };
});

const stream = chat({
  adapter,
  messages,
  model: "claude-3-5-sonnet-20241022",
  tools: [searchDatabase],
});

Provider Options

Anthropic supports provider-specific options:

typescript

const stream = chat({
  adapter: anthropic(),
  messages,
  model: "claude-3-5-sonnet-20241022",
  providerOptions: {
    thinking: {
      type: "enabled",
      budgetTokens: 1000,
    },
    cacheControl: {
      type: "ephemeral",
      ttl: "5m",
    },
    sendReasoning: true,
  },
});

const stream = chat({
  adapter: anthropic(),
  messages,
  model: "claude-3-5-sonnet-20241022",
  providerOptions: {
    thinking: {
      type: "enabled",
      budgetTokens: 1000,
    },
    cacheControl: {
      type: "ephemeral",
      ttl: "5m",
    },
    sendReasoning: true,
  },
});

Thinking (Extended Thinking)

Enable extended thinking with a token budget. This allows Claude to show its reasoning process, which is streamed as thinking chunks and displayed as ThinkingPart in messages:

typescript

providerOptions: {
  thinking: {
    type: "enabled",
    budget_tokens: 2048, // Maximum tokens for thinking
  },
}

providerOptions: {
  thinking: {
    type: "enabled",
    budget_tokens: 2048, // Maximum tokens for thinking
  },
}

Note: max_tokens must be greater than budget_tokens. The adapter automatically adjusts max_tokens if needed.

Supported Models:

claude-sonnet-4-5-20250929 and newer
claude-opus-4-5-20251101 and newer

When thinking is enabled, the model's reasoning process is streamed separately from the response text and appears as a collapsible thinking section in the UI.

Prompt Caching

Cache prompts for better performance:

typescript

messages: [
  { role: "user", content: [{
    type: "text",
    content: "What is the capital of France?",
    metadata: {
      cache_control: {
        type: "ephemeral",
        ttl: "5m",
      }
    }
  }]}
]

messages: [
  { role: "user", content: [{
    type: "text",
    content: "What is the capital of France?",
    metadata: {
      cache_control: {
        type: "ephemeral",
        ttl: "5m",
      }
    }
  }]}
]