@pythoughts/vue-skills-mcp 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pythoughts/vue-skills-mcp",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "description": "MCP server exposing the Vue 3 best-practice skills so any MCP coding agent can fetch them automatically on Vue work.",
   "author": "Mohamed Elkholy (elkaix)",

package/skills/vue-ai-apps/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: vue-ai-apps
 description: "Building AI/LLM and agent apps with Vue 3 and Nuxt: streaming chat UIs, the Vercel AI SDK (`ai` + `@ai-sdk/vue`), `useChat`, tool calling, structured output, and abort/error handling. Load for AI chatbots, assistant UIs, LLM streaming, or agent frontends in Vue or Nuxt."
-version: "1.0.0"
+version: "1.1.1"
 license: MIT
 author: github.com/Pythoughts-labs
 ---
@@ -16,14 +16,14 @@ Assumes the foundations in `vue-best-practices` (Composition API, `<script setup
 
 - **Keys never reach the client.** The provider API key lives on the server. The browser talks to *your* endpoint, never to the model provider directly.
 - **Server streams, client consumes.** A server route runs `streamText`/`streamObject` and returns a stream; the Vue component renders it incrementally. Never block on the full response.
-- **Render message *parts*, not a content string.** AI SDK v5 messages are `UIMessage[]` made of typed `parts` (text, tool calls, reasoning). Iterate `message.parts`.
+- **Render message *parts*, not a content string.** AI SDK messages are `UIMessage[]` made of typed `parts` (text, tool calls, reasoning). Iterate `message.parts`.
 - **Drive UI from `status`, not a boolean.** Disabled inputs, spinners, and the stop button key off the `status` state machine.
 
 ## 1) Confirm the stack (required)
 
 - Packages: `ai` (core), `@ai-sdk/vue` (composables), a provider (`@ai-sdk/openai`, `@ai-sdk/anthropic`, …), `zod` for tool/object schemas.
 - `useChat` from `@ai-sdk/vue` works against **any** streaming backend. The server snippets here use **Nuxt/Nitro** (`defineEventHandler`, `readBody`); for a non-Nuxt backend, keep the same AI SDK calls in your own route handler.
-- AI SDK **v5** is assumed (messages have `parts`; the hook does not manage input; `status` replaces `isLoading`; tool schemas use `inputSchema`). If the project is on v4, these APIs differ — check the installed version first.
+- This skill targets the **v5+ API**, verified against `ai@7` / `@ai-sdk/vue@4`: messages have `parts`; the hook does not manage input; `status` is `'submitted' | 'streaming' | 'ready' | 'error'`; tool schemas use `inputSchema`; `useObject` is exported as `experimental_useObject`. The pre-v5 API (`ai@4`: `message.content`, hook-managed `input`, `isLoading`, `parameters`) differs — check the installed version first.
 
 ## 2) Build the streaming chat UI (required for chat features)
 

package/skills/vue-ai-apps/references/error-handling-and-abort.md

@@ -1,12 +1,12 @@
 ---
-title: Abort and Error Handling for AI Streams (AI SDK v5)
+title: Abort and Error Handling for AI Streams (AI SDK v5+)
 impact: HIGH
 impactDescription: A streaming UI with no stop button and no error surface leaves users stuck on hung or failed requests
 type: best-practice
 tags: [vue3, nuxt, ai-sdk, useChat, abort, error-handling, streaming]
 ---
 
-# Abort and Error Handling for AI Streams (AI SDK v5)
+# Abort and Error Handling for AI Streams (AI SDK v5+)
 
 **Impact: HIGH** - LLM streams are long-running and can fail mid-response. `useChat` exposes everything needed — `status`, `stop()`, `error`, `clearError()`, `regenerate()`, and an `onError` option — but none of it is wired up by default. A chat UI is not shippable until the user can stop a runaway generation and recover from an error.
 

package/skills/vue-ai-apps/references/streaming-chat-ui.md

@@ -1,12 +1,12 @@
 ---
-title: Streaming Chat UI with useChat (AI SDK v5)
+title: Streaming Chat UI with useChat (AI SDK v5+)
 impact: HIGH
 impactDescription: Rendering message.content or managing input inside the hook is the v4 API and silently breaks in v5
 type: capability
 tags: [vue3, nuxt, ai-sdk, useChat, streaming, llm, chat]
 ---
 
-# Streaming Chat UI with useChat (AI SDK v5)
+# Streaming Chat UI with useChat (AI SDK v5+)
 
 **Impact: HIGH** - In AI SDK v5 the Vue `useChat` composable no longer manages the input field, exposes `status` instead of `isLoading`, and returns messages as `UIMessage[]` built from typed `parts`. Code written for v4 (`input`, `handleSubmit`, `message.content`, `isLoading`) compiles but renders nothing useful.
 
@@ -48,7 +48,7 @@ export default defineEventHandler(async (event) => {
 
   const result = streamText({
     model: openai('gpt-4o'),
-    messages: convertToModelMessages(messages),
+    messages: await convertToModelMessages(messages),
   })
 
   // Standard v5 streaming response. (The Nuxt template also shows a
@@ -94,6 +94,7 @@ function send() {
 - `useChat` returns Vue refs (`messages.value`, `status.value`); templates unwrap them automatically.
 - `status` values: `'submitted'` (sent, awaiting first token) → `'streaming'` (receiving) → `'ready'` (done) → `'error'`. Treat `submitted` + `streaming` as busy.
 - `sendMessage` also accepts files/attachments and per-call options; `text` is the common case.
+- `convertToModelMessages` is **async in `ai@7`** (returns `Promise<ModelMessage[]>`); `await` it. It was synchronous in early v5 — copying old code drops the `await` and passes a Promise to `streamText`.
 - The core `streamText` signature can change between AI SDK minors — verify against the installed version rather than copying blindly.
 
 ## Reference

package/skills/vue-ai-apps/references/structured-output.md

@@ -1,12 +1,12 @@
 ---
-title: Streaming Structured Output in Vue (AI SDK v5)
+title: Streaming Structured Output in Vue (AI SDK v5+)
 impact: MEDIUM
 impactDescription: Use streamObject + useObject for typed data; the object streams in partial, so the UI must tolerate undefined fields
 type: capability
 tags: [vue3, nuxt, ai-sdk, streamObject, useObject, structured-output, zod]
 ---
 
-# Streaming Structured Output in Vue (AI SDK v5)
+# Streaming Structured Output in Vue (AI SDK v5+)
 
 **Impact: MEDIUM** - When the model should return a typed object (a recipe, a form, an extraction) rather than chat, use `streamObject` on the server and the `useObject` composable on the client. The object arrives **incrementally as a deep-partial**, so every field can be `undefined` mid-stream. Templates must guard with optional chaining and `v-if`, or they throw while streaming.
 
@@ -18,7 +18,7 @@ tags: [vue3, nuxt, ai-sdk, streamObject, useObject, structured-output, zod]
 - [ ] Return `result.toTextStreamResponse()`
 - [ ] Drive the UI from `useObject`'s `object`, `submit`, `isLoading`
 - [ ] Treat every field of `object` as possibly `undefined` while streaming
-- [ ] Verify the exact `useObject` export name in your installed `@ai-sdk/vue`
+- [ ] Import it as `experimental_useObject` (aliased to `useObject`) from `@ai-sdk/vue`
 
 **Incorrect - assuming the object is complete:**
 ```vue
@@ -55,10 +55,8 @@ export default defineEventHandler(async (event) => {
 **Correct - component:**
 ```vue
 <script setup lang="ts">
-// Verify the export name against the installed @ai-sdk/vue:
-// it is exposed as `useObject` (cross-framework convention aliases
-// it as `experimental_useObject`).
-import { useObject } from '@ai-sdk/vue'
+// @ai-sdk/vue exports this only as `experimental_useObject` — alias it on import.
+import { experimental_useObject as useObject } from '@ai-sdk/vue'
 import { z } from 'zod'
 
 const schema = z.object({
@@ -81,7 +79,7 @@ const { object, submit, isLoading } = useObject({ api: '/api/recipe', schema })
 
 ## Notes
 
-- `useObject` is experimental and available for React, Svelte, and **Vue**. The reference docs page only prints the React import, so confirm the Vue export name (`useObject` vs `experimental_useObject`) in `node_modules/@ai-sdk/vue` for your version.
+- The composable is experimental; `@ai-sdk/vue` exports it as `experimental_useObject` (no plain `useObject`). Verified against `@ai-sdk/vue@4` (with `ai@7`).
 - `object` is typed as `DeepPartial<Schema>` — TypeScript already forces the optional-chaining discipline above.
 - For free-form text streaming use `useChat` (or `useCompletion`); reach for `useObject` only when you need a validated shape.
 

package/skills/vue-ai-apps/references/tool-calling.md

@@ -1,12 +1,12 @@
 ---
-title: Tool Calling in Vue Chat UIs (AI SDK v5)
+title: Tool Calling in Vue Chat UIs (AI SDK v5+)
 impact: HIGH
 impactDescription: Tool calls arrive as typed message parts with a state machine; ignoring the state renders blank or stale UI
 type: capability
 tags: [vue3, nuxt, ai-sdk, tools, function-calling, agents, useChat]
 ---
 
-# Tool Calling in Vue Chat UIs (AI SDK v5)
+# Tool Calling in Vue Chat UIs (AI SDK v5+)
 
 **Impact: HIGH** - When the model calls a tool, the result surfaces in the chat as a `parts` entry of type `tool-<name>` with a `state` field. The Vue UI must branch on `part.state` (`input-streaming` → `input-available` → `output-available` / `output-error`) to show progress and results. Rendering the part without checking `state` shows nothing while the tool runs, then throws when accessing `part.output` too early.
 
@@ -42,7 +42,7 @@ export default defineEventHandler(async (event) => {
 
   const result = streamText({
     model: openai('gpt-4o'),
-    messages: convertToModelMessages(messages),
+    messages: await convertToModelMessages(messages),
     stopWhen: stepCountIs(5), // let the model use a tool then answer
     tools: {
       getWeather: tool({
@@ -80,7 +80,7 @@ export default defineEventHandler(async (event) => {
 
 - Part type follows the pattern `tool-${toolName}`; dynamically registered tools use type `dynamic-tool` with `part.toolName`.
 - Useful accessors: `part.input`, `part.output`, `part.toolCallId`, `part.errorText`.
-- **Client-side tools** (a `tool()` with no `execute`) are fulfilled from the UI by calling `addToolResult({ tool, toolCallId, output })` returned by `useChat`.
+- **Client-side tools** (a `tool()` with no `execute`) are fulfilled from the UI by calling `addToolOutput({ tool, toolCallId, output })` returned by `useChat` (`addToolResult` is the deprecated alias).
 - `stepCountIs` / `stopWhen` and the `tool()` signature are core AI SDK API — confirm against the installed version.
 
 ## Reference