@tanstack/preact-ai-devtools 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,132 @@
-# @tanstack/preact-ai-devtools
-
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@tanstack/preact-ai-devtools`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+<div align="center">
+  <img src="./media/header_ai.png" >
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
+</a>
+<a href="https://github.com/TanStack/ai" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+	<a href="#badge">
+		<img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
+	</a>
+<a href="https://twitter.com/tan_stack">
+  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+</a>
+</div>
+
+<div align="center">
+  
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+</div>
+
+# 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
+
+### <a href="https://tanstack.com/ai">Read the docs →</b></a>
+
+## 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
+
+<table align="center">
+  <tr>
+    <td>
+      <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
+          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+        </picture>
+      </a>
+    </td>
+    <td>
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
+          <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+        </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="./media/partner_logo.svg" alt="AI & you?" height="65">
+<p>
+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.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack AI Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack Devtools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
+
+<!-- USE THE FORCE LUKE -->

package/dist/esm/AiDevtools.d.ts

@@ -0,0 +1,5 @@
+import { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact';
+declare const AiDevtoolsPanel: (props: DevtoolsPanelProps | undefined) => import("preact").JSX.Element, AiDevtoolsPanelNoOp: (_props: DevtoolsPanelProps | undefined) => import("preact").JSX.Element;
+export interface AiDevtoolsPreactInit extends DevtoolsPanelProps {
+}
+export { AiDevtoolsPanel, AiDevtoolsPanelNoOp };

package/dist/esm/AiDevtools.js

@@ -0,0 +1,8 @@
+import { createPreactPanel } from "@tanstack/devtools-utils/preact";
+import { AiDevtoolsCore } from "@tanstack/ai-devtools-core";
+const [AiDevtoolsPanel, AiDevtoolsPanelNoOp] = createPreactPanel(AiDevtoolsCore);
+export {
+  AiDevtoolsPanel,
+  AiDevtoolsPanelNoOp
+};
+//# sourceMappingURL=AiDevtools.js.map

package/dist/esm/AiDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiDevtools.js","sources":["../../src/AiDevtools.tsx"],"sourcesContent":["import { createPreactPanel } from '@tanstack/devtools-utils/preact'\nimport { AiDevtoolsCore } from '@tanstack/ai-devtools-core'\nimport type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'\n\nconst [AiDevtoolsPanel, AiDevtoolsPanelNoOp] = createPreactPanel(AiDevtoolsCore)\n\nexport interface AiDevtoolsPreactInit extends DevtoolsPanelProps {}\n\nexport { AiDevtoolsPanel, AiDevtoolsPanelNoOp }\n"],"names":[],"mappings":";;AAIA,MAAM,CAAC,iBAAiB,mBAAmB,IAAI,kBAAkB,cAAc;"}

package/dist/esm/index.d.ts

@@ -0,0 +1,8 @@
+export declare const AiDevtoolsPanel: (props: import('@tanstack/devtools-utils/preact').DevtoolsPanelProps | undefined) => import("preact").JSX.Element;
+export declare const aiDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, theme: "light" | "dark") => import("preact").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export type { AiDevtoolsPreactInit } from './AiDevtools.js';

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+import { AiDevtoolsPanelNoOp, AiDevtoolsPanel as AiDevtoolsPanel$1 } from "./AiDevtools.js";
+import { aiDevtoolsNoOpPlugin, aiDevtoolsPlugin as aiDevtoolsPlugin$1 } from "./plugin.js";
+const AiDevtoolsPanel = process.env.NODE_ENV !== "development" ? AiDevtoolsPanelNoOp : AiDevtoolsPanel$1;
+const aiDevtoolsPlugin = process.env.NODE_ENV !== "development" ? aiDevtoolsNoOpPlugin : aiDevtoolsPlugin$1;
+export {
+  AiDevtoolsPanel,
+  aiDevtoolsPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import * as Devtools from './AiDevtools'\nimport * as plugin from './plugin'\n\nexport const AiDevtoolsPanel =\n  process.env.NODE_ENV !== 'development'\n    ? Devtools.AiDevtoolsPanelNoOp\n    : Devtools.AiDevtoolsPanel\n\nexport const aiDevtoolsPlugin =\n  process.env.NODE_ENV !== 'development'\n    ? plugin.aiDevtoolsNoOpPlugin\n    : plugin.aiDevtoolsPlugin\n\nexport type { AiDevtoolsPreactInit } from './AiDevtools'\n"],"names":["Devtools.AiDevtoolsPanelNoOp","Devtools.AiDevtoolsPanel","plugin.aiDevtoolsNoOpPlugin","plugin.aiDevtoolsPlugin"],"mappings":";;AAGO,MAAM,kBACX,QAAQ,IAAI,aAAa,gBACrBA,sBACAC;AAEC,MAAM,mBACX,QAAQ,IAAI,aAAa,gBACrBC,uBACAC;"}

package/dist/esm/plugin.d.ts

@@ -0,0 +1,12 @@
+declare const aiDevtoolsPlugin: () => {
+    render: (_el: HTMLElement, theme: "light" | "dark") => import("preact").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}, aiDevtoolsNoOpPlugin: () => {
+    render: (_el: HTMLElement, _theme: "light" | "dark") => import("preact").JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+};
+export { aiDevtoolsPlugin, aiDevtoolsNoOpPlugin };

package/dist/esm/plugin.js

@@ -0,0 +1,13 @@
+import { createPreactPlugin } from "@tanstack/devtools-utils/preact";
+import { AiDevtoolsPanel } from "./AiDevtools.js";
+const [aiDevtoolsPlugin, aiDevtoolsNoOpPlugin] = createPreactPlugin({
+  Component: AiDevtoolsPanel,
+  name: "TanStack AI",
+  id: "tanstack-ai",
+  defaultOpen: true
+});
+export {
+  aiDevtoolsNoOpPlugin,
+  aiDevtoolsPlugin
+};
+//# sourceMappingURL=plugin.js.map

package/dist/esm/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../src/plugin.tsx"],"sourcesContent":["import { createPreactPlugin } from '@tanstack/devtools-utils/preact'\nimport { AiDevtoolsPanel } from './AiDevtools'\n\nconst [aiDevtoolsPlugin, aiDevtoolsNoOpPlugin] = createPreactPlugin({\n  Component: AiDevtoolsPanel,\n  name: 'TanStack AI',\n  id: 'tanstack-ai',\n  defaultOpen: true,\n})\n\nexport { aiDevtoolsPlugin, aiDevtoolsNoOpPlugin }\n"],"names":[],"mappings":";;AAGA,MAAM,CAAC,kBAAkB,oBAAoB,IAAI,mBAAmB;AAAA,EAClE,WAAW;AAAA,EACX,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,aAAa;AACf,CAAC;"}

package/dist/esm/production.d.ts

@@ -0,0 +1,3 @@
+export { AiDevtoolsPanel } from './AiDevtools.js';
+export type { AiDevtoolsPreactInit } from './AiDevtools.js';
+export { aiDevtoolsPlugin } from './plugin.js';

package/dist/esm/production.js

@@ -0,0 +1,7 @@
+import { AiDevtoolsPanel } from "./AiDevtools.js";
+import { aiDevtoolsPlugin } from "./plugin.js";
+export {
+  AiDevtoolsPanel,
+  aiDevtoolsPlugin
+};
+//# sourceMappingURL=production.js.map

package/dist/esm/production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -1,10 +1,61 @@
 {
   "name": "@tanstack/preact-ai-devtools",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @tanstack/preact-ai-devtools",
-  "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+  "version": "0.1.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"
+  },
+  "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/devtools-utils": "^0.2.3",
+    "@tanstack/ai-devtools-core": "0.2.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "4.0.14",
+    "vite": "^7.2.7"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  },
+  "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"
+  }
+}

package/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 }

package/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'

package/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 }

package/src/production.ts

@@ -0,0 +1,5 @@
+export { AiDevtoolsPanel } from './AiDevtools'
+
+export type { AiDevtoolsPreactInit } from './AiDevtools'
+
+export { aiDevtoolsPlugin } from './plugin'