vue-ai-devtools and ts-vue-start-chat #143
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff 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. |
File renamed without changes.
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/[email protected] | ||
| - @tanstack/[email protected] | ||
| - @tanstack/[email protected] | ||
| - @tanstack/[email protected] | ||
| - @tanstack/[email protected] | ||
| - @tanstack/[email protected] | ||
| - @tanstack/[email protected] | ||
| - @tanstack/[email protected] | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff 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
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Check which environment example file exists
echo "=== 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.mdRepository: TanStack/ai Length of output: 1186 Update the README to use the correct environment file name. The project contains a 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🤖 Prompt for AI Agents |
||
| ``` | ||
|
|
||
| 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 | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff 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", | ||||||
|
Contributor
There was a problem hiding this comment. Incorrect version for @tanstack/vue-devtools. The specified version 🔎 Proposed fix- "@tanstack/vue-devtools": "^0.1.2",
+ "@tanstack/vue-devtools": "^1.2.0",📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| "@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", | ||||||
|
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🌐 Web query:
💡 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:
Update Vite version constraint to an available version. The version constraint 🤖 Prompt for AI Agents |
||||||
| "vite-tsconfig-paths": "^5.1.4", | ||||||
| "vue-tsc": "^2.2.10" | ||||||
| } | ||||||
| } | ||||||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff 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" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # https://www.robotstxt.org/robotstxt.html | ||
| User-agent: * | ||
| Disallow: |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
📝 Committable suggestion
🤖 Prompt for AI Agents