# Vue
URL: /docs/vue

Build streaming AI chat interfaces with Vue, Nuxt, and the AI SDK.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

`@assistant-ui/vue` provides Vue components and composables for assistant-ui's runtime. Use it with Nuxt for a streaming chat route, a client-side assistant tree, and styled chat components from the assistant-ui registry.

The Vue surface includes `AuiProvider` and `AuiIf`, the `useAui`, `useAuiState`, and `useAuiEvent` composables, and primitives for threads, messages, composers, thread lists, attachments, suggestions, actions, branches, errors, and chain of thought.

## Start here

- [Five-minute quickstart](/docs/vue/quickstart) — Add a streaming Nuxt chat with AISDKChat and the assistant-ui registry.
- [Runtimes](/docs/vue/runtimes) — Choose a single chat, multi-thread chat, or an external-store runtime.
- [Server rendering](/docs/vue/ssr) — Keep assistant client state out of Vue's server-rendered scope.
- [Tool UI](/docs/vue/tool-ui) — Register Vue renderers for tool calls and human-in-the-loop actions.

## How it fits together

`AuiProvider` owns an assistant client. Its `AuiConfig` connects a runtime such as `AISDKChat()` to Vue primitives and composables. The AI SDK runtime posts messages to a Nuxt route, and the route returns the UI message stream to the browser.

Use a `.client.vue` boundary for the provider and runtime. Keep model credentials and `streamText` in a Nitro route. The [quickstart](/docs/vue/quickstart) contains the complete path.