modifywithai 1.2.4 → 1.4.0

package/AGENTS.md

@@ -128,6 +128,170 @@ Run the following command to add the API key to `.env.local`:
 echo "MWAI_API_KEY={{API_KEY}}" >> .env.local
 ```
 
+## Step 5: Add "Modify With AI" Button
+
+Create a "Modify With AI" button in an appropriate location in the application. This button allows end-users to submit modification requests.
+
+Choose a suitable location based on the app's structure. Common placements include:
+- Header/navbar (recommended for most apps)
+- Settings page
+- Admin dashboard
+- Floating action button
+- Footer
+
+### Example Implementation
+
+Create a client component for the button:
+
+```tsx
+"use client"
+
+import { useState } from "react"
+import { modifyWithAI } from "modifywithai"
+
+export function ModifyWithAIButton() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [prompt, setPrompt] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSubmit = async () => {
+    if (!prompt.trim()) return
+    
+    setIsLoading(true)
+    const { success, error } = await modifyWithAI(prompt)
+    setIsLoading(false)
+    
+    if (success) {
+      setPrompt("")
+      setIsOpen(false)
+      // Optionally show a success toast/notification
+    } else {
+      // Optionally show an error toast/notification
+      console.error(error)
+    }
+  }
+
+  if (!isOpen) {
+    return (
+      <button onClick={() => setIsOpen(true)}>
+        Modify With AI
+      </button>
+    )
+  }
+
+  return (
+    <div>
+      <textarea
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        placeholder="Describe the changes you want to make..."
+        disabled={isLoading}
+      />
+      <button onClick={handleSubmit} disabled={isLoading || !prompt.trim()}>
+        {isLoading ? "Submitting..." : "Submit"}
+      </button>
+      <button onClick={() => setIsOpen(false)} disabled={isLoading}>
+        Cancel
+      </button>
+    </div>
+  )
+}
+```
+
+### Styling Requirements
+
+**Important:** The example above is a minimal reference implementation. You MUST:
+
+1. **Match existing button styles** - Look at other buttons in the location you're placing this (e.g., the header/navbar) and match their styling exactly (size, colors, border-radius, font, hover states, etc.)
+2. **Use the project's UI library** - If the project uses shadcn/ui, Radix, Chakra, MUI, Ant Design, or any other component library, use their Button, Dialog/Modal, Popover, Input/Textarea, and other relevant components
+3. **Follow the design system** - Use the project's existing CSS variables, Tailwind classes, or styled-components patterns
+
+The button should look like it belongs in the app, not like a foreign element.
+
+**After completing all setup steps, ask the user:** "I've placed the 'Modify With AI' button in [location]. Would you like me to move it somewhere else?"
+
+## Step 6: Add `data-mwai-id` Attributes (VERY IMPORTANT)
+
+**This step is critical for ModifyWithAI to function properly.**
+
+ModifyWithAI uses `data-mwai-id` attributes to identify which elements in the UI can be modified. Without these attributes, the AI cannot target specific elements for modification.
+
+### How to Add IDs
+
+Add a `data-mwai-id` attribute to **every single element** in the codebase that represents a meaningful UI component or section. The ID should be descriptive and based on the element's purpose/context.
+
+```tsx
+// Examples:
+<header data-mwai-id="main-header">...</header>
+<nav data-mwai-id="primary-navigation">...</nav>
+<section data-mwai-id="hero-section">...</section>
+<div data-mwai-id="pricing-card-pro">...</div>
+<button data-mwai-id="submit-contact-form">Submit</button>
+<h1 data-mwai-id="page-title">Welcome</h1>
+<p data-mwai-id="feature-description">...</p>
+<img data-mwai-id="team-member-photo-jane" src="..." />
+<footer data-mwai-id="site-footer">...</footer>
+```
+
+### Guidelines for Naming IDs
+
+1. **Be descriptive**: Use names that clearly describe what the element is or does
+2. **Use kebab-case**: Separate words with hyphens (e.g., `hero-section`, `contact-form`)
+3. **Include context**: If there are multiple similar elements, include distinguishing context (e.g., `pricing-card-basic`, `pricing-card-pro`, `pricing-card-enterprise`)
+4. **Cover all elements**: Add IDs to headings, paragraphs, buttons, images, sections, cards, forms, inputs, navigation items, etc.
+
+### What to Cover
+
+Go through **every page and component** in the project and add `data-mwai-id` to:
+
+- Layout components (headers, footers, sidebars, navigation)
+- Page sections (hero, features, testimonials, pricing, FAQ, CTA)
+- Interactive elements (buttons, links, form inputs)
+- Content elements (headings, paragraphs, images, icons)
+- Cards and list items
+- Modal/dialog content
+- Any other visible UI element
+
+**The more elements you tag, the more precisely ModifyWithAI can make targeted modifications.**
+
+### Persist the Rule for Future Development
+
+To ensure all future elements created by AI assistants also include `data-mwai-id` attributes, add instructions to the appropriate file based on the IDE being used:
+
+**If using Claude Code IDE**, append to `CLAUDE.md` (create if it doesn't exist):
+
+```bash
+echo '
+## ModifyWithAI Integration
+When creating or modifying React/JSX elements, ALWAYS add a `data-mwai-id` attribute with a descriptive kebab-case identifier. This is required for ModifyWithAI to identify and modify elements. Example: `<section data-mwai-id="hero-section">...</section>`
+' >> CLAUDE.md
+```
+
+**If using Cursor IDE**, create a rule file at `.cursor/rules/mwai.mdc`:
+
+```bash
+mkdir -p .cursor/rules && cat > .cursor/rules/mwai.mdc << 'EOF'
+---
+description: ModifyWithAI element identification
+globs: ["**/*.tsx", "**/*.jsx"]
+alwaysApply: true
+---
+
+When creating or modifying React/JSX elements, ALWAYS add a `data-mwai-id` attribute with a descriptive kebab-case identifier. This is required for ModifyWithAI to identify and modify elements.
+
+Example: `<section data-mwai-id="hero-section">...</section>`
+EOF
+```
+
+**For other IDEs or general use**, append to `AGENTS.md`:
+
+```bash
+echo '
+## ModifyWithAI Element IDs
+When creating or modifying React/JSX elements, ALWAYS add a `data-mwai-id` attribute with a descriptive kebab-case identifier. This is required for ModifyWithAI to identify and modify elements. Example: `<section data-mwai-id="hero-section">...</section>`
+' >> AGENTS.md
+```
+
 ## Verification Checklist
 
 After completing the setup, verify:
@@ -139,4 +303,8 @@ After completing the setup, verify:
 - [ ] `app/api/mwai/api/[path]/route.ts` exists and exports HTTP method handlers
 - [ ] `app/api/mwai/shims/[path]/route.ts` exists and re-exports from `"modifywithai/nextjs/shims"`
 - [ ] `MWAI_API_KEY` is set in environment variables
+- [ ] "Modify With AI" button component is created and placed in an appropriate location
+- [ ] `data-mwai-id` attributes are added to all meaningful UI elements across the codebase
+- [ ] AI assistant instructions are configured to add `data-mwai-id` to new elements (CLAUDE.md, .cursor/rules, or AGENTS.md)
+- [ ] User has been asked if they want the "Modify With AI" button moved to a different location
 

package/dist/index.d.ts

@@ -17,44 +17,24 @@ declare const MWAIProvider: ({
   children: ReactNode;
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/popover.d.ts
-type ModificationPopoverProps = {
-  /** Text for the trigger button (defaults to "Modify With AI") */
-  children?: ReactNode;
-  /** Called when modification is submitted successfully */
-  onSuccess?: () => void;
-  /** Called when modification submission fails */
-  onError?: (error: Error) => void;
-  /** Custom title for the popover */
-  title?: string;
-  /** Custom description for the popover */
-  description?: string;
-  /** Custom placeholder for the textarea */
-  placeholder?: string;
-  /** Custom submit button text */
-  submitText?: string;
-  /** Custom loading text */
-  loadingText?: string;
-  /** Popover side positioning */
-  side?: "top" | "right" | "bottom" | "left";
-  /** Popover alignment */
-  align?: "start" | "center" | "end";
-};
-declare function MWAIButton({
-  children,
-  onSuccess,
-  onError,
-  title,
-  description,
-  placeholder,
-  submitText,
-  loadingText,
-  side,
-  align
-}: ModificationPopoverProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/hook.d.ts
 declare const useMWAIComponents: () => react_jsx_runtime0.JSX.Element | null;
 declare const MWAIComponents: () => react_jsx_runtime0.JSX.Element | null;
 //#endregion
-export { MWAIButton, MWAIComponents, MWAIHead, MWAIProvider, useMWAIComponents };
+//#region src/modify.d.ts
+type ModifyWithAIOptions = {
+  /** Called when modification submission fails */
+  onError?: (error: Error) => void;
+};
+/**
+ * Submit a modification request to ModifyWithAI
+ * @param prompt - The modification prompt describing the changes to make
+ * @param options - Optional callbacks for success and error handling
+ * @returns Promise that resolves when the modification is submitted
+ */
+declare function modifyWithAI(prompt: string, options?: ModifyWithAIOptions): Promise<{
+  success: boolean;
+  error?: Error;
+}>;
+//#endregion
+export { MWAIComponents, MWAIHead, MWAIProvider, type ModifyWithAIOptions, modifyWithAI, useMWAIComponents };

package/dist/index.js

@@ -1 +1 @@
-"use client";import*as e from"react/jsx-runtime";import{Fragment as t,jsx as n,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{createContext as a,useContext as o,useLayoutEffect as s,useState as c}from"react";import{Popover as l}from"@base-ui/react";import{createFetch as u,createSchema as d}from"@better-fetch/fetch";import{z as f}from"zod";import{logger as p}from"@better-fetch/logger";import*as m from"react-dom";import*as h from"react-dom/client";const g=({basePath:e=`/api/mwai`}={})=>n(`script`,{type:`importmap`,dangerouslySetInnerHTML:{__html:JSON.stringify({imports:{react:`${e}/shims/react-shim.js`,"react/jsx-runtime":`${e}/shims/react-jsx-shim.js`,"react-dom":`${e}/shims/react-dom-shim.js`,"react-dom/client":`${e}/shims/react-dom-client-shim.js`}})}}),_=a(null),v=({id:e,children:t})=>n(_.Provider,{value:e,children:t}),y=u({schema:d({"/api/mwai/api/list":{output:f.array(f.object({id:f.string(),title:f.string(),description:f.string().nullable(),status:f.enum([`pending`,`success`,`error`]),createdAt:f.number(),updatedAt:f.number(),enabled:f.boolean()}))},"/api/mwai/api/modify":{input:f.object({prompt:f.string()}),output:f.object({success:f.boolean()})}}),retry:{type:`exponential`,attempts:5,baseDelay:1e3,maxDelay:1e4},plugins:[p({enabled:!1})]}),b={triggerButton:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,height:`32px`,padding:`0 10px`,fontSize:`14px`,fontWeight:500,fontFamily:`system-ui, -apple-system, sans-serif`,borderRadius:`8px`,border:`1px solid #e5e5e5`,backgroundColor:`#fff`,color:`#171717`,cursor:`pointer`,transition:`all 150ms`,outline:`none`,userSelect:`none`,whiteSpace:`nowrap`},popoverContent:{display:`flex`,flexDirection:`column`,gap:`10px`,width:`320px`,padding:`12px`,backgroundColor:`#fff`,borderRadius:`10px`,boxShadow:`0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)`,border:`1px solid #e5e5e5`,fontSize:`14px`,fontFamily:`system-ui, -apple-system, sans-serif`,color:`#171717`,zIndex:50},header:{display:`flex`,flexDirection:`column`,gap:`2px`},title:{fontWeight:600,fontSize:`14px`,color:`#171717`,margin:0},description:{fontSize:`13px`,color:`#737373`,margin:0},textarea:{width:`100%`,minHeight:`96px`,padding:`10px`,fontSize:`14px`,fontFamily:`system-ui, -apple-system, sans-serif`,borderRadius:`8px`,borderWidth:`1px`,borderStyle:`solid`,borderColor:`#e5e5e5`,backgroundColor:`#fff`,color:`#171717`,resize:`none`,outline:`none`,transition:`border-color 150ms, box-shadow 150ms`,boxShadow:`none`},textareaFocus:{borderColor:`#a3a3a3`,boxShadow:`0 0 0 3px rgba(163, 163, 163, 0.2)`},buttonGroup:{display:`flex`,justifyContent:`flex-end`,gap:`8px`},cancelButton:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,height:`28px`,padding:`0 10px`,fontSize:`13px`,fontWeight:500,fontFamily:`system-ui, -apple-system, sans-serif`,borderRadius:`6px`,border:`1px solid #e5e5e5`,backgroundColor:`#fff`,color:`#171717`,cursor:`pointer`,transition:`all 150ms`,outline:`none`},submitButton:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,height:`28px`,padding:`0 10px`,fontSize:`13px`,fontWeight:500,fontFamily:`system-ui, -apple-system, sans-serif`,borderRadius:`6px`,border:`1px solid transparent`,backgroundColor:`#6366f1`,color:`#fff`,cursor:`pointer`,transition:`all 150ms`,outline:`none`},submitButtonDisabled:{opacity:.5,cursor:`not-allowed`}};function x({children:e=`Modify With AI`,onSuccess:t,onError:i,title:a=`Modify with AI`,description:o=`Describe the changes you want to make`,placeholder:s=`E.g., Make the header sticky, change the button color to blue...`,submitText:u=`Submit`,loadingText:d=`Submitting...`,side:f=`bottom`,align:p=`center`}){let[m,h]=c(``),[g,_]=c(!1),[v,x]=c(!1),[S,C]=c(!1),[w,T]=c(!1),[E,D]=c(!1),[O,k]=c(!1),A=async()=>{if(!(!m.trim()||g)){_(!0);try{let{error:e}=await y(`/api/mwai/api/modify`,{method:`POST`,body:{prompt:m.trim()}});if(e)throw Error(e.message||`Request failed`);h(``),x(!1),t?.()}catch(e){let t=e instanceof Error?e:Error(`Unknown error`);console.error(`Modification failed:`,t),i?.(t)}finally{_(!1)}}},j=e=>{e.key===`Enter`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),A())},M=!m.trim()||g;return r(l.Root,{open:v,onOpenChange:x,children:[n(l.Trigger,{style:{...b.triggerButton,...w?{backgroundColor:`#f5f5f5`}:{}},onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),children:e}),n(l.Portal,{children:n(l.Positioner,{align:p,side:f,sideOffset:4,style:{zIndex:50},children:r(l.Popup,{style:b.popoverContent,children:[r(`div`,{style:b.header,children:[n(l.Title,{style:b.title,children:a}),n(l.Description,{style:b.description,children:o})]}),n(`textarea`,{placeholder:s,value:m,onChange:e=>h(e.target.value),onKeyDown:j,onFocus:()=>C(!0),onBlur:()=>C(!1),disabled:g,style:{...b.textarea,...S?b.textareaFocus:{}}}),r(`div`,{style:b.buttonGroup,children:[n(`button`,{type:`button`,onClick:()=>x(!1),disabled:g,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),style:{...b.cancelButton,...E?{backgroundColor:`#f5f5f5`}:{}},children:`Cancel`}),n(`button`,{type:`button`,onClick:A,disabled:M,onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:{...b.submitButton,...M?b.submitButtonDisabled:{},...O&&!M?{backgroundColor:`#4f46e5`}:{}},children:g?d:u})]})]})})})]})}const S=()=>{let r=o(_),[a,l]=c(null);return s(()=>{if(!r){console.error(`ModifyWithAI: No id provided. Wrap your app with <ModifyWithAIProvider id='your-id'>`);return}typeof window<`u`&&(window.__REACT__=i,window.__REACT_JSX_RUNTIME__=e,window.__REACT_DOM__=m,window.__REACT_DOM_CLIENT__=h);let t=Function(`url`,`return import(url)`);y(`/api/mwai/api/list`).then(({data:e,error:n})=>{if(n){console.error(`Failed to fetch component list:`,n);return}console.log(`data`,e);let i=e.filter(e=>e.enabled&&e.status===`success`).map(e=>e.id);console.log(`componentsToLoad`,i),i.forEach(e=>{t(`https://bucket.modifywithai.com/${r}/${e}.js`).then(e=>l(t=>[...t||[],e.default])).catch(e=>console.error(`Failed to load external module:`,e))})})},[r]),a?n(t,{children:a.map(e=>n(e,{},e.name))}):null},C=()=>S();export{x as MWAIButton,C as MWAIComponents,g as MWAIHead,v as MWAIProvider,S as useMWAIComponents};
+"use client";import*as e from"react/jsx-runtime";import{Fragment as t,jsx as n}from"react/jsx-runtime";import*as r from"react";import{createContext as i,useContext as a,useLayoutEffect as o,useState as s}from"react";import*as c from"react-dom";import*as l from"react-dom/client";import{createFetch as u,createSchema as d}from"@better-fetch/fetch";import{z as f}from"zod";import{logger as p}from"@better-fetch/logger";const m=({basePath:e=`/api/mwai`}={})=>n(`script`,{type:`importmap`,dangerouslySetInnerHTML:{__html:JSON.stringify({imports:{react:`${e}/shims/react-shim.js`,"react/jsx-runtime":`${e}/shims/react-jsx-shim.js`,"react-dom":`${e}/shims/react-dom-shim.js`,"react-dom/client":`${e}/shims/react-dom-client-shim.js`}})}}),h=i(null),g=({id:e,children:t})=>n(h.Provider,{value:e,children:t}),_=u({schema:d({"/api/mwai/api/list":{output:f.array(f.object({id:f.string(),title:f.string(),description:f.string().nullable(),status:f.enum([`pending`,`success`,`error`]),createdAt:f.number(),updatedAt:f.number(),enabled:f.boolean()}))},"/api/mwai/api/modify":{input:f.object({prompt:f.string()}),output:f.object({success:f.boolean()})}}),retry:{type:`exponential`,attempts:5,baseDelay:1e3,maxDelay:1e4},plugins:[p({enabled:!1})]}),v=()=>{let i=a(h),[u,d]=s(null);return o(()=>{if(!i){console.error(`ModifyWithAI: No id provided. Wrap your app with <ModifyWithAIProvider id='your-id'>`);return}typeof window<`u`&&(window.__REACT__=r,window.__REACT_JSX_RUNTIME__=e,window.__REACT_DOM__=c,window.__REACT_DOM_CLIENT__=l);let t=Function(`url`,`return import(url)`);_(`/api/mwai/api/list`).then(({data:e,error:n})=>{if(n){console.error(`Failed to fetch component list:`,n);return}console.log(`data`,e);let r=e.filter(e=>e.enabled&&e.status===`success`).map(e=>e.id);console.log(`componentsToLoad`,r),r.forEach(e=>{t(`https://bucket.modifywithai.com/${i}/${e}.js`).then(e=>d(t=>[...t||[],e.default])).catch(e=>console.error(`Failed to load external module:`,e))})})},[i]),u?n(t,{children:u.map(e=>n(e,{},e.name))}):null},y=()=>v();async function b(e,t){let n=e.trim();if(!n){let e=Error(`Prompt cannot be empty`);return t?.onError?.(e),{success:!1,error:e}}try{return{success:(await _(`/api/mwai/api/modify`,{method:`POST`,body:{prompt:n},onSuccess:()=>{typeof window<`u`&&window.location.reload()},onError:e=>{let n=Error(e.error.message||`Request failed`);t?.onError?.(n)}})).data?.success??!1}}catch(e){let n=e instanceof Error?e:Error(`Unknown error`);return t?.onError?.(n),{success:!1,error:n}}}export{y as MWAIComponents,m as MWAIHead,g as MWAIProvider,b as modifyWithAI,v as useMWAIComponents};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modifywithai",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -32,7 +32,6 @@
     "next": "^16.0.8"
   },
   "dependencies": {
-    "@base-ui/react": "^1.0.0",
     "@better-fetch/fetch": "^1.1.21",
     "@better-fetch/logger": "^1.1.21",
     "zod": "^4.1.13"