v0.5.0 52 components

AI Elements for Nuxt

Headless Vue components for AI-native apps. Conversations, tools, code blocks, voice, and workflows. Style them with Tailwind or your own design system via data-ai-* hooks. Coding agents: use AGENTS.md as the implementation guide.

Read guides Open playground Browse components npm GitHub React reference

Categories

Chatbot

Messages, input, tools, reasoning, and conversation UI.

21 components

Code

Code blocks, terminals, agents, artifacts, and dev tooling UI.

15 components

Voice

Audio playback, speech input, transcription, and voice selection.

6 components

Workflow

Canvas-based workflow diagrams with nodes and edges.

7 components

Utilities

Markdown rendering, images, and chat integrations.

3 components

Quick start

1. Install
pnpm add ai-elements-nuxt ai @ai-sdk/vue
2. Configurenuxt.config.ts
export default defineNuxtConfig({
  modules: ['ai-elements-nuxt'],
  aiElements: { defaultStyles: true },
})
3. Useapp.vue
<script setup>
const { aiMessages, input, handleSubmit } = useAiChat({ api: '/api/chat' })
</script>

<template>
  <AiMessage v-for="msg in aiMessages" :key="msg.id" v-bind="msg" />
  <form @submit="handleSubmit">
    <AiPromptInput v-model="input" />
  </form>
</template>

Philosophy

Headless

Slot-driven components with data-ai-* attributes. No forced design system.

Compatible

Follows AI SDK UIMessage.parts contract. Works with any provider.

Nuxt-native

Module auto-imports, Nitro server helpers, and full TypeScript support out of the box.