@react-grab/claude-code 0.0.60 → 0.0.61

package/README.md

@@ -18,46 +18,61 @@ yarn add @react-grab/claude-code
 
 The server runs on port `4567` by default.
 
+### Quick Start (CLI)
+
+Start the server in the background before running your dev server:
+
+```bash
+npx @react-grab/claude-code && pnpm run dev
+```
+
+The server will run as a detached background process. **Note:** Stopping your dev server (Ctrl+C) won't stop the React Grab server. To stop it:
+
+```bash
+pkill -f "react-grab.*server"
+```
+
+### Recommended: Config File (Automatic Lifecycle)
+
+For better lifecycle management, start the server from your config file. This ensures the server stops when your dev server stops:
+
 ### Vite
 
 ```ts
 // vite.config.ts
-import "@react-grab/claude-code/server";
+import { startServer } from "@react-grab/claude-code/server";
+
+if (process.env.NODE_ENV === "development") {
+  startServer();
+}
 ```
 
 ### Next.js
 
 ```ts
 // next.config.ts
-import "@react-grab/claude-code/server";
+import { startServer } from "@react-grab/claude-code/server";
+
+if (process.env.NODE_ENV === "development") {
+  startServer();
+}
 ```
 
 ## Client Usage
 
-```tsx
-import { init } from "react-grab/core";
-import { createClaudeAgentProvider } from "@react-grab/claude-code/client";
-
-const agentProvider = createClaudeAgentProvider();
+### Script Tag
 
-init({
-  agent: {
-    provider: agentProvider,
-  },
-});
+```html
+<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
+<script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>
 ```
 
-## Configuration
-
-You can customize the server URL and default options:
+### ES Module
 
 ```tsx
-const agentProvider = createClaudeAgentProvider({
-  getOptions: () => ({
-    model: "opus",
-    maxTurns: 20,
-  }),
-});
+import { attachAgent } from "@react-grab/claude-code/client";
+
+attachAgent();
 ```
 
 ## How It Works

package/dist/cli.cjs

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+'use strict';
+
+var child_process = require('child_process');
+var url = require('url');
+var path = require('path');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+var __filename$1 = url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.cjs', document.baseURI).href)));
+var __dirname$1 = path.dirname(__filename$1);
+var serverPath = path.join(__dirname$1, "server.js");
+child_process.spawn(process.execPath, [serverPath], {
+  detached: true,
+  stdio: "ignore"
+}).unref();
+console.log("[React Grab] Server starting on port 4567...");

package/dist/cli.d.cts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+var serverPath = join(__dirname, "server.js");
+spawn(process.execPath, [serverPath], {
+  detached: true,
+  stdio: "ignore"
+}).unref();
+console.log("[React Grab] Server starting on port 4567...");

package/dist/client.cjs

@@ -117,6 +117,7 @@ var attachAgent = async () => {
     { once: true }
   );
 };
+attachAgent();
 
 exports.attachAgent = attachAgent;
 exports.createClaudeAgentProvider = createClaudeAgentProvider;

package/dist/client.global.js

@@ -0,0 +1,6 @@
+var ReactGrabClaudeCode=(function(exports){'use strict';var g=`http://localhost:${4567}`,f="react-grab:agent-sessions",m={systemPrompt:{type:"preset",preset:"claude_code",append:`You are helping a user make changes to a React component based on a selected element.
+The user has selected an element from their UI and wants you to help modify it.
+Provide clear, concise status updates as you work.`},model:"haiku",permissionMode:"bypassPermissions",maxTurns:10},y=n=>{let t="",o="";for(let e of n.split(`
+`))e.startsWith("event:")?t=e.slice(6).trim():e.startsWith("data:")&&(o=e.slice(5).trim());return {eventType:t,data:o}};async function*A(n){let t=n.getReader(),o=new TextDecoder,e="";try{for(;;){let{done:r,value:i}=await t.read();i&&(e+=o.decode(i,{stream:!0}));let s;for(;(s=e.indexOf(`
+
+`))!==-1;){let{eventType:d,data:a}=y(e.slice(0,s));if(e=e.slice(s+2),d==="done")return;if(d==="error")throw new Error(a||"Agent error");a&&(yield a);}if(r)break}}finally{t.releaseLock();}}async function*l(n,t,o){let e=await fetch(`${n}/agent`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t),signal:o});if(!e.ok)throw new Error(`Server error: ${e.status}`);if(!e.body)throw new Error("No response body");yield*A(e.body);}var E=(n={})=>{let{serverUrl:t=g,getOptions:o}=n,e=r=>({...m,...o?.()??{},...r??{}});return {send:async function*(r,i){let s={...r,options:e(r.options)};yield*l(t,s,i);},resume:async function*(r,i){let s=sessionStorage.getItem(f);if(!s)throw new Error("No sessions to resume");let a=JSON.parse(s)[r];if(!a)throw new Error(`Session ${r} not found`);let c=a.context,p={...c,options:e(c.options)};yield "Resuming...",yield*l(t,p,i);},supportsResume:true}},C=async()=>{if(typeof window>"u")return;let n=E(),t=window.__REACT_GRAB__;if(t){t.setAgent({provider:n});return}window.addEventListener("react-grab:init",o=>{o.detail.setAgent({provider:n});},{once:true});};C();exports.attachAgent=C;exports.createClaudeAgentProvider=E;return exports;})({});

package/dist/client.js

@@ -115,5 +115,6 @@ var attachAgent = async () => {
     { once: true }
   );
 };
+attachAgent();
 
 export { attachAgent, createClaudeAgentProvider };

package/dist/server.cjs

@@ -14665,6 +14665,9 @@ var startServer = async (port = DEFAULT_PORT) => {
   serve({ fetch: app.fetch, port });
   console.log(`[React Grab] Server started on port ${port}`);
 };
+if ((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('server.cjs', document.baseURI).href)) === `file://${process.argv[1]}`) {
+  startServer(DEFAULT_PORT).catch(console.error);
+}
 
 exports.createServer = createServer;
 exports.startServer = startServer;

package/dist/server.js

@@ -14639,5 +14639,8 @@ var startServer = async (port = DEFAULT_PORT) => {
   serve({ fetch: app.fetch, port });
   console.log(`[React Grab] Server started on port ${port}`);
 };
+if (import.meta.url === `file://${process.argv[1]}`) {
+  startServer(DEFAULT_PORT).catch(console.error);
+}
 
 export { createServer, startServer };

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@react-grab/claude-code",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "type": "module",
+  "bin": {
+    "react-grab-claude-code": "./dist/cli.js"
+  },
   "exports": {
     "./client": {
       "types": "./dist/client.d.ts",
@@ -12,8 +15,11 @@
       "types": "./dist/server.d.ts",
       "import": "./dist/server.js",
       "require": "./dist/server.cjs"
-    }
+    },
+    "./dist/*": "./dist/*.js",
+    "./dist/*.js": "./dist/*.js"
   },
+  "browser": "dist/client.global.js",
   "files": [
     "dist"
   ],
@@ -24,10 +30,10 @@
     "@anthropic-ai/claude-agent-sdk": "^0.1.0",
     "@hono/node-server": "^1.19.6",
     "hono": "^4.0.0",
-    "react-grab": "0.0.60"
+    "react-grab": "0.0.61"
   },
   "scripts": {
     "dev": "tsup --watch",
-    "build": "NODE_ENV=production tsup"
+    "build": "rm -rf dist && NODE_ENV=production tsup"
   }
 }