Vue AI Apps Workflow

Building the Vue/Nuxt front end for LLM and agent features with the Vercel AI SDK. This skill covers the Vue-specific integration; the model layer (streamText, tool, providers) is shown as shape only — follow the AI SDK docs for the current core API, which moves between minor versions.

Assumes the foundations in vue-best-practices (Composition API, <script setup lang="ts">, composables). Load that skill for component structure and reactivity.

Core Principles

• 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 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.
• 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.