@tanstack/preact-ai-devtools 0.1.38 → 0.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +250 -79
  2. package/package.json +15 -3
package/README.md CHANGED
@@ -1,93 +1,253 @@
1
1
  <div align="center">
2
- <img src="./media/header_ai.png" >
2
+ <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
3
3
  </div>
4
4
 
5
5
  <br />
6
6
 
7
7
  <div align="center">
8
- <a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
9
- <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
10
- </a>
11
- <a href="https://github.com/TanStack/ai" target="\_parent">
12
- <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
13
- </a>
14
- <a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
15
- <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
16
- </a>
8
+ <a href="https://npmjs.com/package/@tanstack/ai" target="_parent">
9
+ <img alt="NPM downloads" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
10
+ </a>
11
+ <a href="https://github.com/TanStack/ai" target="_parent">
12
+ <img alt="GitHub stars" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" />
13
+ </a>
14
+ <a href="https://github.com/TanStack/ai/releases" target="_parent">
15
+ <img alt="Release" src="https://img.shields.io/github/v/release/tanstack/ai" />
16
+ </a>
17
+ <a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="_parent">
18
+ <img alt="Bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
19
+ </a>
20
+ <a href="https://twitter.com/tan_stack">
21
+ <img alt="Follow @TanStack" src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" />
22
+ </a>
17
23
  </div>
18
24
 
19
- <div align="center">
20
- <a href="#badge">
21
- <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
22
- </a>
23
- <a href="#badge">
24
- <img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
25
- </a>
26
- <a href="https://twitter.com/tan_stack">
27
- <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
28
- </a>
29
- </div>
25
+ # TanStack AI
30
26
 
31
- <div align="center">
32
-
33
- ### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
34
- </div>
27
+ Type-safe, provider-agnostic TypeScript SDK for building streaming chat,
28
+ tool-calling agents, structured outputs, realtime voice, media generation, and
29
+ framework-native AI apps.
35
30
 
36
- # TanStack AI
31
+ TanStack AI is built from composable activities and provider adapters. Use one
32
+ provider or switch between many. Import only chat, or add image, audio, video,
33
+ speech, transcription, summarization, realtime, Code Mode, devtools, and
34
+ framework bindings as your app needs them.
35
+
36
+ ## <a href="https://tanstack.com/ai">Read the docs -></a>
37
+
38
+ ## Start Here
39
+
40
+ - [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
41
+ what TanStack AI is and how the packages fit together.
42
+ - [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
43
+ add streaming chat to a React app.
44
+ - [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
45
+ build with Vue composables.
46
+ - [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
47
+ build with Svelte 5 runes.
48
+ - [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
49
+ use TanStack AI from a server endpoint, script, or backend service.
50
+ - [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) -
51
+ compare architecture, feature coverage, and tradeoffs.
52
+
53
+ ## What You Can Build
54
+
55
+ - Streaming chat experiences with typed messages, tool calls, reasoning parts,
56
+ and configurable connection adapters.
57
+ - Type-safe tools that can run on the server or client from one shared
58
+ `toolDefinition()` contract.
59
+ - Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or
60
+ plain JSON Schema.
61
+ - Multimodal prompts and responses that include text, images, audio, video, and
62
+ documents.
63
+ - Image, audio, video, speech, transcription, and summarization workflows using
64
+ a shared generation client pattern.
65
+ - Realtime voice chat with provider adapters for realtime sessions and token
66
+ minting.
67
+ - Code Mode agents that let an LLM write and execute TypeScript in an isolated
68
+ sandbox to orchestrate tools with loops, branches, and parallel calls.
69
+ - Devtools and observability pipelines for inspecting messages, tool calls,
70
+ stream chunks, errors, usage, and OpenTelemetry traces.
71
+ - Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a
72
+ headless client for custom runtimes.
73
+
74
+ ## Install
37
75
 
38
- A powerful, type-safe AI SDK for building AI-powered applications.
76
+ Install the core package and the provider/framework packages your app uses:
39
77
 
40
- - Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
41
- - **Tree-shakeable adapters** - Import only what you need for smaller bundles
42
- - **Multimodal content support** - Send images, audio, video, and documents
43
- - **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
44
- - Chat completion, streaming, and agent loop strategies
45
- - Headless chat state management with adapters (SSE, HTTP stream, custom)
46
- - Isomorphic type-safe tools with server/client execution
47
- - **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
48
- - **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
78
+ ```bash
79
+ pnpm add @tanstack/ai @tanstack/ai-openai
80
+ ```
81
+
82
+ For a React chat UI:
83
+
84
+ ```bash
85
+ pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai
86
+ ```
49
87
 
50
- ### <a href="https://tanstack.com/ai">Read the docs →</a>
88
+ OpenRouter is also a good starting point if you want access to many providers
89
+ through one API key:
51
90
 
52
- ## Tree-Shakeable Adapters
91
+ ```bash
92
+ pnpm add @tanstack/ai @tanstack/ai-openrouter
93
+ ```
53
94
 
54
- Import only the functionality you need for smaller bundle sizes:
95
+ ## Streaming Chat
55
96
 
56
97
  ```typescript
57
- // Only chat functionality - no summarization code bundled
58
- import { openaiText } from '@tanstack/ai-openai/adapters'
59
- import { generate } from '@tanstack/ai'
98
+ import { chat, toServerSentEventsResponse } from '@tanstack/ai'
99
+ import { openaiText } from '@tanstack/ai-openai'
60
100
 
61
- const textAdapter = openaiText()
101
+ export async function POST(request: Request) {
102
+ const body = await request.json()
62
103
 
63
- const result = generate({
64
- adapter: textAdapter,
65
- model: 'gpt-4o',
66
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
67
- })
104
+ const stream = chat({
105
+ adapter: openaiText('gpt-5.2'),
106
+ messages: body.messages,
107
+ })
68
108
 
69
- for await (const chunk of result) {
70
- console.log(chunk)
109
+ return toServerSentEventsResponse(stream)
71
110
  }
72
111
  ```
73
112
 
74
- Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
113
+ Learn more in the
114
+ [Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
115
+ [Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
116
+
117
+ ## Type-Safe Tools
118
+
119
+ Define a tool once, then attach a server or client implementation with the same
120
+ input and output types:
121
+
122
+ ```typescript
123
+ import { toolDefinition } from '@tanstack/ai'
124
+ import { z } from 'zod'
125
+
126
+ const getProducts = toolDefinition({
127
+ name: 'getProducts',
128
+ description: 'Search the product catalog',
129
+ inputSchema: z.object({ query: z.string() }),
130
+ outputSchema: z.array(
131
+ z.object({
132
+ id: z.string(),
133
+ name: z.string(),
134
+ }),
135
+ ),
136
+ }).server(async ({ query }) => {
137
+ return db.products.search(query)
138
+ })
139
+ ```
140
+
141
+ Learn more in the
142
+ [Tools docs](https://tanstack.com/ai/latest/docs/tools/tools),
143
+ [Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
144
+ and
145
+ [Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
146
+
147
+ ## Structured Outputs
148
+
149
+ Use `outputSchema` when you need typed objects instead of freeform text:
150
+
151
+ ```typescript
152
+ import { chat } from '@tanstack/ai'
153
+ import { openaiText } from '@tanstack/ai-openai'
154
+ import { z } from 'zod'
155
+
156
+ const Person = z.object({
157
+ name: z.string(),
158
+ age: z.number(),
159
+ })
160
+
161
+ const person = await chat({
162
+ adapter: openaiText('gpt-5.2'),
163
+ messages: [{ role: 'user', content: 'Ada Lovelace, 36' }],
164
+ outputSchema: Person,
165
+ })
166
+ ```
167
+
168
+ Learn more in the
169
+ [Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
170
+
171
+ ## Media, Realtime, and Code Mode
172
+
173
+ - [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
174
+ pattern for image generation, text-to-speech, transcription, summarization,
175
+ audio generation, and video generation.
176
+ - [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
177
+ build low-latency realtime voice experiences.
178
+ - [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
179
+ models write and execute TypeScript inside a secure isolate.
180
+ - [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
181
+ give Code Mode reusable runtime capabilities.
182
+
183
+ ## Providers
184
+
185
+ Official adapters include:
186
+
187
+ | Package | Use it for |
188
+ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
189
+ | [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
190
+ | [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
191
+ | [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
192
+ | [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
193
+ | [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
194
+ | [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
195
+ | [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
196
+ | [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
197
+ | [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/fal) | fal.ai image, video, audio, speech, and transcription models |
198
+
199
+ The adapter system is tree-shakeable by activity. Import `openaiText` for chat,
200
+ `openaiImage` for images, `falVideo` for video, `geminiSpeech` for TTS, and so
201
+ on.
202
+
203
+ ## Framework Packages
204
+
205
+ | Package | What it provides |
206
+ | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
207
+ | [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
208
+ | [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
209
+ | [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
210
+ | [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
211
+ | [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
212
+ | [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat |
213
+ | `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces |
214
+
215
+ ## Advanced Docs
216
+
217
+ - [Middleware](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
218
+ into chat configuration, chunks, tool calls, usage, errors, and structured
219
+ outputs.
220
+ - [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
221
+ vendor-neutral GenAI traces and metrics.
222
+ - [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
223
+ subscribe to typed TanStack AI events.
224
+ - [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
225
+ narrow model options and content modalities to the selected model.
226
+ - [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
227
+ switch providers at runtime.
228
+ - [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
229
+ ship only the activities and adapters you use.
230
+ - [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
231
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
232
+ and other coding agents with TanStack Intent.
75
233
 
76
234
  ## Get Involved
77
235
 
78
- - We welcome issues and pull requests!
79
- - Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
80
- - Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
81
- - See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
236
+ - Read the [docs](https://tanstack.com/ai).
237
+ - Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
238
+ - Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
239
+ - See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
240
+ for setup instructions.
241
+ - [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
82
242
 
83
243
  ## Partners
84
244
 
85
245
  <table align="center">
86
246
  <tr>
87
247
  <td>
88
- <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
248
+ <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS">
89
249
  <picture>
90
- <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" />
250
+ <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" />
91
251
  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" />
92
252
  <img src="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" alt="CodeRabbit" />
93
253
  </picture>
@@ -96,7 +256,7 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
96
256
  <td>
97
257
  <a href="https://www.cloudflare.com?utm_source=tanstack">
98
258
  <picture>
99
- <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" />
259
+ <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" />
100
260
  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" />
101
261
  <img src="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" alt="Cloudflare" />
102
262
  </picture>
@@ -106,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
106
266
  </table>
107
267
 
108
268
  <div align="center">
109
- <img src="./media/partner_logo.svg" alt="AI & you?" height="65">
110
- <p>
111
- 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.
112
- </p>
113
- <a href="mailto:partners@tanstack.com?subject=TanStack AI Partnership"><b>LET'S CHAT</b></a>
269
+ <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/partner_logo.svg" alt="AI and you?" height="65" />
270
+ <p>
271
+ We're looking for TanStack AI partners to join our mission. Partner with us
272
+ to push the boundaries of TanStack AI and build amazing things together.
273
+ </p>
274
+ <a href="mailto:partners@tanstack.com?subject=TanStack AI Partnership"><b>LET'S CHAT</b></a>
114
275
  </div>
115
276
 
116
277
  ## Explore the TanStack Ecosystem
117
278
 
118
- - <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
119
- - <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
120
- - <a href="https://github.com/tanstack/devtools"><b>TanStack Devtools</b></a> – Unified devtools panel
121
- - <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
122
- - <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching
123
- - <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
124
- - <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
125
- - <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
126
- - <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
127
- - <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
128
- - <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
129
- - <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
130
-
131
- … and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
132
-
133
- <!-- USE THE FORCE LUKE -->
279
+ - <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> -
280
+ tooling for JS/TS packages
281
+ - <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> - reactive
282
+ sync client store
283
+ - <a href="https://github.com/tanstack/devtools"><b>TanStack Devtools</b></a> -
284
+ unified devtools panel
285
+ - <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> -
286
+ type-safe form state
287
+ - <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> -
288
+ debouncing, throttling, batching
289
+ - <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> -
290
+ async state and caching
291
+ - <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> -
292
+ range and slider primitives
293
+ - <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> -
294
+ type-safe routing, caching, and URL state
295
+ - <a href="https://github.com/tanstack/start"><b>TanStack Start</b></a> -
296
+ full-stack SSR and streaming
297
+ - <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> -
298
+ reactive data store
299
+ - <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> -
300
+ headless datagrids
301
+ - <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> -
302
+ virtualized rendering
303
+
304
+ ...and more at <a href="https://tanstack.com"><b>TanStack.com</b></a>.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tanstack/preact-ai-devtools",
3
- "version": "0.1.38",
4
- "description": "Preact Devtools for TanStack AI.",
3
+ "version": "0.1.40",
4
+ "description": "Preact Devtools plugin for inspecting TanStack AI chat messages, tool calls, streams, and errors.",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
7
7
  "homepage": "https://tanstack.com/ai",
@@ -39,7 +39,7 @@
39
39
  ],
40
40
  "dependencies": {
41
41
  "@tanstack/devtools-utils": "^0.4.0",
42
- "@tanstack/ai-devtools-core": "0.3.34"
42
+ "@tanstack/ai-devtools-core": "0.3.36"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@vitest/coverage-v8": "4.0.14",
@@ -48,6 +48,18 @@
48
48
  "peerDependencies": {
49
49
  "preact": "^10.0.0"
50
50
  },
51
+ "keywords": [
52
+ "ai",
53
+ "ai-sdk",
54
+ "typescript",
55
+ "tanstack",
56
+ "preact",
57
+ "devtools",
58
+ "debugging",
59
+ "observability",
60
+ "chat",
61
+ "tool-calling"
62
+ ],
51
63
  "scripts": {
52
64
  "clean": "premove ./build ./dist",
53
65
  "lint:fix": "eslint ./src --fix",