@react-grab/claude-code 0.0.60 → 0.0.62

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 (11) hide show
  1. package/README.md +65 -20
  2. package/dist/cli.cjs +16 -0
  3. package/dist/cli.d.cts +1 -0
  4. package/dist/cli.d.ts +1 -0
  5. package/dist/cli.js +13 -0
  6. package/dist/client.cjs +3 -2
  7. package/dist/client.global.js +6 -0
  8. package/dist/client.js +3 -2
  9. package/dist/server.cjs +3 -0
  10. package/dist/server.js +3 -0
  11. package/package.json +10 -4
package/README.md CHANGED
@@ -18,46 +18,91 @@ yarn add @react-grab/claude-code
18
18
 
19
19
  The server runs on port `4567` by default.
20
20
 
21
+ ### Quick Start (CLI)
22
+
23
+ Start the server in the background before running your dev server:
24
+
25
+ ```bash
26
+ npx @react-grab/claude-code && pnpm run dev
27
+ ```
28
+
29
+ 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:
30
+
31
+ ```bash
32
+ pkill -f "react-grab.*server"
33
+ ```
34
+
35
+ ### Recommended: Config File (Automatic Lifecycle)
36
+
37
+ For better lifecycle management, start the server from your config file. This ensures the server stops when your dev server stops:
38
+
21
39
  ### Vite
22
40
 
23
41
  ```ts
24
42
  // vite.config.ts
25
- import "@react-grab/claude-code/server";
43
+ import { startServer } from "@react-grab/claude-code/server";
44
+
45
+ if (process.env.NODE_ENV === "development") {
46
+ startServer();
47
+ }
26
48
  ```
27
49
 
28
50
  ### Next.js
29
51
 
30
52
  ```ts
31
53
  // next.config.ts
32
- import "@react-grab/claude-code/server";
54
+ import { startServer } from "@react-grab/claude-code/server";
55
+
56
+ if (process.env.NODE_ENV === "development") {
57
+ startServer();
58
+ }
33
59
  ```
34
60
 
35
61
  ## Client Usage
36
62
 
37
- ```tsx
38
- import { init } from "react-grab/core";
39
- import { createClaudeAgentProvider } from "@react-grab/claude-code/client";
40
-
41
- const agentProvider = createClaudeAgentProvider();
63
+ ### Script Tag
42
64
 
43
- init({
44
- agent: {
45
- provider: agentProvider,
46
- },
47
- });
65
+ ```html
66
+ <script src="//unpkg.com/react-grab/dist/index.global.js"></script>
67
+ <script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>
48
68
  ```
49
69
 
50
- ## Configuration
70
+ ### Next.js
71
+
72
+ Using the `Script` component in your `app/layout.tsx`:
73
+
74
+ ```jsx
75
+ import Script from "next/script";
76
+
77
+ export default function RootLayout({ children }) {
78
+ return (
79
+ <html>
80
+ <head>
81
+ {process.env.NODE_ENV === "development" && (
82
+ <>
83
+ <Script
84
+ src="//unpkg.com/react-grab/dist/index.global.js"
85
+ strategy="beforeInteractive"
86
+ />
87
+ <Script
88
+ src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"
89
+ strategy="lazyOnload"
90
+ />
91
+ </>
92
+ )}
93
+ </head>
94
+ <body>{children}</body>
95
+ </html>
96
+ );
97
+ }
98
+ ```
51
99
 
52
- You can customize the server URL and default options:
100
+ ### ES Module
53
101
 
54
102
  ```tsx
55
- const agentProvider = createClaudeAgentProvider({
56
- getOptions: () => ({
57
- model: "opus",
58
- maxTurns: 20,
59
- }),
60
- });
103
+ import { attachAgent } from "@react-grab/claude-code/client";
104
+
105
+ attachAgent();
61
106
  ```
62
107
 
63
108
  ## How It Works
package/dist/cli.cjs ADDED
@@ -0,0 +1,16 @@
1
+ #!/usr/bin/env node
2
+ 'use strict';
3
+
4
+ var child_process = require('child_process');
5
+ var url = require('url');
6
+ var path = require('path');
7
+
8
+ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
9
+ 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)));
10
+ var __dirname$1 = path.dirname(__filename$1);
11
+ var serverPath = path.join(__dirname$1, "server.js");
12
+ child_process.spawn(process.execPath, [serverPath], {
13
+ detached: true,
14
+ stdio: "ignore"
15
+ }).unref();
16
+ console.log("[React Grab] Server starting on port 4567...");
package/dist/cli.d.cts ADDED
@@ -0,0 +1 @@
1
+ #!/usr/bin/env node
package/dist/cli.d.ts ADDED
@@ -0,0 +1 @@
1
+ #!/usr/bin/env node
package/dist/cli.js ADDED
@@ -0,0 +1,13 @@
1
+ #!/usr/bin/env node
2
+ import { spawn } from 'child_process';
3
+ import { fileURLToPath } from 'url';
4
+ import { dirname, join } from 'path';
5
+
6
+ var __filename = fileURLToPath(import.meta.url);
7
+ var __dirname = dirname(__filename);
8
+ var serverPath = join(__dirname, "server.js");
9
+ spawn(process.execPath, [serverPath], {
10
+ detached: true,
11
+ stdio: "ignore"
12
+ }).unref();
13
+ console.log("[React Grab] Server starting on port 4567...");
package/dist/client.cjs CHANGED
@@ -79,8 +79,8 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
79
79
  };
80
80
  yield* streamFromServer(serverUrl, mergedContext, signal);
81
81
  },
82
- resume: async function* (sessionId, signal) {
83
- const savedSessions = sessionStorage.getItem(STORAGE_KEY);
82
+ resume: async function* (sessionId, signal, storage) {
83
+ const savedSessions = storage.getItem(STORAGE_KEY);
84
84
  if (!savedSessions) {
85
85
  throw new Error("No sessions to resume");
86
86
  }
@@ -117,6 +117,7 @@ var attachAgent = async () => {
117
117
  { once: true }
118
118
  );
119
119
  };
120
+ attachAgent();
120
121
 
121
122
  exports.attachAgent = attachAgent;
122
123
  exports.createClaudeAgentProvider = createClaudeAgentProvider;
package/dist/client.global.js ADDED
@@ -0,0 +1,6 @@
1
+ var ReactGrabClaudeCode=(function(exports){'use strict';var f=`http://localhost:${4567}`,m="react-grab:agent-sessions",y={systemPrompt:{type:"preset",preset:"claude_code",append:`You are helping a user make changes to a React component based on a selected element.
2
+ The user has selected an element from their UI and wants you to help modify it.
3
+ Provide clear, concise status updates as you work.`},model:"haiku",permissionMode:"bypassPermissions",maxTurns:10},A=n=>{let t="",o="";for(let e of n.split(`
4
+ `))e.startsWith("event:")?t=e.slice(6).trim():e.startsWith("data:")&&(o=e.slice(5).trim());return {eventType:t,data:o}};async function*S(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(`
5
+
6
+ `))!==-1;){let{eventType:a,data:d}=A(e.slice(0,s));if(e=e.slice(s+2),a==="done")return;if(a==="error")throw new Error(d||"Agent error");d&&(yield d);}if(r)break}}finally{t.releaseLock();}}async function*p(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*S(e.body);}var E=(n={})=>{let{serverUrl:t=f,getOptions:o}=n,e=r=>({...y,...o?.()??{},...r??{}});return {send:async function*(r,i){let s={...r,options:e(r.options)};yield*p(t,s,i);},resume:async function*(r,i,s){let a=s.getItem(m);if(!a)throw new Error("No sessions to resume");let c=JSON.parse(a)[r];if(!c)throw new Error(`Session ${r} not found`);let l=c.context,u={...l,options:e(l.options)};yield "Resuming...",yield*p(t,u,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 CHANGED
@@ -77,8 +77,8 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
77
77
  };
78
78
  yield* streamFromServer(serverUrl, mergedContext, signal);
79
79
  },
80
- resume: async function* (sessionId, signal) {
81
- const savedSessions = sessionStorage.getItem(STORAGE_KEY);
80
+ resume: async function* (sessionId, signal, storage) {
81
+ const savedSessions = storage.getItem(STORAGE_KEY);
82
82
  if (!savedSessions) {
83
83
  throw new Error("No sessions to resume");
84
84
  }
@@ -115,5 +115,6 @@ var attachAgent = async () => {
115
115
  { once: true }
116
116
  );
117
117
  };
118
+ attachAgent();
118
119
 
119
120
  export { attachAgent, createClaudeAgentProvider };
package/dist/server.cjs CHANGED
@@ -14665,6 +14665,9 @@ var startServer = async (port = DEFAULT_PORT) => {
14665
14665
  serve({ fetch: app.fetch, port });
14666
14666
  console.log(`[React Grab] Server started on port ${port}`);
14667
14667
  };
14668
+ 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]}`) {
14669
+ startServer(DEFAULT_PORT).catch(console.error);
14670
+ }
14668
14671
 
14669
14672
  exports.createServer = createServer;
14670
14673
  exports.startServer = startServer;
package/dist/server.js CHANGED
@@ -14639,5 +14639,8 @@ var startServer = async (port = DEFAULT_PORT) => {
14639
14639
  serve({ fetch: app.fetch, port });
14640
14640
  console.log(`[React Grab] Server started on port ${port}`);
14641
14641
  };
14642
+ if (import.meta.url === `file://${process.argv[1]}`) {
14643
+ startServer(DEFAULT_PORT).catch(console.error);
14644
+ }
14642
14645
 
14643
14646
  export { createServer, startServer };
package/package.json CHANGED
@@ -1,7 +1,10 @@
1
1
  {
2
2
  "name": "@react-grab/claude-code",
3
- "version": "0.0.60",
3
+ "version": "0.0.62",
4
4
  "type": "module",
5
+ "bin": {
6
+ "react-grab-claude-code": "./dist/cli.js"
7
+ },
5
8
  "exports": {
6
9
  "./client": {
7
10
  "types": "./dist/client.d.ts",
@@ -12,8 +15,11 @@
12
15
  "types": "./dist/server.d.ts",
13
16
  "import": "./dist/server.js",
14
17
  "require": "./dist/server.cjs"
15
- }
18
+ },
19
+ "./dist/*": "./dist/*.js",
20
+ "./dist/*.js": "./dist/*.js"
16
21
  },
22
+ "browser": "dist/client.global.js",
17
23
  "files": [
18
24
  "dist"
19
25
  ],
@@ -24,10 +30,10 @@
24
30
  "@anthropic-ai/claude-agent-sdk": "^0.1.0",
25
31
  "@hono/node-server": "^1.19.6",
26
32
  "hono": "^4.0.0",
27
- "react-grab": "0.0.60"
33
+ "react-grab": "0.0.62"
28
34
  },
29
35
  "scripts": {
30
36
  "dev": "tsup --watch",
31
- "build": "NODE_ENV=production tsup"
37
+ "build": "rm -rf dist && NODE_ENV=production tsup"
32
38
  }
33
39
  }