Vercel AI SDK v6 for Vue.js (Client-Side) Skill

Vercel AI SDK v6 for Vue.js (Client-Side)

Critical: SDK v6 Breaking Changes

NEVER use these deprecated patterns:

useChat() composable → Use new Chat() class instead
generateObject() / streamObject() → Use generateText() / streamText() with output parameter

Decision Framework

For multi-turn chat: Use Chat class. See chat.md

For single-prompt completion: Use useCompletion. See use-completion.md

For streaming JSON objects: Use useObject. See use-object.md

Installation

pnpm add @ai-sdk/vue zod

Quick Start

Chat

<script setup lang="ts">
import { Chat } from "@ai-sdk/vue";
import { ref } from "vue";

const input = ref("");
const chat = new Chat({ api: "/api/chat" });

const send = () => {
  chat.sendMessage({ text: input.value });
  input.value = "";
};
</script>

<template>
  <div v-for="m in chat.messages" :key="m.id">
    <p v-for="(part, i) in m.parts" :key="i">
      <span v-if="part.type === 'text'">{{ part.text }}</span>
    </p>
  </div>
  <input v-model="input" @keyup.enter="send" />
</template>

Completion

<script setup lang="ts">
import { useCompletion } from "@ai-sdk/vue";

const { completion, complete, isLoading } = useCompletion({ api: "/api/completion" });
</script>

<template>
  <button @click="complete('Summarize Vue 3')" :disabled="isLoading">Go</button>
  <p>{{ completion }}</p>
</template>

Streaming Objects

<script setup lang="ts">
import { experimental_useObject as useObject } from "@ai-sdk/vue";
import { z } from "zod";

const { object, submit } = useObject({
  api: "/api/recipe",
  schema: z.object({ name: z.string(), steps: z.array(z.string()) }),
});
</script>

<template>
  <button @click="submit({ dish: 'pasta' })">Generate</button>
  <pre>{{ object }}</pre>
</template>

Anti-patterns

// WRONG: Deprecated useChat
import { useChat } from "@ai-sdk/vue"; // ❌

// CORRECT: Chat class
import { Chat } from "@ai-sdk/vue";
const chat = new Chat({ api: "/api/chat" }); // ✓

// WRONG: Separate loading state
const isLoading = ref(false); // ❌

// CORRECT: Use chat.status
<button :disabled="chat.status === 'streaming'">Send</button> // ✓

References

chat.md — Chat class API, messages, status, methods
use-completion.md — Single-prompt text generation
use-object.md — Streaming JSON objects with schemas

Assets

chat-component.vue — Complete chat UI template

Agent Skills: Vercel AI SDK v6 for Vue.js (Client-Side)

Install this agent skill to your local

Skill Files