vue-llmEl AI SDK que le faltaba a Vue

¿Qué es vue-llm? ​

vue-llm es una librería open source en TypeScript que añade funciones de IA y LLM a apps de Vue 3 y Nuxt. Ofrece composables como useChat, que hacen streaming de la salida del modelo a un estado reactivo, proveedores para OpenAI, Anthropic Claude, Google Gemini, Ollama y modelos WebGPU en el navegador, y 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>

Preguntas frecuentes ​

¿Qué es vue-llm? ​

vue-llm es una librería open source en TypeScript que añade funciones de IA y LLM a apps de Vue y Nuxt. Ofrece composables como useChat, useCompletion y useObject, que hacen streaming de la salida del modelo a un estado reactivo, además de proveedores para OpenAI, Anthropic, Google Gemini, Ollama y modelos WebGPU en el navegador.

¿Cómo creo un chat tipo ChatGPT en Vue? ​

Instala vue-llm, crea un proveedor (por ejemplo, un proxy de servidor con createLLMHandler, o createOpenAI en el servidor) y llama a useChat en un componente. Devuelve messages, input, status y sendMessage reactivos, y hace streaming de la respuesta token a token.

¿Puedo ejecutar un LLM en el navegador sin API key? ​

Sí. createWebLLM ejecuta modelos abiertos como Llama 3.2, Qwen y SmolLM en la GPU del usuario mediante WebGPU. Las peticiones nunca salen del dispositivo y no hace falta servidor ni API key.

¿vue-llm funciona con Nuxt? ​

Sí. Añade 'vue-llm/nuxt' a modules en nuxt.config para importar automáticamente los composables y proveedores y registrar los componentes de chat. createLLMHandler convierte una ruta de servidor de Nuxt en un proxy seguro hacia el modelo.

¿vue-llm es compatible con Vue 2? ​

Los composables (useChat, useCompletion, useObject, usePrompt) funcionan en Vue 2.7 y Vue 3.3+. Los componentes requieren Vue 3.

¿En qué se diferencia vue-llm del Vercel AI SDK? ​

vue-llm está pensado para Vue desde el principio. Incluye un módulo de Nuxt, componentes Vue para Generative UI, un proveedor WebGPU para modelos en el navegador, compatibilidad con Vue 2.7 en sus composables y un proveedor para backends Server-Sent Events existentes, sin dependencias en tiempo de ejecución aparte de Vue.

¿vue-llm es gratis? ​

Sí. vue-llm tiene licencia MIT y es gratis para uso comercial.