next-ai-editor

v0.1.3

Published

12 days ago

AI-powered React component editor for Next.js - edit your components with natural language in development mode

0High
0Medium
0Low

jessehalpern

nextjs next react ai editor claude anthropic code-editor visual-editor component-editor development-tools llm

Next AI Editor

AI-powered React component editor for Next.js - edit your components with natural language in development mode

Features

🎯 Click-to-Edit: Click any component in your Next.js app to edit it with AI
🤖 Natural Language: Describe changes in plain English - "make this button blue with rounded corners"
🔍 Smart Detection: Automatically finds the exact component and element in your source code
📍 Source Maps: Works with both Server Components and Client Components using Turbopack source maps
🎨 Syntax Highlighting: Beautiful code preview with theme-aware syntax highlighting
📝 Edit History: Track multiple edits in a session with undo support
🔄 Live Reload: See changes immediately in your browser
🛡️ Safe: Only works in development mode, restricted to your project directory

Installation

npm install next-ai-editor
# or
pnpm add next-ai-editor
# or
yarn add next-ai-editor

Setup

1. Environment Variables

Add your Anthropic API key to .env.local:

ANTHROPIC_API_KEY=sk-ant-api03-...

2. Wrap Your App

Wrap your root layout with the AIEditorProvider:

// app/layout.tsx
import { AIEditorProvider } from "next-ai-editor/client";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AIEditorProvider theme="dark">
          {children}
        </AIEditorProvider>
      </body>
    </html>
  );
}

3. Add API Route

Create a catch-all route handler for the AI editor API:

// app/api/ai-editor/[...path]/route.ts
import { handleAIEditorRequest } from "next-ai-editor/server";

export const GET = handleAIEditorRequest;
export const POST = handleAIEditorRequest;

Usage

Enable AI Editor: Press Ctrl+Shift+E (or Cmd+Shift+E on Mac)
Select Component: Hover over any component to see its source location
Click to Edit: Click the component to open the editor modal
Describe Changes: Type what you want to change (e.g., "make the background blue")
Apply: Press Ctrl+Enter (or Cmd+Enter) or click "Apply Changes"
Continue Editing: Make more edits to the same component, or click "Finish & Reload"

API Reference

Client

`AIEditorProvider`

Wraps your app to enable the AI editor.

import { AIEditorProvider } from "next-ai-editor/client";

<AIEditorProvider theme="dark" | "light">
  {children}
</AIEditorProvider>

Props:

theme?: "dark" | "light" - UI theme (default: "dark")
children: ReactNode - Your app content

Server

`handleAIEditorRequest`

Catch-all handler for all AI editor endpoints.

import { handleAIEditorRequest } from "next-ai-editor/server";

export const GET = handleAIEditorRequest;
export const POST = handleAIEditorRequest;

Individual Handlers (Advanced)

For advanced use cases, you can import individual handlers:

import {
  handleEdit,
  handleRead,
  handleResolve,
  handleUndo,
  handleAbsolutePath,
  handleValidateSession
} from "next-ai-editor/server";

How It Works

Component Detection: Uses React Fiber's _debugStack to capture component hierarchy
Source Mapping: Resolves compiled positions to original source using Turbopack source maps
AST Parsing: Uses Babel to parse files and locate exact elements by tag, class, text, etc.
AI Generation: Claude Sonnet 4.5 generates the edited code with full component context
Smart Replacement: Replaces either the target element or full component based on the edit scope

Requirements

Next.js: 15.0.0 or higher
React: 18.0.0 or higher
Node.js: 18.0.0 or higher
Anthropic API Key: Required for AI functionality

Development Only

This package is designed for development only. All API endpoints return errors in production (NODE_ENV=production), and file operations are restricted to your project directory.

Examples

Simple Style Changes

"make this button blue"
"add rounded corners"
"increase the font size to 18px"

Layout Adjustments

"center this vertically"
"make this a flex row"
"add 20px padding around this"

Content Updates

"change the text to 'Hello World'"
"add a subtitle under this heading"
"make this bold"

Complex Changes

"add hover effect that changes background to blue"
"wrap this in a card with shadow"
"make this responsive with mobile breakpoint"

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme