react-grab 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 (16) hide show
  1. package/README.md +72 -59
  2. package/dist/{chunk-Z5JJYMJY.js → chunk-4MQNXZFV.js} +453 -483
  3. package/dist/{chunk-66O4TVGR.cjs → chunk-YPTT2O3Z.cjs} +453 -483
  4. package/dist/{core-DZ65ta1h.d.cts → core-CZmmuMr9.d.cts} +13 -9
  5. package/dist/{core-DZ65ta1h.d.ts → core-CZmmuMr9.d.ts} +13 -9
  6. package/dist/core.cjs +8 -8
  7. package/dist/core.d.cts +1 -1
  8. package/dist/core.d.ts +1 -1
  9. package/dist/core.js +1 -1
  10. package/dist/index.cjs +8 -8
  11. package/dist/index.d.cts +2 -2
  12. package/dist/index.d.ts +2 -2
  13. package/dist/index.global.js +30 -40
  14. package/dist/index.js +2 -2
  15. package/dist/styles.css +1 -1
  16. package/package.json +2 -2
package/README.md CHANGED
@@ -19,10 +19,7 @@ It makes tools like Cursor, Claude Code, Copilot run up to [**66% faster**](http
19
19
  Get started in 1 minute by adding this script tag to your app:
20
20
 
21
21
  ```html
22
- <script
23
- src="//www.react-grab.com/script.js"
24
- crossorigin="anonymous"
25
- ></script>
22
+ <script src="//www.react-grab.com/script.js" crossorigin="anonymous"></script>
26
23
  ```
27
24
 
28
25
  If you're using a React framework or build tool, view instructions below:
@@ -125,90 +122,106 @@ if (process.env.NODE_ENV === "development") {
125
122
 
126
123
  React Grab can send selected element context directly to your coding agent. This enables a workflow where you select a UI element and an agent automatically makes changes to your codebase.
127
124
 
128
- This means **no copying and pasting** - just select the element and let the agent do the rest.
125
+ This means **no copying and pasting** - just select the element and let the agent do the rest. [Learn more →](https://react-grab.com/blog/agent)
129
126
 
130
127
  ### Claude Code
131
128
 
132
- Install the Claude Code agent provider:
133
-
134
- ```bash
135
- npm install @react-grab/claude-code
136
- ```
137
-
138
129
  #### Server Setup
139
130
 
140
- The server runs on port `4567` and interfaces with the Claude Agent SDK.
131
+ The server runs on port `4567` and interfaces with the Claude Agent SDK. Add to your `package.json`:
141
132
 
142
- **Vite:**
143
-
144
- ```ts
145
- // vite.config.ts
146
- import { startServer } from "@react-grab/claude-code/server";
147
-
148
- if (process.env.NODE_ENV === "development") {
149
- startServer();
133
+ ```json
134
+ {
135
+ "scripts": {
136
+ "dev": "npx @react-grab/claude-code && next dev"
137
+ }
150
138
  }
151
139
  ```
152
140
 
153
- **Next.js:**
154
-
155
- ```ts
156
- // next.config.ts
157
- import { startServer } from "@react-grab/claude-code/server";
141
+ #### Client Setup
158
142
 
159
- if (process.env.NODE_ENV === "development") {
160
- startServer();
161
- }
143
+ ```html
144
+ <script src="//unpkg.com/react-grab/dist/index.global.js"></script>
145
+ <!-- add this in the <head> -->
146
+ <script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>
162
147
  ```
163
148
 
164
- #### Client Setup
149
+ Or using Next.js `Script` component in your `app/layout.tsx`:
165
150
 
166
- ```tsx
167
- import { attachAgent } from "@react-grab/claude-code/client";
151
+ ```jsx
152
+ import Script from "next/script";
168
153
 
169
- attachAgent();
154
+ export default function RootLayout({ children }) {
155
+ return (
156
+ <html>
157
+ <head>
158
+ {process.env.NODE_ENV === "development" && (
159
+ <>
160
+ <Script
161
+ src="//unpkg.com/react-grab/dist/index.global.js"
162
+ strategy="beforeInteractive"
163
+ />
164
+ <Script
165
+ src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"
166
+ strategy="lazyOnload"
167
+ />
168
+ </>
169
+ )}
170
+ </head>
171
+ <body>{children}</body>
172
+ </html>
173
+ );
174
+ }
170
175
  ```
171
176
 
172
177
  ### Cursor CLI
173
178
 
174
- Install the Cursor agent provider:
175
-
176
- ```bash
177
- npm install @react-grab/cursor
178
- ```
179
-
180
179
  #### Server Setup
181
180
 
182
- The server runs on port `5567` and interfaces with the `cursor-agent` CLI.
181
+ The server runs on port `5567` and interfaces with the `cursor-agent` CLI. Add to your `package.json`:
183
182
 
184
- **Vite:**
185
-
186
- ```ts
187
- // vite.config.ts
188
- import { startServer } from "@react-grab/cursor/server";
189
-
190
- if (process.env.NODE_ENV === "development") {
191
- startServer();
183
+ ```json
184
+ {
185
+ "scripts": {
186
+ "dev": "npx @react-grab/cursor && next dev"
187
+ }
192
188
  }
193
189
  ```
194
190
 
195
- **Next.js:**
196
-
197
- ```ts
198
- // next.config.ts
199
- import { startServer } from "@react-grab/cursor/server";
191
+ #### Client Setup
200
192
 
201
- if (process.env.NODE_ENV === "development") {
202
- startServer();
203
- }
193
+ ```html
194
+ <script src="//unpkg.com/react-grab/dist/index.global.js"></script>
195
+ <!-- add this in the <head> -->
196
+ <script src="//unpkg.com/@react-grab/cursor/dist/client.global.js"></script>
204
197
  ```
205
198
 
206
- #### Client Setup
199
+ Or using Next.js `Script` component in your `app/layout.tsx`:
207
200
 
208
- ```tsx
209
- import { attachAgent } from "@react-grab/cursor/client";
201
+ ```jsx
202
+ import Script from "next/script";
210
203
 
211
- attachAgent();
204
+ export default function RootLayout({ children }) {
205
+ return (
206
+ <html>
207
+ <head>
208
+ {process.env.NODE_ENV === "development" && (
209
+ <>
210
+ <Script
211
+ src="//unpkg.com/react-grab/dist/index.global.js"
212
+ strategy="beforeInteractive"
213
+ />
214
+ <Script
215
+ src="//unpkg.com/@react-grab/cursor/dist/client.global.js"
216
+ strategy="lazyOnload"
217
+ />
218
+ </>
219
+ )}
220
+ </head>
221
+ <body>{children}</body>
222
+ </html>
223
+ );
224
+ }
212
225
  ```
213
226
 
214
227
  ## Extending React Grab