AI SDK для Vue и Nuxt: vue-llm запускает чат за 10 строк и модели прямо в браузере

Раньше программистам на Vue и Nuxt приходилось вручную писать потоковую выдачу ответа, вызовы инструментов и хранение переписки. Автор проекта называет это главной болью и предлагает готовый набор, который работает с Vue 3, Nuxt и Vue 2.7. Сам он описывает проект так: vue-llm, AI SDK для Vue и Nuxt с потоковым чатом, Generative UI и моделями прямо в браузере.

Vue и Nuxt здесь означают фреймворки, то есть каркасы, на которых собирают сайты и веб-сервисы. SDK означает набор готовых деталей для программиста. LLM, большая языковая модель, это движок сервисов вроде ChatGPT.

Что нового в vue-llm?

• Чат примерно за десять строк кода. Основа библиотеки, функция useChat, выводит ответ модели по мере генерации, токен за токеном (токен, это кусочек слова). Отдельно она хранит сообщения, статус и ошибки, а также умеет останавливать и перегенерировать ответ.
• Ключ остаётся на сервере. API-ключ, то есть пароль к платному сервису модели, не попадает в браузер посетителя. Серверная часть работает в Nuxt, Node, Bun, Deno и на так называемых граничных серверах (edge).
• Провайдеры из коробки. Поддерживаются OpenAI и любой API, совместимый с OpenAI, а также Anthropic, Google Gemini и Ollama. Если у компании уже есть свой сервер с потоковой выдачей, к нему подключает отдельный адаптер createSSEProvider.
• Generative UI. Так называют подход, когда нейросеть отвечает не текстом, а готовой карточкой интерфейса, например с погодой. По словам автора, карточка начинает заполняться ещё до того, как модель дописала команду.
• Подтверждение человеком. Модель может предложить забронировать столик и поставить чат на паузу. Разговор продолжится только после того, как пользователь нажмёт «Подтвердить».
• Модели прямо в браузере. Открытые модели Llama 3.2, Qwen, SmolLM и Phi запускаются через WebGPU, технологию, которая позволяет браузеру считать на видеокарте. Сервер и ключ не нужны, данные не покидают устройство.
• Готовое окно чата и отладка. Компоненты копируются в проект одной командой. Отдельная вкладка в инструментах разработчика Vue показывает скорость генерации и время до первого токена.

Отдельно автор держит поддержку Vue 2.7, и причина в практике: по его словам, у многих старых админок до сих пор стоит Vue 2. Зависимостей в рабочем коде, по его же словам, у библиотеки нет.

Как попробовать без ключа и сервера?

1. Откройте песочницу: https://vue-llm.js.org/ru/playground. Модель скачается и запустится прямо в браузере.
2. Посмотрите живое демо карточек вместо текста, оно работает даже без интернета: https://vue-llm.js.org/ru/guide/generative-ui.
3. Прочитайте документацию на русском: https://vue-llm.js.org/ru/.
4. Передайте программисту команды установки: npm i vue-llm для обычного проекта и npx nuxi module add vue-llm для Nuxt (проверено на Nuxt 3 и 4).

Подключатся ли YandexGPT и GigaChat?

Отдельной поддержки YandexGPT и GigaChat автор не упоминает. Из коробки работают OpenAI-совместимые API, а любой сервер с потоковой выдачей подключается через createSSEProvider. Есть ли у российских моделей совместимый вход, нужно проверять в их документации.

Для проектов в РФ главный вариант без внешних сервисов, это модели в браузере. Им не нужен зарубежный ключ, и данные посетителя остаются на его компьютере.

Что делать с этим прямо сейчас, по ролям?

Автору Дзена. Сама библиотека вам ни к чему, но песочница даёт наглядно увидеть, как нейросеть работает без интернета-сервера. Это хорошая тема для разбора в канале про ИИ.

Маркетологу. Карточки вместо текста позволяют сделать чат-консультанта, который показывает товар, бронь или расчёт готовым блоком. Обсудите это с разработчиком лендинга, если сайт собран на Vue.

Предпринимателю РФ и СНГ. Если ваш сервис написан на Vue или Nuxt, попросите команду оценить локальные модели. Данные клиента не покидают устройство, а расходов на внешний API нет.

Разработчику. Начните с песочницы и вкладки отладки. Затем проверьте, как ваш текущий потоковый сервер подключается через адаптер.

Какие вопросы задают чаще всего?

Нужно ли платить за vue-llm?

Библиотека распространяется с открытым кодом, о платных тарифах автор не сообщает. Если вы подключаете OpenAI, Anthropic или Gemini, платить придётся по их тарифам. Модели в браузере работают без ключа.

Подойдёт ли это сайту на старом Vue 2?

Частично. Автор заявляет поддержку Vue 2.7 для основных функций, именно ради старых админок.

Безопасно ли запускать модель в браузере?

По словам автора, данные не покидают устройство, потому что сервер не участвует. Если у вас на сайте есть Vue, начните с песочницы сегодня: через десять минут станет ясно, нужен ли вашему проекту собственный чат.