# vue-llm

> Vue composables for AI and LLM apps: streaming useChat, tool calling, Generative UI and in-browser models for OpenAI, Anthropic, Gemini, Ollama and WebGPU. The missing AI SDK for Vue and Nuxt.

Install with `npm i vue-llm`. Works with Vue 3.3+ and Nuxt 3/4. Composables also work on Vue 2.7. MIT licensed.

## Docs

- [Getting Started](https://vue-llm.js.org/guide/getting-started): Install vue-llm and build a streaming AI chat in Vue 3 or Nuxt in a few lines with useChat. Supported Vue versions, entry points and the message format.
- [Providers](https://vue-llm.js.org/guide/providers): Connect useChat to OpenAI, Anthropic Claude, Google Gemini, Ollama, in-browser WebGPU models or your own backend through one LLMProvider interface.
- [useChat](https://vue-llm.js.org/guide/use-chat): useChat: a reactive Vue composable for streaming chat with LLMs, with abort, regenerate, attachments, tool calls, persistence and status refs.
- [Tool Calling](https://vue-llm.js.org/guide/tool-calling): LLM tool and function calling in Vue: defineTool with execute, onToolCall, tool call states and human-in-the-loop with addToolResult.
- [Generative UI](https://vue-llm.js.org/guide/generative-ui): Render LLM tool calls as Vue components. Stream tool arguments into the UI, run tools on the client and ask the user to confirm actions (human in the loop).
- [In-Browser Models](https://vue-llm.js.org/guide/in-browser): Run Llama, Qwen, SmolLM and other open models in the browser on WebGPU with createWebLLM: no API key, no server, private by default.
- [useCompletion](https://vue-llm.js.org/guide/use-completion): useCompletion: stream a single text completion from an LLM into a Vue ref.
- [useObject](https://vue-llm.js.org/guide/use-object): useObject: stream structured JSON output from an LLM into a typed, partially filled Vue ref.
- [API Reference](https://vue-llm.js.org/api/): API reference for vue-llm: composables, providers, middleware, server handler, components and TypeScript types.
- [Attachments](https://vue-llm.js.org/guide/attachments): Send images, PDFs, audio and text files to OpenAI, Anthropic, Gemini and Ollama from useChat, mapped to each provider format.
- [Chat UI](https://vue-llm.js.org/guide/chat-ui): A ready-made AI chat UI for Vue: add shadcn-vue components with one command and own the code, or build your own with the headless usePromptInput and useAutoScroll composables.
- [Components](https://vue-llm.js.org/guide/components): MessageParts and StreamMarkdown: Vue components that render streaming LLM messages, safe Markdown, reasoning and tool calls.
- [Custom Backends](https://vue-llm.js.org/guide/custom-backends): Connect useChat to an existing backend that streams Server-Sent Events with createSSEProvider, mapping your event format to vue-llm chunks.
- [DevTools](https://vue-llm.js.org/guide/devtools): Debug LLM calls in Vue DevTools: inspect every useChat, useCompletion and useObject, and see requests, time to first token, tool calls and token usage on a timeline.
- [Middleware](https://vue-llm.js.org/guide/middleware): Wrap any LLM provider with middleware for logging, headers, retries, rate limits and custom request or stream handling.
- [Nuxt](https://vue-llm.js.org/guide/nuxt): Nuxt module for vue-llm: auto-imported composables and providers, registered chat components and a server route for LLM calls.
- [Persistence](https://vue-llm.js.org/guide/persistence): Persist and restore AI chat history in Vue with localStorage, sessionStorage or any async backend through the storage option.
- [Prompt Templates](https://vue-llm.js.org/guide/prompt-templates): Typed prompt templates for LLMs in Vue: {{variables}} inferred at the type level, chat templates and reactive usePrompt.
- [Retries & Rate Limiting](https://vue-llm.js.org/guide/retries-rate-limiting): Retry failed LLM requests with exponential backoff and Retry-After, and rate limit requests on the client and the server.
- [Security](https://vue-llm.js.org/guide/security): Keep LLM API keys out of the browser: server proxy, dangerouslyAllowBrowser, safe Markdown rendering of model output and rate limiting.
- [Server & Proxy](https://vue-llm.js.org/guide/server): createLLMHandler: a web-standard Request/Response handler that proxies LLM calls, runs server-side tools and rate limits per IP. Works in Nuxt, Node, Bun, Deno and edge runtimes.
- [Playground](https://vue-llm.js.org/playground): Chat with an LLM running entirely in your browser on WebGPU, built with vue-llm useChat. No API key and no server.

## Optional

- [Full documentation in one file](https://vue-llm.js.org/llms-full.txt)
- [Source code](https://github.com/dadashi44/vue-llm)
- [npm package](https://www.npmjs.com/package/vue-llm)