vue-llmO AI SDK que faltava para Vue

O que é o vue-llm? ​

O vue-llm é uma biblioteca TypeScript open source que adiciona recursos de IA e LLM a apps Vue 3 e Nuxt. Ela oferece composables como useChat, que fazem streaming da saída do modelo para um estado reativo, provedores para OpenAI, Anthropic Claude, Google Gemini, Ollama e modelos WebGPU no navegador, além de componentes para Generative UI.

<script setup lang="ts">
import { useChat } from 'vue-llm'
import { createSSEProvider } from 'vue-llm/providers'

const { messages, input, handleSubmit, status } = useChat({
  provider: createSSEProvider({ url: '/api/chat' }), // your server keeps the API key
  model: 'gpt-4o',
})
</script>

<template>
  <div v-for="m in messages" :key="m.id">{{ m.role }}: {{ m.parts.map(p => p.type === 'text' ? p.text : '').join('') }}</div>
  <form @submit="handleSubmit">
    <input v-model="input" :disabled="status === 'streaming'">
  </form>
</template>

Perguntas frequentes ​

O que é o vue-llm? ​

O vue-llm é uma biblioteca TypeScript open source que adiciona recursos de IA e LLM a apps Vue e Nuxt. Ela oferece composables como useChat, useCompletion e useObject, que fazem streaming da saída do modelo para um estado reativo, além de provedores para OpenAI, Anthropic, Google Gemini, Ollama e modelos WebGPU no navegador.

Como criar um chat estilo ChatGPT em Vue? ​

Instale o vue-llm, crie um provedor (por exemplo, um proxy no servidor com createLLMHandler, ou createOpenAI no servidor) e chame useChat em um componente. Ele retorna messages, input, status e sendMessage reativos e faz streaming da resposta token a token.

Dá para rodar um LLM no navegador sem API key? ​

Sim. O createWebLLM roda modelos abertos como Llama 3.2, Qwen e SmolLM na GPU do usuário via WebGPU. As requisições nunca saem do dispositivo e não é preciso servidor nem API key.

O vue-llm funciona com Nuxt? ​

Sim. Adicione 'vue-llm/nuxt' em modules no nuxt.config para importar automaticamente os composables e provedores e registrar os componentes de chat. O createLLMHandler transforma uma rota de servidor do Nuxt em um proxy seguro para o modelo.

O vue-llm suporta Vue 2? ​

Os composables (useChat, useCompletion, useObject, usePrompt) funcionam no Vue 2.7 e no Vue 3.3+. Os componentes exigem Vue 3.

Qual a diferença entre o vue-llm e o Vercel AI SDK? ​

O vue-llm foi feito pensando primeiro no Vue. Ele traz um módulo Nuxt, componentes Vue para Generative UI, um provedor WebGPU para modelos no navegador, suporte a Vue 2.7 nos composables e um provedor para backends Server-Sent Events já existentes, sem dependências de runtime além do Vue.

O vue-llm é gratuito? ​

Sim. O vue-llm tem licença MIT e é gratuito para uso comercial.