diff --git a/examples/ts-vue-chat/.gitignore b/examples/ts-vue-chat/.gitignore new file mode 100644 index 00000000..24ebf80e --- /dev/null +++ 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 new file mode 100644 index 00000000..c353259a --- /dev/null +++ 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 new file mode 100644 index 00000000..2b17075b --- /dev/null +++ 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 new file mode 100644 index 00000000..0d107cd9 --- /dev/null +++ b/examples/ts-vue-chat/index.html @@ -0,0 +1,13 @@ + + +
+ + + ++ {{ guitar.shortDescription }} +
++ 🔒 Approval Required: {{ part.name }} +
+{{
+ JSON.stringify(JSON.parse(part.arguments), null, 2)
+ }}
+ + {{ guitar.description }} +
+ +Guitar not found
++ {{ guitar.shortDescription }} +
+Welcome to the Vue UI Demo!
+
+ This view uses
+ @tanstack/ai-vue-ui
+ components.
+
Send a message to get started.
+
+|
+
+ |
+
+
+ |
+
+We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together. +
+LET'S CHAT +{{ part.arguments }}
+ {{ JSON.stringify(part.output, null, 2) }}
+ {{ JSON.stringify(input, null, 2) }}
+