DevTools

vue-llm/devtools добавляет вкладку LLM в Vue DevTools. С ней видно, что ваше приложение отправляет модели, сколько времени модель отвечает и сколько токенов тратит, — без console.log.

Подключение

npm i -D @vue/devtools-api

// main.ts
import { createApp } from 'vue'
import { LLMDevtools } from 'vue-llm/devtools'
import App from './App.vue'

const app = createApp(App)
if (import.meta.env.DEV) app.use(LLMDevtools)
app.mount('#app')

В Nuxt этого делать не нужно: в режиме разработки модуль сам устанавливает плагин, если доступен @vue/devtools-api. Отключить его можно через vueLlm: { devtools: false }.

Работает с браузерным расширением Vue DevTools, standalone-приложением и vite-plugin-vue-devtools.

Инспектор

Во вкладке LLM перечислены все активные useChat, useCompletion и useObject с их статусом и моделью. Выберите один, чтобы увидеть:

Раздел	Содержимое
state	статус, провайдер, модель, последняя ошибка
usage	запросы, ошибки, токены промпта и ответа, время до первого токена в последнем запросе, длительность и токенов в секунду
messages	история чата с вызовами инструментов, аргументами и результатами
output	текущий текст completion или частичный объект

При наведении на сессию доступны действия: stop — остановить генерацию и clear — очистить сообщения.

Передайте композаблу id, чтобы различать сессии:

useChat({ id: 'support-chat', provider, model: 'gpt-4o' })

Таймлайн

Каждый запрос — отдельная группа на таймлайне:

request       openai · gpt-4o
first token   340 ms
tool: get_weather   {"city":"Oslo"}
finish        tool-calls · 910 ms · 512 tokens · 48 tok/s

Ошибки и прерванные запросы подсвечиваются. Выберите событие, чтобы увидеть отправленные сообщения, аргументы и результаты инструментов и расход токенов.

Запись

Vue DevTools 7+ записывает таймлайн плагина, только когда запись включена. Откройте LLM → Timeline и нажмите переключатель записи в правом верхнем углу.

Опции

app.use(LLMDevtools, { logMessages: false })

Опция	По умолчанию	Описание
logMessages	true	Прикладывает полную историю сообщений к событиям request. Укажите false, чтобы логировать только их количество.

Накладные расходы

Без плагина композаблы пропускают всю инструментацию: никаких обёрток над потоком, событий и лишних объектов. @vue/devtools-api — необязательная peer-зависимость, и импортирует её только vue-llm/devtools, поэтому в продакшен-бандлы без плагина она не попадает.