feat: add @cloudflare/tanstack-ai package

.changeset/wide-knives-strive.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/tanstack-ai": minor
+---
+
+Add @cloudflare/tanstack-ai package for using TanStack AI with Cloudflare Workers AI and AI Gateway. Supports chat via Workers AI (binding and REST), plus routing through AI Gateway for OpenAI, Anthropic, Gemini, Grok, and Workers AI.

demos.json

@@ -107,6 +107,9 @@
     },
     "./demos/hello-world": {
       "package_json_hash": "cf9bfe348964ef4129e7a8f20f855d256b77df21"
+    },
+    "./demos/tanstack-ai-chat-react": {
+      "package_json_hash": "55730f8f45e3887464d4334edd3947f6e34d9cb0"
     }
   }
 }

demos/tanstack-ai-chat-react/.dev.vars.example

@@ -0,0 +1,3 @@
+CLOUDFLARE_ACCOUNT_ID=
+CLOUDFLARE_AI_GATEWAY_ID=
+CLOUDFLARE_API_TOKEN=

demos/tanstack-ai-chat-react/.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# wrangler files
+.wrangler
+.dev.vars*
+!.dev.vars.example
+.env*
+!.env.example

demos/tanstack-ai-chat-react/README.md

@@ -0,0 +1,81 @@
+# @cloudflare/tanstack-ai demo
+
+Multi-provider AI demo showcasing [`@cloudflare/tanstack-ai`](../../packages/tanstack-ai). Features **Chat**, **Image Generation**, and **Summarization** across Workers AI and third-party providers (OpenAI, Anthropic, Gemini, Grok) through Cloudflare AI Gateway.
+
+## Features
+
+### Chat
+
+| Provider | Model | Config Mode |
+| --- | --- | --- |
+| **Llama 4 Scout** | `@cf/meta/llama-4-scout-17b-16e-instruct` | Workers AI direct |
+| **Qwen3 30B** | `@cf/qwen/qwen3-30b-a3b-fp8` | Workers AI via AI Gateway |
+| **GPT-5.2** | `gpt-5.2` | OpenAI via AI Gateway |
+| **Claude Sonnet 4.5** | `claude-sonnet-4-5` | Anthropic via AI Gateway |
+| **Gemini 2.5 Flash** | `gemini-2.5-flash` | Gemini via AI Gateway |
+| **Grok 4** | `grok-4-1-fast-reasoning` | Grok via AI Gateway |
+
+### Image Generation
+
+| Provider | Model |
+| --- | --- |
+| **OpenAI** | `gpt-image-1` |
+| **Gemini** | `imagen-4.0-generate-001` |
+| **Grok** | `grok-2-image-1212` |
+
+### Summarization
+
+| Provider | Model |
+| --- | --- |
+| **OpenAI** | `gpt-5.2` |
+| **Anthropic** | `claude-sonnet-4-5` |
+| **Gemini** | `gemini-2.0-flash` |
+
+## Setup
+
+### Option 1: Enter credentials in the UI (recommended for trying it out)
+
+1. Install and run:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+2. Click **"Add API keys"** in the top-right corner and enter your Cloudflare Account ID, AI Gateway ID, and API Token. Credentials are stored in your browser's localStorage and sent as request headers -- never persisted on the server.
+
+### Option 2: Use environment variables (recommended for deploying)
+
+1. Copy the environment variables template:
+
+```bash
+cp .dev.vars.example .dev.vars
+```
+
+2. Fill in your `.dev.vars`:
+
+```
+CLOUDFLARE_ACCOUNT_ID=your-cloudflare-account-id
+CLOUDFLARE_AI_GATEWAY_ID=your-ai-gateway-id
+CLOUDFLARE_API_TOKEN=your-cloudflare-api-token
+```
+
+3. Install and run:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+> When both are present, user-provided credentials (from the UI) take precedence over environment variables.
+
+## What It Demonstrates
+
+- **Workers AI direct** -- `createWorkersAiChat(model, { binding: env.AI })` or REST API with `{ accountId, apiKey }`
+- **Workers AI through AI Gateway** -- `createWorkersAiChat(model, { binding: env.AI.gateway(id) })` or credentials mode
+- **Third-party providers through AI Gateway** -- `createOpenAiChat`, `createAnthropicChat`, `createGeminiChat`, `createGrokChat`
+- **Image generation** -- `generateImage()` with `createOpenAiImage`, `createGeminiImage`, `createGrokImage`
+- **Summarization** -- `summarize()` with `createOpenAiSummarize`, `createAnthropicSummarize`, `createGeminiSummarize`
+- **Streaming** -- chat providers stream responses via TanStack AI's `chat()` + `toHttpResponse()`
+- **Tool calling** -- server-side tools (math, time, web scrape) work across all chat providers
+- **Dynamic credentials** -- user-provided API keys passed via request headers, with env var fallback

demos/tanstack-ai-chat-react/eslint.config.js

@@ -0,0 +1,16 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import { globalIgnores } from "eslint/config";
+
+export default tseslint.config([
+	globalIgnores(["dist", "worker-configuration.d.ts"]),
+	{
+		files: ["**/*.{ts,tsx}"],
+		extends: [js.configs.recommended, tseslint.configs.recommended],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+		},
+	},
+]);

demos/tanstack-ai-chat-react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@cloudflare/tanstack-ai demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

demos/tanstack-ai-chat-react/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "tanstack-ai-chat",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"lint": "eslint .",
+		"preview": "pnpm run build && vite preview",
+		"deploy": "pnpm run build && wrangler deploy",
+		"cf-typegen": "wrangler types"
+	},
+	"dependencies": {
+		"@tanstack/ai": "^0.2.2",
+		"@tanstack/ai-react": "^0.2.2",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
+		"zod": "^4.3.6"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "^1.19.0",
+		"@eslint/js": "^9.39.2",
+		"@types/react": "^19.1.10",
+		"@types/react-dom": "^19.1.7",
+		"@vitejs/plugin-react": "^5.0.0",
+		"eslint": "^9.39.2",
+		"typescript": "~5.8.3",
+		"typescript-eslint": "^8.54.0",
+		"vite": "^7.1.2",
+		"wrangler": "^4.58.0"
+	}
+}