A Vue 3 port of assistant-ui, providing composables and components for building AI assistant interfaces.

assistant-ui-vue is a comprehensive Vue 3 library for building AI-powered chat interfaces. It provides a set of highly customizable components and composables that work seamlessly with popular AI SDKs like Vercel AI SDK, LangGraph, and more.

• 🚀 Vue 3 Composition API - Built from the ground up for Vue 3
• 🎨 Fully Customizable - Override any component or styling
• 🔌 Multiple Integrations - Works with Vercel AI SDK, LangGraph, and custom backends
• 📱 Responsive - Mobile-friendly out of the box
• 🎯 TypeScript - Full TypeScript support
• ⚡ Performance - Optimized for real-time streaming

npm install @assistant-ui/vue

<template>
  <AssistantRuntimeProvider :runtime="runtime">
    <Thread />
  </AssistantRuntimeProvider>
</template>

<script setup lang="ts">
import { AssistantRuntimeProvider, Thread } from '@assistant-ui/vue';
import { useChatRuntime } from '@assistant-ui/vue-ai-sdk';

const runtime = useChatRuntime({
  api: '/api/chat'
});
</script>

// server.js
import express from 'express';
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

const app = express();

app.post('/api/chat', async (req, res) => {
  const { messages } = req.body;

  const result = streamText({
    model: openai('gpt-4'),
    messages,
  });

  result.toDataStreamResponse().pipe(res);
});

app.listen(3001);

This monorepo contains the following packages:

• @assistant-ui/vue - Core Vue components and composables
• @assistant-ui/vue-ai-sdk - Vercel AI SDK integration
• @assistant-ui/vue-langgraph - LangGraph integration
• @assistant-ui/vue-markdown - Markdown rendering support
• @assistant-ui/vue-syntax-highlighter - Code syntax highlighting

• assistant-stream - Framework-agnostic streaming utilities
• @assistant-ui/cloud - Cloud services integration
• @assistant-ui/styles - Default CSS styles and themes

The repository includes several example applications:

• basic-example - Simple chat interface
• with-ai-sdk-v5 - Vercel AI SDK v5 integration
• with-cloud - Cloud services integration
• with-external-store - Custom state management
• with-ffmpeg - Media processing capabilities
• with-langgraph - LangGraph agent integration
• with-parent-id-grouping - Message threading

To run an example:

cd examples/basic-example
npm install
npm run dev:all  # Starts both frontend and backend

• ThreadRoot - Root container for the thread
• ThreadViewport - Scrollable message area
• ThreadMessages - Message list container
• ThreadEmpty - Empty state component
• ThreadScrollToBottom - Scroll to bottom button

• MessageRoot - Message container
• MessageContent - Message content display
• MessageIf - Conditional rendering
• MessageProvider - Message context provider

• ComposerRoot - Composer container
• ComposerInput - Text input field
• ComposerSend - Send button
• ComposerCancel - Cancel button

• ActionBarRoot - Action bar container
• ActionBarCopy - Copy button
• ActionBarReload - Reload button
• ActionBarEdit - Edit button

import { 
  useThread,
  useMessage,
  useComposer,
  useAssistantRuntime
} from '@assistant-ui/vue';

// In your component
const thread = useThread();
const message = useMessage();
const composer = useComposer();
const runtime = useAssistantRuntime();

The library comes with default styles that can be imported:

import '@assistant-ui/styles/base.css';
import '@assistant-ui/styles/themes/default.css';

You can also create custom themes by overriding CSS variables:

:root {
  --aui-primary-color: #007bff;
  --aui-background-color: #ffffff;
  --aui-text-color: #333333;
  /* ... more variables */
}

The library is written in TypeScript and provides full type definitions. Configure your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "types": ["@assistant-ui/vue"]
  }
}

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Start development
pnpm dev

assistant-ui-vue/
├── packages/           # Library packages
│   ├── vue/           # Core Vue components
│   ├── vue-ai-sdk/    # AI SDK integration
│   └── ...
├── examples/          # Example applications
├── apps/             # Documentation and tools
└── agent/            # Development notes and plans

If you're migrating from @assistant-ui/react, the Vue port maintains API compatibility where possible:

• Component names remain the same
• Props are similar (adapted for Vue conventions)
• Composables replace React hooks (useThread → useThread)
• Slots replace React children/render props

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

When adding new features, please include tests:

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage
pnpm test:coverage

MIT

This is a Vue 3 port of the excellent assistant-ui library. Special thanks to the original authors and contributors.

• 📖 Documentation (React docs - Vue docs coming soon)
• 💬 Discord Community
• 🐛 Issue Tracker