assistant-ui-vue

August 23, 2025 · View on GitHub

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

Overview

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.

Features

  • 🚀 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

Installation

npm install @assistant-ui/vue

Quick Start

Basic Example with Vercel AI SDK

<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 Setup (Node.js)

// 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);

Packages

This monorepo contains the following packages:

Core 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

Utility Packages

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

Examples

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

Components

Thread Components

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

Message Components

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

Composer Components

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

Action Components

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

Composables

Core Composables

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

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

Styling

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 */
}

TypeScript Support

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

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

Browser Support

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

Development

Setup

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Start development
pnpm dev

Project Structure

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

Migration from React

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

Contributing

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

Testing

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

License

MIT

Acknowledgments

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

Support