Tree-Shaking

Import one adapter from its package subpath. The bundle then omits image generation and the adapters you do not call.

TanStack AI exports each activity and each adapter as a separate named function. Import only the ones you use, and your bundler drops the rest.

Quick setup#

1. Import the activity that you use from @tanstack/ai.
2. Import the one adapter that you use from the provider package.

import { chat } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'

const stream = chat({
  adapter: openaiText('gpt-6.1-sol'),
  messages: [{ role: 'user', content: 'Hello!' }],
  threadId: 'thread-1',
})

for await (const chunk of stream) {
  console.log(chunk)
}

Your bundle now holds:

• The chat function, with its streaming and tool code.
• The openaiText adapter.

It does not hold summarize, generateImage, the other activities, or the adapters of other providers.

Use named imports#

Import each function by name. Some bundlers cannot drop the unused exports of a namespace import:

// Good: only what you use
import { chat } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'

// Avoid: a namespace import can pull in every export
import * as ai from '@tanstack/ai'
import * as openai from '@tanstack/ai-openai'

Use more than one activity#

Import each activity and its adapter. Each one is independent:

import { chat, summarize } from '@tanstack/ai'
import { openaiSummarize, openaiText } from '@tanstack/ai-openai'

const stream = chat({
  adapter: openaiText('gpt-6.1-sol'),
  messages: [{ role: 'user', content: 'Hello!' }],
  threadId: 'thread-1',
})

const summary = await summarize({
  adapter: openaiSummarize('gpt-5.4-mini'),
  text: 'Long text to summarize.',
  threadId: 'thread-1',
})

The create*Options helpers are separate exports too. See Typed Pre-Configured Options.

Tips for smaller bundles#

• Use a specific adapter function, for example openaiText, for each activity.
• Put different activities in different API routes.
• Load code-split routes with dynamic imports.
• In React Native and Expo, keep the chat screens client-only. Import useChat and the connection adapters there. Do not import provider SDKs, server response helpers, React DOM UI, devtools UI, or other framework packages. See Quick Start: React Native for the server-only provider boundary and the mobile transport setup.

Provider options that load the provider SDK#

Provider adapters call the provider HTTP API with fetch. They do not load the provider SDK, except for the options below. These options load the SDK on first use.

These options decide when the SDK runs. They do not decide what goes into the bundle:

• A bundler that splits chunks puts the SDK in a separate chunk. The app loads that chunk only when it uses one of these options.
• A single-file bundle always includes the SDK. The bundler cannot know which options the app uses at runtime.

configureFalClient is different. It imports @fal-ai/client statically, because it configures the global fal client. If you import configureFalClient, the SDK is in the startup bundle, also with chunk splitting.

How it works#

• Each function is a named ES module export, not a default export.
• Each activity and adapter lives in its own module.
• @tanstack/ai declares "sideEffects": false in its package.json, so bundlers can drop modules that you do not import.
• Type-only imports are removed at build time.

Bundlers such as Vite, Webpack, Rollup, and esbuild follow the static imports and drop the code that you do not reference.

Advanced#

Activity functions#

Each activity is a separate export of @tanstack/ai:

Adapter functions by provider#

Each provider package exports one function for each activity. Some examples:

Each adapter page lists the full set for its provider.

Adapter types#

Each adapter type has its own interface and a kind property:

import { openaiSummarize, openaiText } from '@tanstack/ai-openai'

const chatAdapter = openaiText('gpt-6.1-sol')
console.log(chatAdapter.kind) // 'text'

const summarizeAdapter = openaiSummarize('gpt-5.4-mini')
console.log(summarizeAdapter.kind) // 'summarize'

Type safety#

Separate exports keep the full types. Each adapter knows the models of its provider:

import { openaiText, type OpenAIChatModel } from '@tanstack/ai-openai'

const adapter = openaiText('gpt-6.1-sol')

const model: OpenAIChatModel = 'gpt-6.1-sol' // OK
const model2: OpenAIChatModel = 'invalid' // Type error