TanStack · jherr · Dec 6, 2025 · Dec 5, 2025 · Dec 5, 2025 · Dec 6, 2025
diff --git a/examples/ts-vue-chat/.gitignore b/examples/ts-vue-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
diff --git a/examples/ts-vue-chat/README.md b/examples/ts-vue-chat/README.md
@@ -0,0 +1,65 @@
+# TanStack AI - Vue Chat Example
+
+A Vue 3 chat application demonstrating the use of `@tanstack/ai-vue`.
+
+## 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:5173](http://localhost:5173) 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/
+├── main.ts           # App entry point
+├── App.vue           # Root component
+├── router.ts         # Vue Router setup
+├── 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/ai-vue
diff --git a/examples/ts-vue-chat/env.example b/examples/ts-vue-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
diff --git a/examples/ts-vue-chat/index.html b/examples/ts-vue-chat/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack AI - Vue Chat</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/ts-vue-chat/package.json b/examples/ts-vue-chat/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "ts-vue-chat",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "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:*",
+    "marked": "^15.0.6",
+    "vue": "^3.5.25",
+    "vue-router": "^4.5.0",
+    "zod": "^4.1.13"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.1.2",
+    "dotenv": "^17.2.3",
+    "express": "^5.1.0",
+    "tailwindcss": "^4.1.17",
+    "tsx": "^4.20.6",
+    "typescript": "5.9.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^2.2.10"
+  }
+}
diff --git a/examples/ts-vue-chat/public/example-guitar-flowers.jpg b/examples/ts-vue-chat/public/example-guitar-flowers.jpg
diff --git a/examples/ts-vue-chat/public/example-guitar-motherboard.jpg b/examples/ts-vue-chat/public/example-guitar-motherboard.jpg
diff --git a/examples/ts-vue-chat/public/example-guitar-racing.jpg b/examples/ts-vue-chat/public/example-guitar-racing.jpg
diff --git a/examples/ts-vue-chat/public/example-guitar-steamer-trunk.jpg b/examples/ts-vue-chat/public/example-guitar-steamer-trunk.jpg
diff --git a/examples/ts-vue-chat/public/example-guitar-superhero.jpg b/examples/ts-vue-chat/public/example-guitar-superhero.jpg
diff --git a/examples/ts-vue-chat/public/example-guitar-traveling.jpg b/examples/ts-vue-chat/public/example-guitar-traveling.jpg
diff --git a/examples/ts-vue-chat/public/example-guitar-video-games.jpg b/examples/ts-vue-chat/public/example-guitar-video-games.jpg
diff --git a/examples/ts-vue-chat/public/example-ukelele-tanstack.jpg b/examples/ts-vue-chat/public/example-ukelele-tanstack.jpg
diff --git a/examples/ts-vue-chat/public/favicon.ico b/examples/ts-vue-chat/public/favicon.ico
diff --git a/examples/ts-vue-chat/public/logo192.png b/examples/ts-vue-chat/public/logo192.png
diff --git a/examples/ts-vue-chat/public/logo512.png b/examples/ts-vue-chat/public/logo512.png
diff --git a/examples/ts-vue-chat/public/manifest.json b/examples/ts-vue-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"
+}
diff --git a/examples/ts-vue-chat/public/robots.txt b/examples/ts-vue-chat/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/ts-vue-chat/public/tanstack-circle-logo.png b/examples/ts-vue-chat/public/tanstack-circle-logo.png
diff --git a/examples/ts-vue-chat/public/tanstack-word-logo-white.svg b/examples/ts-vue-chat/public/tanstack-word-logo-white.svg
diff --git a/examples/ts-vue-chat/src/App.vue b/examples/ts-vue-chat/src/App.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Header from './components/Header.vue'
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-900">
+    <Header />
+    <router-view />
+  </div>
+</template>