@oro.ad/nuxt-claude-devtools

Nuxt DevTools integration for Claude Code AI assistant

@oro.ad/nuxt-claude-devtools

Nuxt DevTools integration for Claude Code AI assistant. Chat with Claude directly from your Nuxt DevTools panel with full support for skills, agents, and slash commands.

Features

Chat Interface — Interactive chat with Claude AI directly in DevTools
Streaming Responses — Real-time streaming output from Claude
Context Chips — Send viewport size, browser info, and routing context with messages
Component Picker — Select Vue components from the page to add as context
Session Management — Start new conversations or continue previous ones
Chat History — Browse and restore previous conversations
Skills — Markdown-based skills to extend Claude's capabilities (.claude/skills/<name>/SKILL.md)
Subagents — Specialized AI agents for delegated tasks (.claude/agents/<name>.md)
Slash Commands — Custom commands with YAML frontmatter (.claude/commands/<name>.md)
Documentation — Manage project docs that Claude can reference (.claude/docs/)
MCP Servers — Manage Model Context Protocol servers (add, remove, list)
Tunnel Support — Remote access via cloudflared tunnel

Prerequisites

Claude Code CLI must be installed and authenticated
Nuxt 3.x or 4.x with DevTools enabled

Quick Setup

Install the module:

# Using pnpm
pnpm add -D @oro.ad/nuxt-claude-devtools

# Using yarn
yarn add --dev @oro.ad/nuxt-claude-devtools

# Using npm
npm install --save-dev @oro.ad/nuxt-claude-devtools

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@oro.ad/nuxt-claude-devtools'],

  devtools: {
    enabled: true,
  },

  claudeDevtools: {
    enabled: true,
    claude: {
      command: 'claude', // Path to Claude CLI
      args: [],          // Additional CLI arguments
    },
  },
})

Start your Nuxt dev server and open DevTools — you'll see a new "AI" tab.

Configuration

Option	Type	Default	Description
`enabled`	`boolean`	`true`	Enable/disable the module
`debug`	`boolean`	`false`	Enable debug logging in console
`claude.command`	`string`	`'claude'`	Path to Claude CLI executable
`claude.args`	`string[]`	`[]`	Additional arguments for Claude CLI

Usage

Chat Interface

Open Nuxt DevTools (press Shift + Option + D or click the Nuxt icon)
Navigate to the "AI" tab
Type your message and press Enter
Claude will respond with streaming output

The module automatically uses --continue for follow-up messages within a session. Click "New Chat" to start a fresh conversation.

Context Chips

Add contextual information to your messages using the chips next to the input field:

Chip	Context Provided
Viewport	App window dimensions (width × height)
User Agent	Browser and OS information
Routing	Current route path, query params, page component file

Click a chip to toggle it on/off. Active chips will include their context with your next message.

Component Picker

Click "Add Component" to select Vue components directly from your running app. The component's file path will be included as context, allowing Claude to read and understand the component code.

Skills

Skills extend Claude's capabilities with specialized knowledge. Create markdown files with YAML frontmatter:

Location: .claude/skills/<skill-name>/SKILL.md

---
description: Vue 3 Composition API expert
model: sonnet
---

You are an expert in Vue 3 Composition API...

## Guidelines
- Always use `<script setup lang="ts">`
- Follow TypeScript best practices

Frontmatter options:

Field	Description
`description`	Brief description (required)
`model`	Model to use: `sonnet`, `opus`, `haiku`
`argumentHint`	Hint for skill arguments (e.g., `<query>`)

Subagents

Subagents are specialized AI agents that Claude can delegate tasks to:

Location: .claude/agents/<agent-name>.md

---
name: code-reviewer
description: Reviews code for quality and best practices
model: sonnet
tools: Read, Grep, Glob
skills:
  - typescript-strict
  - vue-composition-api
---

You are a code reviewer. Your job is to:
1. Review code for bugs and issues
2. Suggest improvements
3. Check for security vulnerabilities

Frontmatter options:

Field	Description
`name`	Agent name (kebab-case)
`description`	Brief description
`model`	Model: `sonnet`, `opus`, `haiku`
`tools`	Comma-separated list of allowed tools
`disallowedTools`	Tools to exclude
`skills`	Array of skill names to preload
`permissionMode`	`default`, `acceptEdits`, `dontAsk`, `bypassPermissions`, `plan`

Slash Commands

Create custom commands with markdown and YAML frontmatter:

Location: .claude/commands/<command-name>.md

---
description: Generate a Vue component
allowedTools: Read, Write, Edit
---

Generate a Vue 3 component with:
- `<script setup lang="ts">`
- Typed props with `defineProps<T>()`
- CSS variables for styling

Invoke with /<command-name> in the chat.

Documentation

Store project documentation that Claude can reference:

Location: .claude/docs/

Create markdown files for architecture, components, API reference, etc. Claude will use these as context when answering questions about your project.

MCP Servers

Manage Model Context Protocol servers directly from DevTools:

Click the "MCP" button in the chat header
View configured servers
Add new servers (stdio, HTTP, or SSE transport)
Remove existing servers

Example MCP servers:

GitHub: npx -y @modelcontextprotocol/server-github
Nuxt UI: https://ui.nuxt.com/mcp (HTTP)

Architecture

┌─────────────────────────────────────────────────────────┐
│                    Nuxt DevTools                        │
│  ┌───────────────────────────────────────────────────┐  │
│  │              Claude DevTools Panel                │  │
│  │         (iframe at /__claude-devtools)            │  │
│  │                                                   │  │
│  │  Pages:                                           │  │
│  │  - /           Chat interface                     │  │
│  │  - /skills     Skills manager                     │  │
│  │  - /agents     Subagents manager                  │  │
│  │  - /commands   Slash commands manager             │  │
│  │  - /docs       Documentation viewer               │  │
│  │  - /mcp        MCP servers config                 │  │
│  └───────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘
                          │
                          │ Socket.IO
                          ▼
┌─────────────────────────────────────────────────────────┐
│                  Claude Session Server                  │
│  ┌─────────────────┐    ┌─────────────────────────────┐│
│  │  Socket.IO Hub  │───▶│  Claude CLI Process         ││
│  │                 │    │  (spawn with --continue)    ││
│  │  Managers:      │    └─────────────────────────────┘│
│  │  - Skills       │                                   │
│  │  - Agents       │    ┌─────────────────────────────┐│
│  │  - Commands     │    │  File Storage               ││
│  │  - Docs         │    │  .claude/skills/            ││
│  │  - History      │    │  .claude/agents/            ││
│  └─────────────────┘    │  .claude/commands/          ││
│                         │  .claude/docs/              ││
│                         └─────────────────────────────┘│
└─────────────────────────────────────────────────────────┘

File Structure

.claude/
├── settings.local.json    # Local permissions
├── skills/                # Skills (markdown)
│   └── <skill-name>/
│       └── SKILL.md
├── agents/                # Subagents (markdown)
│   └── <agent-name>.md
├── commands/              # Slash commands (markdown)
│   └── <command-name>.md
└── docs/                  # Documentation
    └── *.md

Development

# Install dependencies
npm install

# Install dependencies for client
cd ./client
npm install
cd ../

# Generate type stubs
npm run dev:prepare

# Start playground with hot reload
npm run dev

# Build for production
npm run prepack

# Run linter
npm run lint

Project Structure

├── src/
│   ├── module.ts              # Nuxt module definition
│   ├── devtools.ts            # DevTools UI setup
│   └── runtime/
│       ├── logger.ts          # Logging utility
│       └── server/
│           ├── claude-session.ts   # Socket.IO server & Claude process
│           ├── skills-manager.ts   # Skills CRUD operations
│           ├── agents-manager.ts   # Agents CRUD operations
│           ├── commands-manager.ts # Commands CRUD operations
│           ├── docs-manager.ts     # Documentation management
│           └── history-manager.ts  # Chat history management
├── client/                    # DevTools panel UI (Nuxt app)
│   ├── pages/
│   │   ├── index.vue          # Chat interface
│   │   ├── skills.vue         # Skills manager
│   │   ├── agents.vue         # Subagents manager
│   │   ├── commands.vue       # Slash commands manager
│   │   ├── docs.vue           # Documentation viewer
│   │   └── mcp.vue            # MCP servers management
│   ├── composables/
│   │   ├── useClaudeChat.ts   # Socket, messages, session
│   │   ├── useMessageContext.ts # Context chips logic
│   │   ├── useVoiceInput.ts   # Speech recognition
│   │   ├── useAutocomplete.ts # Docs/commands autocomplete
│   │   └── useComponentPicker.ts # Component selection
│   └── nuxt.config.ts
└── playground/                # Development playground

Showcase

Check out real-world use cases and demos at nuxt-claude-devtools.oro.ad

Have an interesting use case? We'd love to feature it! Send your story to jobsbystr@gmail.com.

Security Notes

The module only runs in development mode (nuxt.options.dev)
Uses --dangerously-skip-permissions flag for Claude CLI (development only)
Socket.IO server runs on a dedicated port
All file operations are scoped to .claude/ directory

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).