vue-llmThe missing AI SDK for Vue

What is vue-llm? ​

vue-llm is an open-source TypeScript library that adds AI and LLM features to Vue 3 and Nuxt apps. It provides composables like useChat that stream model output into reactive state, providers for OpenAI, Anthropic Claude, Google Gemini, Ollama and in-browser WebGPU models, and components for 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>

FAQ ​

What is vue-llm? ​

vue-llm is an open-source TypeScript library that adds AI and LLM features to Vue and Nuxt apps. It provides composables such as useChat, useCompletion and useObject that stream model output into reactive state, plus providers for OpenAI, Anthropic, Google Gemini, Ollama and in-browser WebGPU models.

How do I build a ChatGPT-like chat in Vue? ​

Install vue-llm, create a provider (for example a server proxy with createLLMHandler, or createOpenAI on the server) and call useChat in a component. It returns reactive messages, input, status and sendMessage, and streams the reply token by token.

Can I run an LLM in the browser without an API key? ​

Yes. createWebLLM runs open models such as Llama 3.2, Qwen and SmolLM on the user's GPU through WebGPU. Requests never leave the device and no server or API key is needed.

Does vue-llm work with Nuxt? ​

Yes. Add 'vue-llm/nuxt' to modules in nuxt.config to auto-import the composables and providers and register the chat components. createLLMHandler turns a Nuxt server route into a secure proxy for the model.

Does vue-llm support Vue 2? ​

The composables (useChat, useCompletion, useObject, usePrompt) work on Vue 2.7 and Vue 3.3+. The components require Vue 3.

How is vue-llm different from the Vercel AI SDK? ​

vue-llm is built for Vue first. It ships a Nuxt module, Vue components for Generative UI, a WebGPU provider for in-browser models, Vue 2.7 support for its composables and a provider for existing Server-Sent Events backends, with no runtime dependencies besides Vue.

Is vue-llm free? ​

Yes. vue-llm is MIT licensed and free for commercial use.