AI Input for Vue

A Notion-style, AI-native input component for Vue 3 applications. Built on top of Tiptap and shadcn-vue.

中文文档

Features

• 📝 Rich Text Editing: Powered by Tiptap.
• 🧩 Slash Commands: Type / to trigger templates or actions.
• @ Mentions: Support for @mentioning context items or files.
• 📁 Drag & Drop: Handle file uploads with drag and drop support.
• 🎙️ Voice Input: Built-in voice recognition support.
• 🎨 Shadcn UI Compatible: Designed to fit perfectly with shadcn-vue and ai-element-vue.

Installation

This component is distributed via a registry, similar to shadcn-vue.

Prerequisites

• Vue 3
• Tailwind CSS
• shadcn-vue configured

Add to your project

npx shadcn-vue@latest add https://lointain.github.io/ai-input/registry/ai-input.json

Documentation

Detailed documentation is available in the wiki folder:

• 01 Overview
• 02 Component Usage
• 03 Global Drag & Drop
• 04 Slash Commands
• 05 Mentions
• 06 Voice Input
• 07 Context Items

Development

This repository is a monorepo containing the component source and a demo documentation site.

pnpm install
pnpm dev

License

MIT