docs(ai): new section

Author: larbish

docs/content/7.ai.md

@@ -0,0 +1,164 @@
+---
+title: AI-Powered Content Assistance in Nuxt Studio
+description: Learn how to enable and use AI-powered features in Nuxt Studio for intelligent content completion, transformation, and style guidance.
+navigation:
+  title: AI Features
+  icon: i-lucide-sparkles
+seo:
+  title: AI Content Assistance - Nuxt Studio
+  description: Enable Claude-powered AI features in Nuxt Studio for smart content completion, grammar fixes, improvements, and translation using Vercel AI Gateway.
+links: []
+---
+
+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.
+
+::prose-note{type="info"}
+AI features are optional and require a Vercel AI Gateway API key.
+
+Vercel provides $5 in free credits, which is typically sufficient for most editing scenarios over several months.
+::
+
+## Configuration
+
+### Vercel AI Gateway Setup
+
+Vercel AI Gateway provides a unified API for accessing AI models with built-in caching, rate limiting, and analytics.
+
+::prose-steps{level="4"}
+#### Create a Vercel Account
+
+Sign up at [vercel.com](https://vercel.com) if you don't have an account.
+
+#### Access AI Gateway
+
+Navigate to your [Vercel AI Gateway Dashboard](https://vercel.com/ai-gateway) in your account settings.
+
+#### Create an API Key
+
+Generate a new API key from the AI Gateway dashboard.
+
+  :::note
+  Vercel provides $5 in free credits, which is typically sufficient for most editing scenarios over several months.
+  :::
+::
+
+### Set Environment Variable
+
+To enable AI-powered editing in Studio, simply set the `AI_GATEWAY_API_KEY` environment variable.
+
+```bash [.env]
+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.
+
+```ts [nuxt.config.ts]
+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, similar to GitHub Copilot for code.
+
+#### 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
+
+::note
+This feature is under development and may change in future releases.
+::
+
+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.
+
+```js [nuxt.config.ts]
+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.