diff --git a/.changeset/every-keys-beg.md b/.changeset/every-keys-beg.md new file mode 100644 index 00000000..9e18b37a --- /dev/null +++ b/.changeset/every-keys-beg.md @@ -0,0 +1,7 @@ +--- +'@tanstack/ai-devtools-core': minor +'@tanstack/react-ai-devtools': minor +'@tanstack/solid-ai-devtools': minor +--- + +Bump tanstack-devtools to 0.2.3 diff --git a/.changeset/slow-falcons-leave.md b/.changeset/slow-falcons-leave.md new file mode 100644 index 00000000..0141579f --- /dev/null +++ b/.changeset/slow-falcons-leave.md @@ -0,0 +1,5 @@ +--- +'@tanstack/preact-ai-devtools': minor +--- + +Initial release diff --git a/docs/getting-started/devtools.md b/docs/getting-started/devtools.md index e0ea553d..710c4ae1 100644 --- a/docs/getting-started/devtools.md +++ b/docs/getting-started/devtools.md @@ -24,6 +24,11 @@ Or the `@tanstack/solid-ai-devtools` package for SolidJS: npm install -D @tanstack/solid-ai-devtools @tanstack/solid-devtools ``` +Or the `@tanstack/preact-ai-devtools` package for Preact: +```bash +npm install -D @tanstack/preact-ai-devtools @tanstack/preact-devtools +``` + ## Usage Import and include the Devtools component in your application: diff --git a/package.json b/package.json index 27baecb6..e12b6796 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "format": "prettier --experimental-cli --ignore-unknown '**/*' --write", "generate-docs": "node scripts/generate-docs.ts && pnpm run copy:readme", "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/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": "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", "changeset": "changeset", "changeset:publish": "changeset publish", "changeset:version": "changeset version && pnpm install --no-frozen-lockfile && pnpm format" diff --git a/packages/typescript/ai-devtools/package.json b/packages/typescript/ai-devtools/package.json index d29f9d80..4ba4702c 100644 --- a/packages/typescript/ai-devtools/package.json +++ b/packages/typescript/ai-devtools/package.json @@ -48,7 +48,7 @@ "dependencies": { "@tanstack/ai": "workspace:*", "@tanstack/devtools-ui": "^0.4.4", - "@tanstack/devtools-utils": "^0.0.8", + "@tanstack/devtools-utils": "^0.2.3", "goober": "^2.1.18", "solid-js": "^1.9.10" }, diff --git a/packages/typescript/preact-ai-devtools/CHANGELOG.md b/packages/typescript/preact-ai-devtools/CHANGELOG.md new file mode 100644 index 00000000..d2a8a672 --- /dev/null +++ b/packages/typescript/preact-ai-devtools/CHANGELOG.md @@ -0,0 +1 @@ +# @tanstack/preact-ai-devtools diff --git a/packages/typescript/preact-ai-devtools/README.md b/packages/typescript/preact-ai-devtools/README.md new file mode 100644 index 00000000..9ab294ca --- /dev/null +++ b/packages/typescript/preact-ai-devtools/README.md @@ -0,0 +1,132 @@ +
+ +
+ +
+ +
+ + + + + + + + + +
+ +
+ + semantic-release + + + Release + + + Follow @TanStack + +
+ +
+ +### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) +
+ +# TanStack AI + +A powerful, type-safe AI SDK for building AI-powered applications. + +- 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 + +### Read the docs → + +## Tree-Shakeable Adapters + +Import only the functionality you need for smaller bundle sizes: + +```typescript +// Only chat functionality - no summarization code bundled +import { openaiText } from '@tanstack/ai-openai/adapters' +import { generate } from '@tanstack/ai' + +const textAdapter = openaiText() + +const result = generate({ + adapter: textAdapter, + model: 'gpt-4o', + messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }], +}) + +for await (const chunk of result) { + console.log(chunk) +} +``` + +Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more. + +## 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 + +## Partners + + + + + + +
+ + + + + CodeRabbit + + + + + + + + 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 +
+ +## 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 » + + diff --git a/packages/typescript/preact-ai-devtools/package.json b/packages/typescript/preact-ai-devtools/package.json new file mode 100644 index 00000000..615ea9dc --- /dev/null +++ b/packages/typescript/preact-ai-devtools/package.json @@ -0,0 +1,61 @@ +{ + "name": "@tanstack/preact-ai-devtools", + "version": "0.0.0", + "description": "Preact Devtools for TanStack AI.", + "author": "tannerlinsley", + "license": "MIT", + "homepage": "https://tanstack.com/ai", + "repository": { + "type": "git", + "url": "git+https://github.com/TanStack/ai.git", + "directory": "packages/typescript/preact-ai-devtools" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "scripts": { + "clean": "premove ./build ./dist", + "lint:fix": "eslint ./src --fix", + "test:eslint": "eslint ./src", + "test:lib": "vitest --passWithNoTests", + "test:lib:dev": "pnpm test:lib --watch", + "test:types": "tsc", + "test:build": "publint --strict", + "build": "vite build" + }, + "type": "module", + "types": "./dist/esm/index.d.ts", + "module": "./dist/esm/index.js", + "exports": { + ".": { + "import": { + "types": "./dist/esm/index.d.ts", + "default": "./dist/esm/index.js" + } + }, + "./production": { + "import": { + "types": "./dist/esm/production.d.ts", + "default": "./dist/esm/production.js" + } + }, + "./package.json": "./package.json" + }, + "sideEffects": false, + "files": [ + "dist", + "src" + ], + "dependencies": { + "@tanstack/ai-devtools-core": "workspace:*", + "@tanstack/devtools-utils": "^0.2.3" + }, + "devDependencies": { + "@vitest/coverage-v8": "4.0.14", + "vite": "^7.2.7" + }, + "peerDependencies": { + "preact": "^10.0.0" + } +} diff --git a/packages/typescript/preact-ai-devtools/src/AiDevtools.tsx b/packages/typescript/preact-ai-devtools/src/AiDevtools.tsx new file mode 100644 index 00000000..99771cc6 --- /dev/null +++ b/packages/typescript/preact-ai-devtools/src/AiDevtools.tsx @@ -0,0 +1,9 @@ +import { createPreactPanel } from '@tanstack/devtools-utils/preact' +import { AiDevtoolsCore } from '@tanstack/ai-devtools-core' +import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact' + +const [AiDevtoolsPanel, AiDevtoolsPanelNoOp] = createPreactPanel(AiDevtoolsCore) + +export interface AiDevtoolsPreactInit extends DevtoolsPanelProps {} + +export { AiDevtoolsPanel, AiDevtoolsPanelNoOp } diff --git a/packages/typescript/preact-ai-devtools/src/index.ts b/packages/typescript/preact-ai-devtools/src/index.ts new file mode 100644 index 00000000..0a7c22ca --- /dev/null +++ b/packages/typescript/preact-ai-devtools/src/index.ts @@ -0,0 +1,14 @@ +import * as Devtools from './AiDevtools' +import * as plugin from './plugin' + +export const AiDevtoolsPanel = + process.env.NODE_ENV !== 'development' + ? Devtools.AiDevtoolsPanelNoOp + : Devtools.AiDevtoolsPanel + +export const aiDevtoolsPlugin = + process.env.NODE_ENV !== 'development' + ? plugin.aiDevtoolsNoOpPlugin + : plugin.aiDevtoolsPlugin + +export type { AiDevtoolsPreactInit } from './AiDevtools' diff --git a/packages/typescript/preact-ai-devtools/src/plugin.tsx b/packages/typescript/preact-ai-devtools/src/plugin.tsx new file mode 100644 index 00000000..c24b8d16 --- /dev/null +++ b/packages/typescript/preact-ai-devtools/src/plugin.tsx @@ -0,0 +1,11 @@ +import { createPreactPlugin } from '@tanstack/devtools-utils/preact' +import { AiDevtoolsPanel } from './AiDevtools' + +const [aiDevtoolsPlugin, aiDevtoolsNoOpPlugin] = createPreactPlugin({ + Component: AiDevtoolsPanel, + name: 'TanStack AI', + id: 'tanstack-ai', + defaultOpen: true, +}) + +export { aiDevtoolsPlugin, aiDevtoolsNoOpPlugin } diff --git a/packages/typescript/preact-ai-devtools/src/production.ts b/packages/typescript/preact-ai-devtools/src/production.ts new file mode 100644 index 00000000..40c1c7be --- /dev/null +++ b/packages/typescript/preact-ai-devtools/src/production.ts @@ -0,0 +1,5 @@ +export { AiDevtoolsPanel } from './AiDevtools' + +export type { AiDevtoolsPreactInit } from './AiDevtools' + +export { aiDevtoolsPlugin } from './plugin' diff --git a/packages/typescript/preact-ai-devtools/tsconfig.json b/packages/typescript/preact-ai-devtools/tsconfig.json new file mode 100644 index 00000000..ea433046 --- /dev/null +++ b/packages/typescript/preact-ai-devtools/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "jsx": "preserve", + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment", + "moduleResolution": "bundler", + "strictNullChecks": true + }, + "include": ["eslint.config.js", "prettier.config.js", "src"] +} diff --git a/packages/typescript/preact-ai-devtools/vite.config.ts b/packages/typescript/preact-ai-devtools/vite.config.ts new file mode 100644 index 00000000..755b113b --- /dev/null +++ b/packages/typescript/preact-ai-devtools/vite.config.ts @@ -0,0 +1,36 @@ +import { defineConfig, mergeConfig } from 'vitest/config' +import { tanstackViteConfig } from '@tanstack/vite-config' +import packageJson from './package.json' + +const config = defineConfig({ + test: { + name: packageJson.name, + dir: './', + watch: false, + globals: true, + environment: 'node', + include: ['tests/**/*.test.ts'], + coverage: { + provider: 'v8', + reporter: ['text', 'json', 'html', 'lcov'], + exclude: [ + 'node_modules/', + 'dist/', + 'tests/', + '**/*.test.ts', + '**/*.config.ts', + '**/types.ts', + ], + include: ['src/**/*.ts'], + }, + }, +}) + +export default mergeConfig( + config, + tanstackViteConfig({ + entry: ['./src/index.ts', './src/production.ts'], + srcDir: './src', + cjs: false, + }), +) diff --git a/packages/typescript/preact-ai-devtools/vitest.config.ts b/packages/typescript/preact-ai-devtools/vitest.config.ts new file mode 100644 index 00000000..2f35653f --- /dev/null +++ b/packages/typescript/preact-ai-devtools/vitest.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vitest/config' + +export default defineConfig({ + test: { + watch: false, + }, +}) diff --git a/packages/typescript/react-ai-devtools/package.json b/packages/typescript/react-ai-devtools/package.json index 2b83c516..7ae890a6 100644 --- a/packages/typescript/react-ai-devtools/package.json +++ b/packages/typescript/react-ai-devtools/package.json @@ -49,7 +49,7 @@ ], "dependencies": { "@tanstack/ai-devtools-core": "workspace:*", - "@tanstack/devtools-utils": "^0.0.8" + "@tanstack/devtools-utils": "^0.2.3" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", diff --git a/packages/typescript/solid-ai-devtools/package.json b/packages/typescript/solid-ai-devtools/package.json index aa39fd16..c49c8f34 100644 --- a/packages/typescript/solid-ai-devtools/package.json +++ b/packages/typescript/solid-ai-devtools/package.json @@ -48,7 +48,7 @@ ], "dependencies": { "@tanstack/ai-devtools-core": "workspace:*", - "@tanstack/devtools-utils": "^0.0.8" + "@tanstack/devtools-utils": "^0.2.3" }, "peerDependencies": { "solid-js": ">=1.9.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index daa2ea56..21eb7cb9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -657,8 +657,8 @@ importers: specifier: ^0.4.4 version: 0.4.4(csstype@3.2.3)(solid-js@1.9.10) '@tanstack/devtools-utils': - specifier: ^0.0.8 - version: 0.0.8(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + specifier: ^0.2.3 + version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) goober: specifier: ^2.1.18 version: 2.1.18(csstype@3.2.3) @@ -1018,14 +1018,33 @@ importers: specifier: ^2.2.10 version: 2.2.12(typescript@5.9.3) + packages/typescript/preact-ai-devtools: + dependencies: + '@tanstack/ai-devtools-core': + specifier: workspace:* + version: link:../ai-devtools + '@tanstack/devtools-utils': + specifier: ^0.2.3 + version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + preact: + specifier: ^10.0.0 + version: 10.28.1 + devDependencies: + '@vitest/coverage-v8': + specifier: 4.0.14 + version: 4.0.14(vitest@4.0.15(@types/node@25.0.1)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)) + vite: + specifier: ^7.2.7 + version: 7.2.7(@types/node@25.0.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2) + packages/typescript/react-ai-devtools: dependencies: '@tanstack/ai-devtools-core': specifier: workspace:* version: link:../ai-devtools '@tanstack/devtools-utils': - specifier: ^0.0.8 - version: 0.0.8(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + specifier: ^0.2.3 + version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) devDependencies: '@types/react': specifier: ^19.2.7 @@ -1155,8 +1174,8 @@ importers: specifier: workspace:* version: link:../ai-devtools '@tanstack/devtools-utils': - specifier: ^0.0.8 - version: 0.0.8(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + specifier: ^0.2.3 + version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) devDependencies: '@vitest/coverage-v8': specifier: 4.0.14 @@ -3083,17 +3102,20 @@ packages: peerDependencies: solid-js: '>=1.9.7' - '@tanstack/devtools-utils@0.0.8': - resolution: {integrity: sha512-cWoohW9OswidFclwopYRsW0FR3jOoC5iMy0pUHm/31uAnlTb3ViFoZ1VqMf7vZESYdDeee8OjaICS1YbKksDxg==} + '@tanstack/devtools-utils@0.2.3': + resolution: {integrity: sha512-Ob7wAGTNs7SfOJWZlV+3fi7JGT8ApgeNKoaKV4trRk3TDjThm0w4EwbNDsfZu5NCvefSOY0sequp2qG8g7zG/g==} engines: {node: '>=18'} peerDependencies: - '@types/react': '>=19.0.0' - react: '>=19.0.0' + '@types/react': '>=17.0.0' + preact: '>=10.0.0' + react: '>=17.0.0' solid-js: '>=1.9.7' vue: '>=3.2.0' peerDependenciesMeta: '@types/react': optional: true + preact: + optional: true react: optional: true solid-js: @@ -6539,6 +6561,9 @@ packages: preact@10.28.2: resolution: {integrity: sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==} + preact@10.28.1: + resolution: {integrity: sha512-u1/ixq/lVQI0CakKNvLDEcW5zfCjUQfZdK9qqWuIJtsezuyG6pk9TWj75GMuI/EzRSZB/VAE43sNWWZfiy8psw==} + prelude-ls@1.2.1: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} @@ -9655,11 +9680,12 @@ snapshots: transitivePeerDependencies: - csstype - '@tanstack/devtools-utils@0.0.8(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))': + '@tanstack/devtools-utils@0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))': dependencies: '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10) optionalDependencies: '@types/react': 19.2.7 + preact: 10.28.1 react: 19.2.3 solid-js: 1.9.10 vue: 3.5.25(typescript@5.9.3) @@ -14309,6 +14335,8 @@ snapshots: preact@10.28.2: {} + preact@10.28.1: {} + prelude-ls@1.2.1: {} premove@4.0.0: {}