ai-elements-vue

AI Elements Vue is an open-source project supported by our sponsors. If you'd like to support its development, please consider becoming a sponsor.

Thanks to ImmiTranslate for sponsoring this project! ImmiTranslate provides on-demand certified translation services powered by professional human translators and supported by AI. It translates documents in 70+ languages for immigration and legal, academic, financial, and medical use, with notarization and physical delivery options available. Visit ImmiTranslate to learn more.

Thanks to APIMart for sponsoring this project! APIMart is a low-cost API platform for AI image & video generation — GPT-Image-2 from $0.006/image, 160+ images per dollar. One async API covers both image and video: submit a task, get an ID, fetch results via polling or callback. Batch tens of thousands of images without timeouts, switch models without changing code. Pay-as-you-go with no monthly fee — sign up here to get started.

AI Elements Vue provides pre-built, customizable Vue components specifically designed for AI applications, including conversations, messages, code blocks, reasoning displays, and more. The CLI makes it easy to add these components to your Vue.js and Nuxt.js project.

You can use the AI Elements Vue CLI directly with npx, or install it globally:

# Use directly (recommended)
npx ai-elements-vue@latest

# Or using shadcn-vue cli
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json

Before using AI Elements Vue, ensure your project meets these requirements:

• Node.js 18 or later
• Vue.js, Nuxt.js project with AI SDK installed
• shadcn-vue initialized in your project (npx shadcn-vue@latest init)
• Tailwind CSS configured (AI Elements Vue supports CSS Variables mode only)

Install all available AI Elements Vue components at once:

npx ai-elements-vue@latest

This command will:

• Set up shadcn-vue if not already configured
• Install all AI Elements Vue components to your configured components directory
• Add necessary dependencies to your project

Install individual or multiple components using the add command:

npx ai-elements-vue@latest add <component-name>

# Or install multiple at once:
npx ai-elements-vue@latest add <name1> <name2> ...

Examples:

# Install the message component
npx ai-elements-vue@latest add message

# Install the conversation component
npx ai-elements-vue@latest add conversation

# Install multiple components in one command
npx ai-elements-vue@latest add message conversation

You can also install components using the standard shadcn-vue CLI:

# Install all components
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json

# Install a specific component
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json

AI Elements Vue includes the following components:

The AI Elements Vue CLI:

1. Detects your package manager (npm, pnpm, yarn, or bun) automatically
2. Fetches component registry from https://registry.ai-elements-vue.com/all.json
3. Installs components using the shadcn-vue CLI under the hood
4. Adds dependencies and integrates with your existing shadcn-vue setup

Components are installed to your configured shadcn-vue components directory (typically @/components/ai-elements/) and become part of your codebase, allowing for full customization.

AI Elements Vue uses your existing shadcn-vue configuration. Components will be installed to the directory specified in your components.json file.

For the best experience, we recommend:

1. AI Gateway: Set up Vercel AI Gateway and add AI_GATEWAY_API_KEY to your .env.local
2. CSS Variables: Use shadcn-vue's CSS Variables mode for theming
3. TypeScript: Enable TypeScript for better development experience

If you'd like to contribute to AI Elements Vue, please follow these steps:

1. Fork the repository
2. Create a new branch
3. Make your changes to the components in packages/elements.
4. Open a PR to the main branch.

This project draws inspiration from several excellent projects:

• ai-elements - AI component concepts
• shadcn-vue - UI component foundation

Made with ❤️ by vuepont