Skip to content

Commit a641bad

Browse files
jherrwobsorianoautofix-ci[bot]
authored
feat: Add ts-vue-chat example app with Vue UI demo route (#106)
* chore: init * ci: apply automated fixes * chore: Add initial components * Clean up exports * chore: add ThinkingPart component * chore: add rest of components * ci: apply automated fixes * type fixes * feat: Add ts-vue-chat example application Adds a Vue 3 chat example demonstrating @tanstack/ai-vue: - Vite + Vue 3 + TypeScript setup - Tailwind CSS styling - Multi-provider support (OpenAI, Anthropic, Gemini, Ollama) - Model selection with localStorage persistence - Client-side and server-side tools - Tool approval workflow - Guitar recommendation demo * fix: Update ai-vue-ui types to accept readonly messages The useChat composable returns DeepReadonly refs, so the ChatMessage component's message prop needs to accept readonly types. * feat: Add Vue UI Demo route to ts-vue-chat example - Add @tanstack/ai-vue-ui dependency to example app - Create VueUIView component demonstrating ai-vue-ui components - Add /vue-ui route and navigation link - Fix dependency versions to match workspace (vite, vue, tailwindcss, etc.) - Fix ai-vue-ui package: sort deps, use vue-tsc for type checking - Fix eslint import order in chat.vue - Update knip.json to ignore Vue SFC dependency false positives --------- Co-authored-by: wobsoriano <sorianorobertc@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 456970a commit a641bad

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+3375
-4
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Dependencies
2+
node_modules
3+
4+
# Build
5+
dist
6+
7+
# Logs
8+
*.log
9+
10+
# Environment
11+
.env
12+
.env.local
13+
.env.*.local
14+
15+
# IDE
16+
.vscode
17+
.idea
18+
*.swp
19+
*.swo
20+
21+
# OS
22+
.DS_Store

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# TanStack AI - Vue Chat Example
2+
3+
A Vue 3 chat application demonstrating the use of `@tanstack/ai-vue`.
4+
5+
## Setup
6+
7+
1. Copy `env.example` to `.env` and add your API keys:
8+
9+
```bash
10+
cp env.example .env
11+
```
12+
13+
2. Install dependencies:
14+
15+
```bash
16+
pnpm install
17+
```
18+
19+
3. Start the development server:
20+
21+
```bash
22+
pnpm dev
23+
```
24+
25+
4. Open [http://localhost:5173](http://localhost:5173) in your browser.
26+
27+
## Features
28+
29+
- Real-time streaming chat with multiple AI providers
30+
- Support for OpenAI, Anthropic, Gemini, and Ollama
31+
- Client-side and server-side tools
32+
- Tool approval workflow
33+
- Guitar recommendation demo
34+
35+
## Project Structure
36+
37+
```
38+
src/
39+
├── main.ts # App entry point
40+
├── App.vue # Root component
41+
├── router.ts # Vue Router setup
42+
├── styles.css # Global styles
43+
├── components/ # UI components
44+
│ ├── Header.vue
45+
│ ├── ChatInput.vue
46+
│ ├── Messages.vue
47+
│ ├── ThinkingPart.vue
48+
│ └── GuitarRecommendation.vue
49+
├── lib/ # Utilities
50+
│ ├── model-selection.ts
51+
│ └── guitar-tools.ts
52+
├── data/ # Example data
53+
│ └── guitars.ts
54+
└── views/ # Page components
55+
├── ChatView.vue
56+
└── GuitarDetailView.vue
57+
```
58+
59+
## Tech Stack
60+
61+
- Vue 3 with Composition API
62+
- TypeScript
63+
- Vite
64+
- Tailwind CSS
65+
- @tanstack/ai-vue

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# OpenAI
2+
OPENAI_API_KEY=your_openai_api_key_here
3+
4+
# Anthropic
5+
ANTHROPIC_API_KEY=your_anthropic_api_key_here
6+
7+
# Gemini
8+
GEMINI_API_KEY=your_gemini_api_key_here
9+
10+
# Ollama (no API key needed, runs locally)
11+
# Make sure Ollama is running: ollama serve

‎examples/ts-vue-chat/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>TanStack AI - Vue Chat</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "ts-vue-chat",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc -b && vite build",
9+
"preview": "vite preview",
10+
"check": "vue-tsc --noEmit"
11+
},
12+
"dependencies": {
13+
"@tanstack/ai": "workspace:*",
14+
"@tanstack/ai-anthropic": "workspace:*",
15+
"@tanstack/ai-client": "workspace:*",
16+
"@tanstack/ai-gemini": "workspace:*",
17+
"@tanstack/ai-ollama": "workspace:*",
18+
"@tanstack/ai-openai": "workspace:*",
19+
"@tanstack/ai-vue": "workspace:*",
20+
"@tanstack/ai-vue-ui": "workspace:*",
21+
"marked": "^15.0.6",
22+
"vue": "^3.5.25",
23+
"vue-router": "^4.5.0",
24+
"zod": "^4.1.13"
25+
},
26+
"devDependencies": {
27+
"@tailwindcss/vite": "^4.1.17",
28+
"@types/node": "^24.10.1",
29+
"@vitejs/plugin-vue": "^5.2.3",
30+
"autoprefixer": "^10.4.21",
31+
"concurrently": "^9.1.2",
32+
"dotenv": "^17.2.3",
33+
"express": "^5.1.0",
34+
"tailwindcss": "^4.1.17",
35+
"tsx": "^4.20.6",
36+
"typescript": "5.9.3",
37+
"vite": "^7.2.4",
38+
"vue-tsc": "^2.2.10"
39+
}
40+
}

‎examples/ts-vue-chat/public/example-guitar-flowers.jpg‎

626 KB
Loading

‎examples/ts-vue-chat/public/example-guitar-motherboard.jpg‎

647 KB
Loading

‎examples/ts-vue-chat/public/example-guitar-racing.jpg‎

316 KB
Loading

‎examples/ts-vue-chat/public/example-guitar-steamer-trunk.jpg‎

425 KB
Loading

‎examples/ts-vue-chat/public/example-guitar-superhero.jpg‎

771 KB
Loading

0 commit comments

Comments
 (0)