Если вы делали AI-фичу на Vue, то, скорее всего, сталкивались с одним и тем же: большинство готовых инструментов для LLM-интерфейсов написаны с прицелом на React, а во Vue их приходится адаптировать или писать стриминг, tool calling и состояние чата вручную. Я сделал vue-llm — open-source библиотеку, которая закрывает это для Vue 3, Nuxt и даже Vue 2.7.
Сразу ссылки, чтобы можно было пощупать:
— Песочница без API-ключа (модель скачивается и работает прямо в браузере на WebGPU): https://vue-llm.js.org/ru/playground
— Документация на русском: https://vue-llm.js.org/ru/
— GitHub: https://github.com/dadashi44/vue-llm
— npm: npm i vue-llm
Ниже — что умеет библиотека и как это выглядит в коде.
## Чат за десять строк
Основа — композабл useChat. Он стримит ответ модели токен за токеном в реактивное состояние: сообщения, статус, ошибка, отмена, перегенерация.
«`vue
<script setup lang=»ts»>
import { useChat } from ‘vue-llm’
import { createProxyProvider } from ‘vue-llm/server’
const { messages, input, handleSubmit, status, stop } = useChat({
provider: createProxyProvider(‘/api/chat’),
model: ‘gpt-4o’,
})
</script>
<template>
<div v-for=»m in messages» :key=»m.id«>
<b>{{ m.role }}:</b>
<template v-for=»(part, i) in m.parts» :key=»i»>
<span v-if=»part.type === ‘text'»>{{ part.text }}</span>
</template>
</div>
<form @submit.prevent=»handleSubmit»>
<input v-model=»input»>
<button v-if=»status === ‘streaming'» type=»button» @click=»stop»>Стоп</button>
</form>
</template>
«`
Сообщения состоят из «частей» (parts): текст, рассуждения модели, вызовы инструментов, файлы, источники. Поэтому один и тот же шаблон показывает и обычный ответ, и reasoning у Claude или Qwen3, и вызов tool.