nuxt-devtools-ai

Use Nuxt DevTools to attach UI context to your prompts. This module adds a lightweight prompt overlay that appears when you click an element in the DevTools inspector, giving you a ready-to-copy prompt with HTML context and a component stack. Inspired by React Grab

Output:

<span class="badge primary">Badge</span>
  in TestBadge.vue (playground/components/TestBadge.vue:8:2)
  in TestCard.vue (playground/components/TestCard.vue:12:4)

Make the edges rounded

Features

• Inspector-driven prompt overlay (click an element, get a prompt template).
• Captures clean HTML for the clicked element.
• Shows a concise component stack with file locations.
• “Open in editor” jumps to the clicked component.

Install

npm install nuxt-devtools-ai
yarn add nuxt-devtools-ai
pnpm add nuxt-devtools-ai
bun add nuxt-devtools-ai

Usage Add the module to your Nuxt config:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-devtools-ai'],
})

The overlay is enabled only in development and runs client-side. It integrates with the Nuxt DevTools inspector, so make sure DevTools are open when using it.

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release