Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
birkskyum wants to merge 28 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
a737197
ts-vue-start-chat
birkskyum Dec 11, 2025
f720c6d
add devtools and vue-start chat
birkskyum Dec 12, 2025
76059d8
add ai devtools plugin
birkskyum Dec 12, 2025
d1fd830
show server message in vue devtools
birkskyum Dec 12, 2025
46ae150
use aiDevtoolsPlugin
birkskyum Dec 12, 2025
140e29f
readme for vue devtools
birkskyum Dec 12, 2025
c7f2a2e
revert change to ai-vue
birkskyum Dec 12, 2025
f21963e
ci: apply automated fixes
autofix-ci[bot] Dec 12, 2025
671ca50
reset ai-context
birkskyum Dec 12, 2025
bfefc3e
lint
birkskyum Dec 12, 2025
8f7f198
remove unused import
birkskyum Dec 12, 2025
c97ea4c
sort keys deps
birkskyum Dec 12, 2025
adaa33d
ci: apply automated fixes
autofix-ci[bot] Dec 12, 2025
6132707
use latest vue vite plugins
birkskyum Dec 12, 2025
b11dbe8
fix ai prod devtools
birkskyum Dec 12, 2025
89e97fc
ci: apply automated fixes
autofix-ci[bot] Dec 12, 2025
01b2567
run only on client
birkskyum Dec 12, 2025
6cc9174
ci: apply automated fixes
autofix-ci[bot] Dec 12, 2025
8448b85
lint
birkskyum Dec 12, 2025
24cabff
use latest vue-router
birkskyum Dec 12, 2025
8a6cf39
add .env.example
birkskyum Dec 12, 2025
2531625
fixing knip
jherr Jan 7, 2026
f0704ed
adding a changeset
jherr Jan 7, 2026
7d4ac7a
lockfile
birkskyum Jan 13, 2026
610c9ee
ci: apply automated fixes
autofix-ci[bot] Jan 13, 2026
a791548
use devtools utils
birkskyum Jan 15, 2026
9d3598a
update devtools utils
birkskyum Jan 15, 2026
1823279
await upstream fix
birkskyum Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/swift-walls-beam.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@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.
0 examples/ts-svelte-chat/env.example → examples/ts-svelte-chat/.env.example
View file
Open in desktop
File renamed without changes.
0 examples/ts-vue-chat/env.example → examples/ts-vue-chat/.env.example
View file
Open in desktop
File renamed without changes.
4 changes: 3 additions & 1 deletion examples/ts-vue-chat/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -26,7 +28,7 @@
"devDependencies": {
"@tailwindcss/vite": "^4.1.18",
"@types/node": "^24.10.1",
"@vitejs/plugin-vue": "^6.0.2",
"@vitejs/plugin-vue": "^6.0.3",
"autoprefixer": "^10.4.21",
"concurrently": "^9.1.2",
"dotenv": "^17.2.3",
Expand Down
14 changes: 14 additions & 0 deletions examples/ts-vue-chat/src/App.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
11 changes: 11 additions & 0 deletions examples/ts-vue-start-chat/.env.example
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
22 changes: 22 additions & 0 deletions examples/ts-vue-start-chat/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
15 changes: 15 additions & 0 deletions examples/ts-vue-start-chat/CHANGELOG.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
# ts-vue-chat

@coderabbitaicoderabbitaiBotJan 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix the package name to match the directory.

The title says "ts-vue-chat" but this changelog is for the "ts-vue-start-chat" example.

📝 Proposed fix
-# ts-vue-chat+# ts-vue-start-chat
📝 Committable suggestion

‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# ts-vue-chat
# ts-vue-start-chat
🤖 Prompt for AI Agents
In @examples/ts-vue-start-chat/CHANGELOG.md at line 1, The changelog title is
incorrect: replace the header string "# ts-vue-chat" in CHANGELOG.md with "#
ts-vue-start-chat" so the package name matches the example directory; update
only that top-level title line in the file to the correct example name.


## 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
75 changes: 75 additions & 0 deletions examples/ts-vue-start-chat/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
Comment on lines +8 to +11

@coderabbitaicoderabbitaiBotJan 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash# Check which environment example file existsecho"=== Searching for env.example files ==="
fd -t f "env.example" examples/ts-vue-start-chat/ 2>&1||echo"No env.example found"echo -e "\n=== Searching for .env.example files ==="
fd -t f ".env.example" examples/ts-vue-start-chat/ 2>&1||echo"No .env.example found"echo -e "\n=== List all files in examples/ts-vue-start-chat/ ==="
ls -la examples/ts-vue-start-chat/ 2>&1| head -20
echo -e "\n=== Check README.md lines 1-15 ==="
head -15 examples/ts-vue-start-chat/README.md

Repository: TanStack/ai

Length of output: 1186

Update the README to use the correct environment file name.

The project contains a .env.example file, but the README incorrectly references env.example (without the leading dot) in both the instruction text and shell command. Change env.example to .env.example on lines 8 and 10.

Suggested fix:
- 1. Copy `env.example` to `.env` and add your API keys:+ 1. Copy `.env.example` to `.env` and add your API keys:
```bash
- cp env.example .env+ cp .env.example .env
</details>
<!-- suggestion_start -->
<details>
<summary>📝 Committable suggestion</summary>
> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
```suggestion
1. Copy `.env.example` to `.env` and add your API keys:
🤖 Prompt for AI Agents
In @examples/ts-vue-start-chat/README.md around lines 8 - 11, Update the README
occurrences referencing the sample env file: replace "env.example" with
".env.example" in the instructional text and the shell command (the cp command
shown) so the copy command reads "cp .env.example .env" and the descriptive line
matches the filename.

```

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
47 changes: 47 additions & 0 deletions examples/ts-vue-start-chat/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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",

@coderabbitaicoderabbitaiBotJan 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Incorrect version for @tanstack/vue-devtools.

The specified version ^0.1.2 conflicts with the library context which indicates version 1.2.0. This appears to be a typo and should be corrected to ^1.2.0.

🔎 Proposed fix
- "@tanstack/vue-devtools": "^0.1.2",+ "@tanstack/vue-devtools": "^1.2.0",
📝 Committable suggestion

‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"@tanstack/vue-devtools": "^0.1.2",
"@tanstack/vue-devtools": "^1.2.0",
🤖 Prompt for AI Agents
In @examples/ts-vue-start-chat/package.json at line 22, Update the dependency
entry for "@tanstack/vue-devtools" in package.json: replace the incorrect
version string "^0.1.2" with the correct "^1.2.0" so it matches the library
context and avoids version conflicts.

"@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",

@coderabbitaicoderabbitaiBotJan 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

What is the latest stable version of Vite npm package 2025 2026

💡 Result:

The latest stable Vite npm release is v7.1.4 (published Jan 3–7, 2026 — listed as "last publish 4 days ago" on npm as of Jan 7, 2026). [1][2]

Sources:

  • npm package page for vite (version 7.1.4). [1]
  • Vite announcement for the v7 series (Vite 7 release). [2]

Update Vite version constraint to an available version.

The version constraint ^7.2.7 cannot be resolved—Vite v7 is stable and released, but the latest available version is v7.1.4. Change the constraint to ^7.1.4 or ^7 to allow npm/pnpm to install a valid version.

🤖 Prompt for AI Agents
In @examples/ts-vue-start-chat/package.json at line 43, The package.json
dependency for Vite is pinned to an unavailable version ("vite": "^7.2.7");
update the version constraint in package.json to a resolvable release such as
"vite": "^7.1.4" or a broader range like "vite": "^7" so npm/pnpm can install
Vite successfully, then run your package manager to verify installation.

"vite-tsconfig-paths": "^5.1.4",
"vue-tsc": "^2.2.10"
}
}
Binary file addedexamples/ts-vue-start-chat/public/example-guitar-flowers.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/example-guitar-motherboard.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/example-guitar-racing.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/example-guitar-steamer-trunk.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/example-guitar-superhero.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/example-guitar-traveling.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/example-guitar-video-games.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/example-ukelele-tanstack.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file addedexamples/ts-vue-start-chat/public/logo192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file addedexamples/ts-vue-start-chat/public/logo512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions examples/ts-vue-start-chat/public/manifest.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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"
}
3 changes: 3 additions & 0 deletions examples/ts-vue-start-chat/public/robots.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent:*
Disallow:
Binary file addedexamples/ts-vue-start-chat/public/tanstack-circle-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading