From 4145af096cf2b1572ab75d83e468f1d3187a864b Mon Sep 17 00:00:00 2001 From: Flo Date: Fri, 22 May 2026 11:48:44 +0200 Subject: [PATCH 01/10] chore: enforce pnpm 11 (#617) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3a71835b7..5cf213f23 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "packageManager": "pnpm@11.1.1", "type": "module", "engines": { - "pnpm": ">=10.17.0" + "pnpm": ">=11.0.0" }, "scripts": { "clean": "pnpm --filter \"./packages/**\" run clean", From ad2eecce8f6cc737b996f0ed2acca61ef4a54d4d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 22 May 2026 11:49:30 +0200 Subject: [PATCH 02/10] chore: sync model metadata from OpenRouter (#623) Co-authored-by: github-actions[bot] --- .changeset/sync-models.md | 5 + .../ai-openrouter/src/model-meta.ts | 116 ++++++++------ scripts/.sync-models-last-run | 2 +- scripts/openrouter.models.json | 143 ++++++++++-------- 4 files changed, 149 insertions(+), 117 deletions(-) create mode 100644 .changeset/sync-models.md diff --git a/.changeset/sync-models.md b/.changeset/sync-models.md new file mode 100644 index 000000000..63eef764c --- /dev/null +++ b/.changeset/sync-models.md @@ -0,0 +1,5 @@ +--- +'@tanstack/ai-openrouter': patch +--- + +Update model metadata from OpenRouter API diff --git a/packages/typescript/ai-openrouter/src/model-meta.ts b/packages/typescript/ai-openrouter/src/model-meta.ts index 55e1ac47c..bc273258a 100644 --- a/packages/typescript/ai-openrouter/src/model-meta.ts +++ b/packages/typescript/ai-openrouter/src/model-meta.ts @@ -1122,28 +1122,6 @@ const ARCEE_AI_SPOTLIGHT = { image: 0, }, } as const -const ARCEE_AI_TRINITY_LARGE_PREVIEW = { - id: 'arcee-ai/trinity-large-preview', - name: 'Arcee AI: Trinity Large Preview', - supports: { - input: ['text'], - output: ['text'], - supports: ['maxCompletionTokens', 'responseFormat', 'temperature', 'topP'], - }, - context_window: 131000, - pricing: { - text: { - input: { - normal: 0.15, - cached: 0, - }, - output: { - normal: 0.45, - }, - }, - image: 0, - }, -} as const const ARCEE_AI_TRINITY_LARGE_THINKING = { id: 'arcee-ai/trinity-large-thinking', name: 'Arcee AI: Trinity Large Thinking', @@ -9509,7 +9487,7 @@ const QWEN_QWEN3_5_122B_A10B = { ], }, context_window: 262144, - max_output_tokens: 65536, + max_output_tokens: 262144, pricing: { text: { input: { @@ -9789,11 +9767,11 @@ const QWEN_QWEN3_6_27B = { ], }, context_window: 262144, - max_output_tokens: 81920, + max_output_tokens: 262144, pricing: { text: { input: { - normal: 0.32, + normal: 0.3, cached: 0, }, output: { @@ -9826,11 +9804,12 @@ const QWEN_QWEN3_6_35B_A3B = { ], }, context_window: 262144, + max_output_tokens: 262144, pricing: { text: { input: { - normal: 0.149, - cached: 0, + normal: 0.15, + cached: 0.05, }, output: { normal: 1, @@ -9861,11 +9840,11 @@ const QWEN_QWEN3_6_FLASH = { pricing: { text: { input: { - normal: 0.1875, - cached: 0.234375, + normal: 0.12375, + cached: 0.1545, }, output: { - normal: 1.125, + normal: 0.7425, }, }, image: 0, @@ -9927,11 +9906,45 @@ const QWEN_QWEN3_6_PLUS = { pricing: { text: { input: { - normal: 0.325, - cached: 0.40625, + normal: 0.1794, + cached: 0.2236, + }, + output: { + normal: 1.07315, + }, + }, + image: 0, + }, +} as const +const QWEN_QWEN3_7_MAX = { + id: 'qwen/qwen3.7-max', + name: 'Qwen: Qwen3.7 Max', + supports: { + input: ['text'], + output: ['text'], + supports: [ + 'logprobs', + 'maxCompletionTokens', + 'presencePenalty', + 'reasoning', + 'responseFormat', + 'seed', + 'temperature', + 'toolChoice', + 'topLogprobs', + 'topP', + ], + }, + context_window: 1000000, + max_output_tokens: 65536, + pricing: { + text: { + input: { + normal: 2.5, + cached: 3.125, }, output: { - normal: 1.95, + normal: 7.5, }, }, image: 0, @@ -11251,16 +11264,15 @@ const Z_AI_GLM_5_1 = { 'topP', ], }, - context_window: 202800, - max_output_tokens: 202800, + context_window: 202752, pricing: { text: { input: { - normal: 0, - cached: 0, + normal: 0.98, + cached: 0.182, }, output: { - normal: 0, + normal: 3.08, }, }, image: 0, @@ -11663,11 +11675,6 @@ export type OpenRouterModelOptionsByName = { | 'temperature' | 'topP' > - [ARCEE_AI_TRINITY_LARGE_PREVIEW.id]: OpenRouterCommonOptions & - Pick< - OpenRouterBaseOptions, - 'maxCompletionTokens' | 'responseFormat' | 'temperature' | 'topP' - > [ARCEE_AI_TRINITY_LARGE_THINKING.id]: OpenRouterCommonOptions & Pick< OpenRouterBaseOptions, @@ -15045,6 +15052,20 @@ export type OpenRouterModelOptionsByName = { | 'toolChoice' | 'topP' > + [QWEN_QWEN3_7_MAX.id]: OpenRouterCommonOptions & + Pick< + OpenRouterBaseOptions, + | 'logprobs' + | 'maxCompletionTokens' + | 'presencePenalty' + | 'reasoning' + | 'responseFormat' + | 'seed' + | 'temperature' + | 'toolChoice' + | 'topLogprobs' + | 'topP' + > [REKAAI_REKA_EDGE.id]: OpenRouterCommonOptions & Pick< OpenRouterBaseOptions, @@ -15634,7 +15655,6 @@ export type OpenRouterModelInputModalitiesByName = { [ARCEE_AI_CODER_LARGE.id]: ReadonlyArray<'text'> [ARCEE_AI_MAESTRO_REASONING.id]: ReadonlyArray<'text'> [ARCEE_AI_SPOTLIGHT.id]: ReadonlyArray<'image' | 'text'> - [ARCEE_AI_TRINITY_LARGE_PREVIEW.id]: ReadonlyArray<'text'> [ARCEE_AI_TRINITY_LARGE_THINKING.id]: ReadonlyArray<'text'> [ARCEE_AI_TRINITY_LARGE_THINKING_FREE.id]: ReadonlyArray<'text'> [ARCEE_AI_TRINITY_MINI.id]: ReadonlyArray<'text'> @@ -15954,6 +15974,7 @@ export type OpenRouterModelInputModalitiesByName = { [QWEN_QWEN3_6_FLASH.id]: ReadonlyArray<'text' | 'image' | 'video'> [QWEN_QWEN3_6_MAX_PREVIEW.id]: ReadonlyArray<'text'> [QWEN_QWEN3_6_PLUS.id]: ReadonlyArray<'text' | 'image' | 'video'> + [QWEN_QWEN3_7_MAX.id]: ReadonlyArray<'text'> [REKAAI_REKA_EDGE.id]: ReadonlyArray<'image' | 'text' | 'video'> [REKAAI_REKA_FLASH_3.id]: ReadonlyArray<'text'> [RELACE_RELACE_APPLY_3.id]: ReadonlyArray<'text'> @@ -16040,7 +16061,6 @@ export const OPENROUTER_CHAT_MODELS = [ ARCEE_AI_CODER_LARGE.id, ARCEE_AI_MAESTRO_REASONING.id, ARCEE_AI_SPOTLIGHT.id, - ARCEE_AI_TRINITY_LARGE_PREVIEW.id, ARCEE_AI_TRINITY_LARGE_THINKING.id, ARCEE_AI_TRINITY_LARGE_THINKING_FREE.id, ARCEE_AI_TRINITY_MINI.id, @@ -16312,6 +16332,7 @@ export const OPENROUTER_CHAT_MODELS = [ QWEN_QWEN3_6_FLASH.id, QWEN_QWEN3_6_MAX_PREVIEW.id, QWEN_QWEN3_6_PLUS.id, + QWEN_QWEN3_7_MAX.id, REKAAI_REKA_EDGE.id, REKAAI_REKA_FLASH_3.id, RELACE_RELACE_APPLY_3.id, @@ -16358,10 +16379,7 @@ export const OPENROUTER_CHAT_MODELS = [ ] as const export type OpenRouterChatModelToolCapabilitiesByName = { - [K in (typeof OPENROUTER_CHAT_MODELS)[number]]: readonly [ - 'web_search', - 'web_fetch', - ] + [K in (typeof OPENROUTER_CHAT_MODELS)[number]]: readonly ['web_search'] } export const OPENROUTER_IMAGE_MODELS = [ diff --git a/scripts/.sync-models-last-run b/scripts/.sync-models-last-run index 667c322d9..1f83e39bc 100644 --- a/scripts/.sync-models-last-run +++ b/scripts/.sync-models-last-run @@ -1 +1 @@ -1779353499 +1779439521 diff --git a/scripts/openrouter.models.json b/scripts/openrouter.models.json index 4cbc7a457..9cd7a646e 100644 --- a/scripts/openrouter.models.json +++ b/scripts/openrouter.models.json @@ -1918,55 +1918,6 @@ "details": "/api/v1/models/arcee-ai/spotlight/endpoints" } }, - { - "id": "arcee-ai/trinity-large-preview", - "canonical_slug": "arcee-ai/trinity-large-preview", - "hugging_face_id": "arcee-ai/Trinity-Large-Preview", - "name": "Arcee AI: Trinity Large Preview", - "created": 1769552670, - "description": "Trinity-Large-Preview is a frontier-scale open-weight language model from Arcee, built as a 400B-parameter sparse Mixture-of-Experts with 13B active parameters per token using 4-of-256 expert routing. It excels in creative writing,...", - "context_length": 131000, - "architecture": { - "modality": "text->text", - "input_modalities": ["text"], - "output_modalities": ["text"], - "tokenizer": "Other", - "instruct_type": null - }, - "pricing": { - "prompt": "0.00000015", - "completion": "0.00000045" - }, - "top_provider": { - "context_length": 131000, - "max_completion_tokens": null, - "is_moderated": false - }, - "per_request_limits": null, - "supported_parameters": [ - "max_tokens", - "response_format", - "structured_outputs", - "temperature", - "tools", - "top_k", - "top_p" - ], - "default_parameters": { - "temperature": 0.8, - "top_p": 0.8, - "top_k": null, - "frequency_penalty": null, - "presence_penalty": null, - "repetition_penalty": null - }, - "supported_voices": null, - "knowledge_cutoff": null, - "expiration_date": "2026-05-21", - "links": { - "details": "/api/v1/models/arcee-ai/trinity-large-preview/endpoints" - } - }, { "id": "arcee-ai/trinity-large-thinking", "canonical_slug": "arcee-ai/trinity-large-thinking", @@ -2499,7 +2450,7 @@ }, "supported_voices": null, "knowledge_cutoff": null, - "expiration_date": null, + "expiration_date": "2026-05-28", "links": { "details": "/api/v1/models/baidu/qianfan-ocr-fast-20260420/endpoints" } @@ -15170,7 +15121,7 @@ }, "top_provider": { "context_length": 262144, - "max_completion_tokens": 65536, + "max_completion_tokens": 262144, "is_moderated": false }, "per_request_limits": null, @@ -15618,12 +15569,12 @@ "instruct_type": null }, "pricing": { - "prompt": "0.00000032", + "prompt": "0.0000003", "completion": "0.0000032" }, "top_provider": { "context_length": 262144, - "max_completion_tokens": 81920, + "max_completion_tokens": 262144, "is_moderated": false }, "per_request_limits": null, @@ -15679,12 +15630,13 @@ "instruct_type": null }, "pricing": { - "prompt": "0.000000149", - "completion": "0.000001" + "prompt": "0.00000015", + "completion": "0.000001", + "input_cache_read": "0.00000005" }, "top_provider": { "context_length": 262144, - "max_completion_tokens": null, + "max_completion_tokens": 262144, "is_moderated": false }, "per_request_limits": null, @@ -15737,9 +15689,9 @@ "instruct_type": null }, "pricing": { - "prompt": "0.0000001875", - "completion": "0.000001125", - "input_cache_write": "0.000000234375" + "prompt": "0.00000012375", + "completion": "0.0000007425", + "input_cache_write": "0.0000001545" }, "top_provider": { "context_length": 1000000, @@ -15833,9 +15785,9 @@ "instruct_type": null }, "pricing": { - "prompt": "0.000000325", - "completion": "0.00000195", - "input_cache_write": "0.00000040625" + "prompt": "0.0000001794", + "completion": "0.00000107315", + "input_cache_write": "0.0000002236" }, "top_provider": { "context_length": 1000000, @@ -15871,6 +15823,62 @@ "details": "/api/v1/models/qwen/qwen3.6-plus-04-02/endpoints" } }, + { + "id": "qwen/qwen3.7-max", + "canonical_slug": "qwen/qwen3.7-max-20260520", + "hugging_face_id": null, + "name": "Qwen: Qwen3.7 Max", + "created": 1779376861, + "description": "Qwen3.7-Max is the flagship model in Alibaba's Qwen3.7 series. It supports text input and output and is designed for agent-centric workloads, with particular strengths in coding, office and productivity tasks,...", + "context_length": 1000000, + "architecture": { + "modality": "text->text", + "input_modalities": ["text"], + "output_modalities": ["text"], + "tokenizer": "Qwen", + "instruct_type": null + }, + "pricing": { + "prompt": "0.0000025", + "completion": "0.0000075", + "input_cache_write": "0.000003125" + }, + "top_provider": { + "context_length": 1000000, + "max_completion_tokens": 65536, + "is_moderated": false + }, + "per_request_limits": null, + "supported_parameters": [ + "include_reasoning", + "logprobs", + "max_tokens", + "presence_penalty", + "reasoning", + "response_format", + "seed", + "structured_outputs", + "temperature", + "tool_choice", + "tools", + "top_logprobs", + "top_p" + ], + "default_parameters": { + "temperature": null, + "top_p": null, + "top_k": null, + "frequency_penalty": null, + "presence_penalty": null, + "repetition_penalty": null + }, + "supported_voices": null, + "knowledge_cutoff": null, + "expiration_date": null, + "links": { + "details": "/api/v1/models/qwen/qwen3.7-max-20260520/endpoints" + } + }, { "id": "rekaai/reka-edge", "canonical_slug": "rekaai/reka-edge-2603", @@ -17945,7 +17953,7 @@ "name": "Z.ai: GLM 5.1", "created": 1775578025, "description": "GLM-5.1 delivers a major leap in coding capability, with particularly significant gains in handling long-horizon tasks. Unlike previous models built around minute-level interactions, GLM-5.1 can work independently and continuously on...", - "context_length": 202800, + "context_length": 202752, "architecture": { "modality": "text->text", "input_modalities": ["text"], @@ -17954,12 +17962,13 @@ "instruct_type": null }, "pricing": { - "prompt": "0", - "completion": "0" + "prompt": "0.00000098", + "completion": "0.00000308", + "input_cache_read": "0.000000182" }, "top_provider": { - "context_length": 202800, - "max_completion_tokens": 202800, + "context_length": 202752, + "max_completion_tokens": null, "is_moderated": false }, "per_request_limits": null, From fec6162f1fee05a9dc31c4fac3a8ac1976f8731f Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 22 May 2026 12:43:16 +0200 Subject: [PATCH 03/10] feat(ai-openai): add gpt-image-2 to image model meta (#625) * feat(ai-openai): add gpt-image-2 to image model meta Adds `gpt-image-2` to OPENAI_IMAGE_MODELS so it can be used through openaiImage adapters. Reuses the gpt-image-1 provider-options/size shape (quality, background, output_format, output_compression, moderation, partial_images; sizes 1024x1024 / 1536x1024 / 1024x1536 / auto) and extends size + prompt-length validators. Also updates the media-generation skill and image-generation doc page to list the new model. * fix(ai-openrouter): restore web_fetch in tool capabilities map The model-metadata sync in #623 regenerated `OpenRouterChatModelToolCapabilitiesByName` with `['web_search']` only, which made `webFetchTool()` (added in #611) unassignable to any OpenRouter text adapter and broke the per-model type-safety test. Add `'web_fetch'` back so the existing tests compile. --- .changeset/openai-gpt-image-2.md | 22 ++++++++++++++++++ .../openrouter-web-fetch-tool-capability.md | 5 ++++ docs/media/image-generation.md | 6 +++-- .../ai-openai/src/adapters/image.ts | 2 +- .../src/image/image-provider-options.ts | 11 ++++++--- .../typescript/ai-openai/src/model-meta.ts | 23 +++++++++++++++++++ .../ai-openrouter/src/model-meta.ts | 5 +++- .../skills/ai-core/media-generation/SKILL.md | 2 +- 8 files changed, 68 insertions(+), 8 deletions(-) create mode 100644 .changeset/openai-gpt-image-2.md create mode 100644 .changeset/openrouter-web-fetch-tool-capability.md diff --git a/.changeset/openai-gpt-image-2.md b/.changeset/openai-gpt-image-2.md new file mode 100644 index 000000000..bc987807e --- /dev/null +++ b/.changeset/openai-gpt-image-2.md @@ -0,0 +1,22 @@ +--- +'@tanstack/ai-openai': minor +--- + +Add `gpt-image-2` to the OpenAI image model list. The new model is exposed +through the same tree-shakeable `openaiImage` adapter as `gpt-image-1` and +shares its provider options (`quality`, `background`, `output_format`, +`output_compression`, `moderation`, `partial_images`) and size set +(`1024x1024`, `1536x1024`, `1024x1536`, `auto`). + +```ts +import { openaiImage } from '@tanstack/ai-openai/adapters' +import { generate } from '@tanstack/ai' + +const adapter = openaiImage({ apiKey: process.env.OPENAI_API_KEY! }) + +const result = await generate({ + adapter, + model: 'gpt-image-2', + prompt: 'A watercolor fox in a snowy forest', +}) +``` diff --git a/.changeset/openrouter-web-fetch-tool-capability.md b/.changeset/openrouter-web-fetch-tool-capability.md new file mode 100644 index 000000000..5054fe92d --- /dev/null +++ b/.changeset/openrouter-web-fetch-tool-capability.md @@ -0,0 +1,5 @@ +--- +'@tanstack/ai-openrouter': patch +--- + +Restore `web_fetch` in `OpenRouterChatModelToolCapabilitiesByName` so `webFetchTool()` is assignable to OpenRouter text adapters again. The recent model-metadata sync (#623) regenerated this map with `web_search` only, breaking the per-model type-safety tests added in #611. diff --git a/docs/media/image-generation.md b/docs/media/image-generation.md index 6c3c6e115..1fb23499f 100644 --- a/docs/media/image-generation.md +++ b/docs/media/image-generation.md @@ -90,6 +90,7 @@ All image adapters support these common options: | Model | Supported Sizes | |-------|----------------| +| `gpt-image-2` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` | | `gpt-image-1` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` | | `gpt-image-1-mini` | `1024x1024`, `1536x1024`, `1024x1536`, `auto` | | `dall-e-3` | `1024x1024`, `1792x1024`, `1024x1792` | @@ -138,11 +139,11 @@ const result = await generateImage({ OpenAI models support model-specific Model Options: -#### GPT-Image-1 / GPT-Image-1-Mini +#### GPT-Image-2 / GPT-Image-1 / GPT-Image-1-Mini ```typescript const result = await generateImage({ - adapter: openaiImage('gpt-image-1'), + adapter: openaiImage('gpt-image-2'), prompt: 'A cat wearing a hat', modelOptions: { quality: 'high', // 'high' | 'medium' | 'low' | 'auto' @@ -223,6 +224,7 @@ interface GeneratedImage { | Model | Images per Request | |-------|-------------------| +| `gpt-image-2` | 1-10 | | `gpt-image-1` | 1-10 | | `gpt-image-1-mini` | 1-10 | | `dall-e-3` | 1 | diff --git a/packages/typescript/ai-openai/src/adapters/image.ts b/packages/typescript/ai-openai/src/adapters/image.ts index 1380c7a26..bc4826305 100644 --- a/packages/typescript/ai-openai/src/adapters/image.ts +++ b/packages/typescript/ai-openai/src/adapters/image.ts @@ -31,7 +31,7 @@ export interface OpenAIImageConfig extends OpenAIClientConfig {} * OpenAI Image Generation Adapter * * Tree-shakeable adapter for OpenAI image generation functionality. - * Supports gpt-image-1, gpt-image-1-mini, dall-e-3, and dall-e-2 models. + * Supports gpt-image-2, gpt-image-1, gpt-image-1-mini, dall-e-3, and dall-e-2 models. * * Features: * - Model-specific type-safe provider options diff --git a/packages/typescript/ai-openai/src/image/image-provider-options.ts b/packages/typescript/ai-openai/src/image/image-provider-options.ts index a16281cfd..d6e221ec3 100644 --- a/packages/typescript/ai-openai/src/image/image-provider-options.ts +++ b/packages/typescript/ai-openai/src/image/image-provider-options.ts @@ -181,6 +181,7 @@ export type OpenAIImageProviderOptions = * Used by the core AI types to narrow providerOptions based on the selected model. */ export type OpenAIImageModelProviderOptionsByName = { + 'gpt-image-2': GptImage1ProviderOptions 'gpt-image-1': GptImage1ProviderOptions 'gpt-image-1-mini': GptImage1MiniProviderOptions 'dall-e-3': DallE3ProviderOptions @@ -191,6 +192,7 @@ export type OpenAIImageModelProviderOptionsByName = { * Type-only map from model name to its supported sizes. */ export type OpenAIImageModelSizeByName = { + 'gpt-image-2': GptImageSize 'gpt-image-1': GptImageSize 'gpt-image-1-mini': GptImageSize 'dall-e-3': DallE3Size @@ -217,6 +219,7 @@ export function validateImageSize( if (!size || size === 'auto') return const validSizes: Record> = { + 'gpt-image-2': ['1024x1024', '1536x1024', '1024x1536', 'auto'], 'gpt-image-1': ['1024x1024', '1536x1024', '1024x1536', 'auto'], 'gpt-image-1-mini': ['1024x1024', '1536x1024', '1024x1536', 'auto'], 'dall-e-3': ['1024x1024', '1792x1024', '1024x1792'], @@ -263,7 +266,7 @@ export function validateNumberOfImages( export const validateBackground = (options: ImageValidationOptions) => { if (options.background) { - const supportedModels = ['gpt-image-1', 'gpt-image-1-mini'] + const supportedModels = ['gpt-image-2', 'gpt-image-1', 'gpt-image-1-mini'] if (!supportedModels.includes(options.model)) { throw new Error( `The model ${options.model} does not support background option.`, @@ -277,11 +280,13 @@ export const validatePrompt = (options: ImageValidationOptions) => { throw new Error('Prompt cannot be empty.') } if ( - (options.model === 'gpt-image-1' || options.model === 'gpt-image-1-mini') && + (options.model === 'gpt-image-2' || + options.model === 'gpt-image-1' || + options.model === 'gpt-image-1-mini') && options.prompt.length > 32000 ) { throw new Error( - 'For gpt-image-1/gpt-image-1-mini, prompt length must be less than or equal to 32000 characters.', + 'For gpt-image-2/gpt-image-1/gpt-image-1-mini, prompt length must be less than or equal to 32000 characters.', ) } if (options.model === 'dall-e-2' && options.prompt.length > 1000) { diff --git a/packages/typescript/ai-openai/src/model-meta.ts b/packages/typescript/ai-openai/src/model-meta.ts index 1d6d0a06d..4ed863083 100644 --- a/packages/typescript/ai-openai/src/model-meta.ts +++ b/packages/typescript/ai-openai/src/model-meta.ts @@ -572,6 +572,28 @@ const GPT_IMAGE_1_MINI = { OpenAIBaseOptions & OpenAIStreamingOptions & OpenAIMetadataOptions > +const GPT_IMAGE_2 = { + name: 'gpt-image-2', + knowledge_cutoff: '2026-04-21', + pricing: { + input: { + normal: 5, + cached: 1.25, + }, + output: { + normal: 30, + }, + }, + supports: { + input: ['text', 'image'], + output: ['image'], + endpoints: ['image-generation', 'image-edit'], + features: [], + }, +} as const satisfies ModelMeta< + OpenAIBaseOptions & OpenAIStreamingOptions & OpenAIMetadataOptions +> + const O3_DEEP_RESEARCH = { name: 'o3-deep-research', context_window: 200_000, @@ -2217,6 +2239,7 @@ export type OpenAIChatModel = (typeof OPENAI_CHAT_MODELS)[number] // Image generation models (based on endpoints: "image-generation" or "image-edit") export const OPENAI_IMAGE_MODELS = [ + GPT_IMAGE_2.name, GPT_IMAGE_1.name, GPT_IMAGE_1_MINI.name, DALL_E_3.name, diff --git a/packages/typescript/ai-openrouter/src/model-meta.ts b/packages/typescript/ai-openrouter/src/model-meta.ts index bc273258a..cec4ced80 100644 --- a/packages/typescript/ai-openrouter/src/model-meta.ts +++ b/packages/typescript/ai-openrouter/src/model-meta.ts @@ -16379,7 +16379,10 @@ export const OPENROUTER_CHAT_MODELS = [ ] as const export type OpenRouterChatModelToolCapabilitiesByName = { - [K in (typeof OPENROUTER_CHAT_MODELS)[number]]: readonly ['web_search'] + [K in (typeof OPENROUTER_CHAT_MODELS)[number]]: readonly [ + 'web_search', + 'web_fetch', + ] } export const OPENROUTER_IMAGE_MODELS = [ diff --git a/packages/typescript/ai/skills/ai-core/media-generation/SKILL.md b/packages/typescript/ai/skills/ai-core/media-generation/SKILL.md index ffb4b6d86..a3f4b0fbe 100644 --- a/packages/typescript/ai/skills/ai-core/media-generation/SKILL.md +++ b/packages/typescript/ai/skills/ai-core/media-generation/SKILL.md @@ -149,7 +149,7 @@ function ImageGenerator() { ### 1. Image Generation Supported adapters: `openaiImage` (dall-e-2, dall-e-3, gpt-image-1, -gpt-image-1-mini) and `geminiImage` (gemini-3.1-flash-image-preview, +gpt-image-1-mini, gpt-image-2) and `geminiImage` (gemini-3.1-flash-image-preview, imagen-4.0-generate-001, etc.). ```typescript From 148553bca4b4d4e0ad052fa7a0c8058b7725fb01 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 22 May 2026 13:40:09 +0200 Subject: [PATCH 04/10] docs: refresh README and package metadata (#626) * docs: refresh README discoverability * docs: address README review feedback --- .changeset/openrouter-web-fetch-tool-types.md | 5 + .changeset/refresh-readme-package-metadata.md | 35 ++ README.md | 329 ++++++++++++----- package.json | 2 +- packages/typescript/ai-anthropic/package.json | 12 +- packages/typescript/ai-client/README.md | 329 ++++++++++++----- packages/typescript/ai-client/package.json | 14 +- .../ai-code-mode-skills/package.json | 9 +- packages/typescript/ai-code-mode/package.json | 7 +- packages/typescript/ai-devtools/README.md | 329 ++++++++++++----- packages/typescript/ai-devtools/package.json | 12 +- .../typescript/ai-elevenlabs/package.json | 16 +- .../typescript/ai-event-client/package.json | 15 +- packages/typescript/ai-fal/package.json | 10 +- packages/typescript/ai-gemini/README.md | 329 ++++++++++++----- packages/typescript/ai-gemini/package.json | 14 +- packages/typescript/ai-grok/package.json | 13 +- packages/typescript/ai-groq/package.json | 13 +- .../ai-isolate-cloudflare/package.json | 8 +- .../typescript/ai-isolate-node/package.json | 8 +- .../ai-isolate-quickjs/package.json | 9 +- packages/typescript/ai-ollama/README.md | 329 ++++++++++++----- packages/typescript/ai-ollama/package.json | 12 +- packages/typescript/ai-openai/README.md | 329 ++++++++++++----- packages/typescript/ai-openai/package.json | 16 +- packages/typescript/ai-openrouter/README.md | 327 +++++++++++++---- .../typescript/ai-openrouter/package.json | 13 +- packages/typescript/ai-preact/README.md | 333 +++++++++++++----- packages/typescript/ai-preact/package.json | 9 +- packages/typescript/ai-react-ui/README.md | 329 ++++++++++++----- packages/typescript/ai-react-ui/package.json | 10 +- packages/typescript/ai-react/README.md | 329 ++++++++++++----- packages/typescript/ai-react/package.json | 12 +- packages/typescript/ai-solid-ui/README.md | 326 +++++++++++++---- packages/typescript/ai-solid-ui/package.json | 10 +- packages/typescript/ai-solid/package.json | 12 +- packages/typescript/ai-svelte/package.json | 13 +- packages/typescript/ai-utils/package.json | 10 +- packages/typescript/ai-vue-ui/README.md | 326 +++++++++++++---- packages/typescript/ai-vue-ui/package.json | 10 +- packages/typescript/ai-vue/README.md | 326 +++++++++++++---- packages/typescript/ai-vue/package.json | 14 +- packages/typescript/ai/README.md | 329 ++++++++++++----- packages/typescript/ai/package.json | 14 +- packages/typescript/openai-base/package.json | 12 +- .../typescript/preact-ai-devtools/README.md | 329 ++++++++++++----- .../preact-ai-devtools/package.json | 16 +- .../typescript/react-ai-devtools/README.md | 329 ++++++++++++----- .../typescript/react-ai-devtools/package.json | 16 +- .../typescript/solid-ai-devtools/README.md | 329 ++++++++++++----- .../typescript/solid-ai-devtools/package.json | 13 +- scripts/copy-readme.js | 28 ++ 52 files changed, 4640 insertions(+), 1388 deletions(-) create mode 100644 .changeset/openrouter-web-fetch-tool-types.md create mode 100644 .changeset/refresh-readme-package-metadata.md create mode 100644 scripts/copy-readme.js diff --git a/.changeset/openrouter-web-fetch-tool-types.md b/.changeset/openrouter-web-fetch-tool-types.md new file mode 100644 index 000000000..066b2faa9 --- /dev/null +++ b/.changeset/openrouter-web-fetch-tool-types.md @@ -0,0 +1,5 @@ +--- +'@tanstack/ai-openrouter': patch +--- + +Fix OpenRouter provider tool type metadata to include `webFetchTool`. diff --git a/.changeset/refresh-readme-package-metadata.md b/.changeset/refresh-readme-package-metadata.md new file mode 100644 index 000000000..2564ffd9d --- /dev/null +++ b/.changeset/refresh-readme-package-metadata.md @@ -0,0 +1,35 @@ +--- +'@tanstack/ai': patch +'@tanstack/ai-anthropic': patch +'@tanstack/ai-client': patch +'@tanstack/ai-code-mode': patch +'@tanstack/ai-code-mode-skills': patch +'@tanstack/ai-devtools-core': patch +'@tanstack/ai-elevenlabs': patch +'@tanstack/ai-event-client': patch +'@tanstack/ai-fal': patch +'@tanstack/ai-gemini': patch +'@tanstack/ai-grok': patch +'@tanstack/ai-groq': patch +'@tanstack/ai-isolate-cloudflare': patch +'@tanstack/ai-isolate-node': patch +'@tanstack/ai-isolate-quickjs': patch +'@tanstack/ai-ollama': patch +'@tanstack/ai-openai': patch +'@tanstack/ai-openrouter': patch +'@tanstack/ai-preact': patch +'@tanstack/ai-react': patch +'@tanstack/ai-react-ui': patch +'@tanstack/ai-solid': patch +'@tanstack/ai-solid-ui': patch +'@tanstack/ai-svelte': patch +'@tanstack/ai-utils': patch +'@tanstack/ai-vue': patch +'@tanstack/ai-vue-ui': patch +'@tanstack/openai-base': patch +'@tanstack/preact-ai-devtools': patch +'@tanstack/react-ai-devtools': patch +'@tanstack/solid-ai-devtools': patch +--- + +Refresh package README content and npm metadata for better discoverability. diff --git a/README.md b/README.md index 26e3db048..1c98040b8 100644 --- a/README.md +++ b/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/package.json b/package.json index 5cf213f23..e39c1e485 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "generate:models:fetch": "tsx scripts/fetch-openrouter-models.ts", "regenerate:models": "tsx scripts/convert-openrouter-models.ts", "sync-docs-config": "node scripts/sync-docs-config.ts", - "copy:readme": "cp README.md packages/typescript/ai/README.md && cp README.md packages/typescript/ai-devtools/README.md && cp README.md packages/typescript/preact-ai-devtools/README.md && cp README.md packages/typescript/ai-client/README.md && cp README.md packages/typescript/ai-gemini/README.md && cp README.md packages/typescript/ai-ollama/README.md && cp README.md packages/typescript/ai-openai/README.md && cp README.md packages/typescript/ai-react/README.md && cp README.md packages/typescript/ai-react-ui/README.md && cp README.md packages/typescript/react-ai-devtools/README.md && cp README.md packages/typescript/solid-ai-devtools/README.md", + "copy:readme": "node scripts/copy-readme.js", "changeset": "changeset", "changeset:publish": "changeset publish", "changeset:version": "changeset version && pnpm install --no-frozen-lockfile && pnpm format" diff --git a/packages/typescript/ai-anthropic/package.json b/packages/typescript/ai-anthropic/package.json index e4297e318..47ba1e6a8 100644 --- a/packages/typescript/ai-anthropic/package.json +++ b/packages/typescript/ai-anthropic/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-anthropic", "version": "0.10.2", - "description": "Anthropic Claude adapter for TanStack AI", + "description": "Anthropic Claude adapter for TanStack AI chat, tool calling, thinking, and structured outputs.", "author": "", "license": "MIT", "repository": { @@ -11,10 +11,16 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "anthropic", "claude", - "tanstack", - "adapter" + "adapter", + "chat", + "tool-calling", + "structured-outputs", + "thinking" ], "type": "module", "module": "./dist/esm/index.js", diff --git a/packages/typescript/ai-client/README.md b/packages/typescript/ai-client/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai-client/README.md +++ b/packages/typescript/ai-client/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-client/package.json b/packages/typescript/ai-client/package.json index 5eb06b31a..a98d98adf 100644 --- a/packages/typescript/ai-client/package.json +++ b/packages/typescript/ai-client/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-client", "version": "0.11.5", - "description": "Framework-agnostic headless client for TanStack AI", + "description": "Framework-agnostic headless client for TanStack AI chat, realtime sessions, streaming transports, and media generations.", "author": "", "license": "MIT", "repository": { @@ -11,11 +11,17 @@ }, "keywords": [ "ai", - "client", - "headless", + "ai-sdk", + "typescript", "tanstack", + "headless", + "client", "chat", - "streaming" + "streaming", + "realtime", + "generative-ai", + "tool-calling", + "structured-outputs" ], "type": "module", "module": "./dist/esm/index.js", diff --git a/packages/typescript/ai-code-mode-skills/package.json b/packages/typescript/ai-code-mode-skills/package.json index 25df468d4..25991aab1 100644 --- a/packages/typescript/ai-code-mode-skills/package.json +++ b/packages/typescript/ai-code-mode-skills/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-code-mode-skills", "version": "0.1.18", - "description": "Persistent skill library for TanStack AI Code Mode - LLM-created reusable code snippets", + "description": "Persistent runtime skill library for TanStack AI Code Mode agents and sandboxed tool orchestration.", "author": "", "license": "MIT", "repository": { @@ -50,11 +50,16 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", "code-mode", "skills", + "agents", "llm", - "sandbox" + "sandbox", + "tool-calling", + "tanstack-intent" ], "dependencies": { "@tanstack/ai": "workspace:*", diff --git a/packages/typescript/ai-code-mode/package.json b/packages/typescript/ai-code-mode/package.json index c81d26b69..212fe1ac1 100644 --- a/packages/typescript/ai-code-mode/package.json +++ b/packages/typescript/ai-code-mode/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-code-mode", "version": "0.1.18", - "description": "Code Mode for TanStack AI - LLM-driven code execution in secure sandboxes", + "description": "Secure TypeScript Code Mode for TanStack AI agents to execute sandboxed tool orchestration programs.", "author": "", "license": "MIT", "repository": { @@ -39,11 +39,16 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", "code-mode", + "agents", "llm", + "tool-calling", "sandbox", "isolate", + "code-execution", "tanstack-intent" ], "dependencies": { diff --git a/packages/typescript/ai-devtools/README.md b/packages/typescript/ai-devtools/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai-devtools/README.md +++ b/packages/typescript/ai-devtools/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-devtools/package.json b/packages/typescript/ai-devtools/package.json index 57b77a2c6..fb43d31a2 100644 --- a/packages/typescript/ai-devtools/package.json +++ b/packages/typescript/ai-devtools/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-devtools-core", "version": "0.3.35", - "description": "Core TanStack AI Devtools", + "description": "Core TanStack AI Devtools plugin for inspecting chat messages, tool calls, streams, and errors.", "author": "", "license": "MIT", "repository": { @@ -71,11 +71,15 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", - "sdk", - "llm", + "devtools", + "debugging", + "observability", "chat", - "embeddings" + "tool-calling", + "streaming" ], "dependencies": { "@tanstack/ai": "workspace:*", diff --git a/packages/typescript/ai-elevenlabs/package.json b/packages/typescript/ai-elevenlabs/package.json index 2a269a4a3..4354f2211 100644 --- a/packages/typescript/ai-elevenlabs/package.json +++ b/packages/typescript/ai-elevenlabs/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-elevenlabs", "version": "0.2.9", - "description": "ElevenLabs adapter for TanStack AI realtime voice", + "description": "ElevenLabs adapter for TanStack AI realtime voice, text-to-speech, transcription, music, and sound effects.", "author": "", "license": "MIT", "repository": { @@ -11,18 +11,20 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "elevenlabs", + "adapter", "voice", "realtime", - "tanstack", - "adapter", - "tts", "text-to-speech", + "tts", + "transcription", + "speech-to-text", "audio-generation", "music", - "sound-effects", - "transcription", - "speech-to-text" + "sound-effects" ], "type": "module", "module": "./dist/esm/index.js", diff --git a/packages/typescript/ai-event-client/package.json b/packages/typescript/ai-event-client/package.json index 9ff1e7281..845246096 100644 --- a/packages/typescript/ai-event-client/package.json +++ b/packages/typescript/ai-event-client/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-event-client", "version": "0.3.8", - "description": "Event client for TanStack AI devtools integration", + "description": "Typed event client for TanStack AI devtools, observability, and streamed runtime events.", "author": "", "license": "MIT", "repository": { @@ -41,5 +41,16 @@ }, "devDependencies": { "@vitest/coverage-v8": "4.0.14" - } + }, + "keywords": [ + "ai", + "ai-sdk", + "typescript", + "tanstack", + "events", + "devtools", + "observability", + "streaming", + "chat" + ] } diff --git a/packages/typescript/ai-fal/package.json b/packages/typescript/ai-fal/package.json index 8a6751341..361170847 100644 --- a/packages/typescript/ai-fal/package.json +++ b/packages/typescript/ai-fal/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-fal", "version": "0.7.11", - "description": "fal.ai adapter for TanStack AI", + "description": "fal.ai adapter for TanStack AI image, video, audio, speech, and transcription generation.", "author": "", "license": "MIT", "repository": { @@ -34,8 +34,11 @@ }, "keywords": [ "ai", - "fal", + "ai-sdk", + "typescript", "tanstack", + "fal", + "fal-ai", "adapter", "image-generation", "video-generation", @@ -43,7 +46,8 @@ "text-to-speech", "speech-to-text", "tts", - "transcription" + "transcription", + "media-generation" ], "dependencies": { "@fal-ai/client": "^1.10.1", diff --git a/packages/typescript/ai-gemini/README.md b/packages/typescript/ai-gemini/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai-gemini/README.md +++ b/packages/typescript/ai-gemini/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-gemini/package.json b/packages/typescript/ai-gemini/package.json index e0c407e35..272e2f13f 100644 --- a/packages/typescript/ai-gemini/package.json +++ b/packages/typescript/ai-gemini/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-gemini", "version": "0.10.9", - "description": "Google Gemini adapter for TanStack AI", + "description": "Google Gemini adapter for TanStack AI chat, images, speech, audio generation, and structured outputs.", "author": "", "license": "MIT", "repository": { @@ -38,10 +38,18 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "gemini", "google", - "tanstack", - "adapter" + "adapter", + "chat", + "tool-calling", + "structured-outputs", + "image-generation", + "audio-generation", + "text-to-speech" ], "dependencies": { "@google/genai": "^1.43.0", diff --git a/packages/typescript/ai-grok/package.json b/packages/typescript/ai-grok/package.json index c2941fef7..9c7cf8eda 100644 --- a/packages/typescript/ai-grok/package.json +++ b/packages/typescript/ai-grok/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-grok", "version": "0.8.6", - "description": "Grok (xAI) adapter for TanStack AI", + "description": "xAI Grok adapter for TanStack AI chat, image generation, realtime, and structured outputs.", "author": "", "license": "MIT", "repository": { @@ -38,10 +38,17 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "grok", "xai", - "tanstack", - "adapter" + "adapter", + "chat", + "tool-calling", + "structured-outputs", + "image-generation", + "realtime" ], "dependencies": { "@tanstack/ai-utils": "workspace:*", diff --git a/packages/typescript/ai-groq/package.json b/packages/typescript/ai-groq/package.json index 3004a5448..383b2b38b 100644 --- a/packages/typescript/ai-groq/package.json +++ b/packages/typescript/ai-groq/package.json @@ -2,7 +2,7 @@ "name": "@tanstack/ai-groq", "version": "0.2.5", "type": "module", - "description": "Groq adapter for TanStack AI", + "description": "Groq adapter for TanStack AI low-latency chat, tool calling, and structured outputs.", "author": "", "license": "MIT", "repository": { @@ -38,9 +38,16 @@ }, "keywords": [ "ai", - "groq", + "ai-sdk", + "typescript", "tanstack", - "adapter" + "groq", + "adapter", + "llm", + "chat", + "low-latency", + "tool-calling", + "structured-outputs" ], "devDependencies": { "@vitest/coverage-v8": "4.0.14", diff --git a/packages/typescript/ai-isolate-cloudflare/package.json b/packages/typescript/ai-isolate-cloudflare/package.json index 4a9989055..b5b2892b9 100644 --- a/packages/typescript/ai-isolate-cloudflare/package.json +++ b/packages/typescript/ai-isolate-cloudflare/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-isolate-cloudflare", "version": "0.2.9", - "description": "Cloudflare Workers driver for TanStack AI Code Mode - execute code on the edge", + "description": "Cloudflare Workers sandbox driver for TanStack AI Code Mode TypeScript execution at the edge.", "author": "", "license": "MIT", "repository": { @@ -46,12 +46,16 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", "code-mode", "cloudflare", "workers", "edge", - "isolate" + "isolate", + "sandbox", + "code-execution" ], "dependencies": { "@tanstack/ai-code-mode": "workspace:*" diff --git a/packages/typescript/ai-isolate-node/package.json b/packages/typescript/ai-isolate-node/package.json index 7533cc134..7016ee822 100644 --- a/packages/typescript/ai-isolate-node/package.json +++ b/packages/typescript/ai-isolate-node/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-isolate-node", "version": "0.1.18", - "description": "Node.js isolated-vm driver for TanStack AI Code Mode", + "description": "Node.js isolated-vm sandbox driver for TanStack AI Code Mode TypeScript execution.", "author": "", "license": "MIT", "repository": { @@ -38,11 +38,15 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", "code-mode", + "nodejs", + "isolated-vm", "isolate", "sandbox", - "isolated-vm" + "code-execution" ], "dependencies": { "isolated-vm": "^6.0.2" diff --git a/packages/typescript/ai-isolate-quickjs/package.json b/packages/typescript/ai-isolate-quickjs/package.json index 16481effb..3526fe6ea 100644 --- a/packages/typescript/ai-isolate-quickjs/package.json +++ b/packages/typescript/ai-isolate-quickjs/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-isolate-quickjs", "version": "0.1.18", - "description": "QuickJS WASM driver for TanStack AI Code Mode - runs everywhere", + "description": "QuickJS WASM sandbox driver for TanStack AI Code Mode TypeScript execution across runtimes.", "author": "", "license": "MIT", "repository": { @@ -35,12 +35,15 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", "code-mode", + "quickjs", + "wasm", "isolate", "sandbox", - "quickjs", - "wasm" + "code-execution" ], "dependencies": { "quickjs-emscripten": "^0.31.0" diff --git a/packages/typescript/ai-ollama/README.md b/packages/typescript/ai-ollama/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai-ollama/README.md +++ b/packages/typescript/ai-ollama/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-ollama/package.json b/packages/typescript/ai-ollama/package.json index f94e8adeb..8fbfa53de 100644 --- a/packages/typescript/ai-ollama/package.json +++ b/packages/typescript/ai-ollama/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-ollama", "version": "0.6.20", - "description": "Ollama adapter for TanStack AI", + "description": "Ollama adapter for TanStack AI local LLM chat, tool calling, and structured outputs.", "author": "", "license": "MIT", "repository": { @@ -34,11 +34,17 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "ollama", + "local-llm", "llama", "mistral", - "tanstack", - "adapter" + "adapter", + "chat", + "tool-calling", + "structured-outputs" ], "dependencies": { "@tanstack/ai-utils": "workspace:*", diff --git a/packages/typescript/ai-openai/README.md b/packages/typescript/ai-openai/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai-openai/README.md +++ b/packages/typescript/ai-openai/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-openai/package.json b/packages/typescript/ai-openai/package.json index a71a52fc9..fa4b520cb 100644 --- a/packages/typescript/ai-openai/package.json +++ b/packages/typescript/ai-openai/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-openai", "version": "0.9.6", - "description": "OpenAI adapter for TanStack AI", + "description": "OpenAI adapter for TanStack AI chat, tools, images, video, speech, transcription, realtime, and structured outputs.", "author": "", "license": "MIT", "repository": { @@ -38,10 +38,20 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "openai", "gpt", - "tanstack", - "adapter" + "adapter", + "chat", + "tool-calling", + "structured-outputs", + "image-generation", + "video-generation", + "text-to-speech", + "transcription", + "realtime" ], "dependencies": { "@tanstack/ai-utils": "workspace:*", diff --git a/packages/typescript/ai-openrouter/README.md b/packages/typescript/ai-openrouter/README.md index 3bb562720..1c98040b8 100644 --- a/packages/typescript/ai-openrouter/README.md +++ b/packages/typescript/ai-openrouter/README.md @@ -1,92 +1,254 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install + +Install the core package and the provider/framework packages your app uses: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` + +OpenRouter is also a good starting point if you want access to many providers +through one API key: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` + +## Streaming Chat -A powerful, type-safe AI SDK for building AI-powered applications. +```typescript +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' + +export async function POST(request: Request) { + const body = await request.json() -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Multimodal content support** - Send images, audio, video, and documents -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -### Read the docs → + return toServerSentEventsResponse(stream) +} +``` -## Bonus: TanStack Start Integration +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). -TanStack AI works with **any** framework (Next.js, Express, Remix, etc.). +## Type-Safe Tools -**With TanStack Start**, you get a bonus: share implementations between AI tools and server functions with `createServerFnTool`: +Define a tool once, then attach a server or client implementation with the same +input and output types: ```typescript -import { createServerFnTool } from '@tanstack/ai-react' +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' -// Define once, get AI tool AND server function (TanStack Start only) -const getProducts = createServerFnTool({ +const getProducts = toolDefinition({ name: 'getProducts', + description: 'Search the product catalog', inputSchema: z.object({ query: z.string() }), - execute: async ({ query }) => db.products.search(query), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) }) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs -// Use in AI chat -chat({ tools: [getProducts.server] }) +Use `outputSchema` when you need typed objects instead of freeform text: -// Call directly from components (no API endpoint needed!) -const products = await getProducts.serverFn({ query: 'laptop' }) +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) ``` -No duplicate logic, full type safety, automatic validation. The `serverFn` feature requires TanStack Start. See [docs](https://tanstack.com/ai) for details. +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners @@ -104,28 +266,39 @@ No duplicate logic, full type safety, automatic validation. The `serverFn` featu
- + - - + + CodeRabbit @@ -94,9 +256,9 @@ No duplicate logic, full type safety, automatic validation. The `serverFn` featu - - - Cloudflare + + + Cloudflare
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-openrouter/package.json b/packages/typescript/ai-openrouter/package.json index e99c845ef..16c74001a 100644 --- a/packages/typescript/ai-openrouter/package.json +++ b/packages/typescript/ai-openrouter/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-openrouter", "version": "0.9.6", - "description": "OpenRouter adapter for TanStack AI", + "description": "TanStack AI adapter for OpenRouter chat, provider tools, structured outputs, and access to hundreds of LLMs.", "author": "", "license": "MIT", "repository": { @@ -38,9 +38,18 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "llm", + "generative-ai", "openrouter", "tanstack", - "adapter" + "adapter", + "chat", + "streaming", + "tool-calling", + "structured-outputs", + "model-router" ], "dependencies": { "@openrouter/sdk": "0.12.35", diff --git a/packages/typescript/ai-preact/README.md b/packages/typescript/ai-preact/README.md index 85e9db54e..1c98040b8 100644 --- a/packages/typescript/ai-preact/README.md +++ b/packages/typescript/ai-preact/README.md @@ -1,92 +1,254 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners @@ -104,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
- + - - + + CodeRabbit @@ -94,9 +256,9 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - - - Cloudflare + + + Cloudflare
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-preact/package.json b/packages/typescript/ai-preact/package.json index 4fd96e74d..57c6e7e97 100644 --- a/packages/typescript/ai-preact/package.json +++ b/packages/typescript/ai-preact/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-preact", "version": "0.6.30", - "description": "Preact hooks for TanStack AI", + "description": "Preact hooks for TanStack AI streaming chat and typed messages.", "author": "", "license": "MIT", "repository": { @@ -34,11 +34,14 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "preact", "hooks", - "tanstack", "chat", - "streaming" + "streaming", + "tool-calling" ], "dependencies": { "@tanstack/ai-client": "workspace:*" diff --git a/packages/typescript/ai-react-ui/README.md b/packages/typescript/ai-react-ui/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai-react-ui/README.md +++ b/packages/typescript/ai-react-ui/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-react-ui/package.json b/packages/typescript/ai-react-ui/package.json index cec3f327a..40cde12ff 100644 --- a/packages/typescript/ai-react-ui/package.json +++ b/packages/typescript/ai-react-ui/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-react-ui", "version": "0.8.0", - "description": "Headless React components for building AI chat interfaces", + "description": "Headless React components for building TanStack AI chat interfaces with streamed message parts.", "module": "./dist/esm/index.js", "types": "./dist/esm/index.d.ts", "type": "module", @@ -29,13 +29,17 @@ "test:types": "tsc" }, "keywords": [ - "tanstack", "ai", + "ai-sdk", + "typescript", + "tanstack", "react", "chat", "ui", "headless", - "components" + "components", + "streaming", + "generative-ai" ], "dependencies": { "react-markdown": "^10.1.0", diff --git a/packages/typescript/ai-react/README.md b/packages/typescript/ai-react/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai-react/README.md +++ b/packages/typescript/ai-react/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-react/package.json b/packages/typescript/ai-react/package.json index e27af6cc0..1cedcda5d 100644 --- a/packages/typescript/ai-react/package.json +++ b/packages/typescript/ai-react/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-react", "version": "0.11.5", - "description": "React hooks for TanStack AI", + "description": "React hooks for TanStack AI streaming chat, realtime voice, structured outputs, and media generation.", "author": "", "license": "MIT", "repository": { @@ -34,11 +34,17 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", "react", "hooks", - "tanstack", "chat", - "streaming" + "streaming", + "realtime", + "tool-calling", + "structured-outputs", + "media-generation" ], "dependencies": { "@tanstack/ai-client": "workspace:*" diff --git a/packages/typescript/ai-solid-ui/README.md b/packages/typescript/ai-solid-ui/README.md index 3411c085f..1c98040b8 100644 --- a/packages/typescript/ai-solid-ui/README.md +++ b/packages/typescript/ai-solid-ui/README.md @@ -1,65 +1,254 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install + +Install the core package and the provider/framework packages your app uses: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` + +OpenRouter is also a good starting point if you want access to many providers +through one API key: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` + +## Streaming Chat + +```typescript +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' + +export async function POST(request: Request) { + const body = await request.json() + + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -A powerful, type-safe AI SDK for building AI-powered applications. + return toServerSentEventsResponse(stream) +} +``` -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Type-safe tools with server/client execution +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). -### Read the docs → +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners @@ -77,28 +266,39 @@ A powerful, type-safe AI SDK for building AI-powered applications.
- + - - + + CodeRabbit @@ -67,9 +256,9 @@ A powerful, type-safe AI SDK for building AI-powered applications. - - - Cloudflare + + + Cloudflare
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-solid-ui/package.json b/packages/typescript/ai-solid-ui/package.json index 0b24f480d..36752a24f 100644 --- a/packages/typescript/ai-solid-ui/package.json +++ b/packages/typescript/ai-solid-ui/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-solid-ui", "version": "0.7.0", - "description": "Headless Solid components for building AI chat interfaces", + "description": "Headless Solid components for building TanStack AI chat interfaces with streamed message parts.", "module": "./src/index.ts", "types": "./src/index.ts", "type": "module", @@ -31,14 +31,18 @@ "test:types": "tsc" }, "keywords": [ - "tanstack", "ai", + "ai-sdk", + "typescript", + "tanstack", "solid", "solidjs", "chat", "ui", "headless", - "components" + "components", + "streaming", + "generative-ai" ], "dependencies": { "rehype-highlight": "^7.0.2", diff --git a/packages/typescript/ai-solid/package.json b/packages/typescript/ai-solid/package.json index ade778fe8..a5c2bb4e6 100644 --- a/packages/typescript/ai-solid/package.json +++ b/packages/typescript/ai-solid/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-solid", "version": "0.10.5", - "description": "Solid hooks for TanStack AI", + "description": "Solid hooks for TanStack AI streaming chat, structured outputs, and media generation.", "author": "", "license": "MIT", "repository": { @@ -32,11 +32,17 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", + "tanstack", + "solid", "solidjs", "hooks", - "tanstack", "chat", - "streaming" + "streaming", + "tool-calling", + "structured-outputs", + "media-generation" ], "dependencies": { "@tanstack/ai-client": "workspace:*" diff --git a/packages/typescript/ai-svelte/package.json b/packages/typescript/ai-svelte/package.json index b12b6b740..ab933856a 100644 --- a/packages/typescript/ai-svelte/package.json +++ b/packages/typescript/ai-svelte/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-svelte", "version": "0.10.5", - "description": "Svelte bindings for TanStack AI", + "description": "Svelte 5 bindings for TanStack AI streaming chat, structured outputs, and media generation.", "author": "", "license": "MIT", "repository": { @@ -36,11 +36,16 @@ }, "keywords": [ "ai", - "svelte", - "hooks", + "ai-sdk", + "typescript", "tanstack", + "svelte", + "svelte5", "chat", - "streaming" + "streaming", + "tool-calling", + "structured-outputs", + "media-generation" ], "dependencies": { "@tanstack/ai-client": "workspace:*" diff --git a/packages/typescript/ai-utils/package.json b/packages/typescript/ai-utils/package.json index 91447e6b5..49ad3eb33 100644 --- a/packages/typescript/ai-utils/package.json +++ b/packages/typescript/ai-utils/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-utils", "version": "0.2.0", - "description": "Shared utilities for TanStack AI adapter packages", + "description": "Shared TypeScript utilities for TanStack AI provider adapters and runtime packages.", "author": "", "license": "MIT", "repository": { @@ -34,8 +34,12 @@ }, "keywords": [ "ai", - "utils", - "tanstack" + "ai-sdk", + "typescript", + "tanstack", + "utilities", + "adapter", + "provider-adapter" ], "devDependencies": { "@types/node": "^24.10.1", diff --git a/packages/typescript/ai-vue-ui/README.md b/packages/typescript/ai-vue-ui/README.md index 3411c085f..1c98040b8 100644 --- a/packages/typescript/ai-vue-ui/README.md +++ b/packages/typescript/ai-vue-ui/README.md @@ -1,65 +1,254 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install + +Install the core package and the provider/framework packages your app uses: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` + +OpenRouter is also a good starting point if you want access to many providers +through one API key: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` + +## Streaming Chat + +```typescript +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' + +export async function POST(request: Request) { + const body = await request.json() + + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -A powerful, type-safe AI SDK for building AI-powered applications. + return toServerSentEventsResponse(stream) +} +``` -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Type-safe tools with server/client execution +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). -### Read the docs → +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners @@ -77,28 +266,39 @@ A powerful, type-safe AI SDK for building AI-powered applications.
- + - - + + CodeRabbit @@ -67,9 +256,9 @@ A powerful, type-safe AI SDK for building AI-powered applications. - - - Cloudflare + + + Cloudflare
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-vue-ui/package.json b/packages/typescript/ai-vue-ui/package.json index fe4c165c7..055003ce1 100644 --- a/packages/typescript/ai-vue-ui/package.json +++ b/packages/typescript/ai-vue-ui/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-vue-ui", "version": "0.2.1", - "description": "Headless Vue components for building AI chat interfaces", + "description": "Headless Vue components for building TanStack AI chat interfaces with streamed message parts.", "module": "./src/index.ts", "types": "./src/index.ts", "type": "module", @@ -30,13 +30,17 @@ "test:types": "vue-tsc --noEmit" }, "keywords": [ - "tanstack", "ai", + "ai-sdk", + "typescript", + "tanstack", "vue", "chat", "ui", "headless", - "components" + "components", + "streaming", + "generative-ai" ], "dependencies": { "@crazydos/vue-markdown": "^1.1.4", diff --git a/packages/typescript/ai-vue/README.md b/packages/typescript/ai-vue/README.md index 3411c085f..1c98040b8 100644 --- a/packages/typescript/ai-vue/README.md +++ b/packages/typescript/ai-vue/README.md @@ -1,65 +1,254 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install + +Install the core package and the provider/framework packages your app uses: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` + +OpenRouter is also a good starting point if you want access to many providers +through one API key: + +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` + +## Streaming Chat + +```typescript +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' + +export async function POST(request: Request) { + const body = await request.json() + + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -A powerful, type-safe AI SDK for building AI-powered applications. + return toServerSentEventsResponse(stream) +} +``` -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Type-safe tools with server/client execution +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). -### Read the docs → +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners @@ -77,28 +266,39 @@ A powerful, type-safe AI SDK for building AI-powered applications.
- + - - + + CodeRabbit @@ -67,9 +256,9 @@ A powerful, type-safe AI SDK for building AI-powered applications. - - - Cloudflare + + + Cloudflare
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai-vue/package.json b/packages/typescript/ai-vue/package.json index 5c47135e1..41e0c619a 100644 --- a/packages/typescript/ai-vue/package.json +++ b/packages/typescript/ai-vue/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai-vue", "version": "0.10.6", - "description": "Vue hooks for TanStack AI", + "description": "Vue composables for TanStack AI streaming chat, structured outputs, and media generation.", "author": "", "license": "MIT", "repository": { @@ -32,11 +32,17 @@ }, "keywords": [ "ai", - "vue", - "hooks", + "ai-sdk", + "typescript", "tanstack", + "vue", + "vue3", + "composables", "chat", - "streaming" + "streaming", + "tool-calling", + "structured-outputs", + "media-generation" ], "dependencies": { "@tanstack/ai-client": "workspace:*" diff --git a/packages/typescript/ai/README.md b/packages/typescript/ai/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/ai/README.md +++ b/packages/typescript/ai/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/ai/package.json b/packages/typescript/ai/package.json index d1584ddb8..8b71beba5 100644 --- a/packages/typescript/ai/package.json +++ b/packages/typescript/ai/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/ai", "version": "0.21.1", - "description": "Core TanStack AI library - Open source AI SDK", + "description": "Type-safe TypeScript AI SDK for streaming chat, tool calling, agents, structured outputs, and multimodal generation.", "author": "Tanner Linsley", "license": "MIT", "repository": { @@ -57,11 +57,19 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", - "sdk", "llm", + "generative-ai", "chat", - "embeddings", + "streaming", + "tool-calling", + "function-calling", + "agents", + "structured-outputs", + "multimodal", + "zod", "tanstack-intent" ], "dependencies": { diff --git a/packages/typescript/openai-base/package.json b/packages/typescript/openai-base/package.json index a80e10749..41f614d68 100644 --- a/packages/typescript/openai-base/package.json +++ b/packages/typescript/openai-base/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/openai-base", "version": "0.3.5", - "description": "Shared base adapters for OpenAI-SDK-backed providers in TanStack AI (Chat Completions and Responses)", + "description": "Shared OpenAI SDK base adapters for TanStack AI providers using Chat Completions and Responses APIs.", "author": "", "license": "MIT", "repository": { @@ -34,9 +34,15 @@ }, "keywords": [ "ai", - "openai", + "ai-sdk", + "typescript", "tanstack", - "adapter" + "openai", + "adapter", + "provider-adapter", + "chat-completions", + "responses-api", + "structured-outputs" ], "dependencies": { "@tanstack/ai-utils": "workspace:*", diff --git a/packages/typescript/preact-ai-devtools/README.md b/packages/typescript/preact-ai-devtools/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/preact-ai-devtools/README.md +++ b/packages/typescript/preact-ai-devtools/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/preact-ai-devtools/package.json b/packages/typescript/preact-ai-devtools/package.json index 3b7bd07d9..f38932981 100644 --- a/packages/typescript/preact-ai-devtools/package.json +++ b/packages/typescript/preact-ai-devtools/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/preact-ai-devtools", "version": "0.1.39", - "description": "Preact Devtools for TanStack AI.", + "description": "Preact Devtools plugin for inspecting TanStack AI chat messages, tool calls, streams, and errors.", "author": "tannerlinsley", "license": "MIT", "homepage": "https://tanstack.com/ai", @@ -57,5 +57,17 @@ }, "peerDependencies": { "preact": "^10.0.0" - } + }, + "keywords": [ + "ai", + "ai-sdk", + "typescript", + "tanstack", + "preact", + "devtools", + "debugging", + "observability", + "chat", + "tool-calling" + ] } diff --git a/packages/typescript/react-ai-devtools/README.md b/packages/typescript/react-ai-devtools/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/react-ai-devtools/README.md +++ b/packages/typescript/react-ai-devtools/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/react-ai-devtools/package.json b/packages/typescript/react-ai-devtools/package.json index 63c9f8f7a..8499bba6d 100644 --- a/packages/typescript/react-ai-devtools/package.json +++ b/packages/typescript/react-ai-devtools/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/react-ai-devtools", "version": "0.2.39", - "description": "React Devtools for TanStack AI.", + "description": "React Devtools plugin for inspecting TanStack AI chat messages, tool calls, streams, and errors.", "author": "tannerlinsley", "license": "MIT", "homepage": "https://tanstack.com/ai", @@ -60,5 +60,17 @@ "@vitest/coverage-v8": "4.0.14", "react": "^19.2.3", "vite": "^7.3.3" - } + }, + "keywords": [ + "ai", + "ai-sdk", + "typescript", + "tanstack", + "react", + "devtools", + "debugging", + "observability", + "chat", + "tool-calling" + ] } diff --git a/packages/typescript/solid-ai-devtools/README.md b/packages/typescript/solid-ai-devtools/README.md index 26e3db048..1c98040b8 100644 --- a/packages/typescript/solid-ai-devtools/README.md +++ b/packages/typescript/solid-ai-devtools/README.md @@ -1,93 +1,253 @@
- + TanStack AI

- +# TanStack AI -
- -### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) -
+Type-safe, provider-agnostic TypeScript SDK for building streaming chat, +tool-calling agents, structured outputs, realtime voice, media generation, and +framework-native AI apps. -# TanStack AI +TanStack AI is built from composable activities and provider adapters. Use one +provider or switch between many. Import only chat, or add image, audio, video, +speech, transcription, summarization, realtime, Code Mode, devtools, and +framework bindings as your app needs them. + +## Read the docs -> + +## Start Here + +- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) - + what TanStack AI is and how the packages fit together. +- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) - + add streaming chat to a React app. +- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) - + build with Vue composables. +- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) - + build with Svelte 5 runes. +- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) - + use TanStack AI from a server endpoint, script, or backend service. +- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) - + compare architecture, feature coverage, and tradeoffs. + +## What You Can Build + +- Streaming chat experiences with typed messages, tool calls, reasoning parts, + and configurable connection adapters. +- Type-safe tools that can run on the server or client from one shared + `toolDefinition()` contract. +- Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or + plain JSON Schema. +- Multimodal prompts and responses that include text, images, audio, video, and + documents. +- Image, audio, video, speech, transcription, and summarization workflows using + a shared generation client pattern. +- Realtime voice chat with provider adapters for realtime sessions and token + minting. +- Code Mode agents that let an LLM write and execute TypeScript in an isolated + sandbox to orchestrate tools with loops, branches, and parallel calls. +- Devtools and observability pipelines for inspecting messages, tool calls, + stream chunks, errors, usage, and OpenTelemetry traces. +- Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a + headless client for custom runtimes. + +## Install -A powerful, type-safe AI SDK for building AI-powered applications. +Install the core package and the provider/framework packages your app uses: -- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) -- **Tree-shakeable adapters** - Import only what you need for smaller bundles -- **Multimodal content support** - Send images, audio, video, and documents -- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen -- Chat completion, streaming, and agent loop strategies -- Headless chat state management with adapters (SSE, HTTP stream, custom) -- Isomorphic type-safe tools with server/client execution -- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions -- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md)) +```bash +pnpm add @tanstack/ai @tanstack/ai-openai +``` + +For a React chat UI: + +```bash +pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai +``` -### Read the docs → +OpenRouter is also a good starting point if you want access to many providers +through one API key: -## Tree-Shakeable Adapters +```bash +pnpm add @tanstack/ai @tanstack/ai-openrouter +``` -Import only the functionality you need for smaller bundle sizes: +## Streaming Chat ```typescript -// Only chat functionality - no summarization code bundled -import { openaiText } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' +import { chat, toServerSentEventsResponse } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' -const textAdapter = openaiText() +export async function POST(request: Request) { + const body = await request.json() -const result = generate({ - adapter: textAdapter, - model: 'gpt-4o', - messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], -}) + const stream = chat({ + adapter: openaiText('gpt-5.2'), + messages: body.messages, + }) -for await (const chunk of result) { - console.log(chunk) + return toServerSentEventsResponse(stream) } ``` -Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. +Learn more in the +[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and +[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters). + +## Type-Safe Tools + +Define a tool once, then attach a server or client implementation with the same +input and output types: + +```typescript +import { toolDefinition } from '@tanstack/ai' +import { z } from 'zod' + +const getProducts = toolDefinition({ + name: 'getProducts', + description: 'Search the product catalog', + inputSchema: z.object({ query: z.string() }), + outputSchema: z.array( + z.object({ + id: z.string(), + name: z.string(), + }), + ), +}).server(async ({ query }) => { + return db.products.search(query) +}) +``` + +Learn more in the +[Tools docs](https://tanstack.com/ai/latest/docs/tools/tools), +[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval), +and +[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery). + +## Structured Outputs + +Use `outputSchema` when you need typed objects instead of freeform text: + +```typescript +import { chat } from '@tanstack/ai' +import { openaiText } from '@tanstack/ai-openai' +import { z } from 'zod' + +const Person = z.object({ + name: z.string(), + age: z.number(), +}) + +const person = await chat({ + adapter: openaiText('gpt-5.2'), + messages: [{ role: 'user', content: 'Ada Lovelace, 36' }], + outputSchema: Person, +}) +``` + +Learn more in the +[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview). + +## Media, Realtime, and Code Mode + +- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one + pattern for image generation, text-to-speech, transcription, summarization, + audio generation, and video generation. +- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) - + build low-latency realtime voice experiences. +- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let + models write and execute TypeScript inside a secure isolate. +- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) - + give Code Mode reusable runtime capabilities. + +## Providers + +Official adapters include: + +| Package | Use it for | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API | +| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools | +| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs | +| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation | +| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models | +| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime | +| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference | +| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects | +| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models | + +The adapter system is tree-shakeable by activity. Import `openaiText` for chat, +`openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so +on. + +## Framework Packages + +| Package | What it provides | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients | +| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks | +| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations | +| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations | +| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations | +| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat | +| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces | + +## Advanced Docs + +- [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook + into chat configuration, chunks, tool calls, usage, errors, and structured + outputs. +- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit + vendor-neutral GenAI traces and metrics. +- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) - + subscribe to typed TanStack AI events. +- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) - + narrow model options and content modalities to the selected model. +- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) - + switch providers at runtime. +- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) - + ship only the activities and adapters you use. +- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) - + install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex, + and other coding agents with TanStack Intent. ## Get Involved -- We welcome issues and pull requests! -- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions) -- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions +- Read the [docs](https://tanstack.com/ai). +- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions). +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ). +- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md) + for setup instructions. +- [Become a sponsor](https://github.com/sponsors/tannerlinsley/). ## Partners
- + - + CodeRabbit @@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe - + Cloudflare @@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-AI & you? -

-We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. -

-LET'S CHAT + AI and you? +

+ We're looking for TanStack AI partners to join our mission. Partner with us + to push the boundaries of TanStack AI and build amazing things together. +

+ LET'S CHAT
## Explore the TanStack Ecosystem -- TanStack Config – Tooling for JS/TS packages -- TanStack DB – Reactive sync client store -- TanStack Devtools – Unified devtools panel -- TanStack Form – Type‑safe form state -- TanStack Pacer – Debouncing, throttling, batching -- TanStack Query – Async state & caching -- TanStack Ranger – Range & slider primitives -- TanStack Router – Type‑safe routing, caching & URL state -- TanStack Start – Full‑stack SSR & streaming -- TanStack Store – Reactive data store -- TanStack Table – Headless datagrids -- TanStack Virtual – Virtualized rendering - -… and more at TanStack.com » - - +- TanStack Config - + tooling for JS/TS packages +- TanStack DB - reactive + sync client store +- TanStack Devtools - + unified devtools panel +- TanStack Form - + type-safe form state +- TanStack Pacer - + debouncing, throttling, batching +- TanStack Query - + async state and caching +- TanStack Ranger - + range and slider primitives +- TanStack Router - + type-safe routing, caching, and URL state +- TanStack Start - + full-stack SSR and streaming +- TanStack Store - + reactive data store +- TanStack Table - + headless datagrids +- TanStack Virtual - + virtualized rendering + +...and more at TanStack.com. diff --git a/packages/typescript/solid-ai-devtools/package.json b/packages/typescript/solid-ai-devtools/package.json index ae4d3ecd7..757697cb0 100644 --- a/packages/typescript/solid-ai-devtools/package.json +++ b/packages/typescript/solid-ai-devtools/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/solid-ai-devtools", "version": "0.2.39", - "description": "Solid TanStack AI Devtools", + "description": "Solid Devtools plugin for inspecting TanStack AI chat messages, tool calls, streams, and errors.", "author": "", "license": "MIT", "repository": { @@ -40,11 +40,16 @@ }, "keywords": [ "ai", + "ai-sdk", + "typescript", "tanstack", - "sdk", - "llm", + "solid", + "solidjs", + "devtools", + "debugging", + "observability", "chat", - "embeddings" + "tool-calling" ], "dependencies": { "@tanstack/ai-devtools-core": "workspace:*", diff --git a/scripts/copy-readme.js b/scripts/copy-readme.js new file mode 100644 index 000000000..ddc2fbd0d --- /dev/null +++ b/scripts/copy-readme.js @@ -0,0 +1,28 @@ +import { copyFileSync } from 'node:fs' +import { dirname, join } from 'node:path' +import { fileURLToPath } from 'node:url' + +const rootDir = dirname(dirname(fileURLToPath(import.meta.url))) + +const targets = [ + 'packages/typescript/ai/README.md', + 'packages/typescript/ai-client/README.md', + 'packages/typescript/ai-devtools/README.md', + 'packages/typescript/ai-gemini/README.md', + 'packages/typescript/ai-ollama/README.md', + 'packages/typescript/ai-openai/README.md', + 'packages/typescript/ai-openrouter/README.md', + 'packages/typescript/ai-preact/README.md', + 'packages/typescript/ai-react/README.md', + 'packages/typescript/ai-react-ui/README.md', + 'packages/typescript/ai-solid-ui/README.md', + 'packages/typescript/ai-vue/README.md', + 'packages/typescript/ai-vue-ui/README.md', + 'packages/typescript/preact-ai-devtools/README.md', + 'packages/typescript/react-ai-devtools/README.md', + 'packages/typescript/solid-ai-devtools/README.md', +] + +for (const target of targets) { + copyFileSync(join(rootDir, 'README.md'), join(rootDir, target)) +} From 6ec3e78cc31e741933e8e35e17bb5647fecb1ba4 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 22 May 2026 16:42:34 +0200 Subject: [PATCH 05/10] ci: Version Packages (#627) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/openai-gpt-image-2.md | 22 ------------ .../openrouter-web-fetch-tool-capability.md | 5 --- .changeset/openrouter-web-fetch-tool-types.md | 5 --- .changeset/refresh-readme-package-metadata.md | 35 ------------------- .changeset/sync-models.md | 5 --- packages/typescript/ai-anthropic/CHANGELOG.md | 10 ++++++ packages/typescript/ai-anthropic/package.json | 2 +- packages/typescript/ai-client/CHANGELOG.md | 10 ++++++ packages/typescript/ai-client/package.json | 2 +- .../ai-code-mode-skills/CHANGELOG.md | 10 ++++++ .../ai-code-mode-skills/package.json | 2 +- packages/typescript/ai-code-mode/CHANGELOG.md | 9 +++++ packages/typescript/ai-code-mode/package.json | 2 +- packages/typescript/ai-devtools/CHANGELOG.md | 10 ++++++ packages/typescript/ai-devtools/package.json | 2 +- .../typescript/ai-elevenlabs/CHANGELOG.md | 11 ++++++ .../typescript/ai-elevenlabs/package.json | 2 +- .../typescript/ai-event-client/CHANGELOG.md | 9 +++++ .../typescript/ai-event-client/package.json | 2 +- packages/typescript/ai-fal/CHANGELOG.md | 10 ++++++ packages/typescript/ai-fal/package.json | 2 +- packages/typescript/ai-gemini/CHANGELOG.md | 10 ++++++ packages/typescript/ai-gemini/package.json | 2 +- packages/typescript/ai-grok/CHANGELOG.md | 11 ++++++ packages/typescript/ai-grok/package.json | 2 +- packages/typescript/ai-groq/CHANGELOG.md | 11 ++++++ packages/typescript/ai-groq/package.json | 2 +- .../ai-isolate-cloudflare/CHANGELOG.md | 9 +++++ .../ai-isolate-cloudflare/package.json | 2 +- .../typescript/ai-isolate-node/CHANGELOG.md | 9 +++++ .../typescript/ai-isolate-node/package.json | 2 +- .../ai-isolate-quickjs/CHANGELOG.md | 9 +++++ .../ai-isolate-quickjs/package.json | 2 +- packages/typescript/ai-ollama/CHANGELOG.md | 10 ++++++ packages/typescript/ai-ollama/package.json | 2 +- packages/typescript/ai-openai/CHANGELOG.md | 33 +++++++++++++++++ packages/typescript/ai-openai/package.json | 2 +- .../typescript/ai-openrouter/CHANGELOG.md | 16 +++++++++ .../typescript/ai-openrouter/package.json | 2 +- packages/typescript/ai-preact/CHANGELOG.md | 10 ++++++ packages/typescript/ai-preact/package.json | 2 +- packages/typescript/ai-react-ui/CHANGELOG.md | 10 ++++++ packages/typescript/ai-react-ui/package.json | 2 +- packages/typescript/ai-react/CHANGELOG.md | 10 ++++++ packages/typescript/ai-react/package.json | 2 +- packages/typescript/ai-solid-ui/CHANGELOG.md | 10 ++++++ packages/typescript/ai-solid-ui/package.json | 2 +- packages/typescript/ai-solid/CHANGELOG.md | 10 ++++++ packages/typescript/ai-solid/package.json | 2 +- packages/typescript/ai-svelte/CHANGELOG.md | 10 ++++++ packages/typescript/ai-svelte/package.json | 2 +- packages/typescript/ai-utils/CHANGELOG.md | 6 ++++ packages/typescript/ai-utils/package.json | 2 +- packages/typescript/ai-vue-ui/CHANGELOG.md | 9 +++++ packages/typescript/ai-vue-ui/package.json | 2 +- packages/typescript/ai-vue/CHANGELOG.md | 10 ++++++ packages/typescript/ai-vue/package.json | 2 +- packages/typescript/ai/CHANGELOG.md | 9 +++++ packages/typescript/ai/package.json | 2 +- packages/typescript/openai-base/CHANGELOG.md | 10 ++++++ packages/typescript/openai-base/package.json | 2 +- .../preact-ai-devtools/CHANGELOG.md | 9 +++++ .../preact-ai-devtools/package.json | 2 +- .../typescript/react-ai-devtools/CHANGELOG.md | 9 +++++ .../typescript/react-ai-devtools/package.json | 2 +- .../typescript/solid-ai-devtools/CHANGELOG.md | 9 +++++ .../typescript/solid-ai-devtools/package.json | 2 +- 67 files changed, 359 insertions(+), 103 deletions(-) delete mode 100644 .changeset/openai-gpt-image-2.md delete mode 100644 .changeset/openrouter-web-fetch-tool-capability.md delete mode 100644 .changeset/openrouter-web-fetch-tool-types.md delete mode 100644 .changeset/refresh-readme-package-metadata.md delete mode 100644 .changeset/sync-models.md diff --git a/.changeset/openai-gpt-image-2.md b/.changeset/openai-gpt-image-2.md deleted file mode 100644 index bc987807e..000000000 --- a/.changeset/openai-gpt-image-2.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -'@tanstack/ai-openai': minor ---- - -Add `gpt-image-2` to the OpenAI image model list. The new model is exposed -through the same tree-shakeable `openaiImage` adapter as `gpt-image-1` and -shares its provider options (`quality`, `background`, `output_format`, -`output_compression`, `moderation`, `partial_images`) and size set -(`1024x1024`, `1536x1024`, `1024x1536`, `auto`). - -```ts -import { openaiImage } from '@tanstack/ai-openai/adapters' -import { generate } from '@tanstack/ai' - -const adapter = openaiImage({ apiKey: process.env.OPENAI_API_KEY! }) - -const result = await generate({ - adapter, - model: 'gpt-image-2', - prompt: 'A watercolor fox in a snowy forest', -}) -``` diff --git a/.changeset/openrouter-web-fetch-tool-capability.md b/.changeset/openrouter-web-fetch-tool-capability.md deleted file mode 100644 index 5054fe92d..000000000 --- a/.changeset/openrouter-web-fetch-tool-capability.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@tanstack/ai-openrouter': patch ---- - -Restore `web_fetch` in `OpenRouterChatModelToolCapabilitiesByName` so `webFetchTool()` is assignable to OpenRouter text adapters again. The recent model-metadata sync (#623) regenerated this map with `web_search` only, breaking the per-model type-safety tests added in #611. diff --git a/.changeset/openrouter-web-fetch-tool-types.md b/.changeset/openrouter-web-fetch-tool-types.md deleted file mode 100644 index 066b2faa9..000000000 --- a/.changeset/openrouter-web-fetch-tool-types.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@tanstack/ai-openrouter': patch ---- - -Fix OpenRouter provider tool type metadata to include `webFetchTool`. diff --git a/.changeset/refresh-readme-package-metadata.md b/.changeset/refresh-readme-package-metadata.md deleted file mode 100644 index 2564ffd9d..000000000 --- a/.changeset/refresh-readme-package-metadata.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -'@tanstack/ai': patch -'@tanstack/ai-anthropic': patch -'@tanstack/ai-client': patch -'@tanstack/ai-code-mode': patch -'@tanstack/ai-code-mode-skills': patch -'@tanstack/ai-devtools-core': patch -'@tanstack/ai-elevenlabs': patch -'@tanstack/ai-event-client': patch -'@tanstack/ai-fal': patch -'@tanstack/ai-gemini': patch -'@tanstack/ai-grok': patch -'@tanstack/ai-groq': patch -'@tanstack/ai-isolate-cloudflare': patch -'@tanstack/ai-isolate-node': patch -'@tanstack/ai-isolate-quickjs': patch -'@tanstack/ai-ollama': patch -'@tanstack/ai-openai': patch -'@tanstack/ai-openrouter': patch -'@tanstack/ai-preact': patch -'@tanstack/ai-react': patch -'@tanstack/ai-react-ui': patch -'@tanstack/ai-solid': patch -'@tanstack/ai-solid-ui': patch -'@tanstack/ai-svelte': patch -'@tanstack/ai-utils': patch -'@tanstack/ai-vue': patch -'@tanstack/ai-vue-ui': patch -'@tanstack/openai-base': patch -'@tanstack/preact-ai-devtools': patch -'@tanstack/react-ai-devtools': patch -'@tanstack/solid-ai-devtools': patch ---- - -Refresh package README content and npm metadata for better discoverability. diff --git a/.changeset/sync-models.md b/.changeset/sync-models.md deleted file mode 100644 index 63eef764c..000000000 --- a/.changeset/sync-models.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@tanstack/ai-openrouter': patch ---- - -Update model metadata from OpenRouter API diff --git a/packages/typescript/ai-anthropic/CHANGELOG.md b/packages/typescript/ai-anthropic/CHANGELOG.md index fd2d0d17f..891dda51d 100644 --- a/packages/typescript/ai-anthropic/CHANGELOG.md +++ b/packages/typescript/ai-anthropic/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-anthropic +## 0.10.3 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + ## 0.10.2 ### Patch Changes diff --git a/packages/typescript/ai-anthropic/package.json b/packages/typescript/ai-anthropic/package.json index 47ba1e6a8..680cc5f82 100644 --- a/packages/typescript/ai-anthropic/package.json +++ b/packages/typescript/ai-anthropic/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-anthropic", - "version": "0.10.2", + "version": "0.10.3", "description": "Anthropic Claude adapter for TanStack AI chat, tool calling, thinking, and structured outputs.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-client/CHANGELOG.md b/packages/typescript/ai-client/CHANGELOG.md index 8b52c7cad..08122d965 100644 --- a/packages/typescript/ai-client/CHANGELOG.md +++ b/packages/typescript/ai-client/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-client +## 0.11.6 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-event-client@0.3.9 + ## 0.11.5 ### Patch Changes diff --git a/packages/typescript/ai-client/package.json b/packages/typescript/ai-client/package.json index a98d98adf..b6e40f456 100644 --- a/packages/typescript/ai-client/package.json +++ b/packages/typescript/ai-client/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-client", - "version": "0.11.5", + "version": "0.11.6", "description": "Framework-agnostic headless client for TanStack AI chat, realtime sessions, streaming transports, and media generations.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-code-mode-skills/CHANGELOG.md b/packages/typescript/ai-code-mode-skills/CHANGELOG.md index 53bfdcdef..82923e3e1 100644 --- a/packages/typescript/ai-code-mode-skills/CHANGELOG.md +++ b/packages/typescript/ai-code-mode-skills/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-code-mode-skills +## 0.1.19 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-code-mode@0.1.19 + ## 0.1.18 ### Patch Changes diff --git a/packages/typescript/ai-code-mode-skills/package.json b/packages/typescript/ai-code-mode-skills/package.json index 25991aab1..ebc48dd3f 100644 --- a/packages/typescript/ai-code-mode-skills/package.json +++ b/packages/typescript/ai-code-mode-skills/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-code-mode-skills", - "version": "0.1.18", + "version": "0.1.19", "description": "Persistent runtime skill library for TanStack AI Code Mode agents and sandboxed tool orchestration.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-code-mode/CHANGELOG.md b/packages/typescript/ai-code-mode/CHANGELOG.md index 54b1bfb6f..ee3d3414a 100644 --- a/packages/typescript/ai-code-mode/CHANGELOG.md +++ b/packages/typescript/ai-code-mode/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/ai-code-mode +## 0.1.19 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + ## 0.1.18 ### Patch Changes diff --git a/packages/typescript/ai-code-mode/package.json b/packages/typescript/ai-code-mode/package.json index 212fe1ac1..70498aa72 100644 --- a/packages/typescript/ai-code-mode/package.json +++ b/packages/typescript/ai-code-mode/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-code-mode", - "version": "0.1.18", + "version": "0.1.19", "description": "Secure TypeScript Code Mode for TanStack AI agents to execute sandboxed tool orchestration programs.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-devtools/CHANGELOG.md b/packages/typescript/ai-devtools/CHANGELOG.md index 68c4b893e..8ad237c00 100644 --- a/packages/typescript/ai-devtools/CHANGELOG.md +++ b/packages/typescript/ai-devtools/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-devtools-core +## 0.3.36 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-event-client@0.3.9 + ## 0.3.35 ### Patch Changes diff --git a/packages/typescript/ai-devtools/package.json b/packages/typescript/ai-devtools/package.json index fb43d31a2..d7ca23d69 100644 --- a/packages/typescript/ai-devtools/package.json +++ b/packages/typescript/ai-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-devtools-core", - "version": "0.3.35", + "version": "0.3.36", "description": "Core TanStack AI Devtools plugin for inspecting chat messages, tool calls, streams, and errors.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-elevenlabs/CHANGELOG.md b/packages/typescript/ai-elevenlabs/CHANGELOG.md index 7ba268ce6..b5607f097 100644 --- a/packages/typescript/ai-elevenlabs/CHANGELOG.md +++ b/packages/typescript/ai-elevenlabs/CHANGELOG.md @@ -1,5 +1,16 @@ # @tanstack/ai-elevenlabs +## 0.2.10 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-client@0.11.6 + - @tanstack/ai-utils@0.2.1 + ## 0.2.9 ### Patch Changes diff --git a/packages/typescript/ai-elevenlabs/package.json b/packages/typescript/ai-elevenlabs/package.json index 4354f2211..774c1ff1e 100644 --- a/packages/typescript/ai-elevenlabs/package.json +++ b/packages/typescript/ai-elevenlabs/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-elevenlabs", - "version": "0.2.9", + "version": "0.2.10", "description": "ElevenLabs adapter for TanStack AI realtime voice, text-to-speech, transcription, music, and sound effects.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-event-client/CHANGELOG.md b/packages/typescript/ai-event-client/CHANGELOG.md index d0c741799..1c327312e 100644 --- a/packages/typescript/ai-event-client/CHANGELOG.md +++ b/packages/typescript/ai-event-client/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/ai-event-client +## 0.3.9 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + ## 0.3.8 ### Patch Changes diff --git a/packages/typescript/ai-event-client/package.json b/packages/typescript/ai-event-client/package.json index 845246096..64d5a3eee 100644 --- a/packages/typescript/ai-event-client/package.json +++ b/packages/typescript/ai-event-client/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-event-client", - "version": "0.3.8", + "version": "0.3.9", "description": "Typed event client for TanStack AI devtools, observability, and streamed runtime events.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-fal/CHANGELOG.md b/packages/typescript/ai-fal/CHANGELOG.md index 50a976703..c9faa7fc9 100644 --- a/packages/typescript/ai-fal/CHANGELOG.md +++ b/packages/typescript/ai-fal/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-fal +## 0.7.12 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + ## 0.7.11 ### Patch Changes diff --git a/packages/typescript/ai-fal/package.json b/packages/typescript/ai-fal/package.json index 361170847..fecea6aaf 100644 --- a/packages/typescript/ai-fal/package.json +++ b/packages/typescript/ai-fal/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-fal", - "version": "0.7.11", + "version": "0.7.12", "description": "fal.ai adapter for TanStack AI image, video, audio, speech, and transcription generation.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-gemini/CHANGELOG.md b/packages/typescript/ai-gemini/CHANGELOG.md index eef543217..7e22078e4 100644 --- a/packages/typescript/ai-gemini/CHANGELOG.md +++ b/packages/typescript/ai-gemini/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-gemini +## 0.10.10 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + ## 0.10.9 ### Patch Changes diff --git a/packages/typescript/ai-gemini/package.json b/packages/typescript/ai-gemini/package.json index 272e2f13f..560b87e39 100644 --- a/packages/typescript/ai-gemini/package.json +++ b/packages/typescript/ai-gemini/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-gemini", - "version": "0.10.9", + "version": "0.10.10", "description": "Google Gemini adapter for TanStack AI chat, images, speech, audio generation, and structured outputs.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-grok/CHANGELOG.md b/packages/typescript/ai-grok/CHANGELOG.md index 50978465c..1dfae81c4 100644 --- a/packages/typescript/ai-grok/CHANGELOG.md +++ b/packages/typescript/ai-grok/CHANGELOG.md @@ -1,5 +1,16 @@ # @tanstack/ai-grok +## 0.8.7 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + - @tanstack/openai-base@0.3.6 + ## 0.8.6 ### Patch Changes diff --git a/packages/typescript/ai-grok/package.json b/packages/typescript/ai-grok/package.json index 9c7cf8eda..c9cabeda4 100644 --- a/packages/typescript/ai-grok/package.json +++ b/packages/typescript/ai-grok/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-grok", - "version": "0.8.6", + "version": "0.8.7", "description": "xAI Grok adapter for TanStack AI chat, image generation, realtime, and structured outputs.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-groq/CHANGELOG.md b/packages/typescript/ai-groq/CHANGELOG.md index 83a6d2b97..0cde9d7c7 100644 --- a/packages/typescript/ai-groq/CHANGELOG.md +++ b/packages/typescript/ai-groq/CHANGELOG.md @@ -1,5 +1,16 @@ # @tanstack/ai-groq +## 0.2.6 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + - @tanstack/openai-base@0.3.6 + ## 0.2.5 ### Patch Changes diff --git a/packages/typescript/ai-groq/package.json b/packages/typescript/ai-groq/package.json index 383b2b38b..0eba29568 100644 --- a/packages/typescript/ai-groq/package.json +++ b/packages/typescript/ai-groq/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-groq", - "version": "0.2.5", + "version": "0.2.6", "type": "module", "description": "Groq adapter for TanStack AI low-latency chat, tool calling, and structured outputs.", "author": "", diff --git a/packages/typescript/ai-isolate-cloudflare/CHANGELOG.md b/packages/typescript/ai-isolate-cloudflare/CHANGELOG.md index 40d1d1198..68552bdf2 100644 --- a/packages/typescript/ai-isolate-cloudflare/CHANGELOG.md +++ b/packages/typescript/ai-isolate-cloudflare/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/ai-isolate-cloudflare +## 0.2.10 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-code-mode@0.1.19 + ## 0.2.9 ### Patch Changes diff --git a/packages/typescript/ai-isolate-cloudflare/package.json b/packages/typescript/ai-isolate-cloudflare/package.json index b5b2892b9..a677ae64f 100644 --- a/packages/typescript/ai-isolate-cloudflare/package.json +++ b/packages/typescript/ai-isolate-cloudflare/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-isolate-cloudflare", - "version": "0.2.9", + "version": "0.2.10", "description": "Cloudflare Workers sandbox driver for TanStack AI Code Mode TypeScript execution at the edge.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-isolate-node/CHANGELOG.md b/packages/typescript/ai-isolate-node/CHANGELOG.md index c761af249..ae390b8d3 100644 --- a/packages/typescript/ai-isolate-node/CHANGELOG.md +++ b/packages/typescript/ai-isolate-node/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/ai-isolate-node +## 0.1.19 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-code-mode@0.1.19 + ## 0.1.18 ### Patch Changes diff --git a/packages/typescript/ai-isolate-node/package.json b/packages/typescript/ai-isolate-node/package.json index 7016ee822..111a47ca2 100644 --- a/packages/typescript/ai-isolate-node/package.json +++ b/packages/typescript/ai-isolate-node/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-isolate-node", - "version": "0.1.18", + "version": "0.1.19", "description": "Node.js isolated-vm sandbox driver for TanStack AI Code Mode TypeScript execution.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-isolate-quickjs/CHANGELOG.md b/packages/typescript/ai-isolate-quickjs/CHANGELOG.md index 4e28b0a28..373ec6309 100644 --- a/packages/typescript/ai-isolate-quickjs/CHANGELOG.md +++ b/packages/typescript/ai-isolate-quickjs/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/ai-isolate-quickjs +## 0.1.19 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-code-mode@0.1.19 + ## 0.1.18 ### Patch Changes diff --git a/packages/typescript/ai-isolate-quickjs/package.json b/packages/typescript/ai-isolate-quickjs/package.json index 3526fe6ea..bf2865555 100644 --- a/packages/typescript/ai-isolate-quickjs/package.json +++ b/packages/typescript/ai-isolate-quickjs/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-isolate-quickjs", - "version": "0.1.18", + "version": "0.1.19", "description": "QuickJS WASM sandbox driver for TanStack AI Code Mode TypeScript execution across runtimes.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-ollama/CHANGELOG.md b/packages/typescript/ai-ollama/CHANGELOG.md index b2c0742d1..ac8ee71f1 100644 --- a/packages/typescript/ai-ollama/CHANGELOG.md +++ b/packages/typescript/ai-ollama/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-ollama +## 0.6.21 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + ## 0.6.20 ### Patch Changes diff --git a/packages/typescript/ai-ollama/package.json b/packages/typescript/ai-ollama/package.json index 8fbfa53de..7a0a582c1 100644 --- a/packages/typescript/ai-ollama/package.json +++ b/packages/typescript/ai-ollama/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-ollama", - "version": "0.6.20", + "version": "0.6.21", "description": "Ollama adapter for TanStack AI local LLM chat, tool calling, and structured outputs.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-openai/CHANGELOG.md b/packages/typescript/ai-openai/CHANGELOG.md index 588e47642..c7e70def8 100644 --- a/packages/typescript/ai-openai/CHANGELOG.md +++ b/packages/typescript/ai-openai/CHANGELOG.md @@ -1,5 +1,38 @@ # @tanstack/ai-openai +## 0.10.0 + +### Minor Changes + +- Add `gpt-image-2` to the OpenAI image model list. The new model is exposed ([#625](https://github.com/TanStack/ai/pull/625)) + through the same tree-shakeable `openaiImage` adapter as `gpt-image-1` and + shares its provider options (`quality`, `background`, `output_format`, + `output_compression`, `moderation`, `partial_images`) and size set + (`1024x1024`, `1536x1024`, `1024x1536`, `auto`). + + ```ts + import { openaiImage } from '@tanstack/ai-openai/adapters' + import { generate } from '@tanstack/ai' + + const adapter = openaiImage({ apiKey: process.env.OPENAI_API_KEY! }) + + const result = await generate({ + adapter, + model: 'gpt-image-2', + prompt: 'A watercolor fox in a snowy forest', + }) + ``` + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-client@0.11.6 + - @tanstack/ai-utils@0.2.1 + - @tanstack/openai-base@0.3.6 + ## 0.9.6 ### Patch Changes diff --git a/packages/typescript/ai-openai/package.json b/packages/typescript/ai-openai/package.json index fa4b520cb..0a606ebd8 100644 --- a/packages/typescript/ai-openai/package.json +++ b/packages/typescript/ai-openai/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-openai", - "version": "0.9.6", + "version": "0.10.0", "description": "OpenAI adapter for TanStack AI chat, tools, images, video, speech, transcription, realtime, and structured outputs.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-openrouter/CHANGELOG.md b/packages/typescript/ai-openrouter/CHANGELOG.md index 54af9c34d..42ffacf89 100644 --- a/packages/typescript/ai-openrouter/CHANGELOG.md +++ b/packages/typescript/ai-openrouter/CHANGELOG.md @@ -1,5 +1,21 @@ # @tanstack/ai-openrouter +## 0.9.7 + +### Patch Changes + +- Restore `web_fetch` in `OpenRouterChatModelToolCapabilitiesByName` so `webFetchTool()` is assignable to OpenRouter text adapters again. The recent model-metadata sync (#623) regenerated this map with `web_search` only, breaking the per-model type-safety tests added in #611. ([#625](https://github.com/TanStack/ai/pull/625)) + +- Fix OpenRouter provider tool type metadata to include `webFetchTool`. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Update model metadata from OpenRouter API ([#623](https://github.com/TanStack/ai/pull/623)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + ## 0.9.6 ### Patch Changes diff --git a/packages/typescript/ai-openrouter/package.json b/packages/typescript/ai-openrouter/package.json index 16c74001a..d038b1464 100644 --- a/packages/typescript/ai-openrouter/package.json +++ b/packages/typescript/ai-openrouter/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-openrouter", - "version": "0.9.6", + "version": "0.9.7", "description": "TanStack AI adapter for OpenRouter chat, provider tools, structured outputs, and access to hundreds of LLMs.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-preact/CHANGELOG.md b/packages/typescript/ai-preact/CHANGELOG.md index ade70b1ae..e239038eb 100644 --- a/packages/typescript/ai-preact/CHANGELOG.md +++ b/packages/typescript/ai-preact/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-preact +## 0.6.31 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-client@0.11.6 + ## 0.6.30 ### Patch Changes diff --git a/packages/typescript/ai-preact/package.json b/packages/typescript/ai-preact/package.json index 57c6e7e97..99764cd91 100644 --- a/packages/typescript/ai-preact/package.json +++ b/packages/typescript/ai-preact/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-preact", - "version": "0.6.30", + "version": "0.6.31", "description": "Preact hooks for TanStack AI streaming chat and typed messages.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-react-ui/CHANGELOG.md b/packages/typescript/ai-react-ui/CHANGELOG.md index 4c3af0434..d1157fa4b 100644 --- a/packages/typescript/ai-react-ui/CHANGELOG.md +++ b/packages/typescript/ai-react-ui/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-react-ui +## 0.8.1 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-client@0.11.6 + - @tanstack/ai-react@0.11.6 + ## 0.8.0 ### Minor Changes diff --git a/packages/typescript/ai-react-ui/package.json b/packages/typescript/ai-react-ui/package.json index 40cde12ff..2c464fe10 100644 --- a/packages/typescript/ai-react-ui/package.json +++ b/packages/typescript/ai-react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-react-ui", - "version": "0.8.0", + "version": "0.8.1", "description": "Headless React components for building TanStack AI chat interfaces with streamed message parts.", "module": "./dist/esm/index.js", "types": "./dist/esm/index.d.ts", diff --git a/packages/typescript/ai-react/CHANGELOG.md b/packages/typescript/ai-react/CHANGELOG.md index c958b9805..018633b2e 100644 --- a/packages/typescript/ai-react/CHANGELOG.md +++ b/packages/typescript/ai-react/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-react +## 0.11.6 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-client@0.11.6 + ## 0.11.5 ### Patch Changes diff --git a/packages/typescript/ai-react/package.json b/packages/typescript/ai-react/package.json index 1cedcda5d..27c2b2b1b 100644 --- a/packages/typescript/ai-react/package.json +++ b/packages/typescript/ai-react/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-react", - "version": "0.11.5", + "version": "0.11.6", "description": "React hooks for TanStack AI streaming chat, realtime voice, structured outputs, and media generation.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-solid-ui/CHANGELOG.md b/packages/typescript/ai-solid-ui/CHANGELOG.md index 30554b4b8..ea617057b 100644 --- a/packages/typescript/ai-solid-ui/CHANGELOG.md +++ b/packages/typescript/ai-solid-ui/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-solid-ui +## 0.7.1 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-client@0.11.6 + - @tanstack/ai-solid@0.10.6 + ## 0.7.0 ### Minor Changes diff --git a/packages/typescript/ai-solid-ui/package.json b/packages/typescript/ai-solid-ui/package.json index 36752a24f..01b4568fc 100644 --- a/packages/typescript/ai-solid-ui/package.json +++ b/packages/typescript/ai-solid-ui/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-solid-ui", - "version": "0.7.0", + "version": "0.7.1", "description": "Headless Solid components for building TanStack AI chat interfaces with streamed message parts.", "module": "./src/index.ts", "types": "./src/index.ts", diff --git a/packages/typescript/ai-solid/CHANGELOG.md b/packages/typescript/ai-solid/CHANGELOG.md index 7980ca3c1..d1bb5761f 100644 --- a/packages/typescript/ai-solid/CHANGELOG.md +++ b/packages/typescript/ai-solid/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-solid +## 0.10.6 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-client@0.11.6 + ## 0.10.5 ### Patch Changes diff --git a/packages/typescript/ai-solid/package.json b/packages/typescript/ai-solid/package.json index a5c2bb4e6..5d9bf4c19 100644 --- a/packages/typescript/ai-solid/package.json +++ b/packages/typescript/ai-solid/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-solid", - "version": "0.10.5", + "version": "0.10.6", "description": "Solid hooks for TanStack AI streaming chat, structured outputs, and media generation.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-svelte/CHANGELOG.md b/packages/typescript/ai-svelte/CHANGELOG.md index c1db834a5..834f2e6a2 100644 --- a/packages/typescript/ai-svelte/CHANGELOG.md +++ b/packages/typescript/ai-svelte/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-svelte +## 0.10.6 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-client@0.11.6 + ## 0.10.5 ### Patch Changes diff --git a/packages/typescript/ai-svelte/package.json b/packages/typescript/ai-svelte/package.json index ab933856a..33876ff8a 100644 --- a/packages/typescript/ai-svelte/package.json +++ b/packages/typescript/ai-svelte/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-svelte", - "version": "0.10.5", + "version": "0.10.6", "description": "Svelte 5 bindings for TanStack AI streaming chat, structured outputs, and media generation.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-utils/CHANGELOG.md b/packages/typescript/ai-utils/CHANGELOG.md index 17aa431de..ab69e983d 100644 --- a/packages/typescript/ai-utils/CHANGELOG.md +++ b/packages/typescript/ai-utils/CHANGELOG.md @@ -1,5 +1,11 @@ # @tanstack/ai-utils +## 0.2.1 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + ## 0.2.0 ### Minor Changes diff --git a/packages/typescript/ai-utils/package.json b/packages/typescript/ai-utils/package.json index 49ad3eb33..e9ab62296 100644 --- a/packages/typescript/ai-utils/package.json +++ b/packages/typescript/ai-utils/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-utils", - "version": "0.2.0", + "version": "0.2.1", "description": "Shared TypeScript utilities for TanStack AI provider adapters and runtime packages.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai-vue-ui/CHANGELOG.md b/packages/typescript/ai-vue-ui/CHANGELOG.md index d8f577a02..062db3131 100644 --- a/packages/typescript/ai-vue-ui/CHANGELOG.md +++ b/packages/typescript/ai-vue-ui/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/ai-vue-ui +## 0.2.2 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-vue@0.10.7 + ## 0.2.1 ### Patch Changes diff --git a/packages/typescript/ai-vue-ui/package.json b/packages/typescript/ai-vue-ui/package.json index 055003ce1..e5ebadc99 100644 --- a/packages/typescript/ai-vue-ui/package.json +++ b/packages/typescript/ai-vue-ui/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-vue-ui", - "version": "0.2.1", + "version": "0.2.2", "description": "Headless Vue components for building TanStack AI chat interfaces with streamed message parts.", "module": "./src/index.ts", "types": "./src/index.ts", diff --git a/packages/typescript/ai-vue/CHANGELOG.md b/packages/typescript/ai-vue/CHANGELOG.md index 36968aa7a..ebf0085a1 100644 --- a/packages/typescript/ai-vue/CHANGELOG.md +++ b/packages/typescript/ai-vue/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/ai-vue +## 0.10.7 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-client@0.11.6 + ## 0.10.6 ### Patch Changes diff --git a/packages/typescript/ai-vue/package.json b/packages/typescript/ai-vue/package.json index 41e0c619a..b6f5449a2 100644 --- a/packages/typescript/ai-vue/package.json +++ b/packages/typescript/ai-vue/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai-vue", - "version": "0.10.6", + "version": "0.10.7", "description": "Vue composables for TanStack AI streaming chat, structured outputs, and media generation.", "author": "", "license": "MIT", diff --git a/packages/typescript/ai/CHANGELOG.md b/packages/typescript/ai/CHANGELOG.md index a9588d614..531dd024b 100644 --- a/packages/typescript/ai/CHANGELOG.md +++ b/packages/typescript/ai/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/ai +## 0.21.2 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-event-client@0.3.9 + ## 0.21.1 ### Patch Changes diff --git a/packages/typescript/ai/package.json b/packages/typescript/ai/package.json index 8b71beba5..1988f2693 100644 --- a/packages/typescript/ai/package.json +++ b/packages/typescript/ai/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/ai", - "version": "0.21.1", + "version": "0.21.2", "description": "Type-safe TypeScript AI SDK for streaming chat, tool calling, agents, structured outputs, and multimodal generation.", "author": "Tanner Linsley", "license": "MIT", diff --git a/packages/typescript/openai-base/CHANGELOG.md b/packages/typescript/openai-base/CHANGELOG.md index e535d4b0f..786ced6f9 100644 --- a/packages/typescript/openai-base/CHANGELOG.md +++ b/packages/typescript/openai-base/CHANGELOG.md @@ -1,5 +1,15 @@ # @tanstack/openai-base +## 0.3.6 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai@0.21.2 + - @tanstack/ai-utils@0.2.1 + ## 0.3.5 ### Patch Changes diff --git a/packages/typescript/openai-base/package.json b/packages/typescript/openai-base/package.json index 41f614d68..21ef5e2be 100644 --- a/packages/typescript/openai-base/package.json +++ b/packages/typescript/openai-base/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/openai-base", - "version": "0.3.5", + "version": "0.3.6", "description": "Shared OpenAI SDK base adapters for TanStack AI providers using Chat Completions and Responses APIs.", "author": "", "license": "MIT", diff --git a/packages/typescript/preact-ai-devtools/CHANGELOG.md b/packages/typescript/preact-ai-devtools/CHANGELOG.md index 75e826779..47b8297b0 100644 --- a/packages/typescript/preact-ai-devtools/CHANGELOG.md +++ b/packages/typescript/preact-ai-devtools/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/preact-ai-devtools +## 0.1.40 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-devtools-core@0.3.36 + ## 0.1.39 ### Patch Changes diff --git a/packages/typescript/preact-ai-devtools/package.json b/packages/typescript/preact-ai-devtools/package.json index f38932981..2c8a69e83 100644 --- a/packages/typescript/preact-ai-devtools/package.json +++ b/packages/typescript/preact-ai-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/preact-ai-devtools", - "version": "0.1.39", + "version": "0.1.40", "description": "Preact Devtools plugin for inspecting TanStack AI chat messages, tool calls, streams, and errors.", "author": "tannerlinsley", "license": "MIT", diff --git a/packages/typescript/react-ai-devtools/CHANGELOG.md b/packages/typescript/react-ai-devtools/CHANGELOG.md index 350fc3ed7..4ce88f076 100644 --- a/packages/typescript/react-ai-devtools/CHANGELOG.md +++ b/packages/typescript/react-ai-devtools/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/react-ai-devtools +## 0.2.40 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-devtools-core@0.3.36 + ## 0.2.39 ### Patch Changes diff --git a/packages/typescript/react-ai-devtools/package.json b/packages/typescript/react-ai-devtools/package.json index 8499bba6d..9dca899e0 100644 --- a/packages/typescript/react-ai-devtools/package.json +++ b/packages/typescript/react-ai-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/react-ai-devtools", - "version": "0.2.39", + "version": "0.2.40", "description": "React Devtools plugin for inspecting TanStack AI chat messages, tool calls, streams, and errors.", "author": "tannerlinsley", "license": "MIT", diff --git a/packages/typescript/solid-ai-devtools/CHANGELOG.md b/packages/typescript/solid-ai-devtools/CHANGELOG.md index b6efc3ba3..cd76d532e 100644 --- a/packages/typescript/solid-ai-devtools/CHANGELOG.md +++ b/packages/typescript/solid-ai-devtools/CHANGELOG.md @@ -1,5 +1,14 @@ # @tanstack/solid-ai-devtools +## 0.2.40 + +### Patch Changes + +- Refresh package README content and npm metadata for better discoverability. ([#626](https://github.com/TanStack/ai/pull/626)) + +- Updated dependencies [[`ebeb22e`](https://github.com/TanStack/ai/commit/ebeb22ec68f456b09e0181ac6f5d1ac25a0affd2)]: + - @tanstack/ai-devtools-core@0.3.36 + ## 0.2.39 ### Patch Changes diff --git a/packages/typescript/solid-ai-devtools/package.json b/packages/typescript/solid-ai-devtools/package.json index 757697cb0..4acf0d1d4 100644 --- a/packages/typescript/solid-ai-devtools/package.json +++ b/packages/typescript/solid-ai-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/solid-ai-devtools", - "version": "0.2.39", + "version": "0.2.40", "description": "Solid Devtools plugin for inspecting TanStack AI chat messages, tool calls, streams, and errors.", "author": "", "license": "MIT", From 08a8e821279ed0d5f4a64711db93dcafc9c23f2c Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 22 May 2026 18:34:26 +0200 Subject: [PATCH 06/10] fix: complete tool calls with server results (#596) * fix: complete tool calls with server results * fix: hydrate server tool outputs from history * test: cover server tool history hydration * ci: apply automated fixes * test: add issue 176 manual repro page * ci: apply automated fixes * test: add live issue 176 repro flow * test: hide issue 176 repro from sidebar --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .changeset/server-tool-results-complete.md | 7 + examples/ts-react-chat/src/routeTree.gen.ts | 21 ++ .../src/routes/issue-176-tool-result.tsx | 292 ++++++++++++++++++ packages/typescript/ai-client/src/types.ts | 1 + .../typescript/ai-event-client/src/index.ts | 1 + .../ai/src/activities/chat/messages.ts | 22 +- .../chat/stream/message-updaters.ts | 6 +- .../src/activities/chat/stream/processor.ts | 1 + packages/typescript/ai/src/types.ts | 1 + .../ai/tests/message-converters.test.ts | 21 +- .../ai/tests/message-updaters.test.ts | 9 +- .../ai/tests/stream-processor.test.ts | 4 + testing/e2e/src/routes/tools-test.tsx | 52 +++- testing/e2e/tests/tools-test/helpers.ts | 15 + .../tools-test/server-client-sequence.spec.ts | 73 ++++- .../tools-test/server-tool-history.spec.ts | 64 ++++ 16 files changed, 565 insertions(+), 25 deletions(-) create mode 100644 .changeset/server-tool-results-complete.md create mode 100644 examples/ts-react-chat/src/routes/issue-176-tool-result.tsx create mode 100644 testing/e2e/tests/tools-test/server-tool-history.spec.ts diff --git a/.changeset/server-tool-results-complete.md b/.changeset/server-tool-results-complete.md new file mode 100644 index 000000000..0b97fbd43 --- /dev/null +++ b/.changeset/server-tool-results-complete.md @@ -0,0 +1,7 @@ +--- +'@tanstack/ai': patch +'@tanstack/ai-client': patch +'@tanstack/ai-event-client': patch +--- + +Populate server-executed tool results on the matching `tool-call` part and mark successful tool calls as `complete`. diff --git a/examples/ts-react-chat/src/routeTree.gen.ts b/examples/ts-react-chat/src/routeTree.gen.ts index 45a3107ea..d0966d88a 100644 --- a/examples/ts-react-chat/src/routeTree.gen.ts +++ b/examples/ts-react-chat/src/routeTree.gen.ts @@ -10,6 +10,7 @@ import { Route as rootRouteImport } from './routes/__root' import { Route as RealtimeRouteImport } from './routes/realtime' +import { Route as Issue176ToolResultRouteImport } from './routes/issue-176-tool-result' import { Route as ImageGenRouteImport } from './routes/image-gen' import { Route as IndexRouteImport } from './routes/index' import { Route as GenerationsVideoRouteImport } from './routes/generations.video' @@ -38,6 +39,11 @@ const RealtimeRoute = RealtimeRouteImport.update({ path: '/realtime', getParentRoute: () => rootRouteImport, } as any) +const Issue176ToolResultRoute = Issue176ToolResultRouteImport.update({ + id: '/issue-176-tool-result', + path: '/issue-176-tool-result', + getParentRoute: () => rootRouteImport, +} as any) const ImageGenRoute = ImageGenRouteImport.update({ id: '/image-gen', path: '/image-gen', @@ -155,6 +161,7 @@ const ApiGenerateAudioRoute = ApiGenerateAudioRouteImport.update({ export interface FileRoutesByFullPath { '/': typeof IndexRoute '/image-gen': typeof ImageGenRoute + '/issue-176-tool-result': typeof Issue176ToolResultRoute '/realtime': typeof RealtimeRoute '/api/image-gen': typeof ApiImageGenRoute '/api/structured-chat': typeof ApiStructuredChatRoute @@ -180,6 +187,7 @@ export interface FileRoutesByFullPath { export interface FileRoutesByTo { '/': typeof IndexRoute '/image-gen': typeof ImageGenRoute + '/issue-176-tool-result': typeof Issue176ToolResultRoute '/realtime': typeof RealtimeRoute '/api/image-gen': typeof ApiImageGenRoute '/api/structured-chat': typeof ApiStructuredChatRoute @@ -206,6 +214,7 @@ export interface FileRoutesById { __root__: typeof rootRouteImport '/': typeof IndexRoute '/image-gen': typeof ImageGenRoute + '/issue-176-tool-result': typeof Issue176ToolResultRoute '/realtime': typeof RealtimeRoute '/api/image-gen': typeof ApiImageGenRoute '/api/structured-chat': typeof ApiStructuredChatRoute @@ -233,6 +242,7 @@ export interface FileRouteTypes { fullPaths: | '/' | '/image-gen' + | '/issue-176-tool-result' | '/realtime' | '/api/image-gen' | '/api/structured-chat' @@ -258,6 +268,7 @@ export interface FileRouteTypes { to: | '/' | '/image-gen' + | '/issue-176-tool-result' | '/realtime' | '/api/image-gen' | '/api/structured-chat' @@ -283,6 +294,7 @@ export interface FileRouteTypes { | '__root__' | '/' | '/image-gen' + | '/issue-176-tool-result' | '/realtime' | '/api/image-gen' | '/api/structured-chat' @@ -309,6 +321,7 @@ export interface FileRouteTypes { export interface RootRouteChildren { IndexRoute: typeof IndexRoute ImageGenRoute: typeof ImageGenRoute + Issue176ToolResultRoute: typeof Issue176ToolResultRoute RealtimeRoute: typeof RealtimeRoute ApiImageGenRoute: typeof ApiImageGenRoute ApiStructuredChatRoute: typeof ApiStructuredChatRoute @@ -341,6 +354,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof RealtimeRouteImport parentRoute: typeof rootRouteImport } + '/issue-176-tool-result': { + id: '/issue-176-tool-result' + path: '/issue-176-tool-result' + fullPath: '/issue-176-tool-result' + preLoaderRoute: typeof Issue176ToolResultRouteImport + parentRoute: typeof rootRouteImport + } '/image-gen': { id: '/image-gen' path: '/image-gen' @@ -501,6 +521,7 @@ declare module '@tanstack/react-router' { const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, ImageGenRoute: ImageGenRoute, + Issue176ToolResultRoute: Issue176ToolResultRoute, RealtimeRoute: RealtimeRoute, ApiImageGenRoute: ApiImageGenRoute, ApiStructuredChatRoute: ApiStructuredChatRoute, diff --git a/examples/ts-react-chat/src/routes/issue-176-tool-result.tsx b/examples/ts-react-chat/src/routes/issue-176-tool-result.tsx new file mode 100644 index 000000000..0eac5c48d --- /dev/null +++ b/examples/ts-react-chat/src/routes/issue-176-tool-result.tsx @@ -0,0 +1,292 @@ +import { useMemo, useState } from 'react' +import { createFileRoute } from '@tanstack/react-router' +import { fetchServerSentEvents, useChat } from '@tanstack/ai-react' +import { clientTools } from '@tanstack/ai-client' +import { modelMessagesToUIMessages, type ModelMessage } from '@tanstack/ai' +import { recommendGuitarToolDef } from '@/lib/guitar-tools' + +const modelMessages: Array = [ + { + role: 'assistant', + content: 'Let me check the weather.', + toolCalls: [ + { + id: 'issue-176-tool-call', + type: 'function', + function: { + name: 'getWeather', + arguments: '{"city":"NYC"}', + }, + }, + ], + }, + { + role: 'tool', + content: '{"temp":72,"condition":"sunny"}', + toolCallId: 'issue-176-tool-call', + }, +] + +function Issue176ToolResultRepro() { + const [prompt, setPrompt] = useState( + 'I want an acoustic guitar recommendation. Use the required tools.', + ) + const initialMessages = useMemo( + () => modelMessagesToUIMessages(modelMessages), + [], + ) + const liveTools = useMemo( + () => + clientTools( + recommendGuitarToolDef.client(({ id }) => ({ + id: Number(id), + })), + ), + [], + ) + + const { messages: fixtureMessages } = useChat({ + id: 'issue-176-tool-result-repro', + connection: fetchServerSentEvents('/api/tanchat'), + initialMessages, + }) + const { + messages: liveMessages, + sendMessage, + isLoading, + error, + } = useChat({ + id: 'issue-176-live-tool-result-repro', + connection: fetchServerSentEvents('/api/tanchat'), + tools: liveTools, + body: { + provider: 'openai', + model: 'gpt-4o', + }, + }) + + const toolCall = fixtureMessages + .flatMap((message) => message.parts) + .find( + (part) => part.type === 'tool-call' && part.id === 'issue-176-tool-call', + ) + const toolResult = fixtureMessages + .flatMap((message) => message.parts) + .find( + (part) => + part.type === 'tool-result' && + part.toolCallId === 'issue-176-tool-call', + ) + const isFixed = + toolCall?.type === 'tool-call' && + toolCall.state === 'complete' && + toolCall.output !== undefined + const liveServerToolCall = liveMessages + .flatMap((message) => message.parts) + .find((part) => part.type === 'tool-call' && part.name === 'getGuitars') + const liveServerToolResult = liveMessages + .flatMap((message) => message.parts) + .find( + (part) => + part.type === 'tool-result' && + liveServerToolCall?.type === 'tool-call' && + part.toolCallId === liveServerToolCall.id, + ) + const isLiveFixed = + liveServerToolCall?.type === 'tool-call' && + liveServerToolCall.state === 'complete' && + liveServerToolCall.output !== undefined + + return ( +
+
+
+

+ Issue #176 manual repro +

+

+ Server tool result hydration +

+

+ This page initializes a chat from model-message history containing + an assistant server tool call followed by a matching tool result. + The original tool-call part should be complete and include output. +

+
+ +
+
+

Live LLM repro

+
+
+
+