响应式组合式函数
useChat、useCompletion 与 useObject，支持流式输出、中止、重新生成以及状态 ref。
vue-llmVue 缺失的那款 AI SDK
以 Vue 组合式函数提供流式聊天、生成式 UI 与浏览器内模型，支持 OpenAI、Anthropic、Gemini、Ollama 和 WebGPU。
Skip to content
v1.3 — 生成式 UI、DevTools 与聊天界面
vue-llm 是什么？
vue-llm 是一个开源 TypeScript 库，为 Vue 3 和 Nuxt 应用添加 AI 与 LLM 功能。它提供 useChat 等组合式函数，将模型输出以流式方式写入响应式状态；内置 OpenAI、Anthropic Claude、Google Gemini、Ollama 以及 浏览器内 WebGPU 模型 的提供方，并提供用于 生成式 UI 的组件。
vue
<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>常见问题
vue-llm 是什么？
vue-llm 是一个开源 TypeScript 库，为 Vue 和 Nuxt 应用添加 AI 与 LLM 功能。它提供 useChat、useCompletion 和 useObject 等组合式函数，将模型输出以流式方式写入响应式状态，并内置 OpenAI、Anthropic、Google Gemini、Ollama 以及浏览器内 WebGPU 模型的提供方。
如何在 Vue 中构建类似 ChatGPT 的聊天？
安装 vue-llm，创建一个提供方（例如使用 createLLMHandler 搭建服务端代理，或在服务端使用 createOpenAI），然后在组件中调用 useChat。它会返回响应式的 messages、input、status 和 sendMessage，并逐 token 地流式输出回复。
能否在没有 API key 的情况下在浏览器中运行 LLM？
可以。createWebLLM 通过 WebGPU 在用户的 GPU 上运行 Llama 3.2、Qwen 和 SmolLM 等开源模型。请求不会离开设备，也不需要服务器或 API key。
vue-llm 能和 Nuxt 一起使用吗？
可以。在 nuxt.config 的 modules 中添加 'vue-llm/nuxt'，即可自动导入组合式函数和提供方，并注册聊天组件。createLLMHandler 可以把 Nuxt 服务端路由变成一个安全的模型代理。
vue-llm 支持 Vue 2 吗？
组合式函数（useChat、useCompletion、useObject、usePrompt）支持 Vue 2.7 和 Vue 3.3+。组件需要 Vue 3。
vue-llm 与 Vercel AI SDK 有什么不同？
vue-llm 以 Vue 为先。它提供 Nuxt 模块、用于生成式 UI 的 Vue 组件、用于浏览器内模型的 WebGPU 提供方、组合式函数对 Vue 2.7 的支持，以及适配现有 Server-Sent Events 后端的提供方，并且除 Vue 外没有任何运行时依赖。
vue-llm 免费吗？
是的。vue-llm 采用 MIT 许可，可免费用于商业用途。