npm package: @farsi/nuxt-boost
Description: Nuxt Boost accelerates AI-assisted development by providing essential context and structure for generating high-quality, Nuxt-specific code.
Author: Farsi Organization
Latest version: 0.1.4

# Nuxt Boost

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

> **The Nuxt equivalent of Laravel Boost** - Accelerate AI-assisted development with essential context and structure for generating high-quality, Nuxt-specific code.

Nuxt Boost is directly inspired by [Laravel Boost](https://github.com/laravel/boost) and provides the same powerful AI development experience for the Nuxt.js ecosystem.

## Features

Just like Laravel Boost, but for Nuxt:

- 🚀 **AI-Enhanced Development** - Provides structured context for AI assistants (like Laravel Boost's `.blade.php` guidelines)
- 🛠️ **MCP Server Integration** - Full Model Context Protocol support for seamless AI tool integration
- 📊 **Development Tools** - Built-in devtools component for real-time application inspection
- 🪵 **Browser Logging** - Capture and forward browser console logs to server (identical to Laravel Boost)
- 📡 **Real-time Monitoring** - Monitor routes, components, modules, and configuration via API endpoints
- 🔧 **Vue Composables** - `useBoost()` and `useBoostLogger()` for easy integration
- ⚡ **CLI Commands** - `nuxi boost:install`, `boost:info`, `boost:list` (equivalent to Laravel Artisan commands)
- 🤖 **AI Guidelines** - Automatic `.ai/` directory creation with comprehensive development guidelines

## Installation

Add `@farsi/nuxt-boost` to your project:

```bash
# Using npm
npm install --save-dev @farsi/nuxt-boost

# Using yarn
yarn add --dev @farsi/nuxt-boost

# Using pnpm
pnpm add -D @farsi/nuxt-boost
```

## Quick Setup

Run the installation command to automatically configure Nuxt Boost:

```bash
# Using npx
npx nuxt-boost install

# Using nuxi (after installation)
nuxi boost:install

# Or using npx directly
npx @farsi/nuxt-boost install
```

This command does exactly what Laravel Boost's `php artisan boost:install` does:
- ✅ Add `@farsi/nuxt-boost` to your `nuxt.config.ts` modules
- ✅ Create the `.ai/` directory with comprehensive AI development guidelines
- ✅ Set up the `boost/` directory for project-specific custom guidelines
- ✅ Automatically add `.ai` to your `.gitignore` file (if it exists)
- ✅ Configure sensible default options for development
- ✅ Detect your package manager (npm/yarn/pnpm/bun) automatically

## Setup

Add `@farsi/nuxt-boost` to the `modules` section of `nuxt.config.ts`:

```js
export default defineNuxtConfig({
  modules: [
    '@farsi/nuxt-boost'
  ],
  boost: {
    // Module options
    dev: true,                    // Enable in development
    mcp: true,                   // Enable MCP server
    browserLogging: true,        // Enable browser log forwarding
    guidelinesPath: 'boost'      // Path for AI guidelines
  }
})
```

## Usage

### Browser Logging

Nuxt Boost automatically captures browser console logs and forwards them to your server console for easier debugging:

```js
// These will appear in your server console
console.log('Debug information')
console.error('Error details')
console.warn('Warning message')
```

### Using Composables

#### `useBoost()`

Access application information and MCP functionality:

```vue
<script setup>
const { getInfo, getRoutes, getComponents, sendMCPRequest } = useBoost()

// Get application information
const info = await getInfo()

// Get route information
const routes = await getRoutes()

// Get component information
const components = await getComponents()

// Send MCP request
const result = await sendMCPRequest('nuxt:info')
</script>
```

#### `useBoostLogger()`

Enhanced logging with server forwarding:

```vue
<script setup>
const logger = useBoostLogger()

// Log messages that will be forwarded to server
await logger.info('Application started')
await logger.warn('Performance warning')
await logger.error('Critical error', { context: 'user-action' })
</script>
```

### DevTools Component

The `BoostDevtools` component provides a floating panel for inspecting your application:

```vue
<template>
  <div>
    <!-- Your app content -->

    <!-- DevTools panel (only in development) -->
    <BoostDevtools v-if="$config.public.dev" />
  </div>
</template>
```

## MCP Server Integration

Just like Laravel Boost's MCP server, Nuxt Boost includes a complete MCP (Model Context Protocol) server that provides AI assistants with structured access to your Nuxt application. The server exposes endpoints for:

- **Application information** (`/api/_boost/info`) - Like Laravel Boost's app info
- **Route discovery** (`/api/_boost/routes`) - Equivalent to Laravel's route listing
- **Component inspection** (`/api/_boost/components`) - Similar to Laravel's view discovery
- **Log aggregation** (`/api/_boost/logs`) - Browser log forwarding (identical to Laravel Boost)
- **MCP protocol** (`/api/_boost/mcp`) - Full MCP server implementation

### Available MCP Tools

Nuxt Boost provides the same MCP tools as Laravel Boost, adapted for Nuxt:

- `nuxt:info` - Get application metadata and configuration (like Laravel's `app:info`)
- `nuxt:routes` - List all application routes (like Laravel's `route:list`)
- `nuxt:components` - Get component information (like Laravel's view discovery)
- `nuxt:modules` - List installed modules (like Laravel's package discovery)
- `nuxt:plugins` - Get plugin information
- `nuxt:config` - Access sanitized configuration
- `nuxt:logs` - Access aggregated logs (identical to Laravel Boost)

## CLI Commands

Nuxt Boost provides CLI commands that mirror Laravel Boost's Artisan commands:

| Laravel Boost | Nuxt Boost | Description |
|---------------|------------|-------------|
| `php artisan boost:install` | `nuxi boost:install` | Auto-setup and configuration |
| `php artisan boost:info` | `nuxi boost:info` | Display application information |
| `php artisan boost:list` | `nuxi boost:list` | List routes, components, modules |

### `boost:install`
Equivalent to Laravel Boost's installation command:
```bash
nuxi boost:install [options]

Options:
  --force              Force reinstallation (like Laravel's --force)
  --skip-config        Skip nuxt.config.ts modification
  --skip-guidelines    Skip AI guidelines creation
```

### `boost:info`
Display comprehensive project information (like Laravel's `php artisan about`):
```bash
nuxi boost:info [options]

Options:
  --json              Output as JSON (same as Laravel Boost)
```

### `boost:list`
List application components (like Laravel's various list commands):
```bash
nuxi boost:list [type] [options]

Arguments:
  type                Type to list: routes, components, modules, plugins, or all (default)

Options:
  --json              Output as JSON
```

Examples:
```bash
# List everything
nuxi boost:list

# List only routes
nuxi boost:list routes

# List components as JSON
nuxi boost:list components --json
```

## Configuration

```ts
export interface ModuleOptions {
  /**
   * Enable development mode
   * @default true
   */
  dev?: boolean

  /**
   * Enable MCP server
   * @default true
   */
  mcp?: boolean

  /**
   * Custom AI guidelines path
   * @default 'boost'
   */
  guidelinesPath?: string

  /**
   * Browser logging
   * @default true
   */
  browserLogging?: boolean
}
```

## Development

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the module
npm run build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release
```

## Laravel Boost Comparison

Nuxt Boost is designed to be the exact equivalent of Laravel Boost for the Nuxt.js ecosystem:

| Feature | Laravel Boost | Nuxt Boost |
|---------|---------------|------------|
| **Installation** | `composer require --dev laravel/boost` | `npm install --dev @farsi/nuxt-boost` |
| **Setup Command** | `php artisan boost:install` | `nuxi boost:install` |
| **Framework Integration** | Service Provider | Nuxt Module |
| **Browser Logging** | ✅ Identical implementation | ✅ Identical implementation |
| **MCP Server** | ✅ Full MCP support | ✅ Full MCP support |
| **AI Guidelines** | `.blade.php` files | `.ai/*.md` files |
| **CLI Commands** | Artisan commands | Nuxi commands |
| **Development Only** | ✅ Environment aware | ✅ Environment aware |
| **Configuration** | `config/boost.php` | `nuxt.config.ts` boost key |

## Why Nuxt Boost?

If you love Laravel Boost and work with Nuxt.js, Nuxt Boost gives you the exact same powerful AI development experience:

- 🎯 **Same Developer Experience** - Familiar commands and workflows
- 🤖 **Same AI Integration** - MCP protocol and structured context
- 📊 **Same Introspection** - Real-time application analysis
- 🪵 **Same Logging** - Browser-to-server log forwarding
- ⚡ **Same CLI** - Command equivalency with Laravel Boost

## Contributing

Contributions are welcome! This project aims to maintain feature parity with Laravel Boost while adapting to Nuxt.js patterns.

## License

[MIT](./LICENSE) License © 2024

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@farsi/nuxt-boost/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@farsi/nuxt-boost

[npm-downloads-src]: https://img.shields.io/npm/dm/@farsi/nuxt-boost.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@farsi/nuxt-boost

[license-src]: https://img.shields.io/npm/l/@farsi/nuxt-boost.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-boost

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com