AI-Powered Content Assistance in Nuxt Studio

Nuxt Studio integrates AI-powered content assistance using models via Vercel AI Gateway. These features help you write, improve, and transform content faster with intelligent suggestions and transformations.

Configuration

Vercel AI Gateway Setup

Vercel AI Gateway provides a unified API for accessing AI models with built-in caching, rate limiting, and analytics.

Set Environment Variable

To enable AI-powered editing in Studio, simply set the AI_GATEWAY_API_KEY environment variable.

AI_GATEWAY_API_KEY=your_vercel_ai_gateway_api_key

Contextualization

You can then configure AI behavior in your nuxt.config.ts file to provide contextual guidance and ensure the AI output aligns with your preferred writing style.

export default defineNuxtConfig({
  studio: {
    ai: {
      context: {
        title: 'My Awesome Blog',
        description: 'A technical blog about web development',
        style: 'Technical and detailed, with practical examples',
        tone: 'Professional yet approachable'
      }
    }
  }
})

Features

AI Completion

AI Completion provides intelligent text suggestions as you type in the TipTap visual editor.

How It Works

• Auto-triggers after 500ms when you stop typing
• Manual trigger: Press Cmd/Ctrl+J to request a suggestion anytime
• Accept: Press Tab to insert the suggestion
• Dismiss: Press Escape or continue typing to ignore
• Powered by Claude Haiku 4.5 for fast responses (~300-500ms)
• Toggle On/Off: Click the sparkles ✨ button in the footer toolbar to enable/disable AI completion

AI Transform

Transform selected text with AI-powered improvements, fixes, translations, and simplifications.

Available Modes

• Fix: Correct grammar and spelling errors
• Improve: Enhance clarity, engagement, and readability
• Simplify: Use simpler words and shorter sentences
• Translate: Translate to another language (language input selection)

How it works

• Trigger the AI Transform tool from the content editor toolbar
• Select a mode from the dropdown menu
• Review the proposed changes in the preview pane before applying them.
• Accept or decline the AI proposition 
• Powered by Claude Sonnet 4.5 for high-quality results

Contextualization

For both completion and transform features, the AI system is contextualized and enriched to deliver more accurate and relevant suggestions:

• Context-aware : The system considers surrounding content and cursor position to provide intelligent recommendations.
• MDC Component: The AI provides context-aware assistance tailored to specific component types, including component names, slot configurations, and structural patterns.

Experimental Collection Context

Once enable , you can access the AI Tab by clicking the AI icon in the top navigation bar of Nuxt Studio. The AI Tab allows you to generate and manage AI writing style guides per collection, giving AI deeper context about your content structure.

What It Does

• Analyzes Collections: Examines your content collections to understand structure and style
• Generates Style Guides: Creates comprehensive writing guidelines for each collection
• Contextualizes AI: Uses collection-specific context for better AI suggestions

How to Enable

To enable AI-powered style guide generation, you need to configure your Nuxt project with the experimental feature flag and then activate the AI features in Studio.

export default defineNuxtConfig({
  studio: {
    ai: {
      experimental: {
        collectionContext: true  // Enable AI Tab
      }
    }
  }
})

How It Works

1. Access: Click the AI tab button in the Studio interface
2. Select Collection: Choose a collection to analyze
3. Generate Context: Click "Analyze Collection" to create a style guide
4. Edit Context: Review and customize the generated guidelines
5. AI Uses Context: Future AI operations will reference these guidelines

Context Files

Context files are stored in the .studio folder as ${collectionName}.md files. These files are automatically loaded during AI operations to provide collection-specific guidance.

Cost Estimation

With Vercel AI Gateway's $5 free credits, you can expect:

• ~11,000 AI completions: Auto-suggestions as you type
• ~120 AI transforms: Grammar fixes, improvements, translations
• ~2 million words: Total AI-generated content
• Several weeks: Typical usage (varies from occasional to regular content creation)

After free credits, pricing follows Vercel AI Gateway's standard rates based on model usage.