vue-ai-devtools and ts-vue-start-chat

.changeset/swift-walls-beam.md

@@ -0,0 +1,6 @@
+---
+"@tanstack/vue-ai-devtools": minor
+---
+
+Add Vue AI Devtools package with support for Vue DevTools integration, including a devtools plugin and panel component for debugging AI chat interactions.
+

examples/ts-vue-chat/package.json

@@ -18,6 +18,8 @@
     "@tanstack/ai-openai": "workspace:*",
     "@tanstack/ai-vue": "workspace:*",
     "@tanstack/ai-vue-ui": "workspace:*",
+    "@tanstack/vue-ai-devtools": "workspace:*",
+    "@tanstack/vue-devtools": "^0.1.2",
     "marked": "^15.0.6",
     "vue": "^3.5.25",
     "vue-router": "^4.5.0",
@@ -26,7 +28,7 @@
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^6.0.3",
     "autoprefixer": "^10.4.21",
     "concurrently": "^9.1.2",
     "dotenv": "^17.2.3",

examples/ts-vue-chat/src/App.vue

@@ -1,10 +1,24 @@
 <script setup lang="ts">
 import Header from './components/Header.vue'
+import { aiDevtoolsPlugin } from '@tanstack/vue-ai-devtools'
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+
+const devtoolsConfig = { position: 'bottom-right' as const }
+
+const devtoolsPlugins = [aiDevtoolsPlugin()]
+
+const devtoolsEventBusConfig = { connectToServerBus: true }
 </script>
 
 <template>
   <div class="min-h-screen bg-gray-900">
     <Header />
     <router-view />
+
+    <TanStackDevtools
+      :config="devtoolsConfig"
+      :plugins="devtoolsPlugins"
+      :eventBusConfig="devtoolsEventBusConfig"
+    />
   </div>
 </template>

examples/ts-vue-start-chat/.env.example

@@ -0,0 +1,11 @@
+# OpenAI
+OPENAI_API_KEY=your_openai_api_key_here
+
+# Anthropic
+ANTHROPIC_API_KEY=your_anthropic_api_key_here
+
+# Gemini
+GEMINI_API_KEY=your_gemini_api_key_here
+
+# Ollama (no API key needed, runs locally)
+# Make sure Ollama is running: ollama serve

examples/ts-vue-start-chat/.gitignore

@@ -0,0 +1,22 @@
+# Dependencies
+node_modules
+
+# Build
+dist
+
+# Logs
+*.log
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS
+.DS_Store

examples/ts-vue-start-chat/CHANGELOG.md

@@ -0,0 +1,15 @@
+# ts-vue-chat
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`78f15fe`](https://github.com/TanStack/ai/commit/78f15fea74c7bfd5fcdb0fe106968b110f0b2bc2), [`52c3172`](https://github.com/TanStack/ai/commit/52c317244294a75b0c7f5e6cafc8583fbb6abfb7)]:
+  - @tanstack/ai-openai@0.0.3
+  - @tanstack/ai@0.0.3
+  - @tanstack/ai-anthropic@0.0.3
+  - @tanstack/ai-client@0.0.3
+  - @tanstack/ai-gemini@0.0.3
+  - @tanstack/ai-ollama@0.0.3
+  - @tanstack/ai-vue@0.0.2
+  - @tanstack/ai-vue-ui@0.0.1

examples/ts-vue-start-chat/README.md

@@ -0,0 +1,75 @@
+# TanStack AI - Vue Start Chat Example
+
+A Vue 3 chat application demonstrating the use of `@tanstack/ai-vue` with
+file-based routing powered by `@tanstack/vue-start`.
+
+## Setup
+
+1. Copy `env.example` to `.env` and add your API keys:
+
+```bash
+cp env.example .env
+```
+
+2. Install dependencies:
+
+```bash
+pnpm install
+```
+
+3. Start the development server:
+
+```bash
+pnpm dev
+```
+
+4. Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## Features
+
+- Real-time streaming chat with multiple AI providers
+- Support for OpenAI, Anthropic, Gemini, and Ollama
+- Client-side and server-side tools
+- Tool approval workflow
+- Guitar recommendation demo
+
+## Project Structure
+
+```
+src/
+├── routes/           # File-based routes (TanStack Router/Start)
+│   ├── __root.tsx
+│   ├── index.ts
+│   ├── vue-ui.ts
+│   ├── api.chat.ts   # Server route for chat
+│   └── guitars/
+│       ├── index.ts
+│       └── $id.ts
+├── router.ts         # TanStack Vue Router setup
+├── routeTree.gen.ts  # Generated route tree
+├── styles.css        # Global styles
+├── components/       # UI components
+│   ├── Header.vue
+│   ├── ChatInput.vue
+│   ├── Messages.vue
+│   ├── ThinkingPart.vue
+│   └── GuitarRecommendation.vue
+├── lib/              # Utilities
+│   ├── model-selection.ts
+│   └── guitar-tools.ts
+├── data/             # Example data
+│   └── guitars.ts
+└── views/            # Page components
+    ├── ChatView.vue
+    └── GuitarDetailView.vue
+```
+
+## Tech Stack
+
+- Vue 3 with Composition API
+- TypeScript
+- Vite
+- Tailwind CSS
+- @tanstack/vue-start
+- @tanstack/vue-router
+- @tanstack/ai-vue

examples/ts-vue-start-chat/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ts-vue-start-chat",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/ai": "workspace:*",
+    "@tanstack/ai-anthropic": "workspace:*",
+    "@tanstack/ai-client": "workspace:*",
+    "@tanstack/ai-gemini": "workspace:*",
+    "@tanstack/ai-ollama": "workspace:*",
+    "@tanstack/ai-openai": "workspace:*",
+    "@tanstack/ai-vue": "workspace:*",
+    "@tanstack/ai-vue-ui": "workspace:*",
+    "@tanstack/vue-ai-devtools": "workspace:*",
+    "@tanstack/vue-devtools": "^0.1.2",
+    "@tanstack/vue-router": "^1.141.0",
+    "@tanstack/vue-router-devtools": "^1.141.0",
+    "@tanstack/vue-start": "^1.141.0",
+    "marked": "^15.0.6",
+    "vue": "^3.5.25",
+    "zod": "^4.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/devtools-vite": "^0.3.11",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.1.2",
+    "dotenv": "^17.2.3",
+    "express": "^5.1.0",
+    "tailwindcss": "^4.1.18",
+    "tsx": "^4.20.6",
+    "typescript": "5.9.3",
+    "vite": "^7.2.7",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vue-tsc": "^2.2.10"
+  }
+}

examples/ts-vue-start-chat/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/ts-vue-start-chat/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: