Tanstack AI Vue Skilld

What it does

When your agent uses it

• Debugging Vue code that imports @tanstack/ai-vue
• Tasks that involve Transcription

Example prompts

• “/tanstack-ai-vue-skilld”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

1. 1Every composable must run inside a component setup or effect scope. Cleanup is automatic via onScopeDispose; the scope owns the connection…
2. 2All reactive state is DeepReadonly>. Read with .value in script AND template. Never reassign; use the returned methods (setMessages…
3. 3Pass a connection adapter (for example fetchServerSentEvents('/api/chat'), re-exported from this package) or a fetcher. Generation hooks…
4. 4useChat builds one ChatClient per call. Changing connection (or other transport identity) requires a remount or a changed key prop; body…
5. 5Callback options (onChunk, onFinish, onError, ...) are read through the options object at call time, so reactive or mutated options…
6. 6Prefer forwardedProps over body; body is deprecated but still merged into the same wire payload (source: src/use-chat.ts:207-209).

What it can do on your machine

Read from SKILL.md and the folder at commit c8994af. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • pnpm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • tanstack.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tanstack AI Vue Skilld loads about 2.3k tokens when it runs, and up to ~6.7k if it reads all its reference files. Until then it costs about 100 tokens; SKILL.md has 693 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~100

When it runs · the whole SKILL.md, loaded when a task matches

~2.3k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~6.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from skilld-dev/vue-ecosystem-skills at commit c8994af, republished under its MIT licence (© skilld-dev). 693 words, ~2,252 tokens.

name

tanstack-ai-vue-skilld

description

Use when writing or debugging Vue code that imports @tanstack/ai-vue. Covers useChat, createChatHook, the generation composables (image, audio, speech, video, transcription, summarize), useAudioRecorder, useByok, useWebMCPTools, and the @tanstack/ai-vue/ui and /byok subpaths. Provides current API shapes, reactive-state rules, and version limits for @tanstack/ai-vue 0.24.x.

import { chat, toServerSentEventsResponse } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'

app.post('/api/chat', async (req, res) => {
  const stream = chat({ adapter: openaiText('gpt-4o'), messages: req.body.messages })
  const response = toServerSentEventsResponse(stream)
  // pipe response.body to res
})

<script setup lang="ts">
import { ref } from 'vue'
import { useChat, fetchServerSentEvents } from '@tanstack/ai-vue'

const input = ref('')
const { messages, sendMessage, isLoading } = useChat({
  connection: fetchServerSentEvents('/api/chat'),
})

function handleSubmit() {
  if (input.value.trim() && !isLoading.value) {
    sendMessage(input.value)
    input.value = ''
  }
}
</script>

<template>
  <div v-for="message in messages.value" :key="message.id">
    <div v-for="(part, idx) in message.parts" :key="idx">
      <p v-if="part.type === 'text'">{{ part.content }}</p>
    </div>
  </div>
  <form @submit.prevent="handleSubmit">
    <input v-model="input" :disabled="isLoading.value" />
    <button type="submit">Send</button>
  </form>
</template>

<script setup lang="ts">
import { useChat, fetchServerSentEvents, clientTools } from '@tanstack/ai-vue'
import { updateUIDef } from './tool-definitions'

const updateUI = updateUIDef.client((input) => {
  notification.value = input.message
  return { success: true }
})

const { messages, sendMessage } = useChat({
  connection: fetchServerSentEvents('/api/chat'),
  tools: clientTools(updateUI),
})
</script>

const { useChat: useAppChat } = createChatHook(chatOptions)
const chat = useAppChat({ threadId: 'support-1' })

© skilld-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references) in skills/tanstack-ai-vue-skilld of skilld-dev/vue-ecosystem-skills.

• SKILL.md
• references/byok-and-webmcp.md
• references/chat-ui.md
• references/generation-composables.md
• references/use-chat.md

Open the folder on GitHubat commit c8994af