Skip to content

Build Chat SDK web UIs in Vue or Svelte

1 min read

The Chat SDK web adapter now has first-class support for Vue and Svelte, joining the existing React integration. Because the adapter speaks the AI SDK UI message stream protocol, the same server route works. Each framework ships its own useChat, built on the matching AI SDK package for React, Vue, or Svelte.

lib/bot.ts
// Vue / Nuxt
import { useChat } from "@chat-adapter/web/vue";
// Svelte / SvelteKit
import { useChat } from "@chat-adapter/web/svelte";
const chat = useChat({ api: "/api/chat" });

Framework-specific useChat imports for Vue and Svelte

The Vue and Svelte helpers return a reactive Chat instance, so read chat.messages and chat.status directly in your template rather than destructuring. The api and threadId options match the React wrapper, and your server setup remains the same.

Read the documentation to get started or browse the adapters directory.