next-ai-editor 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +213 -0
  3. package/dist/AIEditorProvider-Bs9zUVrL.cjs +1722 -0
  4. package/dist/AIEditorProvider-Bs9zUVrL.cjs.map +1 -0
  5. package/dist/AIEditorProvider-D-w9-GZb.js +1723 -0
  6. package/dist/AIEditorProvider-D-w9-GZb.js.map +1 -0
  7. package/dist/client/AIEditorProvider.d.ts +52 -0
  8. package/dist/client/AIEditorProvider.d.ts.map +1 -0
  9. package/dist/client/index.d.ts +3 -0
  10. package/dist/client/index.d.ts.map +1 -0
  11. package/dist/client.cjs +6 -0
  12. package/dist/client.cjs.map +1 -0
  13. package/dist/client.js +6 -0
  14. package/dist/client.js.map +1 -0
  15. package/dist/index-BFa7H-uO.js +1145 -0
  16. package/dist/index-BFa7H-uO.js.map +1 -0
  17. package/dist/index-DnoYi4f8.cjs +1162 -0
  18. package/dist/index-DnoYi4f8.cjs.map +1 -0
  19. package/dist/index.cjs +26 -0
  20. package/dist/index.cjs.map +1 -0
  21. package/dist/index.d.ts +4 -0
  22. package/dist/index.d.ts.map +1 -0
  23. package/dist/index.js +26 -0
  24. package/dist/index.js.map +1 -0
  25. package/dist/server/handlers/absolute-path.d.ts +3 -0
  26. package/dist/server/handlers/absolute-path.d.ts.map +1 -0
  27. package/dist/server/handlers/edit.d.ts +3 -0
  28. package/dist/server/handlers/edit.d.ts.map +1 -0
  29. package/dist/server/handlers/index.d.ts +18 -0
  30. package/dist/server/handlers/index.d.ts.map +1 -0
  31. package/dist/server/handlers/read.d.ts +3 -0
  32. package/dist/server/handlers/read.d.ts.map +1 -0
  33. package/dist/server/handlers/resolve.d.ts +3 -0
  34. package/dist/server/handlers/resolve.d.ts.map +1 -0
  35. package/dist/server/handlers/undo.d.ts +3 -0
  36. package/dist/server/handlers/undo.d.ts.map +1 -0
  37. package/dist/server/handlers/validate-session.d.ts +3 -0
  38. package/dist/server/handlers/validate-session.d.ts.map +1 -0
  39. package/dist/server/index.d.ts +11 -0
  40. package/dist/server/index.d.ts.map +1 -0
  41. package/dist/server/utils/ast.d.ts +39 -0
  42. package/dist/server/utils/ast.d.ts.map +1 -0
  43. package/dist/server/utils/file-system.d.ts +24 -0
  44. package/dist/server/utils/file-system.d.ts.map +1 -0
  45. package/dist/server/utils/source-map.d.ts +29 -0
  46. package/dist/server/utils/source-map.d.ts.map +1 -0
  47. package/dist/server.cjs +24 -0
  48. package/dist/server.cjs.map +1 -0
  49. package/dist/server.js +24 -0
  50. package/dist/server.js.map +1 -0
  51. package/dist/shared/storage.d.ts +53 -0
  52. package/dist/shared/storage.d.ts.map +1 -0
  53. package/dist/shared/types.d.ts +44 -0
  54. package/dist/shared/types.d.ts.map +1 -0
  55. package/package.json +87 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Jesse Halpern
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,213 @@
1
+ # Next AI Editor
2
+
3
+ > AI-powered React component editor for Next.js - edit your components with natural language in development mode
4
+
5
+ ## Features
6
+
7
+ - 🎯 **Click-to-Edit**: Click any component in your Next.js app to edit it with AI
8
+ - 🤖 **Natural Language**: Describe changes in plain English - "make this button blue with rounded corners"
9
+ - 🔍 **Smart Detection**: Automatically finds the exact component and element in your source code
10
+ - 📍 **Source Maps**: Works with both Server Components and Client Components using Turbopack source maps
11
+ - 🎨 **Syntax Highlighting**: Beautiful code preview with theme-aware syntax highlighting
12
+ - 📝 **Edit History**: Track multiple edits in a session with undo support
13
+ - 🔄 **Live Reload**: See changes immediately in your browser
14
+ - 🛡️ **Safe**: Only works in development mode, restricted to your project directory
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install next-ai-editor
20
+ # or
21
+ pnpm add next-ai-editor
22
+ # or
23
+ yarn add next-ai-editor
24
+ ```
25
+
26
+ ## Setup
27
+
28
+ ### 1. Environment Variables
29
+
30
+ Add your Anthropic API key to `.env.local`:
31
+
32
+ ```env
33
+ ANTHROPIC_API_KEY=sk-ant-api03-...
34
+ ```
35
+
36
+ ### 2. Wrap Your App
37
+
38
+ Wrap your root layout with the `AIEditorProvider`:
39
+
40
+ ```tsx
41
+ // app/layout.tsx
42
+ import { AIEditorProvider } from "next-ai-editor/client";
43
+
44
+ export default function RootLayout({
45
+ children,
46
+ }: {
47
+ children: React.ReactNode;
48
+ }) {
49
+ return (
50
+ <html lang="en">
51
+ <body>
52
+ <AIEditorProvider theme="dark">
53
+ {children}
54
+ </AIEditorProvider>
55
+ </body>
56
+ </html>
57
+ );
58
+ }
59
+ ```
60
+
61
+ ### 3. Add API Route
62
+
63
+ Create a catch-all route handler for the AI editor API:
64
+
65
+ ```tsx
66
+ // app/api/ai-editor/[...path]/route.ts
67
+ import { handleAIEditorRequest } from "next-ai-editor/server";
68
+
69
+ export const GET = handleAIEditorRequest;
70
+ export const POST = handleAIEditorRequest;
71
+ ```
72
+
73
+ ## Usage
74
+
75
+ 1. **Enable AI Editor**: Press `Ctrl+Shift+E` (or `Cmd+Shift+E` on Mac)
76
+ 2. **Select Component**: Hover over any component to see its source location
77
+ 3. **Click to Edit**: Click the component to open the editor modal
78
+ 4. **Describe Changes**: Type what you want to change (e.g., "make the background blue")
79
+ 5. **Apply**: Press `Ctrl+Enter` (or `Cmd+Enter`) or click "Apply Changes"
80
+ 6. **Continue Editing**: Make more edits to the same component, or click "Finish & Reload"
81
+
82
+ ## API Reference
83
+
84
+ ### Client
85
+
86
+ #### `AIEditorProvider`
87
+
88
+ Wraps your app to enable the AI editor.
89
+
90
+ ```tsx
91
+ import { AIEditorProvider } from "next-ai-editor/client";
92
+
93
+ <AIEditorProvider theme="dark" | "light">
94
+ {children}
95
+ </AIEditorProvider>
96
+ ```
97
+
98
+ **Props:**
99
+ - `theme?: "dark" | "light"` - UI theme (default: "dark")
100
+ - `children: ReactNode` - Your app content
101
+
102
+ ### Server
103
+
104
+ #### `handleAIEditorRequest`
105
+
106
+ Catch-all handler for all AI editor endpoints.
107
+
108
+ ```tsx
109
+ import { handleAIEditorRequest } from "next-ai-editor/server";
110
+
111
+ export const GET = handleAIEditorRequest;
112
+ export const POST = handleAIEditorRequest;
113
+ ```
114
+
115
+ #### Individual Handlers (Advanced)
116
+
117
+ For advanced use cases, you can import individual handlers:
118
+
119
+ ```tsx
120
+ import {
121
+ handleEdit,
122
+ handleRead,
123
+ handleResolve,
124
+ handleUndo,
125
+ handleAbsolutePath,
126
+ handleValidateSession
127
+ } from "next-ai-editor/server";
128
+ ```
129
+
130
+ ## How It Works
131
+
132
+ 1. **Component Detection**: Uses React Fiber's `_debugStack` to capture component hierarchy
133
+ 2. **Source Mapping**: Resolves compiled positions to original source using Turbopack source maps
134
+ 3. **AST Parsing**: Uses Babel to parse files and locate exact elements by tag, class, text, etc.
135
+ 4. **AI Generation**: Claude Sonnet 4.5 generates the edited code with full component context
136
+ 5. **Smart Replacement**: Replaces either the target element or full component based on the edit scope
137
+
138
+ ## Requirements
139
+
140
+ - **Next.js**: 15.0.0 or higher
141
+ - **React**: 18.0.0 or higher
142
+ - **Node.js**: 18.0.0 or higher
143
+ - **Anthropic API Key**: Required for AI functionality
144
+
145
+ ## Development Only
146
+
147
+ 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.
148
+
149
+ ## Examples
150
+
151
+ ### Simple Style Changes
152
+
153
+ ```
154
+ "make this button blue"
155
+ "add rounded corners"
156
+ "increase the font size to 18px"
157
+ ```
158
+
159
+ ### Layout Adjustments
160
+
161
+ ```
162
+ "center this vertically"
163
+ "make this a flex row"
164
+ "add 20px padding around this"
165
+ ```
166
+
167
+ ### Content Updates
168
+
169
+ ```
170
+ "change the text to 'Hello World'"
171
+ "add a subtitle under this heading"
172
+ "make this bold"
173
+ ```
174
+
175
+ ### Complex Changes
176
+
177
+ ```
178
+ "add hover effect that changes background to blue"
179
+ "wrap this in a card with shadow"
180
+ "make this responsive with mobile breakpoint"
181
+ ```
182
+
183
+ ## Troubleshooting
184
+
185
+ ### Component Not Detected
186
+
187
+ - Make sure you're running Next.js dev server (`npm run dev`)
188
+ - Only React components are editable (not plain HTML)
189
+ - Server Components and Client Components are both supported
190
+
191
+ ### Source Mapping Issues
192
+
193
+ - Ensure `.next/dev/` directory exists with source maps
194
+ - Turbopack generates `.map` files automatically in development
195
+
196
+ ### API Key Issues
197
+
198
+ - Verify `ANTHROPIC_API_KEY` is set in `.env.local`
199
+ - Restart your dev server after adding environment variables
200
+
201
+ ## Contributing
202
+
203
+ Contributions are welcome! Please feel free to submit a Pull Request.
204
+
205
+ ## License
206
+
207
+ MIT © Jesse Halpern
208
+
209
+ ## Links
210
+
211
+ - [GitHub Repository](https://github.com/anon-dot-com/next-ai-editor)
212
+ - [Issue Tracker](https://github.com/anon-dot-com/next-ai-editor/issues)
213
+ - [Anthropic API](https://www.anthropic.com)